logpm_page/src/components/TripartiteTransferPrintTemplate/TripartiteTransferPrintTemplate.vue

<template>
  <div>
    <table
      border="1"
      style="width: 100%; text-align: center; border-collapse: collapse; border-spacing: 0"
    >
      <thead>
        <tr>
          <th colspan="4">
            <img style="height: 40px" src="../../../public/img/htlogo.png" alt="暂无图片" />
          </th>
          <th colspan="6" style="font-size: 20px">中转装载清单</th>
          <th :colspan="3 + goodsTitleList.length + 1">
            <img id="imgcode" :src="renderInfo.carsNoBase64" />
            <div>{{ renderInfo.carsNo }}</div>
          </th>
        </tr>
        <tr>
          <th colspan="4">始发站：{{ renderInfo.startWarehouseName }}</th>
          <th colspan="6">
            经停站：{{
              renderInfo.endWarehouseNames.slice(0, renderInfo.endWarehouseNames.length - 1)[0] ||
              ''
            }}
          </th>
          <th :colspan="3 + goodsTitleList.length + 1">
            目的站：{{ renderInfo.endWarehouseNames.slice(-1)[0] }}
          </th>
        </tr>
        <tr>
          <th colspan="4">承运商：{{ renderInfo.carrierName || '' }}</th>
          <th colspan="2">承运商联系电话：{{ renderInfo.assistantMobile || '' }}</th>
          <th colspan="2">承运单号：{{ renderInfo.carrierOrderCode || '' }}</th>
          <th colspan="2">卸车完成时间： {{ renderInfo.unloadDate || '年  月  日' }}</th>
          <th :colspan="3 + goodsTitleList.length + 1">卸车人员签字</th>
        </tr>
        <tr>
          <th rowspan="2">序号</th>
          <th rowspan="2">发货单位</th>
          <th rowspan="2">开单时间</th>
          <th rowspan="2">收货单位</th>
          <th rowspan="2">收货人</th>
          <th rowspan="2">收货电话</th>
          <th rowspan="2">物流单号</th>
          <th rowspan="2">合同号</th>
          <th rowspan="2">计划件数</th>
          <th rowspan="2">货位</th>
          <th :colspan="goodsTitleList.length + 1">装车产品明细</th>
          <th rowspan="2">合计件数</th>
          <th rowspan="2">卸车件数</th>
          <th rowspan="2">异常备注</th>
        </tr>
        <tr>
          <th v-for="item in goodsTitleList" :key="item">{{ item }}</th>

          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <!-- 值 -->
        <template v-if="renderInfo.mainList">
          <tr v-for="(value, index) in renderInfo.mainList" style="word-break: break-all">
            <td>{{ index + 1 }}</td>
            <!-- 发货单位 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex" contenteditable>
              {{ value.shipper || '' }}
            </td>
            <!-- 开单时间 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex" contenteditable>
              {{ value.createTime || '' }}
            </td>
            <!-- 收货单位 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex" contenteditable>
              {{ value.consignee }}
            </td>
            <!-- 收货人 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex" contenteditable>
              {{ value.consigneeName }}
            </td>
            <!-- 收货电话 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex" contenteditable>
              {{ value.consigneeMobile }}
            </td>
            <!-- 物流单号 -->
            <td v-if="value.mergeColumnIndex" :rowspan="value.mergeColumnIndex">
              {{ value.waybillNo }}
            </td>
            <!-- 合同号 -->
            <td>{{ value.orderCode }}</td>
            <!-- 计划件数 -->
            <td contenteditable>{{ value.planNum }}</td>
            <!-- 货位 -->
            <td></td>
            <td contenteditable v-for="item in goodsTitleList">
              {{ (value.goodsList.find(val => val.goodsName === item) || {}).num || '' }}
            </td>
            <!-- 小计 -->
            <td contenteditable>{{ value.smallTotal }}</td>
            <!-- 合计件数 -->
            <td contenteditable>{{ value.smallTotal }}</td>
            <!-- 卸车件数 -->
            <td contenteditable>{{ value.unloadNum }}</td>
            <!-- 异常备注 -->
            <td contenteditable></td>
          </tr>
        </template>

        <!-- 合计行 -->
        <tr>
          <th colspan="8">合计</th>
          <!-- 合计 -- 计划件数 -->
          <td contenteditable>{{ totalPlanNum }}</td>
          <td></td>
          <td contenteditable v-for="item in goodsTitleList"></td>
          <td></td>
          <!-- 合计件数 -->
          <td contenteditable>{{ totalNum }}</td>
          <!-- 卸车件数 -->
          <td contenteditable>{{ totalUnLoadNum }}</td>
          <td></td>
        </tr>
        <tr>
          <td :colspan="5">投诉电话：4000184668</td>

          <td :colspan="5">营业部售后电话：</td>

          <td :colspan="4 + goodsTitleList.length">系统单调度：</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, reactive } from 'vue';

const props = defineProps(['waybillInfo']);

/** 运单信息 */
const { waybillInfo } = props;

/** 渲染数据 */
const renderInfo = ref<any>({});
/** 货物名称list */
const goodsTitleList = reactive([]);
/** 总件数 */
const totalNum = ref(0);
/** 卸车总数 */
const totalUnLoadNum = ref(0);
/** 计划中暑 */
const totalPlanNum = ref(0);

renderInfo.value = waybillInfo;

/** 是否显示金额统计 */
const isShowTotal = ref(false);

// 合并起始索引
let mergeStartIndex = 0;
// 比对值
let comparisonValue = '';

const handleMerge = (startIndex: number, endIndex: number, data: {}) => {
  for (let index = startIndex; index < endIndex; index++) {
    const value = data[index];

    if (index === startIndex) value.mergeColumnIndex = endIndex - startIndex;
    else {
      value.mergeColumnIndex = 0;
    }
  }
};

renderInfo.value.endWarehouseNames = renderInfo.value.endWarehouseNames.split(',');
for (let index = 0; index < renderInfo.value.mainList.length; index++) {
  const element = renderInfo.value.mainList[index];

  if (index === 0) {
    comparisonValue = element.waybillNo;
    element.mergeColumnIndex = 1;
  }

  totalNum.value += element.smallTotal || 0;
  totalUnLoadNum.value += element.unloadNum || 0;
  totalPlanNum.value += element.planNum || 0;

  if (element.waybillNo !== comparisonValue) {
    // if (index === 1) mergeStartIndex = 1;
    comparisonValue = element.waybillNo;
    handleMerge(mergeStartIndex, index, renderInfo.value.mainList);
    mergeStartIndex = index;

    if (index === renderInfo.value.mainList.length - 1) {
      handleMerge(mergeStartIndex, index + 1, renderInfo.value.mainList);
    }
    // 最后一位特殊处理
  } else if (index === renderInfo.value.mainList.length - 1) {
    handleMerge(mergeStartIndex, index + 1, renderInfo.value.mainList);
  }

  if (element.goodsList && element.goodsList.length > 0) {
    for (let i = 0; i < element.goodsList.length; i++) {
      const item = element.goodsList[i];

      if (!goodsTitleList.includes(item.goodsName)) goodsTitleList.push(item.goodsName);
    }
  }
}

console.log('waybillInfo :>> ', waybillInfo);
</script>

<style lang="scss" scoped>
.waybillPrintTemplate_container {
  width: 100%;
}
</style>