2 changed files with 10 additions and 598 deletions
@ -1,599 +1,11 @@
|
||||
<template> |
||||
<div> |
||||
<div style="padding: 0 30px 0 20px; box-sizing: border-box;"> |
||||
<!-- 顶部 --> |
||||
<div style="width: 100%; display: flex; justify-content: space-between"> |
||||
<!-- logo 站位 --> |
||||
<div style="display: flex; flex-direction: column;"> |
||||
<img style="height: 40px;" src="http://8.137.14.82:9000/htlogpm/upload/20230920/huitonglogo.png" alt=""> |
||||
<div style="font-size: 12px;">车次号: {{data.Trainnumber}}</div> |
||||
</div> |
||||
<h3 |
||||
style=" |
||||
margin: 0; |
||||
margin-bottom: 30px; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
汇通运输${配送仓库}配送清单(市配) |
||||
</h3> |
||||
<div style=""> |
||||
<img style="height: 60px; width: 60px" src="${配送单二维码}" alt="配送单二维码" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 表格头部 --> |
||||
<div style="width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 12px;"> |
||||
<div>配送单号:{{data.Trainnumber}}</div> |
||||
<div>送货日期:{{data.Trainnumber}}</div> |
||||
</div> |
||||
|
||||
<!-- 表格内容 --> |
||||
<table align="center" style="width: 100%; font-size: 12px; border-collapse: collapse"> |
||||
<!-- 第一行 --> |
||||
<tr align="center" style="width: 100%"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="2" |
||||
> |
||||
商场名称 |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
${商场名称} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
电话 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
${电话} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 15%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
预约单送货日期 |
||||
</td> |
||||
<td colspan="8" style="border: 1px solid #000; box-sizing: border-box; width: 35%"> |
||||
${预约单送货日期} |
||||
</td> |
||||
</tr> |
||||
|
||||
<!-- 第二行 --> |
||||
<tr align="center" style="width: 100%"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="2" |
||||
> |
||||
客户名称 |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
${客户名称} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
客户电话 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
${客户电话} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
送货地址 |
||||
</td> |
||||
<td colspan="8" style="border: 1px solid #000; box-sizing: border-box; width: 40%"> |
||||
${送货地址} |
||||
</td> |
||||
</tr> |
||||
|
||||
<!-- 定制品 --> |
||||
<tr align="center"> |
||||
<td colspan="20" style="font-weight: bold; border: 1px solid #000">定制品</td> |
||||
</tr> |
||||
|
||||
<!-- 标题 --> |
||||
<tr align="center" style="width: 100%; font-weight: bold"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 5%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="1" |
||||
> |
||||
序号 |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
合同号 |
||||
</td> |
||||
<td |
||||
colspan="4" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
产品名称 |
||||
</td> |
||||
<td colspan="1" style="border: 1px solid #000; box-sizing: border-box; width: 5%"> |
||||
单位 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
物料名称 |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
数量 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
备货区 |
||||
</td> |
||||
<td colspan="4" style="border: 1px solid #000; box-sizing: border-box; width: 20%"> |
||||
货位 |
||||
</td> |
||||
</tr> |
||||
|
||||
<!-- 数据 --> |
||||
<template v-for="(item, index) in data.CustomizedProducts" :key="index"> |
||||
<tr align="center" style="width: 100%; font-weight: bold"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 5%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="1" |
||||
> |
||||
${item_index+1} |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
<!-- ${item.合同号!''} --> |
||||
{{item.合同号}} |
||||
</td> |
||||
<td |
||||
colspan="4" |
||||
style=" |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
<!-- ${item.产品名称!''} --> |
||||
{{item.产品名称}} |
||||
</td> |
||||
<td colspan="1" style="border: 1px solid #000; box-sizing: border-box; width: 5%; line-height: 1rem;" contenteditable="true"> |
||||
<!-- ${item.单位!''} --> |
||||
{{item.b }} |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%" contenteditable="true" > |
||||
${item.物料名称!''} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
<!-- ${item.数量!''} --> |
||||
{{item.c }} |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
<!-- ${item.备货区!''} --> |
||||
{{item.d }} |
||||
</td> |
||||
<td colspan="4" style="border: 1px solid #000; box-sizing: border-box; width: 20%"> |
||||
<!-- ${item.货位!''} --> |
||||
{{item.e }} |
||||
</td> |
||||
</tr> |
||||
</template> |
||||
|
||||
|
||||
<!-- 合计 --> |
||||
<tr align="center" style="width: 100%"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="10" |
||||
> |
||||
合计(件){{ 1 }} |
||||
</td> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
" |
||||
colspan="10" |
||||
> |
||||
<!-- ${定制品合计} --> |
||||
定制品合计{{2 }} |
||||
</td> |
||||
</tr> |
||||
</#if> |
||||
|
||||
<#if 库存品集合?has_content> |
||||
<!-- 库存品 --> |
||||
<tr align="center"> |
||||
<td colspan="20" style="font-weight: bold; border: 1px solid #000">库存品</td> |
||||
</tr> |
||||
|
||||
<!-- 标题 --> |
||||
<tr align="center" style="width: 100%; font-weight: bold"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 5%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="1" |
||||
> |
||||
序号 |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
批次号 |
||||
</td> |
||||
<td |
||||
colspan="4" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
产品名称 |
||||
</td> |
||||
<td colspan="1" style="border: 1px solid #000; box-sizing: border-box; width: 5%"> |
||||
单位 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
物料名称 |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
数量 |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
备货区 |
||||
</td> |
||||
<td colspan="4" style="border: 1px solid #000; box-sizing: border-box; width: 20%"> |
||||
货位 |
||||
</td> |
||||
</tr> |
||||
|
||||
<!-- 数据 --> |
||||
<#list 库存品集合 as value> |
||||
<tr align="center" style="width: 100%; font-weight: bold"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 5%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="1" |
||||
> |
||||
${value_index+1} |
||||
</td> |
||||
<td style="border: 1px solid #000; box-sizing: border-box; width: 20%" colspan="4"> |
||||
${value.批次号!''} |
||||
</td> |
||||
<td |
||||
colspan="4" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
${value.产品名称!''} |
||||
</td> |
||||
<td colspan="1" style="border: 1px solid #000; box-sizing: border-box; width: 5%"> |
||||
${value.单位!''} |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
${value.物料名称!''} |
||||
</td> |
||||
<td |
||||
colspan="2" |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
width: 10%; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
> |
||||
${value.数量!''} |
||||
</td> |
||||
<td colspan="2" style="border: 1px solid #000; box-sizing: border-box; width: 10%"> |
||||
${value.备货区!''} |
||||
</td> |
||||
<td colspan="4" style="border: 1px solid #000; box-sizing: border-box; width: 20%"> |
||||
${value.货位!''} |
||||
</td> |
||||
</tr> |
||||
</#list> |
||||
|
||||
<!-- 合计 --> |
||||
<tr align="center" style="width: 100%"> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
" |
||||
colspan="10" |
||||
> |
||||
合计 |
||||
</td> |
||||
<td |
||||
style=" |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
border: 1px solid #000; |
||||
box-sizing: border-box; |
||||
" |
||||
colspan="10" |
||||
> |
||||
${库存品合计} |
||||
</td> |
||||
</tr> |
||||
</#if> |
||||
|
||||
<tr align="center"> |
||||
<td colspan="2" style="font-weight: bold; border: 1px solid #000">承运商</td> |
||||
<td colspan="4" style="border: 1px solid #000">${承运商}</td> |
||||
<td colspan="2" style="font-weight: bold; border: 1px solid #000">配送仓库</td> |
||||
<td colspan="4" style="width: 20%; border: 1px solid #000">${配送仓库}</td> |
||||
<td colspan="2" style="font-weight: bold; width: 10%; border: 1px solid #000"> |
||||
是否加急 |
||||
</td> |
||||
<td colspan="6" style="width: 20%; border: 1px solid #000"> |
||||
<div |
||||
style="width: 100%; display: flex; align-items: center; justify-content: space-around" |
||||
> |
||||
<div> |
||||
<input type="checkbox" /> |
||||
是 |
||||
</div> |
||||
<div> |
||||
<input type="checkbox" /> |
||||
否 |
||||
</div> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr align="center"> |
||||
<td colspan="2" style="font-weight: bold; border: 1px solid #000">送货司机</td> |
||||
<td colspan="4" style="border: 1px solid #000">${送货司机}</td> |
||||
<td colspan="2" style="font-weight: bold; border: 1px solid #000">车牌号</td> |
||||
<td colspan="4" style="border: 1px solid #000">${车牌号}</td> |
||||
<td colspan="4" style="font-weight: bold; border: 1px solid #000">配送人员签字</td> |
||||
<td colspan="4" style="border: 1px solid #000"></td> |
||||
</tr> |
||||
<tr style="width: 100%;"> |
||||
<td colspan="2" style="width: 10%; font-weight: bold; text-align: center; border: 1px solid #000"> |
||||
增值服务 |
||||
</td> |
||||
<td colspan="4" style="width: 20%; border: 1px solid #000; vertical-align: top"> |
||||
<span> |
||||
<input type="checkbox" /> |
||||
超区 |
||||
</span> |
||||
<span>超区公里:___</span> |
||||
</td> |
||||
<td |
||||
colspan="4" |
||||
style="border: 1px solid #000; vertical-align: top; width: 20%;" |
||||
> |
||||
<span> |
||||
<input type="checkbox" /> |
||||
搬楼 |
||||
</span> |
||||
<span> |
||||
<sapn>层数:___</sapn> |
||||
<span>件数:___</span> |
||||
</span> |
||||
</td> |
||||
<td colspan="5" style="width: 25%;border: 1px solid #000; vertical-align: top"> |
||||
<sapn> |
||||
<input type="checkbox" /> |
||||
平移 |
||||
</sapn> |
||||
<span>距离:___m</span> |
||||
<span>件数:___</span> |
||||
</td> |
||||
<td colspan="5" style="width: 25%; border: 1px solid #000; vertical-align: top"> |
||||
<span> |
||||
<input type="checkbox" /> |
||||
其他 |
||||
</span> |
||||
<span>备注:___</span> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="2" style="font-weight: bold; text-align: center; border: 1px solid #000"> |
||||
签收情况 |
||||
</td> |
||||
<td colspan="18" style="border: 1px solid #000"> |
||||
应收   件,实收   件;外包装是否有破损( |
||||
<input type="checkbox" /> |
||||
是  |
||||
<input type="checkbox" /> |
||||
否 破损件数:    件) |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="2" style="font-weight: bold; border: 1px solid #000; text-align: center"> |
||||
服务评价 |
||||
</td> |
||||
<td colspan="18" style="border: 1px solid #000"> |
||||
<div style="display: flex"> |
||||
<div style="margin-left: 15px"> |
||||
<input type="checkbox" /> |
||||
十分满意 |
||||
</div> |
||||
<div style="margin-left: 15px"> |
||||
<input type="checkbox" /> |
||||
比较满意 |
||||
</div> |
||||
<div style="margin-left: 15px"> |
||||
<input type="checkbox" /> |
||||
一般 |
||||
</div> |
||||
<div style="margin-left: 15px"> |
||||
<input type="checkbox" /> |
||||
不满意 |
||||
</div> |
||||
<div style="margin-left: 15px">不满意理由:</div> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<!-- 备注 --> |
||||
<tr> |
||||
<td colspan="20" style="width: 100%;height: 40px; border: 1px solid #000; text-align: left;"> |
||||
<div style=" width: 100%; height: 100%;"> |
||||
<div style="width: 100%; flex: none; font-weight: bold;"> |
||||
备注:${备注} |
||||
</div> |
||||
<div style="display:flex; justify-content: end; width: 100%;"> |
||||
<div style="width: 60%;"></div> |
||||
<div style="width: 20%;">客户签名:</div> |
||||
<div style="width: 20%;">签收时间:   年  月  日</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, reactive, watch, onMounted } from 'vue' |
||||
const data=ref({ |
||||
Trainnumber:'123123142', |
||||
CustomizedProducts:[ |
||||
{ |
||||
合同号:1, |
||||
产品名称:2, |
||||
单位:3, |
||||
物料名称:4, |
||||
数量:5, |
||||
备货区:5, |
||||
货位:5, |
||||
} |
||||
],//定制品 |
||||
|
||||
}) |
||||
|
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
|
||||
</style> |
Loading…
Reference in new issue