form-making高级版表单配置

IMyself
335 阅读4分钟

1. 子表单内部字段联动表单校验

加班时间结束时间不可早于开始时间校验

{"list":[{"type":"table","icon":"icon-table","options":{"defaultValue":[],"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"required":false,"validatorCheck":false,"validator":"","paging":false,"pageSize":5,"isAdd":true,"isDelete":true,"showControl":true,"remoteFunc":"func_jjuy4i54","remoteOption":"option_jjuy4i54","tableColumn":false,"subform":false},"events":{"onChange":"","onRowAdd":"","onRowRemove":"","onPageChange":""},"tableColumns":[{"type":"date","icon":"icon-date","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":false,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","type":"date","format":"yyyy-MM-dd","timestamp":false,"required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"customProps":{},"remoteFunc":"func_gf1e10mm","remoteOption":"option_gf1e10mm","tableColumn":true,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"日期选择器","novalid":{},"key":"gf1e10mm","model":"date_gf1e10mm","rules":[]},{"type":"time","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":false,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":false,"format":"HH:mm:ss","required":false,"requiredMessage":"","validatorCheck":false,"validator":"","width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"customProps":{},"remoteFunc":"func_kfsag7rn","remoteOption":"option_kfsag7rn","tableColumn":true,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"时间选择器","novalid":{},"key":"kfsag7rn","model":"time_kfsag7rn","rules":[]},{"type":"time","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":false,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":false,"format":"HH:mm:ss","required":false,"requiredMessage":"","validatorCheck":true,"validator":"let index=rule.field.split('.')[1]\r\nlet startTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${this.getComponent(`table_jjuy4i54`).tableData[index].time_kfsag7rn}`).getTime()\r\nlet endTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${value}`).getTime()\r\nif (startTime>endTime) {\r\n    callback('开始时间不能早于结束时间')\r\n  } else {\r\n    callback()\r\n  }","width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"customProps":{},"remoteFunc":"func_vdbjlpgl","remoteOption":"option_vdbjlpgl","tableColumn":true,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"时间选择器","novalid":{},"key":"vdbjlpgl","model":"time_vdbjlpgl","rules":[{"func":"let index=rule.field.split('.')[1]\r\nlet startTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${this.getComponent(`table_jjuy4i54`).tableData[index].time_kfsag7rn}`).getTime()\r\nlet endTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${value}`).getTime()\r\nif (startTime>endTime) {\r\n    callback('开始时间不能早于结束时间')\r\n  } else {\r\n    callback()\r\n  }"}]}],"name":"子表单","key":"jjuy4i54","model":"table_jjuy4i54","rules":[]}],"config":{"labelWidth":120,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}],"styleSheets":".document-all{\r\n    background-color: #f8f8f8;\r\n\r\n}\r\n.fm-generate-preview.pc{\r\n    background-color: #f8f8f8;\r\n\r\n}\r\n\r\n.document-warp{\r\n    width: 80%;\r\n    margin: 0 auto;\r\n    background-color: #fff;\r\n    font-family: \"Microsoft YaHei\";\r\n    border-radius: 4px;\r\n   \r\n    \r\n}\r\n.document-title{\r\n    height: 90px;\r\n    line-height: 90px;\r\n    font-size: 26px!important;\r\n    color: #f00;\r\n    font-weight:700 ;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-bottom: 1px dashed #e8e8e8;\r\n}\r\n.document-title span{\r\n  font-size: 26px!important;\r\n}\r\n.mt-30{\r\n    margin-top: 20px!important;\r\n}\r\n.pt-20{\r\n    padding-top: 20px!important;\r\n}\r\n.pb-20{\r\n    padding-bottom: 20px!important;\r\n}\r\n.py-20{\r\n    padding-top: 20px!important;\r\n    padding-bottom: 20px!important;\r\n}\r\n.pr-90{\r\n    padding-right: 90px!important;\r\n    padding-bottom:15px!important;\r\n}\r\n.mr-90{\r\n    margin-right: 90px!important;\r\n  padding-bottom:15px!important;\r\n}\r\n.w-e-toolbar,\r\n.w-e-text-container，\r\n.ql-container.ql-snow{\r\n    border: 1px solid #e8e8e8!important;\r\n}\r\n.el-alert {\r\n    margin-left: 200px;\r\n}\r\n.tips{\r\n    margin-left: 200px;\r\n    background-color: #fdf6ec;\r\n    color: #E6A23C;\r\n    padding: 8px 16px;\r\n    \r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n    border-radius: 4px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    opacity: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    -webkit-transition: opacity .2s;\r\n    transition: opacity .2s;\r\n    font-size: 12px;\r\n}"}}

可直接导入json查看demo

根据官网提供的文档this.getValue('id')可获取某一字段输入的值，但是在子表单的自定义校验中,this.getValue('time_kfsag7rn')获取不到值。通过打印rule可以看到，子表单中完整的field是field: "table_jjuy4i54.0.time_vdbjlpgl" 它是由子表单的model加上当前字段在子表单中的索引值再加上当前字段的model
要获取联动表单的model我们可以从完整的field中获取当前所在行的索引值index：

let index=rule.field.split('.')[1]

既然this.getValue('id')获取不到值我们只能另辟蹊径,文档中还提供了一个方法getComponent,通过getComponent可以获取表单中字段组件实例 ，以下是完整的校验代码:

let index=rule.field.split('.')[1]
let startTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${this.getComponent(`table_jjuy4i54`).tableData[index].time_kfsag7rn}`).getTime()
let endTime=new Date(`${this.getComponent(`table_jjuy4i54`).tableData[index].date_gf1e10mm} ${value}`).getTime()
if (startTime>endTime) {
    callback('开始时间不能早于结束时间')
  } else {
    callback()
  }

后来发现getValue方法其实也可以获取到字段的值

this.getValue('子表单model')[子表单中的索引值index]['需要获取的字段的model值']

let index=rule.field.split('.')[1]
let startTime=new Date(`${this.getValue(`table_jjuy4i54`)[index]['date_gf1e10mm']} ${this.getValue(`table_jjuy4i54`)[index]['time_kfsag7rn']}`).getTime()
let endTime=new Date(`${this.getValue(`table_jjuy4i54`)[index]['date_gf1e10mm']} ${value}`).getTime()
if (startTime>endTime) {
    callback('开始时间不能早于结束时间')
  } else {
    callback()
  }
avatar
文章
阅读
粉丝