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 src="" alt="暂无图片" />
          </th>
          <th colspan="6">干线装载清单</th>
          <th :colspan="3 + goodsTitleList.length + 1">
            <img id="imgcode" />
            <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>
        <!-- 值 -->
        <tr v-for="(value, index) in renderInfo.mainList" style="word-break: break-all">
          <td>{{ index + 1 }}</td>
          <!-- 发货单位 -->
          <td contenteditable>{{ value.shipper || '' }}</td>
          <!-- 开单时间 -->
          <td contenteditable>{{ value.createTime || '' }}</td>
          <!-- 收货单位 -->
          <td contenteditable>{{ value.consignee }}</td>
          <!-- 收货人 -->
          <td contenteditable>{{ value.consigneeName }}</td>
          <!-- 收货电话 -->
          <td contenteditable>{{ value.consigneeMobile }}</td>
          <!-- 物流单号 -->
          <td>{{ 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>

        <!-- 合计行 -->
        <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="14 + goodsTitleList.length">
            <span style="display: inline-block; margin-right: 20px"> 投诉电话：4000184668 </span>
            <span style="display: inline-block; margin-right: 20px"> 营业部电话：4000184668 </span>
            <span style="display: inline-block; margin-right: 20px"> 系统单调度：4000184668 </span>
          </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);

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

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

  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>