表单设置组建

属性： widgetForm 配置项 defaulTypeList 默认值类型配置项 widgetFormSelect 配置项选中项 (疑似弃用，可不传值) selectList 体验事项 (动态下拉框 传入参数[ { value: 1, label: '13' },{ value: 2, label: '22' },]) stencil 模版组件 (参数与配置项list相同) 事件： @handleClear 清空事件的回调 @saveCallback 确定保存该配置后的回调 @selectllback 下拉框回调--区县审核(已弃用)

表单展示组建

属性： widgetForm 配置项 widgetModels 配置项默认值对象 resetWord 重置按钮文字 saveWord 保存按钮文字 submitWord 提交按钮文字 auditWord 审核按钮文字 closeWord 关闭按钮文字 isShowBtn 是否显示提交按钮 isShowAudit 是否显示审核按钮 isShowReset 是否显重置值按钮 isShowSave 是否显示保存按钮 isShowClose 是否显示关闭按钮 isShowLine 是否显示按钮顶部与表单顶部的线条 isConfirm 提交时是否需要二次确认提示 isView 是否禁用表单 isPreview 是否预览附件 loadDown 附件下载接口地址 //'/common/download/resource?filePath=' upload 附件上传接口地址 // upLoadBaseUrl 附件下载地址前缀 // ‘http://10.0.251.212:8888’ loadDownImg 图片预览地址前缀 // ‘http://10.0.251.212:8888’ data 附件上传参数 headers 附件上传请求头信息 btnposition 按钮水平布局控制 footerPositon 按钮style样式 size 按钮尺寸 httpRequestUrl导入子表地址 exportRowUrl导出子表数据地址 importTableList 导入子表列表 事件： @saveCallback 保存按钮回调事件 =>(formData) 保存回调不经过表单rules验证 @selectCallback 下拉框回调时间 @closeHandleTest 关闭按钮回调事件 @resetCallback 重置按钮回调事件 @auditCallback 审核按钮回调事件 =>(formData) 需要经过表单rules验证，与提交一致，目前提供给漳州审核 @addCallback 提交按钮回调事件 =>(formData) 需要经过表单rules验证 this.$refs.previewPage.loading = false //关闭按钮禁用 @uploadDown 附件下载回调事件 =>(data) projectName=='haicang' 专用 //@httpRequest //导入子表-已弃用 现在使用 httpRequestUrl导入子表地址 @downTemplate //导入子表模板文件 //@exportRow // 导出子表-已弃用 现在使用 exportRowUrl导出子表数据地址

默认值回显

默认值数组 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',permisson: "company",(管理端：permisson: "admin",) } }, 回显方法 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] _list[_index].options.lastNumber=1 _list[_index].options.pageNumber=1 _list[_index].options.laoding=false 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: '所在区域' }, { value: 'AUTHORITY', 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