248 lines
9.6 KiB
Plaintext
248 lines
9.6 KiB
Plaintext
<template>
|
||
<div class="app-container">
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="serialList"
|
||
border
|
||
stripe
|
||
ref="list"
|
||
height="400px"
|
||
>
|
||
<el-table-column
|
||
label="序号"
|
||
type="index"
|
||
align="center"
|
||
width="70"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column label="补料单号" prop="replenishNumber" width="220" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column label="物料名称" width="220" prop="materialName" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column label="物料编码" width="220" prop="materialCode" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="物料规格"
|
||
prop="materialSpec"
|
||
width="220"
|
||
:formatter="format"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column label="可补数量" align="center" prop="planQty" width="100" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="单位"
|
||
width="60"
|
||
prop="materialUnit"
|
||
:formatter="format"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
|
||
</el-table>
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: center;margin-top: 10px">
|
||
<el-button type="primary" @click="printer">打印</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<div id="printFlow" v-if="printInfo">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcodejs2'
|
||
|
||
export default {
|
||
name: 'printer',
|
||
props: {
|
||
layerid: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
selectList: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
rows:{
|
||
type:Array,
|
||
default:[]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
row:[],
|
||
nowDate: "", // 当前日期
|
||
nowTime: "", // 当前时间
|
||
user: "", // 当前星期
|
||
serialList:null,
|
||
printInfo:false,
|
||
printInfo: false,
|
||
// 遮罩层
|
||
loading: false,
|
||
// 用户表格数据
|
||
orderList: null,
|
||
}
|
||
},
|
||
watch: {},
|
||
mounted() {
|
||
this.getDate();
|
||
this.initData()
|
||
this.$nextTick(()=>{
|
||
this.row=this.rows;
|
||
console.log(this.row[0],"哈哈哈")
|
||
|
||
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
format(row, column) {
|
||
|
||
if (column.property=='materialSpec') {
|
||
return row.materialSpec==null?'N/A':row.materialSpec
|
||
}else if(column.property=='materialUnit'){
|
||
return row.materialUnit==null?'N/A':row.materialUnit
|
||
}
|
||
|
||
},
|
||
printFlow(respData) {
|
||
this.printData = [];
|
||
this.printInfo = true;
|
||
let router = "";
|
||
this.printData=respData;
|
||
// console.log(this.printData,"lalalal")
|
||
this.$nextTick(() => {
|
||
router = router + `<div style="padding: 0;margin: 0px">
|
||
<div style="width: 100%">
|
||
<div style="padding: 0 auto;text-align: center;" ><h1>补料单</h1></div>
|
||
<div style="overflow:hidden">
|
||
<div style="float:left;margin-left:10px;">
|
||
<div style="position: relative;bottom:-33px;">
|
||
<span style="display:inline-block;width:210px">补料单号: ${this.selectList.replenishNumber}</span>
|
||
<span style="display:inline-block;padding-left:10px;width:250px">单据日期:${this.nowDate} ${this.nowTime}</span>
|
||
</div>
|
||
<div style="margin-top:45px">
|
||
<span style="display:inline-block;width:210px">产品名称：${this.row[0].materialName}</span>
|
||
<span style="display:inline-block;padding:0px 10px;width:250px">工艺路线：${this.row[0].routeName}</span>
|
||
<span style="display:inline-block">工作中心：${this.row[0].workCenterName}</span>
|
||
</div>
|
||
</div>
|
||
<div id="qrcode" style="float:right;padding-bottom:10px;margin-right:25px;"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table id="printerTable"' +
|
||
style="width: 98%;font-size:12px;border: black 1px solid;word-wrap:break-word;word-break:break-all;">
|
||
</table>
|
||
</div>
|
||
</div>`
|
||
let printerTable = document.getElementById("printFlow");
|
||
printerTable.innerHTML = router;
|
||
|
||
this.$nextTick(() => {
|
||
let qrcode = new QRCode('qrcode', {
|
||
width: 80, //图像宽度
|
||
height: 80, //图像高度
|
||
colorDark: "#000000", //前景色
|
||
colorLight: "#ffffff", //背景色
|
||
typeNumber: 4,
|
||
correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
|
||
});
|
||
qrcode.makeCode(this.selectList.replenishNumber);
|
||
let subTable = `<tr>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:5%;'>序号</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:15%;'>补料单号</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px; text-align:center;width:15%;'>物料名称</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px; text-align:center;width:20%;'>物料编码</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;'>物料规格</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:10%'>补料数量</th>
|
||
<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:5%;'>单位</th>
|
||
</tr>`;
|
||
for (let i = 0; i < respData.length; i++) {
|
||
// console.log(respData[i],"测试")
|
||
subTable = subTable + `<tr><td style='text-align:center;'>${i + 1}</td>
|
||
<td style='text-align:center;'> ${respData[i].replenishNumber}</td>
|
||
<td style='text-align:left;'>${respData[i].materialName}</td>
|
||
<td style='text-align:left;'> ${respData[i].materialCode || 'N/A'}</td>
|
||
<td style='text-align:center;'> ${respData[i].materialSpec || 'N/A'} </td>
|
||
<td style='text-align:center;'> ${respData[i].planQty || ''}</td>
|
||
<td style='text-align:center;'> ${respData[i].materialUnit || 'N/A'} </td>
|
||
</tr>`
|
||
}
|
||
let subPrinterTable = document.getElementById("printerTable");
|
||
subPrinterTable.innerHTML = subTable;
|
||
this.$nextTick(() => {
|
||
|
||
window.setTimeout(()=>{
|
||
this.loading = false;
|
||
this.printInfo = false;
|
||
let tableToPrint = document.getElementById('printFlow');//将要被打印的表格
|
||
let newWin = window.open("");//新打开一个空窗口
|
||
newWin.document.write('<html><head><title>补料单</title></head><style>@page{margin:10px} td{text-align: left; border: solid 1px #a0c6e5; height: 10px;}.a4{page-break-before: auto;' +
|
||
' page-break-after: always;}</style><body style="padding: 0px;margin: 0px">');
|
||
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
|
||
newWin.document.write('</body></html>');
|
||
newWin.focus();//在IE浏览器中使用必须添加这一句
|
||
newWin.print();//打印
|
||
newWin.close();//关闭窗口
|
||
this.$layer.close(this.layerid)
|
||
|
||
},1000)
|
||
})
|
||
|
||
});
|
||
})
|
||
},
|
||
|
||
|
||
//初始化表格
|
||
initData() {
|
||
this.getList()
|
||
},
|
||
/** 查询订单列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
// console.log(this.selectList.id,"id")
|
||
this.$replenish.getDetail({ replenishId: this.selectList.id }).then(resp => {
|
||
this.loading = false;
|
||
if (resp.data.code == "200") {
|
||
console.log(",,/", resp.data.data.dtls);
|
||
this.serialList = resp.data.data.dtls;
|
||
}
|
||
});
|
||
},
|
||
printer() {
|
||
// console.log(1)
|
||
this.printFlow(this.serialList)
|
||
// this.$layer.close(this.layerid)
|
||
},
|
||
cancel() {
|
||
// this.$parent.initData()
|
||
this.$layer.close(this.layerid)
|
||
},
|
||
getDate: function() {
|
||
var _this = this;
|
||
let yy = new Date().getFullYear();
|
||
let mm = (new Date().getMonth() + 1)<10?"0"+(new Date().getMonth() + 1):(new Date().getMonth() + 1);
|
||
let dd = new Date().getDate()<10?"0"+new Date().getDate():new Date().getDate();
|
||
let hh = new Date().getHours();
|
||
let ss =
|
||
new Date().getSeconds() < 10
|
||
? "0" + new Date().getSeconds()
|
||
: new Date().getSeconds();
|
||
let mf =
|
||
new Date().getMinutes() < 10
|
||
? "0" + new Date().getMinutes()
|
||
: new Date().getMinutes();
|
||
|
||
_this.nowTime = hh + ":" + mf + ":" + ss;
|
||
_this.nowDate = yy + "-" + mm + "-" + dd;
|
||
},
|
||
}
|
||
}
|
||
</script>
|