一份 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: {},
},
},
}