数据结构如下:三维数组。
注意:<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;
}
})
},
}
}