前言
相信做前端开发的兄弟，就会陷于这么一个死循环：每个功能模块都离不开CRUD界面，每个CRUD界面都长得差不多，唯一不同的就是显示的字段不同，于是每天大量重复的工作量都是ctrl+c，ctrl+v完成的。
不可以！我们要改变现状，我们要做些有意义的事情。
准备
第一步
- 实现可配置字段的搜索栏组件（可用于表格的搜索条件）
- 实现可配置字段的工具栏组件（可用于新增，编辑，删除等操作）
- 实现可配置字段的表格组件
- 实现可配置字段的表单组件
总之，就是把基本组件封装起来，通过配置文件生成想要的Element
第二步
- 根据UI设计将组件组合成模版代码
- 实现以命令行形式，配合handlebars.js生成代码块
原理
Demo
效果
配置
搜索栏
[
{
component: 'GInput',
prop: 'account',
label: '账号',
value: '',
},
{
component: 'GInput',
prop: 'name',
label: '姓名',
value: '',
},
]
工具栏
[
TOOLBAR_PROP.CREATE,
TOOLBAR_PROP.EDIT,
TOOLBAR_PROP.DELETE,
TOOLBAR_PROP.REFRESH,
TOOLBAR_PROP.FULL_SCREEN,
]
表格
[
{
prop: 'account',
label: '账号',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'creator',
label: '创建人',
},
{
prop: 'creationTime',
label: '创建时间',
format: 'dateTimeFormat',
},
]
表单
[
{
component: 'GInput',
prop: 'name',
label: '姓名',
value: '',
rules: [
{ required: true, message: '请输入姓名', trigger: 'change' },
{ validator: validateName, trigger: 'change' },
],
},
{
component: 'GSelect',
prop: 'gender',
label: '性别',
value: '',
options: [
{ label: '男', value: 'MALE'},
{ label: '女', value: 'FEMALE'},
],
rules: { required: true, message: '请选择性别', trigger: 'change' },
},
]
