优化整箱

This commit is contained in:
zc
2026-04-27 16:14:26 +08:00
parent 848cabd0fa
commit 79f9124c9a
7 changed files with 407 additions and 67 deletions

View File

@@ -7,6 +7,10 @@ export interface FullWorkOrderResp {
title: string
orderNo: string
materialCode: string
materialName: string
batch: string
mark: string
count: number
imgUrl: string
createUser: string
createTime: string
@@ -19,8 +23,8 @@ export interface FullWorkOrderResp {
export interface FullWorkOrderQuery {
orderNo: string | undefined
materialCode: string | undefined
imgUrl: string | undefined
createUser: string | undefined
materialName: string | undefined
batch: string | undefined
createTime: Array<string> | undefined
sort: Array<string>
}

View File

@@ -2,12 +2,12 @@ import http from '@/utils/http'
const BASE_URL = '/api/ys'
/** @desc 进入称重页面 */
/** @desc 启动宇视SDK */
export function getEnterWeighPage() {
return http.get<any>(`${BASE_URL}/enter-weigh-page`)
}
/** @desc 退出称重页面 */
/** @desc 退出宇视SDK */
export function getLeaveWeighPage() {
return http.get<any>(`${BASE_URL}/leave-weigh-page`)
}
@@ -17,7 +17,7 @@ export function getCaptureImage(data: any) {
return http.get<any>(`${BASE_URL}/capture-image`, data)
}
/** @desc 检查称重状态 */
/** @desc 检查宇视SDK状态 */
export function getCheckStatus() {
return http.get<any>(`${BASE_URL}/status`)
}

View File

@@ -297,7 +297,7 @@ const generateDetailLabel = async () => {
for (const workOrderInfo of formData.workOrderInfos) {
// 计算二维码数据
const orderNo = formData.orderNo + workOrderInfo.id;
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
const qrCodeData = `10#${formData.encoding}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
// 生成二维码图片
const qrCodeImage = await generateQRCode(qrCodeData)
@@ -353,7 +353,7 @@ const generateOverallLabel = async () => {
String(now.getDate()).padStart(2, '0')
// 计算二维码数据
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
const qrCodeData = `10#${formData.encoding}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
// 生成二维码图片
const qrCodeImage = await generateQRCode(qrCodeData)
@@ -471,7 +471,7 @@ const printLabel = async () => {
<tr>
<td class="label-cell">
<div class="label-row">
<div class="label-field">实重(g) 54</div>
<div class="label-field">实重(g)</div>
<div class="label-value">${item.totalWeight || ''}</div>
</div>
</td>

View File

@@ -10,35 +10,99 @@
@before-ok="save"
@close="reset"
>
<a-form ref="formRef" v-model="form" :rules="rules">
<a-form-item label="物料编码">
<a-input
ref="materialCode"
v-model="form.materialCode"
placeholder="请点击此处确保光标闪烁,且输入法为英文状态,使用扫码枪扫描物料编码"
@keydown="handleKeyDown"
/>
</a-form-item>
<a-form-item label="图片">
<div class="image-container">
<img
:src="imgData.imgUrl"
alt="图片"
style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
/>
<!-- 错误状态 -->
<div v-if="weighingPageStatus === 'error'" class="video-overlay error">
<icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
<span>连接异常</span>
<Button size="small" type="primary" @click="enterWeighPage">重试</Button>
</div>
<!-- 加载状态 -->
<div v-if="weighingPageStatus === 'entering'" class="video-overlay">
<Spin />
<span style="margin-left: 8px;">加载中...</span>
</div>
</div>
</a-form-item>
<a-form ref="formRef" v-model="form">
<a-row :gutter="22">
<a-col :span="22">
<a-form-item label="物料编码" label-col-flex="100px">
<a-input
ref="materialCodeInput"
v-model="form.inputMaterialCode"
placeholder="请点击此处确保光标闪烁,且输入法为英文状态,使用扫码枪扫描物料编码"
@keydown="handleKeyDown"
@input="handleMaterialCodeChange"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="22">
<a-col :span="11">
<a-form-item label="手动输入编码" label-col-flex="100px">
<a-input
ref="inputMaterialCode"
v-model="form.inputMaterialCode2"
placeholder="请输入物料编码"
@change="handleMaterialCodeChange2"
/>
</a-form-item>
</a-col>
<a-col :span="11">
<a-form-item label="序号">
<a-input-number
v-model="form.mark"
:min="1"
placeholder="请输入序号"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="22">
<a-col :span="11">
<a-form-item label="物料名称" label-col-flex="100px">
<a-input
ref="materialName"
v-model="form.materialName"
placeholder="-"
disabled
/>
</a-form-item>
</a-col>
<a-col :span="11">
<a-form-item label="批次">
<a-input
ref="batch"
v-model="form.batch"
placeholder="-"
disabled
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="22">
<a-col :span="11">
<a-form-item label="数量" label-col-flex="100px">
<a-input-number
v-model="form.count"
placeholder="整箱数量"
:min="0"
:disabled = "disableCount"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="22">
<a-col :span="22">
<a-form-item label="图片" label-col-flex="100px">
<div class="image-container">
<img
:src="imgData.imgUrl"
alt="图片"
style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
/>
<!-- 错误状态 -->
<div v-if="weighingPageStatus === 'error'" class="video-overlay error">
<icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
<span>连接异常</span>
<Button size="small" type="primary" @click="enterWeighPage">重试</Button>
</div>
<!-- 加载状态 -->
<div v-if="weighingPageStatus === 'entering'" class="video-overlay">
<Spin />
<span style="margin-left: 8px;">加载中...</span>
</div>
</div>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</template>
@@ -50,7 +114,8 @@ import { useWindowSize } from '@vueuse/core'
import { addFullWorkOrder } from '@/apis/fullWorkOrder/fullWorkOrder'
import {getCaptureImage, getEnterWeighPage, getLeaveWeighPage} from '@/apis/weightManage/ys'
import { useResetReactive } from '@/hooks'
import {getMaterialDetail} from "@/apis/weightManage/weightManage";
import {number} from "echarts";
const emit = defineEmits<{
(e: 'save-success'): void
}>()
@@ -59,6 +124,7 @@ const { width, height } = useWindowSize()
const dataId = ref('')
const visible = ref(false)
const disableCount = ref(false)
const materialCodeInput = ref<any>(null)
// 称重页面状态
@@ -66,16 +132,15 @@ const weighingPageStatus = ref<'idle' | 'entering' | 'entered' | 'error'>('idle'
const [form, resetForm] = useResetReactive({
materialCode: '',
imgUrl: ''
imgUrl: '',
materialName: '',
batch: '',
count: undefined,
inputMaterialCode: '',
inputMaterialCode2: '',
mark: undefined,
})
const formRef = ref<FormInstance>()
const rules: FormInstance['rules'] = {
materialCode: [
{ required: true, message: '物料编码为空' },
],
}
const imgData = reactive({
imgUrl: 'http://localhost:6609/file/ys/carousel.jpg', // 称重页面图片URL
@@ -90,16 +155,111 @@ const reset = () => {
resetForm()
}
// 防抖函数
const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
let timer: ReturnType<typeof setTimeout> | null = null
return function (...args: Parameters<T>) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func(...args)
}, delay)
}
}
// 原始的物料编码变化处理函数
const originalHandleMaterialCodeChange = async () => {
// 确保输入框内容是完整的物料编码
// todo
const materialCode = form.inputMaterialCode?.trim()
// const materialCode = "831002839562,1,0.12,KP,0A2005,0A200520260325";
// 无论是否有输入,先重置所有物料相关字段,确保新数据能完全覆盖旧数据
form.materialCode = ''
form.materialName = ''
form.inputMaterialCode2 = ''
form.batch = ''
form.count = undefined
form.mark = undefined
// 如果有物料编码输入,获取物料数据
if (materialCode) {
try {
disableCount.value = true
const parts = materialCode.split(',');
form.count = parseFloat(parts[2]) * 1000;
console.log("form.count", form.count);
await fetchMaterialData(materialCode)
} catch (error) {
console.error('获取物料数据失败:', error)
// 即使获取失败,也保持字段为空,避免显示旧数据
}
}
}
// 带防抖的物料编码变化处理函数
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500) // 500ms防抖延迟
// 扫码核验获取物料信息
const fetchMaterialData = async (code: string) => {
const res = await getMaterialDetail(code);
if (res.code === '0') {
// 更新表单数据
form.materialCode = res.data?.encoding || ''
form.materialName = res.data?.materialName || ''
form.batch = res.data?.batch || ''
}
}
const handleMaterialCodeChange2 = async (code: string) => {
if (!code || code?.trim()=== '') {
form.materialCode = ''
form.materialName = ''
form.batch = ''
form.mark = undefined
form.count = undefined
return
}
disableCount.value = false
form.inputMaterialCode = ''
form.mark = undefined
form.count = undefined
const res = await getMaterialDetail(code);
if (res.code === '0') {
// 更新表单数据
form.materialCode = res.data?.encoding || ''
form.materialName = res.data?.materialName || ''
form.batch = res.data?.batch || ''
}
};
// 保存
const save = async () => {
const isInvalid = await formRef.value?.validate()
if (isInvalid) return
if (!form.materialCode) {
Message.error('未找到物料信息');
return false
}
if (!form.count) {
Message.error('数量不能为空');
return false
}
if (!form.batch) {
Message.error('未找到批次');
return false
}
if (!form.mark) {
Message.error('请输入序号');
return false
}
try {
//手动抓图
const data = {
type: 2,
}
// todo
const response = await getCaptureImage(data);
// const response = {'data': 'http://localhost:6609/file/ys/carousel.jpg'};
if (response) {
form.imgUrl = response.data;
} else {
@@ -115,24 +275,24 @@ const save = async () => {
}
}
// 进入称重页面
// 启动宇视SDK
const enterWeighPage = async () => {
weighingPageStatus.value = 'entering'
try {
await getEnterWeighPage()
weighingPageStatus.value = 'entered'
} catch (error) {
console.error('进入称重页面失败:', error)
console.error('启动宇视SDK失败:', error)
weighingPageStatus.value = 'error'
}
}
// 离开称重页面
// 退出宇视SDK
const leaveWeighPage = async () => {
try {
await getLeaveWeighPage()
} catch (error) {
console.error('离开称重页面失败:', error)
console.error('退出宇视SDK失败:', error)
}
}
@@ -141,7 +301,7 @@ const onAdd = async () => {
reset()
dataId.value = ''
visible.value = true
// 进入称重页面
// 启动宇视SDK
await enterWeighPage()
// 聚焦到物料编码输入框
nextTick(() => {
@@ -172,7 +332,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
// 检查是否是新的扫码开始
// 当时间间隔大于300ms且不是修饰键且不是功能键时认为是新的扫码开始
else if (timeDiff > 300 && !event.ctrlKey && !event.altKey && !event.metaKey) {
form.materialCode = ''
form.inputMaterialCode = ''
// 标记为开始扫描
isScanning = true
}
@@ -193,7 +353,7 @@ onBeforeUnmount(() => {
clearInterval(imageRefreshTimer)
imageRefreshTimer = null
}
// 离开称重页面
// 退出宇视SDK
leaveWeighPage()
})
@@ -206,7 +366,7 @@ watch(visible, async (newVal) => {
imgData.imgUrl = `${imgData.baseUrl}?t=${Date.now()}`
}, 1500)
} else {
// 当弹窗关闭时,退出称重页面并停止图片刷新
// 当弹窗关闭时,退出宇视SDK并停止图片刷新
await leaveWeighPage()
if (imageRefreshTimer) {
clearInterval(imageRefreshTimer)
@@ -250,4 +410,17 @@ defineExpose({ onAdd })
.video-overlay.error {
background: rgba(255, 77, 79, 0.2);
}
/* 禁用输入框样式 - 黑色加粗字体 */
:deep(.arco-input-wrapper.arco-input-disabled) {
background-color: #ffffff !important;
border-color: #d9d9d9 !important;
}
:deep(.arco-input-wrapper.arco-input-disabled .arco-input) {
color: #000000 !important;
background-color: transparent !important;
opacity: 1 !important;
-webkit-text-fill-color: #000000 !important;
}
</style>

View File

@@ -15,8 +15,8 @@
<template #toolbar-left>
<a-input-search v-model="queryForm.orderNo" placeholder="请输入任务工单号" allow-clear @search="search" />
<a-input-search v-model="queryForm.materialCode" placeholder="请输入物料编码" allow-clear @search="search" />
<a-input-search v-model="queryForm.imgUrl" placeholder="请输入图片地址" allow-clear @search="search" />
<a-input-search v-model="queryForm.createUser" placeholder="请输入创建人" allow-clear @search="search" />
<a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
<a-input-search v-model="queryForm.batch" placeholder="请输入批次号" allow-clear @search="search" />
<a-range-picker
v-model="queryForm.createTime"
:show-time="true"
@@ -60,6 +60,11 @@
>
详情
</a-link>
<a-link
@click="onPrint(record)"
>
打印
</a-link>
<a-link
v-permission="['fullWorkOrder:fullWorkOrder:delete']"
status="danger"
@@ -88,6 +93,8 @@ import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useDownload, useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import type {WorkOrderResp} from "@/apis/workOrder/workOrder";
import QRCode from 'qrcode';
defineOptions({ name: 'FullWorkOrder' })
@@ -95,10 +102,10 @@ defineOptions({ name: 'FullWorkOrder' })
const queryForm = reactive<FullWorkOrderQuery>({
orderNo: undefined,
materialCode: undefined,
imgUrl: undefined,
createUser: undefined,
materialName: undefined,
batch: undefined,
createTime: undefined,
sort: ['id,desc']
sort: ['f.id,desc']
})
const {
@@ -111,7 +118,11 @@ const {
const columns = ref<TableInstanceColumns[]>([
{ title: '标题', dataIndex: 'title', slotName: 'title' },
{ title: '任务工单号', dataIndex: 'orderNo', slotName: 'orderNo' },
{ title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
{ title: '物料编码', dataIndex: 'materialCode', slotName: 'materialCode' },
{ title: '批次号', dataIndex: 'batch', slotName: 'batch' },
{ title: '数量', dataIndex: 'count', slotName: 'count' },
{ title: '标记号', dataIndex: 'mark', slotName: 'mark' },
{ title: '抓拍图', dataIndex: 'imgUrl', slotName: 'imgUrl' },
{ title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
{ title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
@@ -121,7 +132,7 @@ const columns = ref<TableInstanceColumns[]>([
title: '操作',
dataIndex: 'action',
slotName: 'action',
width: 160,
width: 220,
align: 'center',
fixed: !isMobile() ? 'right' : undefined,
show: has.hasPermOr(['fullWorkOrder:fullWorkOrder:detail', 'fullWorkOrder:fullWorkOrder:update', 'fullWorkOrder:fullWorkOrder:delete'])
@@ -132,8 +143,8 @@ const columns = ref<TableInstanceColumns[]>([
const reset = () => {
queryForm.orderNo = undefined
queryForm.materialCode = undefined
queryForm.imgUrl = undefined
queryForm.createUser = undefined
queryForm.materialName = undefined
queryForm.batch = undefined
queryForm.createTime = undefined
search()
}
@@ -146,6 +157,157 @@ const onDelete = (record: FullWorkOrderResp) => {
})
}
// 生成二维码
const generateQRCode = async (data: string) => {
try {
return await QRCode.toDataURL(data, {
width: 120,
margin: 1,
color: {
dark: '#000000',
light: '#FFFFFF'
}
})
} catch (error) {
console.error('生成二维码失败:', error)
return ''
}
}
const onPrint = async (record: FullWorkOrderResp) => {
try {
// 格式化生产日期为 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 formattedDate2 = now.getFullYear().toString() +
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0')
// 计算二维码数据
const qrCodeData = `10#${record.materialCode || ''}$11#9DP$12#${record.batch || ''}$17#${record.count || ''}$20#${formattedDate2}$31#${record.orderNo || ''}$DY`
// 生成二维码图片
const qrCodeImage = await generateQRCode(qrCodeData)
// 直接生成打印标签
const printWindow = window.open('', '_blank');
if (!printWindow) return;
// 构建打印内容
const printContent = `
<!DOCTYPE html>
<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: 38.5mm; 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; border: 1px solid #000; }
.label-row { display: flex; align-items: center; }
.label-field { font-size: 8pt; font-weight: bold; margin-right: 2mm; min-width: 25pt; }
.label-value { font-size: 8pt; font-weight: bold; flex: 1; }
.qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
.mark-number { font-size: 8pt; font-weight: bold; margin-top: 1mm; text-align: center; }
.serial-number { font-size: 8pt; font-weight: bold; margin-top: 1mm; }
</style>
</head>
<body>
<div class="label-container">
<div class="label">
<table class="label-table">
<tr>
<td class="label-cell">
<div class="label-row">
<div class="label-field">零件名称</div>
<div class="label-value">${record.materialName || ''}</div>
</div>
</td>
<td class="label-cell">
<div class="label-row">
<div class="label-field">生产日期</div>
<div class="label-value">${formattedDate}</div>
</div>
</td>
<td class="label-cell qr-cell" rowspan="4">
<div class="qr-code">
<img src="${qrCodeImage}" alt="QR Code" />
<div class="mark-number">${record.mark || ''}</div>
</div>
</td>
</tr>
<tr>
<td class="label-cell">
<div class="label-row">
<div class="label-field">零件号</div>
<div class="label-value">${record.materialCode || ''}</div>
</div>
</td>
<td class="label-cell">
<div class="label-row">
<div class="label-field">数量</div>
<div class="label-value">${record.count || ''}</div>
</div>
</td>
</tr>
<tr>
<td class="label-cell">
<div class="label-row">
<div class="label-field">标重(g)</div>
<div class="label-value"></div>
</div>
</td>
<td class="label-cell">
<div class="label-row">
<div class="label-field">包装签字</div>
<div class="label-value"></div>
</div>
</td>
</tr>
<tr>
<td class="label-cell">
<div class="label-row">
<div class="label-field">实重(g)</div>
<div class="label-value"></div>
</div>
</td>
<td class="label-cell">
<div class="label-row">
<div class="label-field">检验签字</div>
<div class="label-value"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
`;
printWindow.document.write(printContent);
printWindow.document.close();
// 等待页面加载完成后打印
printWindow.onload = function() {
setTimeout(() => {
printWindow.focus();
printWindow.print();
printWindow.close();
}, 500);
};
} catch (error) {
console.error('打印标签失败:', error);
}
}
// 导出
const onExport = () => {
useDownload(() => exportFullWorkOrder(queryForm))

View File

@@ -319,7 +319,7 @@ const generateDetailLabel = async () => {
for (const workOrderInfo of formData.workOrderInfos) {
const orderNo = formData.orderNo + workOrderInfo.id;
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
const qrCodeData = `10#${formData.encoding}$11#9DP$12#${formData.batch}$17#${workOrderInfo.quantity}$20#${formattedDate2}$31#${orderNo}$DY`
const qrCodeImage = await generateQRCode(qrCodeData)
console.log("========", workOrderInfo.mark);
@@ -370,7 +370,7 @@ const generateOverallLabel = async () => {
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0')
const qrCodeData = `10#${formData.materialName}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
const qrCodeData = `10#${formData.encoding}$11#9DP$12#${formData.batch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
const qrCodeImage = await generateQRCode(qrCodeData)

View File

@@ -683,7 +683,7 @@ const fetchMaterialData = async (code: string) => {
const handleMaterialCodeChange2 = async (code: string) => {
if (!code || code === '') {
if (!code || code?.trim()=== '') {
formData.id = '';
formData.encoding = '';
formData.materialName = '';
@@ -694,6 +694,7 @@ const handleMaterialCodeChange2 = async (code: string) => {
formData.unitWeight = 0;
formData.photoUrl = '';
formData.weightRange = '';
return
}
const res = await getMaterialDetail(code);
if (res.code === '0') {