Vue 多附件表单非空校验

背景

        当前有一个表单，里面一共有 9 个附件字段，如发布文档、检查文档、项目公示......，并且每个字段都是必填，也就是9个附件都为必填项。

处理

1、dialogItems 中的配置

release_attach: {
  prop: "release_attach",
  type: "files",
  label: "通知文件",
  tips: "通知文件",
  attrs: {
    acceptType: '*',
    catalog: 'release_attach',
    'file-list': instance.dialogformData?.release_attach,
    onSuccess: (response, file, fileList) => instance.filesUploadSuccess('release_attach', response, file, fileList),
    onRemove: (response, file, fileList) => instance.filesUploadRemove('release_attach', response, file, fileList),
    multiple: true
  },
  rules: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        instance.validateAttach(rule, value, callback,'release_attach', '通知文件')
      }
    }
  ]
},
submit_attach: {
  prop: "submit_attach",
  type: "files",
  label: "报告",
  tips: "报告",
  attrs: {
    acceptType: '*',
    catalog: 'submit_attach',
    'file-list': instance.dialogformData?.submit_attach,
    onSuccess: (response, file, fileList) => instance.filesUploadSuccess('submit_attach', response, file, fileList),
    onRemove: (response, file, fileList) => instance.filesUploadRemove('submit_attach', response, file, fileList),
    multiple: true
  },
  rules: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        instance.validateAttach(rule, value, callback, 'submit_attach', '报告')
      }
    }
  ]
},

2、处理函数

filesUploadSuccess(field, response, file, fileList) {
  if (file.response && file.response.code !== 200) return
  this.attachmentList[field] = fileList.map((item) => (item.response && item.response.data.id) || item.id)
  this.$refs.prDialog.$refs.PolicyResearchTableDialogForm.validateField(field) // 触发验证
},
filesUploadRemove(field, file, fileList) {
  if (file.response && file.response.code !== 200) return
  this.attachmentList[field] = fileList.map((item) => (item.response && item.response.data.id) || item.id)
  this.$refs.prDialog.$refs.PolicyResearchTableDialogForm.validateField(field) // 触发验证
},
validateAttach(rule, value, callback, field, msg){
  if (!this.attachmentList[field] || this.attachmentList[field].length === 0) {
    callback(new Error(`请上传${msg}`))
  } else {
    callback()
  }
},