logpm_page/src/components/ArteryPrintTemplate/ArteryPrintTemplate.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="8">条形码</th>
        </tr>
        <tr>
          <th colspan="4">始发站：</th>
          <th colspan="6">经停站：</th>
          <th colspan="8">目的站：</th>
        </tr>
        <tr>
          <th colspan="4">司机：</th>
          <th colspan="2">司机联系电话：</th>
          <th colspan="3">车牌号：</th>
          <th>卸车完成时间： 年 月 日</th>
          <th colspan="8">卸车人员签字</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 rowspan="2">计划件数</th>
          <th rowspan="2">货位</th>
          <th colspan="2">装车产品明细</th>
          <th rowspan="2">合计件数</th>
          <th rowspan="2">卸车件数</th>
          <th rowspan="2">卸车网点</th>
          <th rowspan="2">卸车时间</th>
          <th rowspan="2">异常备注</th>
        </tr>
        <tr>
          <th>品类</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <!-- 值 -->
        <tr>
          <td>序号</td>
          <!-- 发货单位 -->
          <td contenteditable></td>
          <!-- 开单时间 -->
          <td contenteditable></td>
          <!-- 始发仓 -->
          <td contenteditable>始发仓</td>
          <!-- 目的仓 -->
          <td contenteditable>目的仓</td>
          <!-- 收货单位 -->
          <td contenteditable>收货单位</td>
          <!-- 收货人 -->
          <td contenteditable>收货人</td>
          <!-- 收货电话 -->
          <td contenteditable>收货电话</td>
          <!-- 物流单号 -->
          <td>物流单号</td>
          <!-- 合同号 -->
          <td>合同号</td>
          <!-- 计划件数 -->
          <td contenteditable>计划件数</td>
          <!-- 货位 -->
          <td>货位</td>
          <td contenteditable>品类</td>
          <!-- 小计 -->
          <td contenteditable>小计</td>
          <!-- 合计件数 -->
          <td contenteditable>合计件数</td>
          <!-- 卸车件数 -->
          <td contenteditable>卸车件数</td>
          <!-- 卸车网点 -->
          <td contenteditable>卸车网点</td>
          <!-- 卸车时间 -->
          <td contenteditable>卸车时间</td>
          <!-- 异常备注 -->
          <td contenteditable>异常备注</td>
        </tr>

        <!-- 合计行 -->
        <tr>
          <th colspan="10">合计</th>
          <!-- 合计 -- 计划件数 -->
          <td>计划件数</td>
          <td></td>
          <td></td>
          <td></td>
          <!-- 合计件数 -->
          <td contenteditable></td>
          <!-- 卸车件数 -->
          <td contenteditable>卸车件数</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="19">
            <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 } from 'vue';

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

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

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

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