Ant Design vue 多层for循环form表单自定义校验

cc蒲公英

已于 2024-08-30 11:23:40 修改

阅读量80

点赞数 1

文章标签： anti-design-vue

于 2024-08-30 11:18:38 首次发布

本文链接：https://blog.csdn.net/cddcj/article/details/141684105

版权

数据结构如下：三维数组。

注意：<a-form-model>一定得写在for外面！！！！

<!-- 弹出框 -->
<a-modal
      :title="title"
      :dialog-style="{ top: '20px' }"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :width="1450"
      @ok="() => handleSubmit()"
      @cancel="() => handleCancel()"
    > 

<a-form-model ref="formRef" :model="model" class="dialogMaxHeight" :rules="rules">  
     <div v-for="(item, lIndx) in model.result" :key="item.id" v-show="curTabId === item.id">
        <div class="group-item"  v-for="(con, cIndx) in item.contentList" :key="con.id">
            <!-- 两层for写法-->
            <div class="inner"> 
                 <a-row style="padding: 8px 0"> 
                    <a-col :span="12">
                      <a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" 
                       :prop="'result.' + lIndx + '.contentList.' + cIndx + '.selfScore'"
                       :rules="[{ required: parseInt(item.typeId) == 2 ? true : false, validator: validateSelfScore, trigger: ['change', 'blur'] }]" > 
                        <a-input-number  :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(con.scoringStandard)" :max="getMaxScore(con.scoringStandard)" v-model="con.selfScore"  style="width: 10rem" />
                                  <span style="padding: 0 5px">分</span>
                       </a-form-model-item>
                     </a-col>  
                 </a-row>
            </div> 

            <!-- 三层for写法-->
             <div class="con">
                  <a-row style="padding: 8px 0"> 
                      <a-col :span="12">
                         <a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" 
                           :prop="'result.' + lIndx + '.contentList.' + cIndx + '.list.' + gIndex +  '.selfScore'"
                           :rules="[{ required: parseInt(item.id) === 2 ? true : false, validator: validateSelfScoreLev2, trigger: ['change', 'blur'] }]"   > 
                                            
                           <a-input-number :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(group.scoringStandard)" :max="getMaxScore(group.scoringStandard)" v-model="group.selfScore" style="width: 10rem" />
                            <span style="padding: 0 5px">分</span>
                         </a-form-model-item>
                      </a-col>  
                  </a-row>
            </div> 

        </div>  
    </div> 
</a-form-model>   
</a-modal>                       

export default {
methods: { 
    /* 原始未重构写法 和prop里数据结构一致  */
    validateSelfScore (rule, value, callback) {
        // 校验自评分
        const oneIndex = rule.field.split('.')[1]
        const twoIndex = rule.field.split('.')[3]
        const rowData = this.model.result[oneIndex].contentList[twoIndex]

        const rowData2 = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]
        if(!value && value === '' || value === null) {
          callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
        } else {
          callback()
        }
    }, 
    // 重构后
    validateSelfScore (rule, value, callback) {
        // 校验自评分（仅一级信用）
        // const oneIndex = rule.field.split('.')[1]
        // const twoIndex = rule.field.split('.')[3]
        // const rowData = this.model.result[oneIndex].contentList[twoIndex]
        if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用
            this.getValidRowCall(rule).then(res => {
                const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex] 
                // typeId诚信信息必校验
                if(parseInt(rowData.typeId) == 2) {
                    if(!value && (value === '' || value === null)) {
                        // if(rowData.content) this.$message.warning(`请输入${rowData.content ? rowData.content: ''}自评分!`)
                        callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
                    } else {
                        callback()
                    }    
                } else {
                    callback()
                }
            })
        } else {
            callback()
        }
    },
    // 三维数组校验 和prop里数据结构一致threeIndex 
    validateSelfScoreLev2 (rule, value, callback) {
        // 校验自评分（二级信用）
        // const rowData = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]
        if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用
            this.getValidRowCall(rule).then(res => {
                const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex].list[res.threeIndex]
                // typeId诚信信息必校验
                if(parseInt(rowData.typeId) == 2) {
                    if(!value && (value === '' || value === null)) {
                        callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            })
        } else {
            callback()
        }
    },
    handleSubmit () { // form表单提交
         this.$refs.formRef.validate(valid => { 
            if (valid) { 
                this.$message.warning('验证通过。。。');    
            } else{
                this.$message.warning('验证未通过。。。');
                return false;
            }
        })
    },
 } 
}