329 lines
10 KiB
Plaintext
329 lines
10 KiB
Plaintext
<template>
|
||
|
||
<div class="app-container-child" style="width: 1200px;height: 600px">
|
||
<el-form label-width="80px">
|
||
<el-row>
|
||
<el-col
|
||
:span="5.8"
|
||
v-for="(item, index) in rows"
|
||
:key="index"
|
||
class="cards"
|
||
>
|
||
<el-row>创建人：{{item.createdBy}}</el-row>
|
||
<el-row>补料单号：{{ item.replenishNumber }}</el-row>
|
||
<el-row>生产工单编号：{{ item.orderWorkNumber }}</el-row>
|
||
<el-row>状态：{{ item.dictStatusShow }}</el-row>
|
||
<el-row>退料单号：{{ item.returnNumber }}</el-row>
|
||
<el-row>补料类型：{{ item.dictType }}</el-row>
|
||
</el-col>
|
||
<el-col>
|
||
<el-button
|
||
size="mini"
|
||
icon="el-icon-printer"
|
||
type="warning"
|
||
style="font-size: 16px"
|
||
v-hasPermi="['pickBill_openPrinter']"
|
||
@click="printFn">
|
||
打印领料记录
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<el-divider></el-divider>
|
||
<el-table
|
||
v-loading="loading"
|
||
highlight-current-row
|
||
@current-change="handleSelectionChange"
|
||
:data="tableData"
|
||
border
|
||
stripe
|
||
ref="list"
|
||
height="400"
|
||
style="width: 100%"
|
||
|
||
>
|
||
<el-table-column
|
||
label="序号"
|
||
type="index"
|
||
align="center"
|
||
width="50"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
v-for="(item, index) in tablehead" :key="index"
|
||
align="center"
|
||
header-align="center"
|
||
:show-overflow-tooltip="true"
|
||
:label="item.label"
|
||
:prop="item.prop"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="border: solid 1px black" ref="printHTML" id="printHTML"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import QRCode from "qrcodejs2";
|
||
|
||
export default {
|
||
name: 'pickingdetails',
|
||
props: {
|
||
rows: Object
|
||
},
|
||
data: function() {
|
||
return {
|
||
tableData: [],
|
||
loading: true,
|
||
nowDate: '', // 当前日期
|
||
nowTime: '' ,// 当前时间
|
||
QRCodeIndexList:[]//需要生成二维码的行下标
|
||
,
|
||
tablehead:[{
|
||
label:"领料编号",
|
||
prop:"materialCode",
|
||
width:"140",
|
||
pringtwidth:15
|
||
},{
|
||
label:"物料名称",
|
||
prop:"materialName",
|
||
width:"140",
|
||
pringtwidth:15
|
||
},{
|
||
label:"物料规格",
|
||
prop:"materialSpec",
|
||
width:"140",
|
||
pringtwidth:15
|
||
},{
|
||
label:"需求数量",
|
||
prop:"planQty",
|
||
width:"140",
|
||
pringtwidth:15
|
||
},{
|
||
label:"实发数量",
|
||
prop:"doneQty",
|
||
width:"140",
|
||
pringtwidth:15
|
||
},{
|
||
label:"单位",
|
||
prop:"materialUnit",
|
||
width:"140",
|
||
pringtwidth:5
|
||
}]
|
||
}
|
||
}
|
||
,
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getDate()//初始化时间
|
||
this.rows.forEach((val, index) => {
|
||
this.$replenishBill.getP({ replenishId: val.id }).then((data) => {
|
||
let thisitems = data.data.data.items
|
||
this.tableData.push(...thisitems)
|
||
})
|
||
})
|
||
this.loading = false
|
||
console.log("this.tableData===========>")
|
||
console.log(this.tableData)
|
||
})
|
||
},
|
||
methods: {
|
||
handleSelectionChange(rows) {
|
||
console.log(rows)
|
||
},
|
||
ininqrcode(){ //生成二维码
|
||
let $this=this;
|
||
console.log(...$this.QRCodeIndexList)
|
||
for(let i=0;i< $this.QRCodeIndexList.length;i++){
|
||
let val=$this.QRCodeIndexList[i];
|
||
console.log(document.getElementById("qrcode"+val));
|
||
let qrcode = new QRCode(document.getElementById("qrcode"+val), {
|
||
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.clear(); // 清除代码
|
||
qrcode.makeCode($this.rows[val].replenishNumber);
|
||
}
|
||
}
|
||
,
|
||
printFn() {
|
||
this.$nextTick(()=> {
|
||
document.getElementById("printHTML").innerHTML = this.paging()
|
||
})
|
||
this.$nextTick(()=>{
|
||
console.log(this.$refs.printHTML.innerHTML)
|
||
// this.$refs.printHTML.innerHTML = this.paging()
|
||
this.ininqrcode();
|
||
window.setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
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(document.getElementById("printHTML").outerHTML) //将表格添加进新的窗口
|
||
newWin.document.write('</body></html>')
|
||
newWin.focus() //在IE浏览器中使用必须添加这一句
|
||
newWin.print() //打印
|
||
newWin.close() //关闭窗口
|
||
})
|
||
},1000)
|
||
})
|
||
},
|
||
paging() {//对将要打印的HTML进行拼接处理
|
||
let printdiv = ``//输出html
|
||
let paging = ` <hr size=1 color=black style="page-break-after:always" >`//分页
|
||
let divc=``
|
||
let $this = this;
|
||
let subTable = `<tr><th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:5%'>序号</th>`;//输出表头
|
||
this.tablehead.forEach(function(val, index) {
|
||
subTable=subTable+`<th style='border: solid 1px #a0c6e5; height: 10px;text-align:center;width:${val.pringtwidth}%'>${val.label}</th>`
|
||
})
|
||
subTable=subTable+`</tr>`;
|
||
|
||
this.rows.forEach(function(val, index) {
|
||
if($this.printData(val.id).length>0){
|
||
let div = `<div style="padding: 0;margin: 0px">
|
||
<div style="width: 100%">
|
||
<div style="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">补料单号: ${val.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">生产单号：${val.orderWorkNumber}</span>
|
||
<span style="display:inline-block;padding:0px 10px;width:250px">状态：${val.dictStatusShow}</span>
|
||
<span style="display:inline-block">补料类型：${val.dictType}</span>
|
||
</div>
|
||
</div>
|
||
<div id="qrcode${index}" style="float:right;padding-bottom:10px;margin-right:25px;"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table class="printerTable" style="width: 98%;font-size:12px;border: black 1px solid;word-wrap:break-word;word-break:break-all;">
|
||
`+subTable+$this.printData(val.pickId)+
|
||
`</table>
|
||
</div>
|
||
`+paging+
|
||
`</div>`
|
||
divc=divc+div
|
||
$this.QRCodeIndexList.push(index);
|
||
}
|
||
})
|
||
return divc;
|
||
},
|
||
printData(miaid){
|
||
let tr=``
|
||
let i=1
|
||
let tableheadlist= []
|
||
|
||
this.tablehead.forEach((val,index)=>{//tablehead
|
||
tableheadlist.push(val.prop);
|
||
})
|
||
|
||
this.tableData.forEach(function(val,index) {
|
||
// if(val.pickId==miaid){
|
||
tr=tr+`<tr><td style="border: solid 1px #a0c6e5;text-align: center">${i}</td>`;
|
||
tableheadlist.forEach((propname)=>{
|
||
tr=tr+`<td style="border: solid 1px #a0c6e5;text-align: center">${val[propname]}</td>`
|
||
})
|
||
tr=tr+`</tr>`;
|
||
i=i+1;
|
||
// }
|
||
})
|
||
return tr
|
||
},
|
||
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>
|
||
|
||
<style lang="scss" scoped>
|
||
> .el-table .warning-row {
|
||
background: rgba(0, 255, 0, 0.5);
|
||
}
|
||
|
||
> .el-row {
|
||
&:last-child {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
> > > .cards {
|
||
border: 1px solid black;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
margin-left: 40px;
|
||
background: #e7f6fa;
|
||
}
|
||
|
||
> .el-form-item {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
> .el-button--medium {
|
||
padding: 10px 20px;
|
||
font-size: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
> .form1 .el-form-item__content {
|
||
margin-left: 0px !important;
|
||
}
|
||
|
||
> .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
|
||
> .el-table__body tr.current-row > td {
|
||
background-color: #8ac1ff !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
> .el-table__body tr:hover > td {
|
||
background-color: #e9edf3 !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
> .el-link.el-link--default {
|
||
color: white;
|
||
}
|
||
|
||
> > > .el-table__body tr.current-row > td {
|
||
background-color: #8ac1ff !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-table > > > tbody tr:hover > td {
|
||
background-color: #8ac1ff !important;
|
||
}
|
||
</style>
|