表格合计逻辑

小陈同学，，

已于 2022-09-02 14:30:53 修改

阅读量170

点赞数

分类专栏： vue3.0 文章标签：前端 vue.js

于 2022-08-21 16:30:36 首次发布

本文链接：https://blog.csdn.net/ping_lvy/article/details/126451295

版权

vue3.0 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

保存的时候不能提交合计行：

    /** 保存 */
    const billSave = async () => {
          contractData.formData.pmContract.process_status = 0;

          if (contractData.dataSource.pmContractPayPlanList.length > 0) {
            contractData.dataSource.pmContractPayPlanList =
              contractData.dataSource.pmContractPayPlanList.filter((item: any) => {
                return item.pay_plan != '合计';
              });
          }

添加一行时：

const addPlan = async (event: any) => {     
 if (stageDes.length != 0) {
        (contractData.dataSource.pmContractPayPlanList as any).push({
          // pay_plan: contractData.dataSource.pmContractPayPlanList.length + 1,
          stage_msg: stageDes[0].value,
        });
        addPlanSum();
      }
}

  /** 添加付款计划合计行 */
    const addPlanSum = () => {
      let pay_percentage = 0;
      let contract_amount = 0;
      let payable_money = 0;
      let amount_paid = 0;
      
      //先把合计那行清除
      contractData.dataSource.pmContractPayPlanList =
        contractData.dataSource.pmContractPayPlanList.filter((item: any) => {
          return item.pay_plan != '合计';
        });

      contractData.dataSource.pmContractPayPlanList.forEach((item: any, index: number) => {
        item.pay_plan = ++index;
        pay_percentage += Number(item.pay_percentage || 0);
        contract_amount += Number(item.contract_amount || 0);
        payable_money += Number(item.payable_money || 0);
        amount_paid += Number(item.amount_paid || 0);
        // contract_amount = contract_amount + Number(item.contract_amount || 0);

        //从数据库取出时可能是 undefined （定义后没赋值）
        //Number(undefined) 为 NaN  undefined||0  是 0
      }); 

      if (contractData.dataSource.pmContractPayPlanList.length > 0) {
        (contractData.dataSource.pmContractPayPlanList as any).push({
          noEditor: true,
          isDelete: false,
          stage_msg: '',
          pay_date: '',
          pay_plan: '合计',
          pay_percentage: pay_percentage,
          contract_amount: contract_amount,
          payable_money: payable_money,
          amount_paid: amount_paid,
        });
      }
    };

实时结算：

有一个监听事件：tableFormChange

    /** 监听表格的输入框变化事件 */
    const tableFormChange = (column: any, record: any, val: any) => {
      if (
        column.dataIndex === 'pay_percentage' ||
        column.dataIndex === 'contract_amount' ||
        column.dataIndex === 'payable_money' ||
        column.dataIndex === 'amount_paid'
      ) {
        addPlanSum();
      }
    };

加一条数据时

    const addRow = (dataSource: any, getAttribute: any) => {
      if (contractData.formData.baseContractDTO.payment_type) {
        //取id
        let id = '';
        paymentTypeList.value.forEach((item: any) => {
          if (contractData.formData.baseContractDTO.payment_type == item.code) {
            id = item.id;
          }
        });
        addPlan(id);
      } else {
        message.info('请选择支付形式');
      }
    };

减一条数据时

    const deleteRow = (index: any, record: any, dataSource: any) => {
      dataSource.splice(index, 1);
      addPlanSum();
    };

回显

        if (res.data.baseContractPayplanDTOS) {
          let pay_percentage = 0;
          let contract_amount = 0;
          let payable_money = 0;
          let amount_paid = 0;
          contractData.dataSource.baseContractPayplanDTOS = res.data.baseContractPayplanDTOS.map(
            (item: any, index: number) => {
              item.pay_plan = ++index;
              item.isDelete = false;
              pay_percentage += Number(item.pay_percentage || 0);
              contract_amount += Number(item.contract_amount || 0);
              payable_money += Number(item.payable_money || 0);
              amount_paid += Number(item.amount_paid || 0);
              return item;
            },
          );

          if (contractData.dataSource.baseContractPayplanDTOS.length > 0) {
            (contractData.dataSource.baseContractPayplanDTOS as any).push({
              noEditor: true,
              isDelete: false,
              stage_msg: '',
              pay_date: '',
              pay_plan: '合计',
              pay_percentage: pay_percentage,
              contract_amount: contract_amount,
              payable_money: payable_money,
              amount_paid: amount_paid,
            });
          }
        }