@tuoyuan/module-page-select

module-page-select

Vue 3 组件：用于选择业务模块、对应页面，编辑页面自带配置参数，区分移动端和web端，产出配置数据供页面渲染、路由绑定使用。

功能特性

• ✅ 模块与页面二级联动选择
• ✅ 支持模块、页面数据缓存
• ✅ 基于 JSON Schema 的动态表单渲染
• ✅ 区分移动端（mobile）和 Web 端（pc）
• ✅ v-model 双向绑定支持
• ✅ 支持默认值回显与自动补全
• ✅ 完整的错误处理
• ✅ 支持横向/纵向/行内布局
• ✅ 灵活的确认按钮显示控制

安装

npm install @tuoyuan/module-page-select

基础使用

全局注册

import { createApp } from 'vue'
import ModulePageSelect from '@tuoyuan/module-page-select'
import App from './App.vue'

const app = createApp(App)
app.use(ModulePageSelect)
app.mount('#app')

局部引入

<template>
  <ModulePageSelect
    v-model="pageConfig"
    @change="handleChange"
    @error="handleError"
  />
</template>

<script>
import ModulePageSelect from '@tuoyuan/module-page-select'

export default {
  components: {
    ModulePageSelect
  },
  data() {
    return {
      pageConfig: {}
    }
  },
  methods: {
    handleChange(config) {
      console.log('页面配置已更新:', config)
    },
    handleError(error) {
      console.error('错误:', error)
    }
  }
}
</script>

API

Props

Events

输出数据格式

{
  module_id: "66613bff9aa40000",      // 模块ID
  module_name: "操作日志",             // 模块名称
  page_id: "6663c53083e40000",        // 页面ID
  page_name: "操作日志",               // 页面名称
  type: "mobile",                     // 页面类型：mobile 或 pc
  config: {                           // 页面配置（可选）
    field1: "value1",
    field2: 123
  }
}

使用示例

示例 1：基础调用

<template>
  <div>
    <ModulePageSelect v-model="selectedPage" @change="onPageChange" />
    <div v-if="selectedPage.page_id">
      <p>选中模块: {{ selectedPage.module_name }}</p>
      <p>选中页面: {{ selectedPage.page_name }}</p>
    </div>
  </div>
</template>

<script>
import ModulePageSelect from 'template-page-select'

export default {
  components: { ModulePageSelect },
  data() {
    return {
      selectedPage: {}
    }
  },
  methods: {
    onPageChange(config) {
      console.log('页面已更改:', config)
      // 在这里可以保存配置、触发页面跳转等
    }
  }
}
</script>

示例 2：回显已有配置

<template>
  <ModulePageSelect
    v-model="pageConfig"
    :moduleId="form.moduleId"
    :pageId="form.pageId"
    @change="saveConfig"
  />
</template>

<script>
export default {
  data() {
    return {
      form: {
        moduleId: '66613bff9aa40000',
        pageId: '6663c53083e40000'
      },
      pageConfig: {
        module_id: '66613bff9aa40000',
        module_name: '操作日志',
        page_id: '6663c53083e40000',
        page_name: '操作日志'
      }
    }
  },
  methods: {
    saveConfig(config) {
      console.log('配置已保存:', config)
    }
  }
}
</script>

示例 3：与表单集成

<template>
  <a-form @submit="handleSubmit">
    <a-form-item label="页面选择">
      <ModulePageSelect
        v-model="form.page"
        @error="handleError"
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">保存</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        page: {}
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.form.page.page_id) {
        this.$message.error('请选择页面')
        return
      }
      console.log('提交表单:', this.form)
    },
    handleError(error) {
      this.$message.error(`错误: ${error.type}`)
    }
  }
}
</script>

示例 4：横向布局（模块和页面并排显示）

<template>
  <ModulePageSelect
    v-model="pageConfig"
    layout="horizontal"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      pageConfig: {}
    }
  },
  methods: {
    handleChange(config) {
      console.log('页面配置:', config)
    }
  }
}
</script>

说明： 使用 layout="horizontal" 时，"选择模块"和"选择页面"两个字段会并排显示，适合在宽屏场景下节省垂直空间。

示例 5：隐藏确认按钮，选择后自动触发

<template>
  <ModulePageSelect
    v-model="pageConfig"
    :confirm-button="false"
    @change="handleAutoChange"
  />
</template>

<script>
export default {
  data() {
    return {
      pageConfig: {}
    }
  },
  methods {
    handleAutoChange(config) {
      console.log('自动触发 change 事件:', config)
      // 不需要点击确认按钮，选择页面后自动触发
    }
  }
}
</script>

示例 6：行内布局 + 无确认按钮

<template>
  <div class="page-selector-wrapper">
    <span>快速选择：</span>
    <ModulePageSelect
      v-model="pageConfig"
      layout="inline"
      :confirm-button="false"
      @change="handleQuickSelect"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageConfig: {}
    }
  },
  methods: {
    handleQuickSelect(config) {
      console.log('快速选择:', config)
      // 适用于工具栏、筛选条等场景
      this.$router.push({
        name: 'PagePreview',
        query: {
          moduleId: config.module_id,
          pageId: config.page_id
        }
      })
    }
  }
}
</script>

数据接口说明

模块列表接口

默认调用 /api/assembly-center.extend_module.list

请求参数：

{
  page_no: 1,
  page_size: 1000
}

响应格式：

{
  data: {
    list: [
      { id: "1", name: "模块1" },
      { id: "2", name: "模块2" }
    ]
  }
}

页面列表接口

默认调用 /api/assembly-center.extend_module.page_list

请求参数：

{
  module_id: "xxx",      // 可选，不传时返回全部
  type: 2,               // 1: pc, 2: mobile
  page_no: 1,
  page_size: 1000
}

响应格式：

{
  data: {
    list: [
      {
        id: "1",
        name: "页面1",
        module_id: "1",
        options: {
          // JSON Schema 格式配置
          properties: {
            field1: {
              type: "string",
              title: "字段1",
              description: "字段1说明"
            }
          }
        }
      }
    ]
  }
}

页面配置 Schema

组件支持基于 JSON Schema 的动态表单渲染，支持以下字段类型：

基础类型

{
  properties: {
    // 文本输入
    username: {
      type: "string",
      title: "用户名",
      description: "请输入用户名"
    },
    // 数字输入
    age: {
      type: "number",
      title: "年龄",
      default: 18
    },
    // 下拉选择
    gender: {
      type: "string",
      title: "性别",
      enum: ["male", "female"],
      enumDescriptions: ["男", "女"]
    }
  }
}

嵌套对象

{
  properties: {
    user: {
      type: "object",
      title: "用户信息",
      properties: {
        name: {
          type: "string",
          title: "姓名"
        },
        email: {
          type: "string",
          title: "邮箱"
        }
      }
    }
  }
}

数组类型

{
  properties: {
    tags: {
      type: "array",
      title: "标签列表",
      items: {
        type: "object",
        properties: {
          name: { type: "string", title: "标签名" },
          value: { type: "string", title: "标签值" }
        }
      }
    }
  }
}

核心逻辑说明

1. 数据加载流程

1. 初始化：组件挂载时检查 autoEcho

   • 若为 true，自动回显 modelValue 或 moduleId/pageId 对应的数据
   • 若为 false，等待用户交互

2. 模块加载：用户 focus 模块下拉框时

   • 优先返回缓存数据
   • 无缓存时调用接口 /api/assembly-center.extend_module.list

3. 页面加载：用户选择模块或 focus 页面下拉框时

   • 优先返回该模块的缓存数据
   • 无缓存时调用接口 /api/assembly-center.extend_module.page_list

2. 事件触发时机

3. 页面方向选择

• 竖向（portrait）：默认选项，适合移动端竖屏显示
• 横向（landscape）：适合移动端横屏显示

选中的方向会包含在返回的 orientation 字段中

开发

# 安装依赖
npm install

# 开发模式
npm run serve

# 构建库文件
npm run build:lib

# 代码检查
npm run lint

常见问题

Q: 如何自定义数据接口？

A: 组件默认调用内置的两个接口。如需自定义，可以：

1. 在外部获取数据后通过 modelValue prop 传入
2. 或修改接口地址在 fetchModulesFromAPI 和 fetchPagesFromAPI 方法中

Q: 页面配置为空时会怎样？

A: 若页面 options 为空对象或不存在，组件不会展示配置表单，直接显示确认按钮。

Q: 如何禁用确认按钮？

A: 必须同时选择模块和页面，确认按钮才会启用。未选择时按钮自动禁用。

Q: 支持国际化吗？

A: 当前版本不支持国际化，所有文本为硬编码。可在后续版本中扩展。

License

MIT