动态组件基于领域模型来设计,以数据驱动开发。
在模型中增加componentConfig来配置用到的组件的属性,每个字段增加componentOption来配置在每个动态组件中该字段的展现形式,及默认值等。
抽象出schema-form组件:使用动态组件<component>来按需加载input、select等,form-item-config.js中列出组件的键值对。
schema-form下边的input,select等组件中需要引入ajv,根据领域模型中配置的标准schema,来校验相关表单项是否有效。提供出validate及getValue方法。
import inputNumber from './complex-view/input-number/input-number.vue';
import select from './complex-view/select/select.vue';
const formItemConfig = {
input: {
component: input,
},
inputNumber: {
component: inputNumber,
},
select: {
component: select,
},
};
export default formItemConfig;
从配置中拿到配置的组件,在schema-view中将动态组件引入。 使用抽屉形式弹出createForm、editForm、detailForm。
在schema中字段配置里配置createFormOption,editFormOption等,来设定该字段在这个组件中是否显示,以输入框还是select形式显示等。