ELPIS-Component

在之前的DSL设计中实现了一份模版（基类）配置对应一份模版页和模版解析引擎，在模版（基类）的基础上可以扩展不同的项目（子类）配置的效果，大大的减少了重复的开发工作。本篇文章意在完善其中的动态组件配置，使得生成的模板更具自由度和灵活度。

在之前文章中提到过组件解析器，就起到了通过读取componentsConfig组件配置，动态加载所有组件的功能，通过showComponent方法决定组件是否展示，在要进行处理的字段中配置相应的componentOption即可，例如在新增商品中我想展示商品名称和价格，那么就在这两个属性中配置createFormOption,配置示例如下：

schemaConfig:{
      api:'',
      schema:{
          type:'object',
        properties:{
            product_id:{
                type:'string',
                label:'商品ID',
                tableOption:{
                    width:300,
                    'show-overflow-tooltip':true
                },
                editFormOption:{
                    comType:'input',
                    disabled:true,
                },
                detailPanelOption:{}
            },
            product_name:{
                type:'string',
                label:'商品名称',
                maxLength:10,
                minLength:3,
                tableOption:{
                    width:200,
                },
                searchOption:{
                    comType:'dynamicSelect',
                    api:'/api/proj/product_enum/list'
                },
                createFormOption:{
                    comType:'input',
                    default:"默认商品名称",
                },
                editFormOption:{
                    comType:'input',
                },
                detailPanelOption:{}

            },
            create_time:{
                type:'string',
                label:'创建时间',
                tableOption:{},
                searchOption:{
                    comType:'dateRange',
                },
                detailPanelOption:{}

            }
        },
          required:['product_name']
      },
      tableOption:{
          headerButtons:[{
            label:'新增商品',
            eventKey:'showComponent',
              eventOption:{
                  comName:"createForm",
              },
            type:'primary',
            plain:true
        }],
          rowButtons:[{
              label:'详情',
              eventKey:'showComponent',
              type:'primary',
              eventOption:{
                  comName:"detailPanel",
              },
          },{
              label:'编辑',
              eventKey:'showComponent',
              type:'warning',
              eventOption:{
                  comName:"editForm",
              },
          },{
              label:'删除',
              eventKey:'remove',
              type:'danger',
          }]
      },
      componentConfig:{
          createForm:{
              title:"新增商品", //表单的标题
              saveBtnText:'新增商品', //保存按钮的文字
          },
          editForm:{
              mainKey:'product_id',
              title:"修改商品", //表单的标题
              saveBtnText:'修改', //保存按钮的文字
          },
          detailPanel:{
              mainKey:'product_id',
              title:"商品详情",

          }
      }
  }

新建组件的完整流程

一、新增DSL设计

在文档中的componentConfig中配置组件配置，这里以editForm为例

1. componentConfig 中配置editForm

           componentConfig:{
               editForm:{
                   mainKey:"",//表单主键，作为唯一标识
                   title:"", //表单的标题
                   saveBtnText:'', //保存按钮的文字
               }
              
           },
   

2. 在表单中的对应字段添加editFormOption

        //字段在editForm中的相关配置及呈现形式
            editFormOption:{
              ...elComponentConfig, //标准el-Component的配置
              comType:'' ,//使用到的组件类型，例如Input或者calendar
              visible:true, //是否在表单中显示,默认为true
              disabled:false, //是否禁用，默认为false
              default:'',   //配置默认值

              // comType === select时
              enumList:[], //下拉框枚举列表
          },

二、添加组件文件

1. 在components文件夹下新建

2. 在conponents-condifg文件中引入组件

    import editForm from './edit-form/edit-form.vue'

    const ComponentConfig = {
        editForm:{
            component:editForm
        }
    }

    export default  ComponentConfig

三、修改model配置

在model文件中配置componentConfig、同时在想要出现在组件中的字段中配置xxxOption（例如新增数据的createFormOption，修改表单数据的editFormOption）

四、添加接口

在router-schema、router、controller、service中新增相关处理逻辑即可

出处：《哲玄课堂-大前端全栈实践》