schemaConfig 配置

28 阅读2分钟

一份 json-schema 配置,基于该配置 + 对应的解析器 可以快速搭建中后台管理页面

{
      schemaConfig: {
        api: "", // 数据源API(遵循 RESTFUL 规范)
        schema: {
          // 板块数据结构(遵循 JSON Schema 规范)
          type: "object",
          properties: {
            keyName: {
              ...schema, //标准 schema 配置
              type: "", // 字段类型
              label: "", // 字段名称
              // 字段在table中的相关配置
              tableOption: {
                ...elTableColumnConfig, // 参考element-plus的el-table-column配置
                visible: true, // 是否在table中显示对应的列。默认为true
                toFixed: 2, // 保留两位小数
              },
              // 字段在搜索表单中的相关配置
              searchOption: {
                ...elFormItemConfig, // 参考element-plus的el-form-item配置
                comType: "", // 组件类型。input/select/...
                default: "", // 默认值, 用于适配链接上的参数
                // comType === 'select 枚举值列表。
                enumList: [
                  {
                    label: "", // 枚举值中文名
                    value: "", // 枚举值
                  },
                ],
                // comType === 'dynamicSelect' 动态下拉框
                api: "",
              },
              // 字段在不同动态 component 中的相关配置,前缀对应 componentConfig中的键值
              // 如:component.createForm 对应 createFormOption
              // 字段在 createForm 中相关配置
              createFormOption: {
                ...elFormItemConfig, // 参考element-plus的el-form-item配置
                comType: "", // 组件类型。input/select/...
                default: "", // 默认值
                visible: true, // 是否展示
                disabled: false, // 是否禁用
                // comType === 'select 枚举值列表。
                enumList: [
                  {
                    label: "", // 枚举值中文名
                    value: "", // 枚举值
                  },
                ],
              },
              // 字段在 editForm 中相关配置
              editFormOption: {
                ...elFormItemConfig, // 参考element-plus的el-form-item配置
                comType: "", // 组件类型。input/select/...
                default: "", // 默认值
                visible: true, // 是否展示
                disabled: false, // 是否禁用
                // comType === 'select 枚举值列表。
                enumList: [
                  {
                    label: "", // 枚举值中文名
                    value: "", // 枚举值
                  },
                ],
              },
              // 详情面板的相关配置
              detailPanelOption: {
                ...elFormItemConfig, // 参考element-plus的el-form-item配置
              },
              comAOption: {}, // 组件A的相关配置
              comBOption: {}, // 组件B的相关配置
              comCOption: {}, // 组件C的相关配置
            },
          },
          required: [], // 标记哪些字段时必填项
        },
        tableConfig: {
          // table相关配置
          headerButtons: [
            {
              label: "", // 按钮中文名
              eventKey: "", // 按钮事件名
              // 按钮事件具体配置
              eventOption: {
                // 当 eventKey === 'showComponent'时
                comName: "", // 组件名称
              },
              ...elButtonConfig, // 参考element-plus的el-button配置
            },
          ],
          rowButtons: [
            {
              label: "", // 按钮中文名
              eventKey: "", // 按钮事件名remove edit add
              // 按钮事件具体配置
              eventOption: {
                // 当 eventKey === 'showComponent'时
                comName: "", // 组件名称
                // 当 eventKey === 'remove'时
                params: {
                  // paramKey: 参数的键
                  // paramValue: 参数的值(当格式为 schema::tableKey 的时候,到table - row中找对应的tableKey字段)(也可以配固定的值)
                  // 使用参考app\pages\dashboard\complex-view\schema-view\complex-view\table-panel\table-panel.vue中的removeData方法
                  paramKey: rowValueKey,
                },
              },
              ...elButtonConfig, // 参考element-plus的el-button配置
            },
          ],
        },
        searchConfig: {
          //搜索栏相关配置
        },
        // 动态组件相关配置
        componentConfig: {
          // crete-from 表单相关配置
          createForm: {
            title: "", // 表单标题
            saveBtnText: "", // 保存按钮文本
          },
          // edit-form 表单相关配置
          editForm: {
            mainKey: "", // 表单逐渐,用于唯一标识要修改的数据对象,如product_id
            title: "", // 表单标题
            saveBtnText: "", // 保存按钮文本
          },
          // detail-panel 相关配置
          detailPanel: {
            mainKey: "", // 表单逐渐,用于唯一标识要修改的数据对象,如product_id
            title: "", // 详情面板标题
          },
          // 支持用户动态扩展
          comA: {},
          comB: {},
          comC: {},
        },
      },
   }

image.png