<template>
|
<GlobalWindow
|
:title="title"
|
width="390px"
|
:visible.sync="visible"
|
>
|
<div class="print-title">打印样式预览：</div>
|
<div class="tip">当前标签尺寸为{{ '80mm x 80mm，' }}打印时请根据需要自行缩放</div>
|
<div style="width:100%;">
|
<div style="height:10px;background-color:#fff"></div>
|
<div id="qr1" style="width:100%;">
|
<div
|
v-for="(item, index) in qrList"
|
:key="index"
|
>
|
<div
|
style="
|
background-color:#fff;
|
padding: 10px 0;
|
margin: 1px auto;
|
height: 322px;
|
width: 303px;"
|
>
|
<table
|
border="1"
|
width="294px"
|
style="
|
margin: -5px 5px 0 0px;
|
border-collapse:collapse"
|
>
|
<caption
|
style="
|
margin-bottom:15px;
|
font-size:16px;
|
line-height:16px;
|
font-weight: 700;"
|
>{{ item.dmodel.name }} 产品加工流转卡</caption>
|
<tbody style="text-align: center; color: #333; font-size:12px; margin-top:10px">
|
<tr>
|
<td style="width:70px;height:21px">产品编码</td>
|
<td style="text-align:left">{{ item.mmodel && item.mmodel.code }}</td>
|
<td colspan="3" rowspan="7">
|
<div style="
|
width: 79px;
|
height:150px;
|
margin: 5px auto;
|
color: #999;"
|
>
|
<vue-qr :text="qrStr(item.code)" :size="79" :margin="0"/>
|
<div>扫码查看</div>
|
<div>详细信息</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td style="height:21px">产品名称</td>
|
<td style="text-align:left">{{ item.mmodel&&item.mmodel.name }}</td>
|
</tr>
|
<tr>
|
<td style="height:21px">生产批次</td>
|
<td style="text-align:left">{{ item.batch }}</td>
|
</tr>
|
<tr>
|
<td style="height:21px">生产工单</td>
|
<td style="text-align:left">{{ item.code }}</td>
|
</tr>
|
<tr>
|
<td style="height:21px">生产工序</td>
|
<td style="text-align:left">{{ item.procedureName }}</td>
|
</tr>
|
<tr>
|
<td style="height:21px">生产设备</td>
|
<td style="text-align:left">{{ item.pgmodel.code }}</td>
|
</tr>
|
<tr>
|
<td style="height:21px">加工数量</td>
|
<td style="text-align:left">{{ item.planNum + (item.umodel && item.umodel.name) }}</td>
|
</tr>
|
<tr>
|
<td>作业人员</td>
|
<td style="text-align:left; height:16px;line-height:16px;" colspan="2">
|
<!-- <span style="width:100%; overflow: hidden;text-overflow: ellipsis;">{{ proStr(item.proUserList) }}</span> -->
|
<div style="
|
width:100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 1;"
|
>{{ proStr(item.proUserList) }}</div>
|
</td>
|
</tr>
|
<tr>
|
<td>打印信息</td>
|
<td style="text-align:left; line-height:16px;" colspan="2">
|
<div>{{ userInfo.realname + ', ' + current}}</div>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<div
|
style="
|
border-right: 1px solid #111;
|
border-bottom: 1px solid #111;
|
border-left: 1px solid #111;
|
width: 292px;
|
line-height: 26px;
|
min-height: 26px;
|
font-size: 12px;
|
margin: 0 0 1px 0px;
|
display:flex;
|
text-align: center;
|
"
|
>
|
<!-- -->
|
<div style="width: 30px; border-right: 1px solid #111; position:relative;">
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;height: 26px;">N</div>
|
</div>
|
<div
|
style="
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
height: 26px;
|
line-height: 13px;
|
"
|
>{{ routeStr(item.routeProcedureList) }}</div>
|
</div>
|
</div>
|
|
<div v-if="index != qrList.length - 1" style="height:5px;background-color:#fff;"></div>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="window__header">
|
<el-button type="primary" @click="cancel" plain>返回</el-button>
|
<el-button type="primary" @click="submit">去打印</el-button>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import VueQr from 'vue-qr'
|
import printJS from 'print-js'
|
import { Divider } from 'element-ui'
|
|
export default {
|
name: 'OrderQrCodeLabel',
|
extends: BaseOpera,
|
components: { GlobalWindow, VueQr, Divider },
|
data () {
|
return {
|
// 表单数据
|
qrList: [],
|
prefix: '',
|
needSelect: false,
|
current: '',
|
userInfo: {},
|
printing: false
|
}
|
},
|
created () {
|
this.config({
|
api: '/ext/materialExt',
|
'field.id': 'id'
|
})
|
this.userInfo = this.$store.state.userInfo
|
},
|
methods: {
|
open (title, qrList, prefix) {
|
// console.log(this.$store.state.userInfo)
|
this.title = title
|
this.qrList = qrList
|
this.prefix = prefix
|
let d = new Date()
|
let month = d.getMonth() + 1
|
let day = d.getDate()
|
let hours = d.getHours()
|
let minutes = d.getMinutes()
|
this.current = (month < 10 ? ('0' + month) : month)
|
+ '-' + (day < 10 ? ('0' + day) : day)
|
+ ' ' + (hours < 10 ? ('0' + hours) : hours)
|
+ ':' + (minutes < 10 ? ('0' + minutes) : minutes)
|
|
this.visible = true
|
},
|
qrStr (code) {
|
return this.prefix + code
|
},
|
// /ext/workorderCheckAttrExt/delete/{id} 点检 删除接口
|
// /ext/workorderCheckExt/delete/{id} 检验删除接口
|
routeStr (routeProcedureList) {
|
let list = JSON.parse(JSON.stringify(routeProcedureList))
|
if (!list) {
|
return '-'
|
}
|
list = list.map((item, index, arr) => {
|
return item.pmodel.name
|
})
|
// console.log(list)
|
if (list.length > 0) {
|
|
return list.join(' > ')
|
}
|
return '-'
|
},
|
cancel () {
|
this.visible = false
|
},
|
submit () {
|
// console.log('提交');
|
this.printing = true
|
printJS(
|
{
|
printable: 'qr1',
|
type:'html',
|
header:null,
|
targetStyles:['*'],
|
style:"@page {margin: 3mm}",
|
onPrintDialogClose: () => {
|
this.printing = false
|
this.visible = false
|
}
|
}
|
)
|
},
|
proStr (proUserList) {
|
return proUserList.map((item) => { return item.proUserDepartName}).join(',')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#qr1 {
|
@media print {
|
.border-style {
|
border: 1px solid #fff;
|
}
|
}
|
}
|
#qr1 {
|
.border-style {
|
border: 1px solid #ccc;
|
}
|
}
|
|
|
.print-title {
|
width: 100px;
|
text-align: right;
|
height: 14px;
|
line-height: 14px;
|
font-size: 14px;
|
font-weight: 500;
|
color: #222222;
|
padding: 10px 0;
|
}
|
.tip {
|
color: #999;
|
font-size: 12px;
|
}
|
.btn {
|
margin: 0 16px;
|
height: 38px;
|
line-height: 38px;
|
font-size: 14px;
|
border-radius: 2px;
|
cursor: pointer;
|
|
}
|
.btn-select {
|
border-radius: 2px;
|
background-color: #305ED5;
|
color: #fff;
|
}
|
.btn-normal {
|
// width: inherit;
|
border-radius: 2px;
|
background-color: #F4F5FA;
|
color: #305ED5;
|
}
|
|
.foot-table-style {
|
border-right: 1px solid #111;
|
border-bottom: 1px solid #111;
|
border-left: 1px solid #111;
|
width: 422px;
|
height: 26px;
|
line-height: 26px;
|
font-size: 12px;
|
margin: 0 15px 15px 15px;
|
display:flex;
|
text-align: center;
|
}
|
</style>
|
