elpis - 动态组件扩展设计

还要啥名字2025-08-09 11:54

在DSL里面我们通过schema配置，来实现页面字段和参数的配置，然后我们通过hook来实现解析配置的具体意义。配置如下

diff 复制代码

api：在Resuful规范下，增删改查都可以通过这个 配置生成

schema 字段是这个配置的核心，用于页面显示的数据和各种功能的配置和实现。

- tableOption 用于现实页面表结构的数据，

- tableConfig 用于表中不同行的配置和交互设置
- searchOption 用于设置 搜索栏设置是否显示
- searchConfig 用于搜索设置中的不同交互

本篇是在此基础上新增componentConfig。列如：

css 复制代码

componentConfig: {
    createForm: {
      title: '新建商品',
      saveBtnText: '新增商品', 
    },
    editForm: {
      mainKey: 'product_id',
      title: '修改商品',
      saveBtnText: '修改商品'
    },
    detailPanel: {
      mainKey: 'product_id',
      title: '商品详情',
    }
  }

并在schema里面对于需要显示的字段下添加 componentConfig对应的key，列如

css 复制代码

schema: {
        type: 'object',
        properties: {
          product_id: {
            ...
            editFormOption: {
              comType: 'input',
              disabled: true,
            },
            detailPanelOption:{
              
            },
          },
        }

我们通过hook解析将配置的componentConfig配置，转换成对应组件所需要的数据components

在具体页面通过引入解析后的components数据，并将配置的的数据传入组件

ini 复制代码

   <component
            v-for="(item, key) in components"
            :key="key"
            :is="ComponentConfig[key]?.component"
            ref="comListRef"
            @command="onComponentCommand"
        ></component>

在通过统一的command 事件，在父组件里面集中处理，动态组件所需处理的事务。