<template>
|
<div>
|
<el-dialog title="标签打印" :visible.sync="isShow" width="600px" top="5vh" @close="$emit('closePrintDialog')">
|
<div style="width:100%;height: 400px;overflow-y: auto;text-align: left">
|
<div class="dia_body">
|
<el-checkbox style="margin: 10px 5px;" :indeterminate="isIndeterminate" v-model="checkAll"
|
@change="handleCheckAllChange">全选</el-checkbox>
|
<el-checkbox-group @change="changePrintCode()" v-model="checkIndexList">
|
<el-card class="box-card" v-for="(item, i) in barcodeData" :key="i"
|
style="margin-bottom: 15px; font-size: 16px !important;">
|
<el-checkbox :label="i" :key="i" style="position: relative;top:0;left:10px"><br></el-checkbox>
|
<div>
|
<div style="text-align: center; margin-bottom: 2px;font-size: 22px;font-weight: bold;">成品检测</div>
|
<div style="text-align: center; margin-bottom: 2px;font-size: 16px;font-weight: bold;">{{ item.partDesc
|
}}</div>
|
<div style="display: flex; align-items: center;">
|
<div style="flex: 0 0 45%; text-align: center;">
|
<vueQr :text="getQrCodeText(item)" :size="160" :margin="2"></vueQr>
|
<div style="margin-top: 5px; font-size: 14px;">
|
<span class="print-person-label">打印人</span>
|
<span style="margin-left: 20px; font-weight: bold;">{{ nickName }}</span>
|
</div>
|
</div>
|
<div style="flex: 1; margin-left: 10px;text-align: left">
|
<div class="item">
|
<span class="full-title">SN号</span>
|
<span class="info">{{ item.lotBatchNo }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">绝缘颜色</span>
|
<span class="info">{{ item.insulationColor }}</span>
|
</div>
|
<div class="item2">
|
<span class="full-title">护套颜色</span>
|
<span class="info">{{ item.outerColor }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">载具编号</span>
|
<span class="info">{{ item.drumNo }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">起止米标</span>
|
<span class="info">{{ item.startMeterMark }} - {{ item.endMeterMark }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">长度(km)</span>
|
<span class="info">{{ calcInbondLength(item.startMeterMark, item.endMeterMark) }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">检测人员</span>
|
<span class="info">{{ item.inspectorName }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">检测结论</span>
|
<span class="info">{{ formatData(item.insState) }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">入库时间</span>
|
<span class="info">{{ item.updateTime }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">零件号</span>
|
<span class="info">{{ item.partNo }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-row>
|
<el-button @click="$emit('closePrintDialog')">取 消</el-button>
|
<el-button type="primary" @click="submitPrint">打 印</el-button>
|
</el-row>
|
</span>
|
</el-dialog>
|
<div class="el-dialog-body"
|
style="overflow-y: auto;margin-top: 0;position: fixed;top: 20px;right: 10px;z-index: 99999;width: 500px;">
|
<div id="printOrder" class="printOrder" ref="printOrder">
|
<el-card class="box-card" v-for="(item, i) in checkDataList" :key="i"
|
style="font-size: 0.29cm !important;font-weight: 700;page-break-after: always;color: #000;box-shadow: none;margin: 0 !important;padding: 0 !important;">
|
<div>
|
<div class="titleH1" style="text-align: center;margin-bottom: 1px">成品检测</div>
|
<div class="titleH1" style="text-align: center;margin-bottom: 1px">{{ item.partDesc }}</div>
|
<div style="display: flex; align-items: center;">
|
<div style="flex: 0 0 45%; text-align: center;">
|
<vueQr :text="getQrCodeText(item)" :size="160" :margin="2"></vueQr>
|
<div style="margin-top: 5px;">
|
<span class="print-person-label">打印人</span>
|
<span style="margin-left: 20px; font-weight: bold;">{{ nickName }}</span>
|
</div>
|
</div>
|
<div style="flex: 1; margin-left: 5px;text-align: left">
|
<div class="item">
|
<span class="full-title">SN号</span>
|
<span class="info">{{ item.lotBatchNo }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">绝缘颜色</span>
|
<span class="info">{{ item.insulationColor }}</span>
|
</div>
|
<div class="item2">
|
<span class="full-title">护套颜色</span>
|
<span class="info">{{ item.outerColor }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">载具编号</span>
|
<span class="info">{{ item.drumNo }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">起止米标</span>
|
<span class="info">{{ item.startMeterMark }} - {{ item.endMeterMark }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">长度(km)</span>
|
<span class="info">{{ calcInbondLength(item.startMeterMark, item.endMeterMark) }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">检测人员</span>
|
<span class="info">{{ item.inspectorName }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">检测结论</span>
|
<span class="info">{{ formatData(item.insState) }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">入库时间</span>
|
<span class="info">{{ item.updateTime }}</span>
|
</div>
|
<div class="item">
|
<span class="full-title">零件号</span>
|
<span class="info">{{ item.partNo }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PrintJS from "print-js";
|
import vueQr from "vue-qr";
|
import { labelOutsideOrderPrinting } from "@/api/business/productOrder";
|
import { mapGetters } from "vuex";
|
|
export default {
|
name: "printDialog",
|
// import 引入的组件需要注入到对象中才能使用
|
// 2. 在这里注册组件
|
components: {
|
vueQr
|
},
|
props: {
|
printDialog: {
|
type: Boolean,
|
default: () => false
|
},
|
},
|
computed: {
|
...mapGetters(["nickName"]),
|
},
|
data() {
|
// 这里存放数据
|
return {
|
isShow: this.printDialog,
|
loadPint: false,
|
isIndeterminate: false, // 多选框样式
|
checkAll: false,
|
checkIndexList: [], // 选择要打印的数据
|
barcodeData: [],
|
printLoading: false,
|
checkDataList: []
|
}
|
},
|
// 方法集合
|
methods: {
|
// 获取要打印的数据
|
getLabelPrinting(selection) {
|
try {
|
this.loadPint = true;
|
let ids = []
|
selection.map(m => {
|
ids.push(m.id)
|
})
|
labelOutsideOrderPrinting({ ids: ids }).then(res => {
|
if (res.code === 200 && res.data.length > 0) {
|
res.data.forEach(item => {
|
console.log('item---', item)
|
item.sendTime = item.sendTime && item.sendTime.substring(0, 10)
|
item.sampleNumber = item.qtyArrived + item.buyUnitMeas
|
this.$set(item, 'barcode', item.entrustCode)
|
this.$set(item, 'isLeave', item.labelStatus === '2')
|
})
|
this.barcodeData = res.data
|
console.log('barcodeData---', this.barcodeData)
|
}
|
})
|
} catch (e) {
|
console.log('获取要打印的数据---', e)
|
}
|
|
},
|
calcInbondLength(startMeterMark, endMeterMark) {
|
let inboundLength = null;
|
if ((startMeterMark != null && startMeterMark !== '') && (endMeterMark != null && endMeterMark !== '')) {
|
let minus = this.$Big(endMeterMark).minus(this.$Big(startMeterMark));
|
inboundLength = Math.abs(minus)
|
}
|
return inboundLength;
|
},
|
formatData(params) {
|
if (params == 0) {
|
return '检验中'
|
} else if (params == 1) {
|
return '合格'
|
} else if (params == 2) {
|
return '不合格'
|
} else if (params == 3) {
|
return '未下单'
|
} else if (params == 4) {
|
return '让步放行'
|
} else {
|
return null
|
}
|
},
|
// 全选多选框回调
|
handleCheckAllChange(val) {
|
if (val) {
|
for (var i = 0; i < this.barcodeData.length; i++) {
|
this.checkIndexList.push(i)
|
}
|
this.checkDataList = this.barcodeData
|
} else {
|
this.checkIndexList = []
|
this.checkDataList = []
|
}
|
this.isIndeterminate = false;
|
},
|
changeType(type) {
|
type = type === '1' ? '0' : '1'
|
},
|
// 生成二维码内容
|
getQrCodeText(item) {
|
const data = {
|
sn_no: item.lotBatchNo,
|
vehicle_no: item.drumNo,
|
qty_arrived: this.calcInbondLength(item.startMeterMark, item.endMeterMark),
|
lot_batch_no: item.lotBatchNo,
|
part_no: item.partNo,
|
};
|
return JSON.stringify(data, null, 2);
|
},
|
//选择要打印的二维码
|
changePrintCode() {
|
let indexList = this.checkIndexList
|
let arr = []
|
indexList.forEach(i => {
|
if (i !== undefined) {
|
arr.push(this.barcodeData[i])
|
}
|
})
|
console.log('arr---', arr)
|
this.checkDataList = arr
|
},
|
// 提交打印
|
submitPrint() {
|
if (this.checkDataList.length < 1) {
|
this.$message.warning("请选择要打印的条形码")
|
return
|
}
|
this.printDialogVisible = false;
|
PrintJS({
|
targetStyles: ["*"], // 使用dom的所有样式，很重要
|
printable: 'printOrder',//页面
|
type: "html",//文档类型
|
maxWidth: 360,
|
header: '',
|
style:
|
`@page {
|
margin: 0.4cm;
|
margin-right: 0.4cm;
|
margin-top: 0.4cm;
|
margin-bottom: 0.4cm;
|
padding-bottom: 0px;
|
size: 400px 75px collapse;
|
}
|
html{
|
zoom:100%;
|
|
}
|
@media print{
|
width: 400px;
|
height: 800px;
|
margin:0;
|
}`,
|
onPrintDialogClose: this.erexcel = false,
|
font_size: '0.29cm',
|
});
|
},
|
},
|
watch: {
|
printDialog(newVal) {
|
if (!newVal) {
|
this.barcodeData = []
|
this.checkIndexList = []
|
this.checkDataList = []
|
this.isIndeterminate = true;
|
}
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.item {
|
margin-bottom: 2px;
|
line-height: 1.2;
|
}
|
|
.item2 {
|
margin-bottom: 2px;
|
vertical-align: top;
|
line-height: 1.2;
|
}
|
|
.full-title {
|
display: inline-block;
|
width: 70px;
|
text-align-last: justify;
|
text-align: justify;
|
font-weight: bold;
|
}
|
|
/* For the print section which might use smaller font */
|
.full-title2 {
|
display: inline-block;
|
width: 60px;
|
text-align-last: justify;
|
text-align: justify;
|
font-weight: bold;
|
}
|
|
.full-title4 {
|
display: inline-block;
|
width: 60px;
|
text-align-last: justify;
|
text-align: justify;
|
vertical-align: top;
|
font-weight: bold;
|
}
|
|
.info {
|
margin-left: 15px;
|
font-weight: bold;
|
}
|
|
.info2 {
|
margin-left: 15px;
|
margin-right: 10px;
|
width: auto;
|
display: inline-block;
|
font-weight: bold;
|
}
|
|
.info3 {
|
margin-left: 15px;
|
margin-right: 10px;
|
width: auto;
|
display: inline-block;
|
font-weight: bold;
|
}
|
|
.info4 {
|
display: inline-block;
|
margin-left: 15px;
|
white-space: normal;
|
width: 200px;
|
font-weight: bold;
|
vertical-align: top;
|
}
|
|
.checkboxInfo {
|
display: inline-block;
|
margin-left: 10px;
|
}
|
|
.scor {
|
width: 0.06cm;
|
height: 0.06cm;
|
border-radius: 1px;
|
border: 1px solid #000;
|
display: inline-block;
|
margin-right: 14px;
|
margin-left: 4px;
|
}
|
|
.checked {
|
margin-right: 14px;
|
margin-left: 4px;
|
font-weight: bold;
|
}
|
|
.print-person-label {
|
display: inline-block;
|
width: 50px;
|
text-align-last: justify;
|
text-align: justify;
|
font-weight: bold;
|
}
|
|
>>>.el-checkbox {
|
margin-right: 10px;
|
}
|
|
>>>.el-card {
|
border: none;
|
}
|
|
>>>.el-card__body {
|
padding: 4px 2px 6px 14px;
|
}
|
</style>
|
