850 lines
19 KiB
Vue
850 lines
19 KiB
Vue
<!-- 打印摸版 -->
|
||
<template lang="">
|
||
<div>
|
||
<div v-for="(idsItem, num) in printData.ids" :key="num">
|
||
<div>
|
||
<!-- 表头 -->
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
overflow-y: hidden;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
"
|
||
:id="'companyTilte' + num"
|
||
>
|
||
<div style="width: 100%; text-align: center">
|
||
<span
|
||
style="font-size: 18px; margin-top: 30px"
|
||
v-if="
|
||
printData.orderName !== '送货单' &&
|
||
printData.orderName !== '备料订单'
|
||
"
|
||
>{{
|
||
userInfo.identity == 1 || userInfo.identity == 3
|
||
? userInfo.orgName
|
||
: userInfo.customerName
|
||
}}</span
|
||
>
|
||
|
||
<h1
|
||
style="
|
||
font-size: 20px;
|
||
margin-top: 10px;
|
||
margin-bottom: 20px;
|
||
"
|
||
>
|
||
{{ printData.orderName }}
|
||
</h1>
|
||
<hr style="border: 1px soild #000" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
:id="'headhtml' + num"
|
||
style="
|
||
width: 100%;
|
||
overflow-y: hidden;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<!--生产用料清单-->
|
||
<div
|
||
style="
|
||
margin: 20px 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
"
|
||
v-if="printData.orderName === '生产用料清单'"
|
||
>
|
||
<div
|
||
id="head1"
|
||
style="margin-bottom: 3px; word-break: break-all"
|
||
>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>销售订单号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].salBillNo
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>生产订单号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].moBillNo
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>物料编码:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pMaterialNumber
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>物料名称:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pMaterialName
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="head2"
|
||
style="margin-bottom: 3px; word-break: break-all"
|
||
>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>规格型号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pSpecification
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>生产订单备注:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].orderRemark
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>生产部门:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].workShop
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>条码:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].barCode
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>数量:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].number
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>期望交期:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].expectDate
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--委外用料清单-->
|
||
<div
|
||
style="
|
||
margin: 20px 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
"
|
||
v-if="printData.orderName === '委外用料清单'"
|
||
>
|
||
<div
|
||
id="head1"
|
||
style="margin-bottom: 3px; word-break: break-all"
|
||
>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>销售订单号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].salBillNo
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>委外订单号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].outSourcOrderNo
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>物料编码:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pMaterialNumber
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>物料名称:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pMaterialName
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="head2"
|
||
style="margin-bottom: 3px; word-break: break-all"
|
||
>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>规格型号:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].pSpecification
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>委外订单备注:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].orderRemark
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>供应商:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].supplier
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>条码:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].barCode
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 3px; word-break: break-all">
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>数量:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].number
|
||
}}</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
width: 350px;
|
||
float: left;
|
||
margin-left: 20px;
|
||
text-align: left;
|
||
max-height: 55px;
|
||
"
|
||
>
|
||
<label
|
||
style="
|
||
width: 50px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
text-align: left;
|
||
"
|
||
>期望交期:</label
|
||
>
|
||
<span style="font-size: 14px">{{
|
||
printData.tableData[num][0].expectDate
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表体 -->
|
||
<div :id="'div2' + num">
|
||
<!-- v-for="(printDataItem, printDataIndex) in printData.tableData[num]" :key="printDataIndex" -->
|
||
<table
|
||
border="1"
|
||
width="100%"
|
||
style="
|
||
border: solid 1px #999999;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
word-wrap: break-all;
|
||
"
|
||
>
|
||
<thead>
|
||
<!--表头 -->
|
||
<tr>
|
||
<th
|
||
style="
|
||
padding: 6px 0;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
border: solid 1px #999999;
|
||
"
|
||
v-for="(itm, index) in theadDate"
|
||
:key="itm.thName"
|
||
:style="{ width: itm.width }"
|
||
>
|
||
{{ itm.thName }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- <tr v-for="(it, ind) in printData.tableData" :key="ind"></tr> -->
|
||
<!--表体 -->
|
||
|
||
<tr
|
||
v-for="(it, ind) in printData.tableData[num]"
|
||
:key="ind"
|
||
>
|
||
<td
|
||
style="
|
||
font-size: 12px;
|
||
color: #303133;
|
||
padding: 3px 1px;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
border: solid 1px #999999;
|
||
"
|
||
v-for="(itm, index) in theadDate"
|
||
:key="itm.field"
|
||
:style="{ 'text-align': itm.textAlign }"
|
||
>
|
||
{{
|
||
itm.field !== ''
|
||
? it[itm.field]
|
||
: ind + 1
|
||
}}
|
||
</td>
|
||
</tr>
|
||
<!--合计 -->
|
||
<tr>
|
||
<td
|
||
colspan="7"
|
||
style="
|
||
font-size: 12px;
|
||
color: #303133;
|
||
padding: 6px 0;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
border: solid 1px #999999;
|
||
"
|
||
>
|
||
合计
|
||
</td>
|
||
<td
|
||
style="
|
||
font-size: 10px;
|
||
color: #303133;
|
||
padding: 3px 0;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
text-align: right;
|
||
border: solid 1px #999999;
|
||
"
|
||
>
|
||
<span
|
||
style="color: blue; text-align: right"
|
||
tdata="AllSum"
|
||
format="#,##0.00"
|
||
tindex="8"
|
||
>######</span
|
||
>
|
||
</td>
|
||
<td
|
||
style="
|
||
font-size: 10px;
|
||
color: #303133;
|
||
padding: 3px 0;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
text-align: right;
|
||
border: solid 1px #999999;
|
||
"
|
||
>
|
||
<span
|
||
style="color: blue; text-align: right"
|
||
tdata="AllSum"
|
||
format="#,##0.00"
|
||
tindex="9"
|
||
>######</span
|
||
>
|
||
</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- 表尾-->
|
||
<div
|
||
style="
|
||
width: 784px;
|
||
overflow-y: hidden;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
"
|
||
:id="'foothtml' + num"
|
||
>
|
||
<!-- 'foothtml'+ -->
|
||
<div
|
||
style="
|
||
font-size: 14px;
|
||
color: #303133;
|
||
margin-top: 20px;
|
||
"
|
||
v-if="printData.tableData.length > 0"
|
||
>
|
||
<div
|
||
style="width 100%; font-weight: bold;text-align:center"
|
||
>
|
||
本订单执行过程中如遇到任何国家或地方政策变化或分歧、争议，依据双方签订的合作协议/合同充分友好沟通协商解决。
|
||
</div>
|
||
<div
|
||
style="
|
||
font-size: 14px;
|
||
margin-top: 30px;
|
||
margin-left: 70px;
|
||
"
|
||
>
|
||
<div
|
||
style="float: left;width:200pxmargin-left:40px;"
|
||
>
|
||
<div style="margin-bottom: 5px">
|
||
<span
|
||
style="
|
||
width: 70px;
|
||
text-align: right;
|
||
font-weight: bold;
|
||
margin-right: 3px;
|
||
margin-bottom: 5px;
|
||
"
|
||
>
|
||
打印时间：</span
|
||
>
|
||
<span>{{
|
||
new Date().toLocaleString()
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
float: left;
|
||
width: 120px;
|
||
margin-left: 100px;
|
||
"
|
||
>
|
||
<div style="margin-bottom: 5px">
|
||
<span
|
||
style="
|
||
width: 70px;
|
||
text-align: right;
|
||
font-weight: bold;
|
||
"
|
||
>发料人：</span
|
||
>
|
||
<span>{{
|
||
printData.tableData[num][0].approverName
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
float: left;
|
||
width: 120px;
|
||
margin-left: 80px;
|
||
"
|
||
>
|
||
<div style="margin-bottom: 5px">
|
||
<span
|
||
style="
|
||
width: 70px;
|
||
text-align: right;
|
||
font-weight: bold;
|
||
"
|
||
>领料人：</span
|
||
>
|
||
<span>{{
|
||
printData.tableData[num][0].approverName
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapState } from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {};
|
||
},
|
||
props: {
|
||
//如果不要这个显示就传那个标识 如果不要保存显示 就 btnType=['save'] 'disabled, de-disabled' --存在再集合里面就是 显示
|
||
printData: {
|
||
type: Object,
|
||
default: function () {
|
||
return {
|
||
orderName: '订单',
|
||
tableData: [],
|
||
ids: [],
|
||
};
|
||
},
|
||
},
|
||
//这个区分不同单据的要素
|
||
theadDate: {
|
||
type: Array,
|
||
default: function () {
|
||
return [];
|
||
},
|
||
},
|
||
//这个区分不同单据的要素
|
||
includeTage: {
|
||
type: Array,
|
||
default: function () {
|
||
return [];
|
||
},
|
||
},
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
// 取出页面标签
|
||
userInfo: (state) =>
|
||
state && state.user && state.user.userInfo
|
||
? state.user.userInfo
|
||
: {},
|
||
}),
|
||
},
|
||
mounted() {},
|
||
};
|
||
</script>
|