emis-frontend/src/views/emis/emisSettleBill/MergeBillForm.vue

<template>
  <div >
    <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
        <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
          <el-col :span="10">
            <el-form-item label="账单名称" prop="settleBillName">
              <el-input v-model="form.settleBillName" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账单号" prop="settleBillNo">
              <el-input v-model="form.settleBillNo" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账单月份" prop="billMonth" >
              <el-input v-model="form.billMonth" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <XdTable
         v-loading="loading"
          border
          size="mini"
          ref="refTable"
          row-key="id"
          :storageName="storageName"
          :data="emisSettleSubBillList"
          :showSearch.sync="showSearch"
          :queryParams="queryParams"
          :total="total"
          @queryTable="getList"
          @selection-change="handleSelectionChange"
          @sort-change="handleSortChange"

          :row-style="tableRowClassName"

          highlight-current-row

           show-summary :summary-method="getSummaries"
          >

     <div slot="toolbar" >
       <el-row :gutter="10" class="mb8">
             <el-col :span="1.5"  >
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 @click="handleAddBillCode"
               >追加运单到此账单</el-button>
             </el-col>
             <el-col :span="1.5" >
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleRemovceBillCode"
               >从账单内删除运单</el-button>
             </el-col>

         </el-row>
     </div>

     <div slot="statInfo" style="font-size: 13px;">
       总票数:<span class="statInfoValue">{{queryStatInfoMap?queryStatInfoMap.totalNum:0}}</span>,
       总费用:<span class="statInfoValue">{{queryStatInfoMap?queryStatInfoMap.totalBillFee:0}}</span>
     </div>

     <el-table-column type="selection" width="55" align="center" />
     <el-table-column :label="$t('运单编号')" align="center" prop="billCode" min-width="130" />
     <el-table-column :label="$t('寄件日期')" align="center" prop="waybillDetail.sendDate" min-width="170" :show-overflow-tooltip="true"/>
     <el-table-column :label="$t('客户名称')" align="center" prop="customerName" min-width="150" :show-overflow-tooltip="true">
       <template slot-scope="scope">
           <span v-if="['2','4','5'].includes(scope.row.waybillDetail.paymentType)" type="normal">{{ scope.row.customerName }}</span>
         </template>
     </el-table-column>
     <el-table-column :label="$t('件数')" align="center" prop="waybillDetail.parcelQty" min-width="80" />
     <el-table-column :label="$t('结算重量')" align="center" prop="waybillDetail.settlementWeight" min-width="80" />
     <el-table-column :label="$t('运费')" align="center" prop="waybillDetail.freight" min-width="80" />

     <el-table-column :label="$t('寄件网点')" align="center" prop="waybillDetail.sendSiteName" min-width="150" :show-overflow-tooltip="true"/>
     <!-- <el-table-column :label="$t('寄件公司')" align="center" prop="waybillDetail.sendCompany" min-width="150" :show-overflow-tooltip="true"/> -->

     <!-- <el-table-column  :label="$t('月结编号')" align="center" prop="customerName" min-width="150" :show-overflow-tooltip="true">
       <template slot-scope="scope">
           <span  type="normal">{{ scope.row.custNo }}</span>
         </template>
     </el-table-column> -->

       <!-- <el-table-column :label="$t('寄件人')" align="center" prop="waybillDetail.sendName" min-width="80" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('实际重量')" align="center" prop="waybillDetail.billWeight" min-width="80" />
       <el-table-column :label="$t('体积')" align="center" prop="waybillDetail.totalVolume" min-width="80" />
       <el-table-column :label="$t('体积重量')" align="center" prop="waybillDetail.volumeWeight" min-width="80" />
       <el-table-column :label="$t('费用备注')" align="center" prop="waybillDetail.feeRemark" min-width="80" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('支付类型')" align="center" prop="waybillDetail.paymentType" min-width="80" :show-overflow-tooltip="true" >
         <template slot-scope="scope">
           <dict-tag :options="dict.type.emis_payment_type" :value="scope.row.waybillDetail.paymentType"/>
         </template>
       </el-table-column> -->
       <!-- <el-table-column :label="$t('录单备注')" align="center" prop="waybillDetail.remark" min-width="80" :show-overflow-tooltip="true" /> -->
       <!-- <el-table-column :label="$t('回款联系人')" align="center" prop="waybillDetail.payee" min-width="100" /> -->
       <!-- <el-table-column :label="$t('销售联系人')" align="center" prop="waybillDetail.salesmen" min-width="100" /> -->


   </XdTable>

      </el-form>
      <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

  </div>
</template>

<script>
import { listEmisSettleBill, getEmisSettleBill, delEmisSettleBill, addEmisSettleBill, updateEmisSettleBill } from "@/api/emis/emisSettleBill";

import { listEmisSettleSubBill} from "@/api/emis/emisSettleSubBill";

export default {
  name: "emisSettleBillForm",
  props:{
    id:{
        type:[Number,Array]
    },
    settleBillNo:{
        type:String
    }
  },
  components: {  },
  dicts: [
  ],
  data() {
    return {

     // 选中数组
     ids: [],
     // 非单个禁用
     single: true,
     // 非多个禁用
     multiple: true,
     // 显示搜索条件
     showSearch: true,
     // 创建时间搜索
     // 总条数
     total: 0,
     // 结算子账单表格数据
     emisSettleSubBillList: [],

      emisSettleBillOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "id不能为空", trigger: "blur" }
        ],
        openBillStatus: [
          { required: true, message: "开票状态不能为空", trigger: "blur" }
        ],
        paymentStatus: [
          { required: true, message: "付款状态不能为空", trigger: "blur" }
        ],
        delFlag: [
          { required: true, message: "删除标志（0代表存在不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      },
      "settleBillNo": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      },


  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
        if(this.id !=null) {
          this.loading = true;
          getEmisSettleBill(this.id).then(response => {
            this.form = response.data;
            this.loading = false;
            this.getSubBillList(this.form.settleBillNo);
          });
        }
        else if(this.settleBillNo){
          this.loading = true;
          getEmisSettleBill(this.settleBillNo).then(response => {
            this.form = response.data;
            this.loading = false;
            this.getSubBillList(this.form.settleBillNo);
          });
        }else{
          this.$modal.msgError("账单不存在");
          this.$emit("on-cancel");
        }
    },
    getSubBillList(settleBillNo) {
     this.loading = true;
      let qParam={
        settleBillNo:settleBillNo
      }
     listEmisSettleSubBill(qParam).then(response => {
       this.emisSettleSubBillList = response.rows;
       this.total = response.total;
       this.loading = false;
     });

     // 查询统计
    //  getQueryStatInfoMap(qParam).then(response => {
    //    this.queryStatInfoMap = response.data;
    //  });

   },


    initSubBillList() {
     this.loading = true;


     listEmisSettleSubBill(this.queryParams).then(response => {
       this.emisSettleSubBillList = response.rows;
       this.total = response.total;
       this.loading = false;
     });

    //    // 查询统计
    //  getQueryStatInfoMap(this.queryParams).then(response => {
    //    this.queryStatInfoMap = response.data;
    //  });

   },
   //指定列求和
   getSummaries(param) {
       const { columns, data } = param;
      //  console.log("===>getSummaries==>",param)
       const sums = [];
       columns.forEach((column, index) => {
             if (index === 0) {
               sums[index] = '合计';
               return;
             }

             if (
               column.property === 'waybillDetail.billWeight'
               ) {
                 const values = data.map(item => Number(item.waybillDetail.billWeight));
                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }

             else if (
               column.property === 'waybillDetail.volumeWeight'

               ) {
                 const values = data.map(item => Number(item.waybillDetail.volumeWeight));

                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }
             else if (
               column.property === 'waybillDetail.freight'

               ) {
                 const values = data.map(item => Number(item.waybillDetail.freight));

                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }

             else if (
               column.property === 'waybillDetail.totalVolume'
               ) {
                 const values = data.map(item => Number(item.waybillDetail.totalVolume));
                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(5); //保留2位小数
               }
             else if(
               column.property === 'waybillDetail.parcelQty'
             ){
                  const values = data.map(item => Number(item.waybillDetail.parcelQty));
                   sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index];
             }
       });
     console.log(sums);
     return sums
   },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        settleBillNo: null,
        settleBillName: null,
        settleType: null,
        settleStartDate: null,
        settleEndDate: null,
        billMonth: null,
        recMoney: null,
        recedMoney: null,
        custNo: null,
        customerCode: null,
        customerName: null,
        siteCode: null,
        siteName: null,
        satisfyMoney: null,
        allowanceMoney: null,
        deductionMoney: null,
        otherMoney: null,
        satisfyReason: null,
        allowanceReason: null,
        deductionReason: null,
        otherReason: null,
        openBillStatus: null,
        paymentStatus: null,
        sendPieceSum: null,
        pieceNumber: null,
        feeWeight: null,
        uncollectedAmount: null,
        sendMoneySum: null,
        refundAmount: null,
        refundMoney: null,
        blConfirm: null,
        confirmDate: null,
        confirmSite: null,
        confirmManCode: null,
        blSiteConfirm: null,
        confirmNote: null,
        siteConfirmDate: null,
        siteConfirmManCode: null,
        siteConfirmNote: null,
        remark: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        createSite: null,
        updateSite: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEmisSettleBill(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addEmisSettleBill(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.$emit("on-changed");
            });
          }
        }
      });
    },

  }
};
</script>