根据后端数据,自动生成表单及表格
// 此功能需要与后端协定好接口数据结构const customModuleList = [// form表单结构{seq: 1, // 模块唯一标识isTable: 'N', // 是否为表格customName: 'form表单',fieldDatas: [{isRequired: true, // 是否必填disabled: false, // 是否禁用fieldSeq: 1, //字段唯一标识fieldType: 'select', // 字段类型 // select:单选,mulSelect: 多选,// input:输入框,inputNumber:数字输入框,inputArea:多行输入框// date: 日期选择器,dateTime: 日期时间选择器,time: 时间选择器fieldLabel:'字段A', // 字段名称fieldValue: null, // 字段默认值&字段维护的值,保存时,可直接使用该字段存取optionList: [label: '是', value: '1',label: '否', value: '0',], // 字段为下拉框时,optionList需要有枚举值}, ...], // 表单数据,isTabel为Y时,为空fieldTable: [], // 表格表内数据,isTabel为N时,为空headerTable: [], // 表格表头数据,isTabel为N时,为空maxLength: 30, // 模块名称最长限制},// 表格结构{seq: 2, // 模块唯一标识isTable: 'Y',customName: 'table表格',fieldDatas: [], // 表单数据,isTabel为Y时,为空fieldTable: [{columnA: '0'}, ...], // 表格表内数据,与表头字段绑定的field一一对应headerTable: [{disabled: false, // 是否禁用key: 1, // 列唯一标识fieldType: 'select', // 列绑定类型 // select:单选,mulSelect: 多选,// input:输入框,inputNumber:数字输入框,inputArea:多行输入框// date: 日期选择器,dateTime: 日期时间选择器,time: 时间选择器title:'字段A', // 列名称field: 'columnA', // 列绑定字段optionList: [slabel: '是', value: '1',label: '否', value: '0',], // 列需要枚举转换时,optionList需要有枚举值}, ...], // 表头数据,isTabel为Y时,不可为空maxLength: 30, // 模块名称最长限制},...
]
数据结构定好后,循环组件即可,时间有限,后续加上代码。
另:字段间有联动关系的,也要整理出来。