element ui的from组件对双层数组做自定义校验

能当饭吃么你说_

已于 2023-05-11 10:05:00 修改

阅读量141

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-05-09 16:30:43 首次发布

本文链接：https://blog.csdn.net/qq_56162766/article/details/130582720

版权

实现：占比相加等于100%，并且改变占比时，金额也要改变(收款金额*占比=金额)

代码：

数组结构

{
    "code": 0,
    "message": "成功",
    "content": {
        "result": "0",
        "resultMessage": "成功",
        "content": {
            "count": null,
            "collectionProcessSettlementDTOList": null,
            "collectionProcessSettlementDetailDTO": {
                "id": 126,
                "settlementBaleName": "5.9李晓雅第一次",
                "discount": 90.0,
                "remark": "",
                "deptCollectionProcessDTOS": null,
                "projectCountProjectSystemDTOS": [
                    {
                        "id": 593,
                        "invoiceId": null,
                        "contractId": null,
                        "collectionTerms": "5.9李晓雅",
                        "collectionAmount": 100.0000,
                        "collectionRadio": null,
                        "billingCondition": 0,
                        "returnCondition": 0,
                        "predictFinishDate": "2023-05-11",
                        "actualCollectionDate": null,
                        "deptId": null,
                        "deptName": null,
                        "isReceivable": null,
                        "returnCollectionProcess": null,
                        "returnDate": null,
                        "collectionProgressStatus": 3,
                        "reimbursementProgress": null,
                        "projectId": 481,
                        "projectName": "zhn交付项目制39",
                        "inclusive": 0,
                        "returnAmountProgress": null,
                        "payableAmount": null,
                        "deptWorkloadList": [
                            {
                                "id": 169,
                                "dept": "zhn项目制开发组",
                                "deptId": 629440393,
                                "radio": 50.0,
                                "workload": null,
                                "amount": 50.0000,
                                "projectCountId": 593,
                                "projectType": 3,
                                "totalSettlementWorkload": null,
                                "totalSettlementAmount": null,
                                "remainWorkload": 0.0,
                                "remainAmount": 0.0000,
                                "confirmedAmount": 45.0000
                            },
                            {
                                "id": 170,
                                "dept": "zhn项目制39",
                                "deptId": 833872177,
                                "radio": 50.0,
                                "workload": null,
                                "amount": 50.0000,
                                "projectCountId": 593,
                                "projectType": 3,
                                "totalSettlementWorkload": null,
                                "totalSettlementAmount": null,
                                "remainWorkload": 0.0,
                                "remainAmount": 0.0000,
                                "confirmedAmount": 45.0000
                            }
                        ],
                        "attachmentList": null,
                        "settlementBaleId": 126,
                        "radio": null,
                        "confirmedAmount": null
                    }
                ],
                "projectCountWorkOrderNewDTOS": null,
                "attachmentList": [
                    
                ]
            }
        }
    }
}

html部分

<el-row v-for="(item, index) in workOrderSettlement.ProjectCountProjectSystemDTO" :key="index"
          v-if="projectType == 3">
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="收款条件：" :prop="`ProjectCountProjectSystemDTO.${index}.collectionTerms`"
                :rules="rules.collectionTerms">
                <el-select v-model="item.collectionTerms" placeholder="暂无" disabled style="width: 200px"></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收款金额（元）：" :prop="`ProjectCountProjectSystemDTO.${index}.collectionAmount`"
                :rules="rules.collectionAmount">
                <el-input type="number" v-model="item.collectionAmount" disabled style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-for="(item1, index1) in item.deptWorkloadList" :key="index1">
            <el-col :span="6">
              <el-form-item label="项目组名称：" prop="deptName">
                <el-select v-model="item1.dept" placeholder="暂无" disabled style="width: 200px"></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="占比(%)："
                :prop="`ProjectCountProjectSystemDTO.${index}.deptWorkloadList.${index1}.radio`" :rules="rules.radio">
                <el-input type="number" v-model="item1.radio" @input="radioChange(index, index1)"
                  style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="金额(元)：" prop="amount">
                <el-input type="number" v-model="item1.amount" disabled style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>

js部分

 data() {
    var radioValidator = (rule, value, callback) => {
      // 拿到外层数组的索引
      var arrindex = rule.field.slice(29, 30)
      // 占比数组
      var radioArr = []
      this.workOrderSettlement.ProjectCountProjectSystemDTO[arrindex].deptWorkloadList.map(item => {
        radioArr.push(Number(item.radio))
      })
      // 占比总和
      var radioSum = 0
      for (let i = 0; i < radioArr.length; i++) {
        radioSum += radioArr[i]
      }
      if (value == '') {
        callback(new Error('占比不能为空'))
      } else if (radioSum != 100) {
        callback(new Error('总占比不等于100%'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        radio: [{ validator: radioValidator, trigger: 'blur' }],
        collectionTerms: [{ required: true, message: '请输入收款条件', trigger: 'blur' }]
      },
    }
}

占比改变金额也相应改变

radioChange(index, index1) {
      // 金额=占比*收款金额
      this.workOrderSettlement.ProjectCountProjectSystemDTO[index].deptWorkloadList[index1].amount =
        this.workOrderSettlement.ProjectCountProjectSystemDTO[index].deptWorkloadList[index1].radio *
        0.01 *
        this.workOrderSettlement.ProjectCountProjectSystemDTO[index].collectionAmount
    }