18 changed files with 902 additions and 326 deletions
@ -0,0 +1,168 @@
|
||||
<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> |
||||
Loading…
Reference in new issue