<template>
|
<j-modal
|
:title="title"
|
:width="width"
|
:visible="visible"
|
switchFullscreen
|
@ok="handleOk"
|
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
@cancel="handleCancel"
|
cancelText="关闭">
|
|
<a-spin :spinning="confirmLoading">
|
<j-form-container :disabled="formDisabled">
|
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="报工订单" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderId">
|
<a-select
|
v-model="model.orderId"
|
:options="workOrderOptions"
|
placeholder="请选择报工订单">
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="报工工单" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workOrderCode">
|
<a-input
|
v-model="model.workOrderCode"
|
:disabled="true"
|
placeholder="请选择报工工单">
|
</a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="产线" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId_dictText">
|
<a-input
|
v-model="model.factoryId_dictText"
|
:disabled="true"
|
placeholder="请选择产线">
|
</a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="报工数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quantity">
|
<a-input-number
|
v-model="model.quantity"
|
placeholder="请填写报工数量"
|
style="width: 100%"
|
:min="0">
|
</a-input-number>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</j-form-container>
|
</a-spin>
|
|
<!-- 打印标签容器 -->
|
<div id="printLabel" style="visibility: hidden; position: absolute; left: -9999px; width: 300px; height: 200px; border: 1px solid #000; font-family: 'Microsoft YaHei', sans-serif; padding: 8px; box-sizing: border-box;">
|
<!-- 标签容器 -->
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
<!-- 头部：标题 + Logo -->
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; width: 100%;">
|
<h3 style="margin: 0; color: white; background-color: black; padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: bold;">成品托标签</h3>
|
<img src="/logo.png" alt="公司Logo" style="width: 40px; height: 40px;" />
|
</div>
|
|
<!-- 主体内容：左侧文本 + 右侧二维码 -->
|
<div style="display: flex; flex: 1; gap: 20px;">
|
<!-- 左侧：标签信息 -->
|
<div style="flex: 1; line-height: 1.4; font-size: 10px;">
|
<table style="width: 100%; border-collapse: collapse;">
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">批次号：</td>
|
<td>{{ finishedProductLabel.batchNumber }}</td>
|
</tr>
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">产品型号：</td>
|
<td>{{ finishedProductLabel.materialName }}</td>
|
</tr>
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">库存地点：</td>
|
<td>{{ finishedProductLabel.warehouseCode }}</td>
|
</tr>
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">工单号：</td>
|
<td>{{ finishedProductLabel.orderCode }}</td>
|
</tr>
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">任务号：</td>
|
<td>{{ finishedProductLabel.workOrderCode }}</td>
|
</tr>
|
<tr>
|
<td style="width: 60px; font-weight: bold; white-space: nowrap;">数量：</td>
|
<td>{{ finishedProductLabel.quantity }}</td>
|
</tr>
|
</table>
|
</div>
|
|
<!-- 右侧：二维码 -->
|
<div style="flex: 0 0 60px; text-align: center;">
|
<canvas id="qrcodeCanvas" width="60" height="60"></canvas>
|
</div>
|
</div>
|
|
<!-- 底部：托号 -->
|
<div style="text-align: center; margin-top: 8px; font-size: 10px; font-weight: bold;">
|
{{ finishedProductLabel.palletNumber }}
|
</div>
|
</div>
|
|
</div>
|
</j-modal>
|
</template>
|
|
<script>
|
import { postAction, getAction } from '@api/manage'
|
import printJS from 'print-js'
|
import QRCode from 'qrcode'
|
|
export default {
|
name: 'MesProductionWorkOrderReportModal',
|
data () {
|
return {
|
title: '报工',
|
width: 800,
|
visible: false,
|
disableSubmit: false,
|
confirmLoading: false,
|
model: {},
|
validatorRules: {
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 },
|
},
|
url: {
|
report: '/mes/mesWorkReporting/add',
|
selectReportWorkOrderList: '/mes/productionOrder/selectReportWorkOrderList'
|
},
|
workOrderOptions: [],
|
finishedProductLabel: {}
|
}
|
},
|
computed: {
|
formDisabled(){
|
return this.disabled
|
},
|
},
|
methods: {
|
// 生成二维码
|
generateQRCode(text) {
|
const canvas = document.getElementById('qrcodeCanvas');
|
// 清空画布
|
const ctx = canvas.getContext('2d');
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 生成二维码
|
QRCode.toCanvas(canvas, text, {
|
width: 60,
|
margin: 1,
|
errorCorrectionLevel: 'M'
|
}, (error) => {
|
if (error) {
|
console.error('二维码生成失败:', error);
|
}
|
});
|
},
|
// 打印标签
|
printLabel() {
|
this.generateQRCode('成品托标签'); // 先生成二维码
|
setTimeout(() => {
|
printJS({
|
printable: 'printLabel',
|
type: 'html',
|
targetStyles: ['*'],
|
style: ` @page {
|
margin: 0;
|
size: A4;
|
}
|
#printLabel {
|
visibility: visible !important;
|
position: static !important;
|
left: 0 !important;
|
top: 0 !important;
|
width: 300px !important;
|
height: 200px !important;
|
border: 1px solid #000;
|
font-family: 'Microsoft YaHei', sans-serif;
|
padding: 8px;
|
box-sizing: border-box;
|
margin: 0;
|
}
|
#printLabel h3 {
|
margin: 0;
|
color: white;
|
background-color: #000;
|
padding: 4px 8px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
#printLabel img {
|
width: 40px;
|
height: 40px;
|
}
|
#printLabel table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
#printLabel td {
|
padding: 2px 0;
|
}
|
#printLabel canvas {
|
width: 60px;
|
height: 60px;
|
}
|
@media print {
|
* {
|
background: inherit !important;
|
color: inherit !important;
|
filter: none !important;
|
-webkit-filter: none !important;
|
}
|
#printLabel h3 {
|
background-color: #000 !important;
|
color: white !important;
|
}
|
}
|
`,
|
scanStyles: false
|
});
|
}, 100);
|
},
|
add (record) {
|
// 重置表单
|
this.$refs.form && this.$refs.form.resetFields()
|
// 设置初始值
|
this.model = Object.assign({}, record);
|
getAction(this.url.selectReportWorkOrderList, {materialNumber: record.materialNumber}).then(res => {
|
if (res.success) {
|
this.workOrderOptions = res.result
|
}
|
})
|
this.visible = true
|
},
|
close () {
|
this.$emit('close');
|
this.visible = false;
|
},
|
handleOk () {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.confirmLoading = true
|
let formData = {
|
orderId: this.model.orderId,
|
workOrderId: this.model.id,
|
factoryId: this.model.factoryId,
|
quantity: this.model.quantity
|
}
|
const workOrderOption = this.workOrderOptions.find(item => item.value === this.model.orderId)
|
postAction(this.url.report, formData).then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
const data = res.result
|
if (data.reportType === 'FINISHED') {
|
this.finishedProductLabel = {
|
batchNumber: data.batchNumber,//批次号
|
materialName: this.model.materialName,//产品型号（物料名称）
|
warehouseCode: data.warehouseCode,//库存地点（线边仓编号）
|
orderCode: workOrderOption.label,//工单号（生产订单号）
|
workOrderCode: data.workOrderCode,//任务号（排产工单号）
|
quantity: data.quantity,//报工数量
|
palletNumber: data.palletNumber//托号
|
}
|
//成品托标签打印
|
this.$nextTick(() => {
|
this.printLabel()
|
})
|
}
|
this.submitCallback()
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
this.confirmLoading = false
|
})
|
}
|
})
|
},
|
submitCallback(){
|
this.$emit('ok');
|
this.visible = false;
|
},
|
handleCancel () {
|
this.close()
|
}
|
}
|
}
|
</script>
|
