template-page-select

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

功能特性

• ✅ 模块与页面二级联动选择
• ✅ 支持模块、页面数据缓存
• ✅ 基于 JSON Schema 的动态表单渲染
• ✅ 区分移动端（mobile）和 Web 端（external）
• ✅ 支持默认值回显
• ✅ 自定义数据获取方法
• ✅ 完整的 TypeScript 类型定义

安装

npm install template-page-select

使用

全局注册

import { createApp } from 'vue'
import ModulePageSelect from 'template-page-select'
import App from './App.vue'

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

局部引入

<template>
  <ModulePageSelect
    type="mobile"
    :fetchModules="getModules"
    :fetchPages="getPages"
    @confirm="handleConfirm"
  />
</template>

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

export default {
  components: {
    ModulePageSelect
  },
  methods: {
    async getModules() {
      // 返回模块列表
      const res = await fetch('/api/modules')
      return res.json()
    },
    async getPages(moduleId, pageType) {
      // 返回页面列表
      const res = await fetch(`/api/pages?moduleId=${moduleId}&type=${pageType}`)
      return res.json()
    },
    handleConfirm(config) {
      console.log('选中配置:', config)
      // config 格式：
      // {
      //   module_id: "66613bff9aa40000",
      //   module_name: "操作日志",
      //   page_id: "6663c53083e40000",
      //   page_name: "操作日志",
      //   page_type: 1,
      //   configJson: {}
      // }
    }
  }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 终端类型 | String | mobile / external | mobile | | defaultModuleId | 默认模块ID（用于回显） | String | - | '' | | defaultPageId | 默认页面ID（用于回显） | String | - | '' | | fetchModules | 自定义模块列表获取方法 | Function | - | null | | fetchPages | 自定义页面列表获取方法 | Function(moduleId, pageType) | - | null |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | confirm | 确认选择时触发 | config: PageConfig | | error | 发生错误时触发 | { type: string, error: Error } |

数据格式

模块数据格式

{
  id: "66613bff9aa40000",
  name: "操作日志"
}

页面数据格式

{
  id: "6663c53083e40000",
  name: "操作日志",
  type: 1, // 0: 移动端, 1: Web端
  options: {
    // JSON Schema 格式的配置
    properties: {
      wechatId: {
        type: "string",
        title: "微信ID",
        description: "请输入微信ID"
      },
      groupName: {
        type: "string",
        title: "业务分组"
      }
    }
  }
}

输出配置格式

{
  module_id: "66613bff9aa40000",
  module_name: "操作日志",
  page_id: "6663c53083e40000",
  page_name: "操作日志",
  page_type: 1,
  configJson: {
    wechatId: "xxx",
    groupName: "xxx"
  }
}

使用示例

示例 1：基础通用调用

<template>
  <ModulePageSelect
    type="mobile"
    :fetchModules="fetchModules"
    :fetchPages="fetchPages"
    @confirm="handlePageConfirm"
  />
</template>

<script>
export default {
  methods: {
    async fetchModules() {
      // 实现模块获取逻辑
      return [
        { id: '1', name: '模块1' },
        { id: '2', name: '模块2' }
      ]
    },
    async fetchPages(moduleId, pageType) {
      // 实现页面获取逻辑
      return [
        { 
          id: '1', 
          name: '页面1', 
          type: pageType,
          options: {
            properties: {
              field1: { type: 'string', title: '字段1' }
            }
          }
        }
      ]
    },
    handlePageConfirm(pageConfig) {
      console.log('选中页面配置', pageConfig)
    }
  }
}
</script>

示例 2：回显已有页面数据

<template>
  <ModulePageSelect
    type="external"
    :defaultModuleId="form.moduleId"
    :defaultPageId="form.pageId"
    :fetchModules="fetchModules"
    :fetchPages="fetchPages"
    @confirm="savePageInfo"
  />
</template>

<script>
export default {
  data() {
    return {
      form: {
        moduleId: '66613bff9aa40000',
        pageId: '6663c53083e40000'
      }
    }
  },
  methods: {
    async fetchModules() {
      // 获取模块列表
    },
    async fetchPages(moduleId, pageType) {
      // 获取页面列表
    },
    savePageInfo(data) {
      // 存储选中的模块、页面及配置
      this.form.moduleId = data.module_id
      this.form.pageId = data.page_id
      console.log('配置数据:', data.configJson)
    }
  }
}
</script>

核心功能说明

1. 模块与页面加载逻辑

• 初始化优先读取模块缓存，无缓存再请求接口拉取模块列表
• 切换模块清空旧页面数据，重新获取当前模块下所有页面并缓存
• 选中页面：加载页面配置
  • 有配置（非空对象）→ 渲染动态表单
  • 无配置（null/{}）→ 不展示表单区域

2. 动态表单渲染

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

• string → 文本输入框
• number / integer → 数字输入框
• enum → 下拉选择框

3. 配置使用规则

1. 前端用 page_id 绑定页面路由
2. 后端解析只依赖 module_id 和 page_id，名称字段仅做展示
3. 页面初始化读取 configJson，回填表单
4. 根据 page_type 走不同端逻辑（0: 移动端, 1: Web端）

开发

# 安装依赖
npm install

# 开发模式
npm run serve

# 构建库文件
npm run build:lib

# 代码检查
npm run lint

License

MIT