表单设置组建
属性： widgetForm 配置项 defaulTypeList 默认值类型配置项 widgetFormSelect 配置项选中项 selectList 体验事项 (动态下拉框 传入参数[ { value: 1, label: '13' },{ value: 2, label: '22' },]) stencil 模版组件 (参数与配置项list相同) 事件： @handleClear 清空事件的回调
表单展示组建
属性： widgetForm 配置项 widgetModels 配置项默认值对象 resetWord 重置按钮文字 saveWord 保存按钮文字 submitWord 提交按钮文字 closeWord 关闭按钮文字 isShowBtn 是否显示提交按钮 isShowReset 是否显重置值按钮 isShowSave 是否显示保存按钮 isShowClose 是否显示关闭按钮 isShowLine 是否显示按钮顶部与表单顶部的线条 isConfirm 提交时是否需要二次确认提示 isView 是否禁用表单 loadDown 附件下载接口地址 //'/common/download/resource?filePath=' upload 附件上传接口地址 // upLoadBaseUrl 附件下载地址前缀 // ‘http://10.0.251.212:8888’ data 附件上传参数 headers 附件上传请求头信息 btnposition 按钮水平布局控制 size 按钮尺寸 事件： @saveCallback 保存按钮回调事件 =>(formData) 保存回调不经过表单rules验证 @closeHandleTest 关闭按钮回调事件 @resetCallback 重置按钮回调事件 @addCallback 提交按钮回调事件 =>(formData) 需要经过表单rules验证 @uploadDown 附件下载回调事件 =>(data) projectName=='haicang' 专用
默认值回显
默认值数组 valueObj: { checkBoxInput_1636427365000_55187: [ { option: 'Option 1', input: '12' } ], input_1636427380000_90623: '123123', time_1636427386000_83661: '09:50:58', checkbox_1636427361000_29174: ['Option 1', 'Option 2'], input_1636427352000_34791: '11', textarea_1636427357000_13834: '22' }, 配置项数组 widgetForm: { list: [ { key: '1638175179000_76523', rules: [], model: 'imgupload_1638175179000_76523', typeName: '上传文件', type: 'imgupload', options: { innerWidth: '100%', isQiniu: false, tokenFunc: 'funcGetToken', width: '', domain: 'http://pfp81ptt6.bkt.clouddn.com/', disabled: false, length: 8, size: { width: 100, height: 100 }, multiple: false, defaultValue: [ { status: 'success', uid: 1638175185056, name: '体验官表单.jpg', url: '/2021/11/29/6d64177c-ea56-47ba-874b-86919ad2b92a.jpg' } ], token: '', isDelete: false, isEdit: false, action: 'https://jsonplaceholder.typicode.com/photos/', remoteFunc: 'func_1638175179000_76523', min: 0 }, name: '上传文件', icon: 'icon-tupian' } ], config: { labelWidth: 100, labelPosition: 'right', size: 'small', projectName:'haicang' } }, 回显方法 valueInit() { // if (res.data.representation && res.data.values) { // let data = JSON.parse(res.data.representation); let data = this.widgetForm // console.log("表单", data); // 处理表单回显 for (let i in data.list) { if (data.list[i].type == 'grid') { //栅格布局 for (let j in data.list[i].columns) { this.listInit(data.list[i].columns[j].list) } } else { //普通布局 this.listInit([data.list[i]]) } } const arr = data.list.map(v => { if (v.name == '体验事项') { v.option.option == this.selectList return v } else { return v } }) this.widgetFormValue = { list: arr, config: { ...data.config } } this.$refs.previewPage.referKey++ }, listInit(_list) { for (let i in this.valueObj) { let _index = _list.findIndex(function(params) { return params.model == i }) if (_index > -1) { if (_list[_index].type == 'checkBoxInput') { const boxList = [] const inputList = [] this.valueObj[i].map(v => { boxList.push(v.option) inputList.push(v.input) }) _list[_index].options.previewValue.boxlist = boxList _list[_index].options.previewValue.valueList = _list[ _index ].options.options.map(v => { return v.value }) _list[_index].options.previewValue.valueList.map((v, i) => { boxList.map((j, k) => { if (j == v) { return (_list[_index].options.previewValue.inputList[i] = inputList[k]) } }) }) } else if (_list[_index].type == 'radioInput') { if (this.valueObj[i][0]) { const boxList = this.valueObj[i][0].option const inputList = [] this.valueObj[i].map(v => { inputList.push(v.input) }) _list[_index].options.previewValue.boxlist = boxList const a = (_list[_index].options.previewValue.valueList = _list[ _index ].options.options.map(v => { return v.ifRemark })) a.map((v, i) => { if (v) { _list[_index].options.previewValue.inputList[i] = inputList[0] } else { _list[_index].options.previewValue.inputList[i] = '' } }) } } else if(_list[_index].type == 'table'){ console.log(i) _list[_index].tableData = this.valueObj[i] console.log(_list[_index].tableData) }else{ _list[_index].options.defaultValue = this.valueObj[i] } } } },
配置项示例 widgetModels: { table_1641263289000_33408: [ { input_1641263672000_31294: '3', input_1641263676000_59762: '4', row_index: 0, input_1641263681000_1135: '7', input_1641263665000_36914: '1', input_1641263678000_77264: '5', input_1641263669000_2609: '2' }, { input_1641263669000_2609: '1234', input_1641263678000_77264: '1234567', input_1641263676000_59762: '123456', row_index: 1, input_1641263681000_1135: '12345678', input_1641263665000_36914: '123', input_1641263672000_31294: '12345' } ], input_1641266034000_77509: '222', input_1641368888000_7072: '444' }, stencil: [ { type: 'text', name: '文字', typeName: '文字', noLabel: false, icon: 'icon-wenzishezhi-', options: { defaultValue: '设置默认值', customClass: '', layout: 'left', fontSize: '14', color: '#333333', bold: false, italic: false, lineStyle: 'none', remoteFunc: 'func_1638430361000_47102' }, key: '1638430361000_47102', model: 'text_1638430361000_47102', rules: [] }, { type: 'input', noLabel: false, name: '单行文本', typeName: '单行文本', icon: 'icon-diy-com-textarea', options: { innerWidth: '100%', width: '100%', defaultValue: '', defaultValueType: '', required: true, dataType: 'string', ywType: '', pattern: '', placeholder: '', disabled: false, layout: 'left', fontSize: 14, color: '#333333', labelPosition: 'left', remoteFunc: 'func_1638500005000_54617' }, key: '1638500005000_54617', model: 'input_1638500005000_54617', rules: [ { type: 'string', message: '单行文本格式不正确' }, { required: true, message: '单行文本必须填写!' } ] }, { type: 'radioInput', name: '单选配置', typeName: '单选配置', icon: 'icon-wenzishezhi-', options: { defaultValue: '', previewValue: { boxlist: '', inputList: [], valueList: [] }, inline: false, showLabel: false, labelTitle: '', options: [ { value: 'Option 1', label: 'Option 1', ifRemark: true, ifRequired: false, description: '' }, { value: 'Option 2', label: 'Option 2', ifRemark: false, ifRequired: false, description: '' }, { value: 'Option 3', label: 'Option 3', ifRemark: false, ifRequired: false, description: '' } ], cascader: false, required: false, requiredSelf: true, innerWidth: '100%', width: '', max: 3, disabled: false, bold: false, italic: false, remoteFunc: 'func_1638502919000_79155' }, key: '1638502919000_79155', model: 'radioInput_1638502919000_79155', rules: [] } ], defaulTypeList: [ { value: 'ENTERPRISE_NAME', label: '企业名称' }, { value: 'ENTERPRISE_CODE', label: '统一社会信用代码' }, { value: 'ORGANIZATION_CODE', label: '组织机构代码' }, { value: 'REGISTERED_ADDRESS', label: '注册地址' }, { value: 'REGISTERED_CAPITAL', label: '注册资本' }, { value: 'INFORMANT_NAME', label: '填报人' }, { value: 'INFORMANT_PHONE', label: '填报人手机号' }, { value: 'LEGAL_REPRESENTATIVE_NAME', label: '法人代表姓名' }, { value: 'LEGAL_REPRESENTATIVE_CERT_TYPE', label: '法人代表证件类别' }, { value: 'LEGAL_REPRESENTATIVE_CERT_NUMBER', label: '法人代表证件号码' }, { value: 'LEGAL_REPRESENTATIVE_CONTACT', label: '法人联系方式' }, { value: 'BUSINESS_ADDRESS', label: '经营地址' }, { value: 'INDUSTRY_CODE', label: '所属行业' }, { value: 'REGISTRATION_DATE', label: '登记日期' }, { value: 'REGION', label: '所在区域' } ], selectList: [ { value: 1, label: '13' }, { value: 2, label: '22' }, { value: 3, label: '31' }, { value: 31, label: '33331' } ]
强化js 使用规范 (function(){ (默认生成匿名立即执行函数) $('input[id=input_1641266034000_77509]')[0].dispatchEvent(new Event('input')), (激活目标组件的dom与vue双向绑定关联) $('input[id=input_1641266034000_77509]')[0].value = (目标组件赋值) Number($('input[id=input_1641263665000_36914]')[0].value) + (目标组件计算方法) Number($('input[id=input_1641263665000_36914]')[1].value) + Number($('input[id=input_1641263669000_2609]')[0].value) + Number($('input[id=input_1641263669000_2609]')[1].value) })() 计算方法目标获取 如被计算组件只有一个则$('input[id=input_1641263665000_36914]')获取后是长度为1的数组 即根据角标[0]获取对应value 如被计算组件有n个则$('input[id=input_1641263665000_36914]')获取后是长度为n的数组 即根据角标[n]获取对应value