优化
This commit is contained in:
zc
377
src/views/system/barcodePrint/index.vue
Normal file
377
src/views/system/barcodePrint/index.vue
Normal file
@@ -0,0 +1,377 @@
|
|||||||
|
<template>
|
||||||
|
<div class="gi_page">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="page-title">标签打印</h2>
|
||||||
|
|
||||||
|
<!-- 标签参数设置 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<a-form :model="formData" layout="vertical">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="物料名称">
|
||||||
|
<a-input v-model="formData.materialName" placeholder="请输入物料名称" :disabled="isFromWorkOrder" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="物料编码">
|
||||||
|
<a-input v-model="formData.encoding" placeholder="请输入物料编码" :disabled="isFromWorkOrder" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="工单编号">
|
||||||
|
<a-input v-model="formData.orderNo" placeholder="请输入工单编号" :disabled="isFromWorkOrder" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="生产批次" required>
|
||||||
|
<a-input v-model="formData.productionBatch" placeholder="请输入生产批次" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-actions">
|
||||||
|
<a-button type="primary" @click="generateLabel" :disabled="!formData.productionBatch">生成标签</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 标签预览 -->
|
||||||
|
<div v-if="labelData.partName" class="label-preview-section">
|
||||||
|
<h3>标签预览</h3>
|
||||||
|
<div class="label-container" ref="labelContainer">
|
||||||
|
<div class="label" v-for="index in 1" :key="index">
|
||||||
|
<table class="label-table">
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">零件名称</div>
|
||||||
|
<div class="label-value">{{ labelData.partName }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">生产日期</div>
|
||||||
|
<div class="label-value">{{ labelData.productionDate }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell qr-cell" rowspan="4">
|
||||||
|
<div class="qr-code">
|
||||||
|
<img :src="`https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(labelData.qrCodeData)}`" alt="QR Code" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">零件号</div>
|
||||||
|
<div class="label-value">{{ labelData.partNumber }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">数量</div>
|
||||||
|
<div class="label-value">{{ labelData.quantity }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">标重(kg)</div>
|
||||||
|
<div class="label-value">{{ labelData.standardWeight }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">包装签字</div>
|
||||||
|
<div class="label-value">{{ labelData.packingSignature || '' }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">实重(kg)</div>
|
||||||
|
<div class="label-value">{{ labelData.actualWeight || '' }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-field">检验签字</div>
|
||||||
|
<div class="label-value">{{ labelData.inspectionSignature || '' }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- <tr>-->
|
||||||
|
<!-- <td class="label-cell" colspan="2"></td>-->
|
||||||
|
<!-- <td class="label-cell qr-cell">-->
|
||||||
|
<!-- <div class="serial-number">序号: {{ labelData.serialNumber }}</div>-->
|
||||||
|
<!-- </td>-->
|
||||||
|
<!-- </tr>-->
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="label-actions">
|
||||||
|
<a-button type="primary" @click="printLabel">打印标签</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, nextTick, onMounted } from 'vue'
|
||||||
|
import { Message } from '@arco-design/web-vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
encoding: '',
|
||||||
|
materialName: '',
|
||||||
|
orderNo: '',
|
||||||
|
productionBatch: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 是否是从工单页面跳转过来的
|
||||||
|
const isFromWorkOrder = ref(false)
|
||||||
|
|
||||||
|
// 标签数据
|
||||||
|
const labelData = reactive({
|
||||||
|
partName: '',
|
||||||
|
partNumber: '',
|
||||||
|
standardWeight: '',
|
||||||
|
actualWeight: '',
|
||||||
|
productionDate: '',
|
||||||
|
quantity: '',
|
||||||
|
packingSignature: '',
|
||||||
|
inspectionSignature: '',
|
||||||
|
serialNumber: '',
|
||||||
|
qrCodeData: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 标签容器引用
|
||||||
|
const labelContainer = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
// 模拟获取标签数据的接口
|
||||||
|
const fetchLabelData = async (params: any) => {
|
||||||
|
// 模拟后端接口延迟
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
// 格式化生产日期为 yyyyMMddHHmm 格式
|
||||||
|
const now = new Date()
|
||||||
|
const formattedDate = now.getFullYear().toString() +
|
||||||
|
String(now.getMonth() + 1).padStart(2, '0') +
|
||||||
|
String(now.getDate()).padStart(2, '0') +
|
||||||
|
String(now.getHours()).padStart(2, '0') +
|
||||||
|
String(now.getMinutes()).padStart(2, '0')
|
||||||
|
|
||||||
|
// 模拟返回数据
|
||||||
|
const mockData = {
|
||||||
|
partName: params.materialName || 'PP0449002护套',
|
||||||
|
partNumber: params.encoding || 'PP0449002',
|
||||||
|
standardWeight: '0.39500',
|
||||||
|
actualWeight: '',
|
||||||
|
productionDate: formattedDate,
|
||||||
|
quantity: '200',
|
||||||
|
packingSignature: '',
|
||||||
|
inspectionSignature: '',
|
||||||
|
serialNumber: '4',
|
||||||
|
qrCodeData: `PART:${params.encoding || 'PP0449002'},NAME:${params.materialName || 'PP0449002护套'},DATE:${formattedDate},QTY:200`,
|
||||||
|
}
|
||||||
|
resolve(mockData)
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成标签
|
||||||
|
const generateLabel = async () => {
|
||||||
|
|
||||||
|
if (!formData.productionBatch) {
|
||||||
|
Message.error('请输入生产批次')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取标签数据
|
||||||
|
const result = await fetchLabelData(formData)
|
||||||
|
Object.assign(labelData, result)
|
||||||
|
Message.success('标签生成成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('生成标签失败:', error)
|
||||||
|
Message.error('生成标签失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时，检查是否有参数传递
|
||||||
|
onMounted(() => {
|
||||||
|
// 从路由参数中获取数据
|
||||||
|
const materialName = route.query.materialName as string
|
||||||
|
const encoding = route.query.encoding as string
|
||||||
|
const orderNo = route.query.orderNo as string
|
||||||
|
|
||||||
|
// 如果有参数传递，设置表单数据并标记为不可修改
|
||||||
|
if (materialName && encoding && orderNo) {
|
||||||
|
formData.materialName = materialName
|
||||||
|
formData.encoding = encoding
|
||||||
|
formData.orderNo = orderNo
|
||||||
|
isFromWorkOrder.value = true
|
||||||
|
|
||||||
|
// 自动生成标签
|
||||||
|
generateLabel()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 打印标签
|
||||||
|
const printLabel = async () => {
|
||||||
|
await nextTick()
|
||||||
|
if (labelContainer.value) {
|
||||||
|
// 克隆标签容器内容用于打印
|
||||||
|
const printContent = labelContainer.value.cloneNode(true) as HTMLElement
|
||||||
|
|
||||||
|
// 创建打印窗口
|
||||||
|
const printWindow = window.open('', '_blank')
|
||||||
|
if (printWindow) {
|
||||||
|
printWindow.document.write(`
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>标签打印</title>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; padding: 10mm; font-family: Arial, sans-serif; }
|
||||||
|
.label-container { display: flex; flex-wrap: wrap; gap: 10mm; justify-content: center; }
|
||||||
|
.label { width: 90mm; height: 36mm; border: 1px solid #000; padding: 0; box-sizing: border-box; page-break-inside: avoid; }
|
||||||
|
.label-table { width: 100%; height: 100%; border-collapse: collapse; }
|
||||||
|
.label-cell { border: 1px solid #000; padding: 1mm; vertical-align: top; }
|
||||||
|
.qr-cell { width: 24mm; text-align: center; vertical-align: middle; }
|
||||||
|
.label-field { font-size: 7pt; font-weight: bold; margin-bottom: 0.5mm; }
|
||||||
|
.label-value { font-size: 7pt; }
|
||||||
|
.qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
|
||||||
|
.serial-number { font-size: 7pt; margin-top: 1mm; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${printContent.innerHTML}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`)
|
||||||
|
printWindow.document.close()
|
||||||
|
printWindow.focus()
|
||||||
|
printWindow.print()
|
||||||
|
printWindow.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineOptions({ name: 'BarcodePrint' })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单区域 */
|
||||||
|
.form-section {
|
||||||
|
background-color: var(--color-bg-2);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签预览 */
|
||||||
|
.label-preview-section {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: var(--color-bg-2);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-preview-section h3 {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 450px;
|
||||||
|
height: 180px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-table {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-cell {
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-cell {
|
||||||
|
width: 120px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-field {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-value {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serial-number {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保输入框宽度一致 */
|
||||||
|
:deep(.arco-input-wrapper) {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -67,6 +67,7 @@
|
|||||||
<template #action="{ record }">
|
<template #action="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-link v-permission="['workOrder:record:detail']" title="详情" @click="onDetail(record)">详情</a-link>
|
<a-link v-permission="['workOrder:record:detail']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||||
|
<a-link v-permission="['workOrder:record:print']" title="打印" @click="onPrint(record)">打印</a-link>
|
||||||
<a-link v-permission="['workOrder:record:delete']" status="danger" :title="'删除'" @click="onDeleteOne(record.id)">删除</a-link>
|
<a-link v-permission="['workOrder:record:delete']" status="danger" :title="'删除'" @click="onDeleteOne(record.id)">删除</a-link>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
@@ -113,6 +114,7 @@ import has from '@/utils/has'
|
|||||||
import type GiTable from "@/components/GiTable/index.vue";
|
import type GiTable from "@/components/GiTable/index.vue";
|
||||||
import {ref, reactive} from "vue";
|
import {ref, reactive} from "vue";
|
||||||
import {Message} from "@arco-design/web-vue";
|
import {Message} from "@arco-design/web-vue";
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
import {
|
import {
|
||||||
deleteWorkOrder,
|
deleteWorkOrder,
|
||||||
exportWorkOrder, getWorkOrder,
|
exportWorkOrder, getWorkOrder,
|
||||||
@@ -123,6 +125,7 @@ import {
|
|||||||
|
|
||||||
defineOptions({ name: 'Record' })
|
defineOptions({ name: 'Record' })
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
|
||||||
const queryForm = reactive<WorkOrderQuery>({
|
const queryForm = reactive<WorkOrderQuery>({
|
||||||
@@ -249,6 +252,19 @@ const onExport = () => {
|
|||||||
useDownload(() => exportWorkOrder(queryForm))
|
useDownload(() => exportWorkOrder(queryForm))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打印
|
||||||
|
const onPrint = (record: WorkOrderResp) => {
|
||||||
|
// 跳转到标签打印页面，并传递数据
|
||||||
|
router.push({
|
||||||
|
path: '/print',
|
||||||
|
query: {
|
||||||
|
materialName: record.materialName,
|
||||||
|
encoding: record.encoding,
|
||||||
|
orderNo: record.orderNo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Reference in New Issue
Block a user