业务场景:
根据勾选的经营方式,来做下方表单必填校验,比如 勾选了集体自主经营,下方字段括号内是集体自主经营的值必须大于0,其他必填字段不够选只能为0
代码:
let thanZero = (rule, value, callback) => {
if (!value) {
return callback(new Error('必填'));
}
if (value == 0) {
callback(new Error('已勾选经营方式不能为0'));
} else {
callback();
}
};
let equalZero = (rule, value, callback) => {
if (!value) {
return callback(new Error('必填'));
}
if (value && value != 0) {
callback(new Error('未勾选经营方式只能为0'));
} else {
callback();
}
};
let r1 = { required: true, message: '必填', trigger: 'blur' }
let r2 = { validator: thanZero, required: true, trigger: 'blur' }
let r3 = { validator: equalZero, required: true, trigger: 'blur' }
export default {
data() {
return {
tableData: [],
type: '',
title: '',
form: this.detailForm || createSearchForm(),
defaultRules:{
operationMode: {rule:[{type: 'array'},r1],level:0},
oneArea: {rule:[r1],level:0},
twoArea: {rule:[r1],level:0},
threeArea: {rule:[r1],level:0},
fiveArea: {rule:[r1],level:0},
nineArea: {rule:[r1],level:0},
elevenArea: {rule:[r1],level:0},
twelveArea: {rule:[r1],level:0},
},
ruleMap: {
0:{
...this.defaultRules,
threeArea: {rule: [r2], level: 4},
fiveArea: {rule: [r3], level: 1},
nineArea: {rule: [r3], level: 1},
twelveArea: {rule: [r3], level: 1},
},
1:{
...this.defaultRules,
threeArea: {rule: [r3], level: 1},
fiveArea: {rule: [r2], level: 4},
nineArea: {rule: [r3], level: 1},
twelveArea: {rule: [r3], level: 1}
},
3:{
...this.defaultRules,
fiveArea: {rule: [r3], level: 1},
threeArea: {rule: [r3], level: 1},
nineArea: {rule: [r2], level: 4},
twelveArea: {rule: [r3], level: 1},
},
4:{
...this.defaultRules,
fiveArea: {rule: [r3], level: 1},
threeArea: {rule: [r3], level: 1},
nineArea: {rule: [r3], level: 1},
twelveArea: {rule: [r2], level: 4},
}
},
phid: '',
categoryList: [],
modes: [
{id: 0, label: '集体自主经营' },
{id: 1, label: '出租经营' },
{id: 3, label: '其他经营方式' },
{id: 4, label: '流转入集体统一经营' }
],
typeList: []
}
},
},
computed: {
// 总计项目金额 oneArea twoArea elevenArea (1)=(2)+(11)
oneArea() {
return Number(this.form.twoArea) + Number(this.form.elevenArea)
},
// (2)=(3)+(5)+(9) threeArea fiveArea nineArea
twoArea() {
return Number(this.form.threeArea) + Number(this.form.fiveArea) + Number(this.form.nineArea) || 0
},
rules(){
let r = this.form.operationMode.reduce((rule,key) => {
Object.entries(this.ruleMap[key]).map(([k,v])=>{
if(rule[k].level < v.level){
rule[k] = v
}
})
return rule
},this.defaultRules)
let rule = Object.entries(r).reduce((map,[key,value])=>{
map[key] = value.rule
return map
},{})
return rule
}
},