tms-erp-web/src/components/invoice-write-off-table/main.vue

<template>
  <div class="invoice-write-off-table">
    <el-table v-loading="loading" :data="rows" border>
      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
      <el-table-column prop="arrivalAddress" label="到货地址" min-width="150" align="center" show-overflow-tooltip>
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.arrivalAddress) }}</template>
      </el-table-column>
      <el-table-column prop="actualDepartureTime" label="实际发货时间" width="150" align="center">
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : formatDateTime(row.actualDepartureTime) }}</template>
      </el-table-column>
      <el-table-column prop="completionTime" label="实际完成时间" width="150" align="center">
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : formatDateTime(row.completionTime) }}</template>
      </el-table-column>
      <el-table-column prop="transportType" label="运输类型" width="100" align="center">
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.transportType) }}</template>
      </el-table-column>
      <el-table-column prop="cargoName" label="货物名称" min-width="110" align="center" show-overflow-tooltip>
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.cargoName) }}</template>
      </el-table-column>
      <el-table-column prop="cargoType" label="货物类型" min-width="110" align="center" show-overflow-tooltip>
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.cargoType) }}</template>
      </el-table-column>
      <el-table-column prop="transportQuantity" label="运输总量" width="110" align="center">
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.transportQuantity) }}</template>
      </el-table-column>
      <el-table-column prop="mileage" label="里程 (KM)" width="100" align="center">
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.mileage) }}</template>
      </el-table-column>
      <el-table-column prop="batchNo" label="批次号" width="100" align="center" show-overflow-tooltip>
        <template #default="{ row }">{{ row.manualFlag === 1 ? '—' : displayValue(row.batchNo) }}</template>
      </el-table-column>
      <el-table-column prop="invoiceNo" label="发票号" min-width="160" align="center" show-overflow-tooltip />
      <!-- 按费用项目动态分组列头，每组三列：结算金额/未开票费用/本次开票金额 -->
      <el-table-column v-for="group in feeItemGroups" :key="group.name" :label="group.name" align="center">
        <el-table-column :label="'结算金额'" width="110" align="center">
          <template #default="{ row }">{{ formatMoney(row.settlementAmounts[group.name]) }}</template>
        </el-table-column>
        <el-table-column :label="'未开票费用'" width="110" align="center">
          <template #default="{ row }">{{ formatMoney(row.beforeRemainAmounts[group.name]) }}</template>
        </el-table-column>
        <el-table-column :label="'本次开票金额'" width="120" align="center">
          <template #default="{ row }">{{ formatMoney(row.writeOffAmounts[group.name]) }}</template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '@/axios';

/**
 * 发票冲销明细公共表格（开票申请/收票登记/付款申请通用）
 * 数据源：/blade-transport/invoice-write-off/list?bizType=&bizId=
 * 行按运单完成时间升序（先完成的运单先冲销），手动添加费用无运输信息显示"—"
 */
export default {
  name: 'InvoiceWriteOffTable',
  props: {
    // invoice_apply-开票申请 receipt-收票登记 payment_receipt-付款申请生成的收票单
    bizType: { type: String, required: true },
    bizId: { type: [String, Number], default: null },
  },
  data() {
    return {
      loading: false,
      rows: [],
    };
  },
  computed: {
    feeItemGroups() {
      const names = [];
      this.rows.forEach(row => {
        if (row.feeItemName && !names.includes(row.feeItemName)) names.push(row.feeItemName);
      });
      return names.map(name => ({ name }));
    },
  },
  watch: {
    bizId: {
      immediate: true,
      handler(value) {
        if (value) this.load();
      },
    },
  },
  methods: {
    load() {
      this.loading = true;
      request({
        url: '/blade-transport/invoice-write-off/list',
        method: 'get',
        params: { bizType: this.bizType, bizId: this.bizId },
      })
        .then(res => {
          const list = res.data.data || [];
          // 同一运单同一费用项目可能被多张发票分段冲抵（跨发票拆分），按运单+费用项目归并展示
          const merged = new Map();
          list.forEach(row => {
            const key = `${row.waybillId || row.summaryFeeId || ''}|${row.feeItemName}`;
            if (!merged.has(key)) {
              merged.set(key, {
                ...row,
                settlementAmounts: { [row.feeItemName]: row.settlementAmount },
                beforeRemainAmounts: { [row.feeItemName]: row.beforeRemainAmount },
                writeOffAmounts: { [row.feeItemName]: row.writeOffAmount },
              });
              return;
            }
            const target = merged.get(key);
            target.writeOffAmounts[row.feeItemName] = Number(target.writeOffAmounts[row.feeItemName] || 0) + Number(row.writeOffAmount || 0);
            // 未开票费用取首段冲抵前余额，发票号追加展示
            if (!String(target.invoiceNo).includes(row.invoiceNo)) {
              target.invoiceNo = `${target.invoiceNo},${row.invoiceNo}`;
            }
          });
          this.rows = [...merged.values()];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    displayValue(value) {
      return value === null || value === undefined || value === '' ? '-' : value;
    },
    formatDateTime(value) {
      if (!value) return '-';
      return this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss');
    },
    formatMoney(value) {
      return Number(value || 0).toFixed(2);
    },
  },
};
</script>