Compare commits
18 Commits
323a641fa3
...
master_lz
| Author | SHA1 | Date | |
|---|---|---|---|
| df67f63137 | |||
|
|
0f7efec0e1 | ||
|
|
2171c83d55 | ||
|
|
db40b1733b | ||
|
|
fe56422336 | ||
|
|
dc395406c3 | ||
|
|
41db731e40 | ||
|
|
35fcd40bd3 | ||
|
|
e27e44a3c3 | ||
|
|
47463c9b14 | ||
|
|
3f8b6e4695 | ||
| 2bf7b6872a | |||
|
|
a3cb2263fd | ||
|
|
d8273464c5 | ||
|
|
630a98af65 | ||
|
|
31178da436 | ||
| f35d64bd91 | |||
| 15ce1cfa13 |
24
package-lock.json
generated
24
package-lock.json
generated
@@ -28,6 +28,7 @@
|
|||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"dayjs": "^1.11.4",
|
"dayjs": "^1.11.4",
|
||||||
"echarts": "^5.4.2",
|
"echarts": "^5.4.2",
|
||||||
|
"flv.js": "^1.6.2",
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
"lint-staged": "^15.2.10",
|
"lint-staged": "^15.2.10",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
@@ -765,7 +766,6 @@
|
|||||||
},
|
},
|
||||||
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
|
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"extraneous": true,
|
|
||||||
"inBundle": true,
|
"inBundle": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -6560,6 +6560,12 @@
|
|||||||
"es6-symbol": "^3.1.1"
|
"es6-symbol": "^3.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/es6-promise": {
|
||||||
|
"version": "4.2.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||||
|
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/es6-symbol": {
|
"node_modules/es6-symbol": {
|
||||||
"version": "3.1.4",
|
"version": "3.1.4",
|
||||||
"resolved": "https://registry.npmmirror.com/es6-symbol/-/es6-symbol-3.1.4.tgz",
|
"resolved": "https://registry.npmmirror.com/es6-symbol/-/es6-symbol-3.1.4.tgz",
|
||||||
@@ -8254,6 +8260,16 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
|
"node_modules/flv.js": {
|
||||||
|
"version": "1.6.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
|
||||||
|
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"es6-promise": "^4.2.8",
|
||||||
|
"webworkify-webpack": "^2.1.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/follow-redirects": {
|
"node_modules/follow-redirects": {
|
||||||
"version": "1.15.9",
|
"version": "1.15.9",
|
||||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||||
@@ -16043,6 +16059,12 @@
|
|||||||
"node": ">=4.0"
|
"node": ">=4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/webworkify-webpack": {
|
||||||
|
"version": "2.1.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||||
|
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/which": {
|
"node_modules/which": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
|
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
|
||||||
|
|||||||
@@ -34,6 +34,7 @@
|
|||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"dayjs": "^1.11.4",
|
"dayjs": "^1.11.4",
|
||||||
"echarts": "^5.4.2",
|
"echarts": "^5.4.2",
|
||||||
|
"flv.js": "^1.6.2",
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
"lint-staged": "^15.2.10",
|
"lint-staged": "^15.2.10",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
|||||||
@@ -78,7 +78,12 @@ export function importMaterial(data: any) {
|
|||||||
return http.post(`${BASE_URL}/import`, data)
|
return http.post(`${BASE_URL}/import`, data)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @desc 解析物料信息导入数据 */
|
/** @desc 物料照片批量导入数据 */
|
||||||
export function uploadMaterialPhotos(data: FormData) {
|
export function uploadMaterialPhotos(data: FormData) {
|
||||||
return http.post(`${BASE_URL}/import/uploadMaterialPhotos`, data)
|
return http.post(`${BASE_URL}/import/uploadMaterialPhotos`, data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @desc 物料照片抓取数据 */
|
||||||
|
export function catchPhoto(data: FormData) {
|
||||||
|
return http.post(`${BASE_URL}/import/catch`, data)
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import http from '@/utils/http'
|
import http from '@/utils/http'
|
||||||
|
|
||||||
const BASE_URL = '/weighManage/material'
|
const BASE_URL = '/weighManage/workOrder'
|
||||||
|
|
||||||
export interface WeighManageResp {
|
export interface WeighManageResp {
|
||||||
id: string
|
id: string
|
||||||
@@ -21,7 +21,17 @@ export function getMaterialDetail(code: string) {
|
|||||||
return http.get<WeighManageResp>(`/admin/materialInfo/code/${code}`)
|
return http.get<WeighManageResp>(`/admin/materialInfo/code/${code}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @desc 新增人员管理 */
|
/** @desc 校验称重信息 */
|
||||||
export function addPeople(data: any) {
|
export function validateWeighing(data: any) {
|
||||||
return http.post(`${BASE_URL}`, data)
|
return http.post(`${BASE_URL}/validateWeighing`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 校验称重信息 */
|
||||||
|
export function vmSend(code: string) {
|
||||||
|
return http.get<WeighManageResp>(`/vm/send?msg=${code}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 获取图片 */
|
||||||
|
export function getImg() {
|
||||||
|
return http.get<string>(`/vm/latest-photo`)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,10 +12,13 @@ export interface WorkOrderResp {
|
|||||||
materialSpec: string
|
materialSpec: string
|
||||||
photoUrl: string
|
photoUrl: string
|
||||||
totalWeight: string
|
totalWeight: string
|
||||||
|
totalCalculatedWeight: string
|
||||||
totalCount: string
|
totalCount: string
|
||||||
createUserString: string
|
createUserString: string
|
||||||
updateUserString: string
|
updateUserString: string
|
||||||
matchResult: string
|
matchResult: string
|
||||||
|
workOrderInfos: Array<WorkOrderInfoResp>
|
||||||
|
qrCodeData: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WorkOrderInfoResp {
|
export interface WorkOrderInfoResp {
|
||||||
@@ -46,9 +49,14 @@ export function listWorkOrder(query: WorkOrderPageQuery) {
|
|||||||
return http.get<PageRes<WorkOrderResp[]>>(`${BASE_URL}`, query)
|
return http.get<PageRes<WorkOrderResp[]>>(`${BASE_URL}`, query)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @desc 查询工作订单详情 */
|
||||||
|
export function getWorkOrderInfos(id: string) {
|
||||||
|
return http.get<Array<WorkOrderInfoResp>>(`${BASE_URL}/info/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
/** @desc 查询工作订单详情 */
|
/** @desc 查询工作订单详情 */
|
||||||
export function getWorkOrder(id: string) {
|
export function getWorkOrder(id: string) {
|
||||||
return http.get<Array<WorkOrderInfoResp>>(`${BASE_URL}/${id}`)
|
return http.get<WorkOrderResp>(`${BASE_URL}/${id}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @desc 新增工作订单 */
|
/** @desc 新增工作订单 */
|
||||||
|
|||||||
10
src/types/components.d.ts
vendored
10
src/types/components.d.ts
vendored
@@ -13,9 +13,7 @@ declare module 'vue' {
|
|||||||
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
|
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
|
||||||
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
|
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
|
||||||
AButton: typeof import('@arco-design/web-vue')['Button']
|
AButton: typeof import('@arco-design/web-vue')['Button']
|
||||||
ACard: typeof import('@arco-design/web-vue')['Card']
|
|
||||||
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
|
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
|
||||||
ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
|
|
||||||
ACol: typeof import('@arco-design/web-vue')['Col']
|
ACol: typeof import('@arco-design/web-vue')['Col']
|
||||||
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
|
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
|
||||||
ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
|
ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
|
||||||
@@ -37,17 +35,14 @@ declare module 'vue' {
|
|||||||
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
|
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
|
||||||
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
|
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
|
||||||
ALayout: typeof import('@arco-design/web-vue')['Layout']
|
ALayout: typeof import('@arco-design/web-vue')['Layout']
|
||||||
ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
|
|
||||||
ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
|
ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
|
||||||
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
|
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
|
||||||
ALink: typeof import('@arco-design/web-vue')['Link']
|
ALink: typeof import('@arco-design/web-vue')['Link']
|
||||||
AMenu: typeof import('@arco-design/web-vue')['Menu']
|
AMenu: typeof import('@arco-design/web-vue')['Menu']
|
||||||
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
|
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
|
||||||
AModal: typeof import('@arco-design/web-vue')['Modal']
|
AModal: typeof import('@arco-design/web-vue')['Modal']
|
||||||
AOption: typeof import('@arco-design/web-vue')['Option']
|
|
||||||
AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
|
AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
|
||||||
APagination: typeof import('@arco-design/web-vue')['Pagination']
|
APagination: typeof import('@arco-design/web-vue')['Pagination']
|
||||||
APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
|
|
||||||
APopover: typeof import('@arco-design/web-vue')['Popover']
|
APopover: typeof import('@arco-design/web-vue')['Popover']
|
||||||
AProgress: typeof import('@arco-design/web-vue')['Progress']
|
AProgress: typeof import('@arco-design/web-vue')['Progress']
|
||||||
ARadio: typeof import('@arco-design/web-vue')['Radio']
|
ARadio: typeof import('@arco-design/web-vue')['Radio']
|
||||||
@@ -57,6 +52,7 @@ declare module 'vue' {
|
|||||||
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
|
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
|
||||||
ASelect: typeof import('@arco-design/web-vue')['Select']
|
ASelect: typeof import('@arco-design/web-vue')['Select']
|
||||||
ASpace: typeof import('@arco-design/web-vue')['Space']
|
ASpace: typeof import('@arco-design/web-vue')['Space']
|
||||||
|
ASpin: typeof import('@arco-design/web-vue')['Spin']
|
||||||
AStatistic: typeof import('@arco-design/web-vue')['Statistic']
|
AStatistic: typeof import('@arco-design/web-vue')['Statistic']
|
||||||
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
|
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
|
||||||
ASwitch: typeof import('@arco-design/web-vue')['Switch']
|
ASwitch: typeof import('@arco-design/web-vue')['Switch']
|
||||||
@@ -64,13 +60,9 @@ declare module 'vue' {
|
|||||||
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
|
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
|
||||||
ATabs: typeof import('@arco-design/web-vue')['Tabs']
|
ATabs: typeof import('@arco-design/web-vue')['Tabs']
|
||||||
ATag: typeof import('@arco-design/web-vue')['Tag']
|
ATag: typeof import('@arco-design/web-vue')['Tag']
|
||||||
ATextarea: typeof import('@arco-design/web-vue')['Textarea']
|
|
||||||
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
|
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
|
||||||
ATree: typeof import('@arco-design/web-vue')['Tree']
|
|
||||||
ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
|
ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
|
||||||
ATrigger: typeof import('@arco-design/web-vue')['Trigger']
|
|
||||||
ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
|
ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
|
||||||
ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle']
|
|
||||||
AUpload: typeof import('@arco-design/web-vue')['Upload']
|
AUpload: typeof import('@arco-design/web-vue')['Upload']
|
||||||
Avatar: typeof import('./../components/Avatar/index.vue')['default']
|
Avatar: typeof import('./../components/Avatar/index.vue')['default']
|
||||||
AWatermark: typeof import('@arco-design/web-vue')['Watermark']
|
AWatermark: typeof import('@arco-design/web-vue')['Watermark']
|
||||||
|
|||||||
484
src/views/barcodePrint/index.vue
Normal file
484
src/views/barcodePrint/index.vue
Normal file
@@ -0,0 +1,484 @@
|
|||||||
|
<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="true" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="物料编码">
|
||||||
|
<a-input v-model="formData.encoding" placeholder="未获取到物料编码" :disabled="true" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid-item">
|
||||||
|
<a-form-item label="工单编号">
|
||||||
|
<a-input v-model="formData.orderNo" placeholder="未获取到工单编号" :disabled="true" />
|
||||||
|
</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">
|
||||||
|
<!-- <div 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-row">
|
||||||
|
<div class="label-field">零件名称</div>
|
||||||
|
<div class="label-value">{{ labelData.partName }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">生产日期</div>
|
||||||
|
<div class="label-value">{{ labelData.productionDate }}</div>
|
||||||
|
</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-row">
|
||||||
|
<div class="label-field">零件号</div>
|
||||||
|
<div class="label-value">{{ labelData.partNumber }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">数量</div>
|
||||||
|
<div class="label-value">{{ labelData.totalCount }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">标重(kg)</div>
|
||||||
|
<div class="label-value">{{ labelData.totalCalculatedWeight }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">包装签字</div>
|
||||||
|
<div class="label-value">{{ labelData.packingSignature || '' }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">实重(kg)</div>
|
||||||
|
<div class="label-value">{{ labelData.totalWeight || '' }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">检验签字</div>
|
||||||
|
<div class="label-value">{{ labelData.inspectionSignature || '' }}</div>
|
||||||
|
</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'
|
||||||
|
import {getWorkOrder} from "@/apis/workOrder/workOrder";
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
workerOrderId: '',
|
||||||
|
encoding: '',
|
||||||
|
materialName: '',
|
||||||
|
orderNo: '',
|
||||||
|
totalCalculatedWeight: '',
|
||||||
|
totalWeight: '',
|
||||||
|
totalCount: '',
|
||||||
|
productionBatch: '',
|
||||||
|
qrCodeData: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 标签数据
|
||||||
|
const labelData = reactive({
|
||||||
|
partName: '',
|
||||||
|
partNumber: '',
|
||||||
|
totalCalculatedWeight: '',
|
||||||
|
totalWeight: '',
|
||||||
|
productionDate: '',
|
||||||
|
totalCount: '',
|
||||||
|
packingSignature: '',
|
||||||
|
inspectionSignature: '',
|
||||||
|
qrCodeData: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 标签数据
|
||||||
|
// const labelData = reactive({
|
||||||
|
// partName: '物料3',
|
||||||
|
// partNumber: '1',
|
||||||
|
// totalCalculatedWeight: '100',
|
||||||
|
// totalWeight: '100',
|
||||||
|
// productionDate: '202401010000',
|
||||||
|
// totalCount: '100',
|
||||||
|
// packingSignature: '',
|
||||||
|
// inspectionSignature: '',
|
||||||
|
// qrCodeData: '10#$$DY',
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 标签容器引用
|
||||||
|
const labelContainer = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
// 生成标签
|
||||||
|
const generateLabel = async () => {
|
||||||
|
if (!formData.productionBatch) {
|
||||||
|
Message.error('请输入生产批次')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!formData.materialName) {
|
||||||
|
Message.error('未获取到物料信息')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
|
||||||
|
// 直接从 formData 中获取数据
|
||||||
|
Object.assign(labelData, {
|
||||||
|
partName: formData.materialName || '',
|
||||||
|
partNumber: formData.encoding || '',
|
||||||
|
totalCalculatedWeight: formData.totalCalculatedWeight || '',
|
||||||
|
totalWeight: formData.totalWeight || '',
|
||||||
|
productionDate: formattedDate,
|
||||||
|
totalCount: formData.totalCount || '',
|
||||||
|
packingSignature: '',
|
||||||
|
inspectionSignature: '',
|
||||||
|
//10#零件号$11#供应商代码$12#生产批次$17#数量$20#包装日期$31#唯一号$DY
|
||||||
|
qrCodeData: `10#${formData.materialName}$11#9DP$12#${formData.productionBatch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
|
||||||
|
})
|
||||||
|
|
||||||
|
Message.success('标签生成成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('生成标签失败:', error)
|
||||||
|
Message.error('生成标签失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时,检查是否有参数传递
|
||||||
|
onMounted(() => {
|
||||||
|
// 从路由参数中获取数据
|
||||||
|
const workerOrderId = route.query.workerOrderId as string
|
||||||
|
// 如果有参数传递,设置表单数据并标记为不可修改
|
||||||
|
if (workerOrderId) {
|
||||||
|
formData.workerOrderId = workerOrderId
|
||||||
|
getWorkOrder(workerOrderId).then(res => {
|
||||||
|
if (res.code == '0') {
|
||||||
|
formData.encoding = res.data.encoding
|
||||||
|
formData.materialName = res.data.materialName
|
||||||
|
formData.orderNo = res.data.orderNo
|
||||||
|
formData.totalCalculatedWeight = res.data.totalCalculatedWeight
|
||||||
|
formData.totalWeight = res.data.totalWeight
|
||||||
|
formData.totalCount = res.data.totalCount
|
||||||
|
} else {
|
||||||
|
Message.error('获取详情失败')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自动生成标签
|
||||||
|
generateLabel()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 打印标签
|
||||||
|
const printLabel = async () => {
|
||||||
|
await nextTick()
|
||||||
|
if (labelContainer.value) {
|
||||||
|
// 创建打印窗口
|
||||||
|
const printWindow = window.open('', '_blank')
|
||||||
|
if (printWindow) {
|
||||||
|
// 直接构建打印内容,确保二维码图片正确生成
|
||||||
|
const printHTML = `
|
||||||
|
<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: 7pt; font-weight: bold; margin-right: 2mm; min-width: 25pt; }
|
||||||
|
.label-value { font-size: 7pt; flex: 1; }
|
||||||
|
.qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
|
||||||
|
.serial-number { font-size: 7pt; 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">${labelData.partName}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">生产日期</div>
|
||||||
|
<div class="label-value">${labelData.productionDate}</div>
|
||||||
|
</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-row">
|
||||||
|
<div class="label-field">零件号</div>
|
||||||
|
<div class="label-value">${labelData.partNumber}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">数量</div>
|
||||||
|
<div class="label-value">${labelData.totalCount}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">标重(kg)</div>
|
||||||
|
<div class="label-value">${labelData.totalCalculatedWeight}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">包装签字</div>
|
||||||
|
<div class="label-value">${labelData.packingSignature || ''}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">实重(kg)</div>
|
||||||
|
<div class="label-value">${labelData.totalWeight || ''}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="label-cell">
|
||||||
|
<div class="label-row">
|
||||||
|
<div class="label-field">检验签字</div>
|
||||||
|
<div class="label-value">${labelData.inspectionSignature || ''}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`
|
||||||
|
|
||||||
|
printWindow.document.write(printHTML)
|
||||||
|
printWindow.document.close()
|
||||||
|
|
||||||
|
// 等待图片加载完成后再打印
|
||||||
|
printWindow.onload = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
printWindow.focus()
|
||||||
|
printWindow.print()
|
||||||
|
printWindow.close()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-field {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-value {
|
||||||
|
font-size: 12px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||||
import { useTabsStore, useUserStore } from '@/stores'
|
import { useTabsStore, useUserStore } from '@/stores'
|
||||||
|
|
||||||
@@ -42,12 +42,24 @@ const loading = ref(false)
|
|||||||
|
|
||||||
// 登录
|
// 登录
|
||||||
const handleLogin = async () => {
|
const handleLogin = async () => {
|
||||||
|
// 检查用户是否已经登录
|
||||||
|
if (userStore.token) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const isInvalid = await formRef.value?.validate()
|
const isInvalid = await formRef.value?.validate()
|
||||||
if (isInvalid) return
|
if (isInvalid) return
|
||||||
try {
|
try {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
// 调用后端接口校验卡号
|
// 调用后端接口校验卡号
|
||||||
await userStore.cardLogin(form)
|
await userStore.cardLogin(form)
|
||||||
|
|
||||||
|
// 登录成功后移除事件监听器
|
||||||
|
if (keyDownListener) {
|
||||||
|
document.removeEventListener('keydown', keyDownListener)
|
||||||
|
keyDownListener = null
|
||||||
|
}
|
||||||
|
|
||||||
tabsStore.reset()
|
tabsStore.reset()
|
||||||
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
||||||
await router.push({
|
await router.push({
|
||||||
@@ -64,24 +76,30 @@ const handleLogin = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 键盘事件监听器引用
|
||||||
|
let keyDownListener: ((e: KeyboardEvent) => void) | null = null
|
||||||
|
|
||||||
// 监听键盘输入,实现自动识别卡号
|
// 监听键盘输入,实现自动识别卡号
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 监听全局键盘事件,用于识别刷卡输入
|
// 只监听Enter键,用于自动登录
|
||||||
document.addEventListener('keydown', (e) => {
|
keyDownListener = (e) => {
|
||||||
// 刷卡器通常会快速输入卡号并以Enter键结束
|
// 刷卡器通常会快速输入卡号并以Enter键结束
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
// 遇到Enter键,尝试登录
|
// 遇到Enter键,尝试登录
|
||||||
if (form.cardNumber.trim()) {
|
if (form.cardNumber.trim()) {
|
||||||
handleLogin()
|
handleLogin()
|
||||||
}
|
}
|
||||||
} else if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
|
|
||||||
// 只捕获单个字符的按键,忽略控制键和功能键
|
|
||||||
form.cardNumber += e.key
|
|
||||||
} else if (e.key === 'Backspace') {
|
|
||||||
// 处理退格键
|
|
||||||
form.cardNumber = form.cardNumber.slice(0, -1)
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', keyDownListener)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (keyDownListener) {
|
||||||
|
document.removeEventListener('keydown', keyDownListener)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
:disabled-column-keys="['name']"
|
:disabled-column-keys="['name']"
|
||||||
@refresh="search"
|
@refresh="search"
|
||||||
>
|
>
|
||||||
|
<!-- toolbar 部分保持不变 -->
|
||||||
<template #toolbar-left>
|
<template #toolbar-left>
|
||||||
<a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
|
<a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
|
||||||
<a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
|
<a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
|
||||||
@@ -38,18 +39,31 @@
|
|||||||
<template #default>照片批量导入</template>
|
<template #default>照片批量导入</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<!-- 【修改点】照片列插槽 -->
|
||||||
<template #photoUrl="{ record }">
|
<template #photoUrl="{ record }">
|
||||||
<div class="photo-container">
|
<div class="photo-container">
|
||||||
|
<!-- 1. 正常显示图片:有地址 且 未标记为错误 -->
|
||||||
<img
|
<img
|
||||||
v-if="record.photoUrl"
|
v-if="record.photoUrl && !record.photoLoadError"
|
||||||
:src="record.photoUrl"
|
:src="record.photoUrl"
|
||||||
alt="物料照片"
|
alt="物料照片"
|
||||||
class="material-photo"
|
class="material-photo"
|
||||||
@error="handleImgError($event)"
|
@load="handleImgLoad(record)"
|
||||||
|
@error="handleImgError(record, $event)"
|
||||||
/>
|
/>
|
||||||
<span v-else class="no-photo">暂无照片</span>
|
|
||||||
|
<!-- 2. 无地址 -->
|
||||||
|
<span v-else-if="!record.photoUrl" class="no-photo">暂无照片</span>
|
||||||
|
|
||||||
|
<!-- 3. 地址存在但加载失败 -->
|
||||||
|
<span v-else class="photo-error">
|
||||||
|
<icon-exclamation-circle-fill class="error-icon" />
|
||||||
|
照片异常
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #action="{ record }">
|
<template #action="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
<a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||||
@@ -73,6 +87,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
// ... 保持原有的 import 不变
|
||||||
import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
|
import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
|
||||||
import MaterialInfoImportDrawer from './MaterialInfoImportDrawer.vue'
|
import MaterialInfoImportDrawer from './MaterialInfoImportDrawer.vue'
|
||||||
import PhotosImport from '@/views/material/PhotosImport.vue';
|
import PhotosImport from '@/views/material/PhotosImport.vue';
|
||||||
@@ -84,6 +99,12 @@ import has from '@/utils/has'
|
|||||||
|
|
||||||
defineOptions({ name: 'MaterialInfo' })
|
defineOptions({ name: 'MaterialInfo' })
|
||||||
|
|
||||||
|
// 扩展类型定义,允许动态添加 photoLoadError 属性
|
||||||
|
// 如果 TS 报错,可以在 MaterialInfoResp 接口定义中添加 photoLoadError?: boolean;
|
||||||
|
interface MaterialInfoRespWithStatus extends MaterialInfoResp {
|
||||||
|
photoLoadError?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
const queryForm = reactive<MaterialInfoQuery>({
|
const queryForm = reactive<MaterialInfoQuery>({
|
||||||
materialName: undefined,
|
materialName: undefined,
|
||||||
encoding: undefined,
|
encoding: undefined,
|
||||||
@@ -97,6 +118,7 @@ const {
|
|||||||
search,
|
search,
|
||||||
handleDelete,
|
handleDelete,
|
||||||
} = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
|
} = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
|
||||||
|
|
||||||
const columns = ref<TableInstanceColumns[]>([
|
const columns = ref<TableInstanceColumns[]>([
|
||||||
{ title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
|
{ title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
|
||||||
{ title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
|
{ title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
|
||||||
@@ -116,14 +138,12 @@ const columns = ref<TableInstanceColumns[]>([
|
|||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
// 重置
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
queryForm.materialName = undefined
|
queryForm.materialName = undefined
|
||||||
queryForm.encoding = undefined
|
queryForm.encoding = undefined
|
||||||
search()
|
search()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除
|
|
||||||
const onDelete = (record: MaterialInfoResp) => {
|
const onDelete = (record: MaterialInfoResp) => {
|
||||||
return handleDelete(() => deleteMaterialInfo(record.id), {
|
return handleDelete(() => deleteMaterialInfo(record.id), {
|
||||||
content: `是否确定删除该条数据?`,
|
content: `是否确定删除该条数据?`,
|
||||||
@@ -131,25 +151,26 @@ const onDelete = (record: MaterialInfoResp) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导出
|
|
||||||
const onExport = () => {
|
const onExport = () => {
|
||||||
useDownload(() => exportMaterialInfo(queryForm))
|
useDownload(() => exportMaterialInfo(queryForm))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图片加载失败处理函数(新增)
|
// 【修改点】图片加载处理逻辑
|
||||||
const handleImgError = (e: Event) => {
|
const handleImgLoad = (record: MaterialInfoRespWithStatus) => {
|
||||||
// 替换为你的默认图片地址(建议放在/static目录下)
|
record.photoLoadError = false
|
||||||
const target = e.target as HTMLImageElement
|
}
|
||||||
target.src = '/static/images/default-material.png'
|
|
||||||
|
const handleImgError = (record: MaterialInfoRespWithStatus, e: Event) => {
|
||||||
|
// 标记为加载错误,触发模板渲染 "照片异常"
|
||||||
|
record.photoLoadError = true
|
||||||
|
console.warn(`物料照片加载失败: ${record.photoUrl}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
|
const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
|
||||||
// 新增
|
|
||||||
const onAdd = () => {
|
const onAdd = () => {
|
||||||
MaterialInfoAddModalRef.value?.onAdd()
|
MaterialInfoAddModalRef.value?.onAdd()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改
|
|
||||||
const onUpdate = (record: MaterialInfoResp) => {
|
const onUpdate = (record: MaterialInfoResp) => {
|
||||||
MaterialInfoAddModalRef.value?.onUpdate(record.id)
|
MaterialInfoAddModalRef.value?.onUpdate(record.id)
|
||||||
}
|
}
|
||||||
@@ -166,23 +187,43 @@ const onPhotosImport = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
// 物料照片样式(新增)
|
|
||||||
.photo-container {
|
.photo-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-photo {
|
.material-photo {
|
||||||
width: 80px;
|
width: 100%;
|
||||||
height: 80px;
|
height: 100%;
|
||||||
object-fit: cover; // 保持图片比例,避免拉伸
|
object-fit: cover;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-photo {
|
.no-photo {
|
||||||
color: #999;
|
color: #999;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增样式
|
||||||
|
.photo-error {
|
||||||
|
color: #ff4d4f; // 阿里红/危险色
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,377 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -49,7 +49,7 @@ const columns: ColumnItem[] = reactive([
|
|||||||
field: 'configKey',
|
field: 'configKey',
|
||||||
type: 'input',
|
type: 'input',
|
||||||
span: 24,
|
span: 24,
|
||||||
disabled: true,
|
disabled: isUpdate.value,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '参数键值',
|
label: '参数键值',
|
||||||
|
|||||||
@@ -204,7 +204,7 @@ const reset = () => {
|
|||||||
|
|
||||||
const onDelete = (record: UserResp) => {
|
const onDelete = (record: UserResp) => {
|
||||||
return handleDelete(() => deleteUser(record.id), {
|
return handleDelete(() => deleteUser(record.id), {
|
||||||
content: `是否确定删除用户「${record.username}」?`,
|
content: `是否确定删除用户「${record.nickname}(${record.username})」?`,
|
||||||
showModal: true,
|
showModal: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -71,8 +71,14 @@
|
|||||||
<!-- 右侧信息 -->
|
<!-- 右侧信息 -->
|
||||||
<div class="right-section">
|
<div class="right-section">
|
||||||
<div class="camera-section">
|
<div class="camera-section">
|
||||||
<div class="image-placeholder square-image">实时画面 相机1</div>
|
<!-- 图片展示 -->
|
||||||
<div class="image-placeholder square-image">实时画面 相机2</div>
|
<div class="image-placeholder square-image">
|
||||||
|
<img
|
||||||
|
:src="imgData.imgUrl"
|
||||||
|
alt="图片展示"
|
||||||
|
style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-section">
|
<div class="info-section">
|
||||||
@@ -88,20 +94,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<h4>比对结果</h4>
|
<h4>比对结果</h4>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<span class="label">比对结果:</span>
|
<span class="label">比对结果:</span>
|
||||||
<span class="value match-result" :class="{
|
<span
|
||||||
'match-success': formData.matchResult === 'success',
|
class="value match-result" :class="{
|
||||||
'match-failed': formData.matchResult === 'failed',
|
'match-success': compareMatchResult === 'success',
|
||||||
'match-pending': !formData.matchResult
|
'match-failed': compareMatchResult === 'failed',
|
||||||
}">
|
'match-pending': !compareMatchResult,
|
||||||
<icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;"/>
|
}"
|
||||||
<icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;"/>
|
>
|
||||||
|
<icon-check-circle-fill v-if="compareMatchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
|
||||||
{{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
|
<icon-close-circle-fill v-else-if="compareMatchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />
|
||||||
|
{{ compareMatchResult === 'success' ? '成功' : compareMatchResult === 'failed' ? '失败' : '请放置需比对的物料到扫描区域!' }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,7 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 称重登记页面 -->
|
<!-- 称重登记页面 - 这里放FLV播放器 -->
|
||||||
<div v-else-if="activeStep === 2" class="step-content">
|
<div v-else-if="activeStep === 2" class="step-content">
|
||||||
<div class="weighing-content">
|
<div class="weighing-content">
|
||||||
<!-- 左侧输入区域 -->
|
<!-- 左侧输入区域 -->
|
||||||
@@ -139,7 +145,43 @@
|
|||||||
<a-input v-model="ahDeviceWeight" placeholder="-" disabled />
|
<a-input v-model="ahDeviceWeight" placeholder="-" disabled />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-placeholder large-image">实时画面</div>
|
|
||||||
|
<!-- 这里是摄像头画面 - 替换成FLV播放器 -->
|
||||||
|
<div class="video-container large-image">
|
||||||
|
<video
|
||||||
|
ref="cameraVideo"
|
||||||
|
autoplay
|
||||||
|
muted
|
||||||
|
playsinline
|
||||||
|
style="width: 100%; height: 100%; object-fit: cover;"
|
||||||
|
></video>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="cameraStatus === 'connecting'" class="video-overlay">
|
||||||
|
<a-spin />
|
||||||
|
<span style="margin-left: 8px;">加载中...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 错误状态 -->
|
||||||
|
<div v-if="cameraStatus === 'error'" class="video-overlay error">
|
||||||
|
<icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
|
||||||
|
<span>连接失败</span>
|
||||||
|
<a-button size="small" type="primary" @click="reconnectCamera">重试</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 未连接状态 -->
|
||||||
|
<div v-if="cameraStatus === 'disconnected'" class="video-overlay">
|
||||||
|
<icon-pause-circle-fill style="color: #999; font-size: 24px;" />
|
||||||
|
<span>未连接</span>
|
||||||
|
<a-button size="small" type="primary" @click="initCamera">连接</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 摄像头状态标识 -->
|
||||||
|
<div v-if="cameraStatus === 'connected'" class="camera-badge">
|
||||||
|
<span class="live-badge">LIVE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="weighing-actions">
|
<div class="weighing-actions">
|
||||||
<a-button type="primary" @click="handleConfirm">确定</a-button>
|
<a-button type="primary" @click="handleConfirm">确定</a-button>
|
||||||
<a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
|
<a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
|
||||||
@@ -211,19 +253,18 @@
|
|||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<a-button
|
<a-button
|
||||||
v-if="activeStep > 1 && activeStep < 3"
|
v-if="activeStep > 1 && activeStep < 3"
|
||||||
@click="handlePrevious"
|
|
||||||
class="previous-button"
|
class="previous-button"
|
||||||
|
@click="handlePrevious"
|
||||||
>
|
>
|
||||||
上一步
|
上一步
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
v-if="activeStep < 3"
|
v-if="activeStep < 3"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleNext"
|
|
||||||
:disabled="activeStep === 1 && formData.matchResult !== 'success'"
|
|
||||||
class="next-button"
|
class="next-button"
|
||||||
|
@click="handleNext"
|
||||||
>
|
>
|
||||||
{{ activeStep === 2 ? '完成' : '下一步' }}
|
{{ activeStep === 2 ? '完成' : (compareMatchResult === 'success' ? '下一步' : '开始比对') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -231,11 +272,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onUnmounted } from 'vue'
|
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||||
import { Modal, Message } from '@arco-design/web-vue'
|
import { Message, Modal, Notification } from '@arco-design/web-vue'
|
||||||
import { getMaterialDetail } from "@/apis/weightManage/weightManage";
|
import {getImg, getMaterialDetail, validateWeighing, vmSend} from '@/apis/weightManage/weightManage'
|
||||||
import {addWorkOrder, type WorkOrderResp} from "@/apis/workOrder/workOrder";
|
import {type WorkOrderResp, addWorkOrder, getWorkOrder} from '@/apis/workOrder/workOrder'
|
||||||
import { Notification } from "@arco-design/web-vue"
|
import { catchPhoto } from '@/apis/material/materialInfo'
|
||||||
|
|
||||||
|
defineOptions({ name: 'WeightManage' })
|
||||||
|
|
||||||
|
// 动态导入flv.js
|
||||||
|
const flvjs = ref<any>(null)
|
||||||
|
|
||||||
// 当前步骤
|
// 当前步骤
|
||||||
const activeStep = ref(1)
|
const activeStep = ref(1)
|
||||||
@@ -249,7 +295,273 @@ const formData = reactive({
|
|||||||
materialSpec: '', // 物料规格
|
materialSpec: '', // 物料规格
|
||||||
unitWeight: 0, // 重量
|
unitWeight: 0, // 重量
|
||||||
photoUrl: '', // 样图URL
|
photoUrl: '', // 样图URL
|
||||||
matchResult: '' // 比对结果
|
})
|
||||||
|
|
||||||
|
const imgData = reactive({
|
||||||
|
imgUrl: '', // 样图URL
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定时器引用
|
||||||
|
let pollingInterval = null
|
||||||
|
|
||||||
|
// 获取图片的方法
|
||||||
|
const getImage = () => {
|
||||||
|
|
||||||
|
getImg().then((res) => {
|
||||||
|
if (res.code === '0') {
|
||||||
|
imgData.imgUrl = res.data?.imgUrl || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//比对结果
|
||||||
|
const compareMatchResult = ref('')
|
||||||
|
|
||||||
|
// 摄像头状态
|
||||||
|
const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
|
||||||
|
|
||||||
|
// 视频元素引用
|
||||||
|
const cameraVideo = ref<HTMLVideoElement | null>(null)
|
||||||
|
|
||||||
|
// FLV播放器实例
|
||||||
|
let player: any = null
|
||||||
|
|
||||||
|
const reconnectCount = ref(1)
|
||||||
|
const maxReconnectAttempts = 3
|
||||||
|
const reconnectTimer = ref<any>(null)
|
||||||
|
|
||||||
|
// 直接写死FLV流地址(根据你的实际地址修改)
|
||||||
|
const FLV_URL = 'http://192.168.2.87:8866/live?url=rtsp://admin:admin%40123@192.168.2.59:554/media/video1' // 摄像头的FLV地址
|
||||||
|
|
||||||
|
// 加载flv.js
|
||||||
|
const loadFlvJs = async () => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const module = await import('flv.js')
|
||||||
|
flvjs.value = module.default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化摄像头
|
||||||
|
const initCamera = () => {
|
||||||
|
if (!cameraVideo.value || !flvjs.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查浏览器支持
|
||||||
|
if (!flvjs.value.isSupported()) {
|
||||||
|
Message.error('当前浏览器不支持FLV播放')
|
||||||
|
cameraStatus.value = 'error'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
cameraStatus.value = 'connecting'
|
||||||
|
|
||||||
|
// 清除之前的重连定时器
|
||||||
|
if (reconnectTimer.value) {
|
||||||
|
clearTimeout(reconnectTimer.value)
|
||||||
|
reconnectTimer.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 销毁旧的播放器
|
||||||
|
if (player) {
|
||||||
|
player.destroy()
|
||||||
|
player = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新的播放器
|
||||||
|
player = flvjs.value.createPlayer({
|
||||||
|
type: 'flv',
|
||||||
|
url: FLV_URL,
|
||||||
|
isLive: true,
|
||||||
|
hasAudio: false,
|
||||||
|
hasVideo: true,
|
||||||
|
enableStashBuffer: false,
|
||||||
|
stashInitialSize: 128,
|
||||||
|
enableWorker: true,
|
||||||
|
autoCleanupSourceBuffer: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 绑定视频元素
|
||||||
|
player.attachMediaElement(cameraVideo.value)
|
||||||
|
|
||||||
|
// 加载并播放
|
||||||
|
player.load()
|
||||||
|
player.play().then(() => {
|
||||||
|
cameraStatus.value = 'connected'
|
||||||
|
reconnectCount.value = 1 // 连接成功,重置重连计数
|
||||||
|
}).catch((error: any) => {
|
||||||
|
cameraStatus.value = 'error'
|
||||||
|
Message.error('摄像头播放失败,正在重连')
|
||||||
|
// 触发自动重连
|
||||||
|
handleReconnect()
|
||||||
|
return
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听各种事件
|
||||||
|
player.on(flvjs.value.Events.ERROR, (err: any) => {
|
||||||
|
cameraStatus.value = 'error'
|
||||||
|
// 触发自动重连
|
||||||
|
handleReconnect()
|
||||||
|
})
|
||||||
|
|
||||||
|
player.on(flvjs.value.Events.STALLED, () => {
|
||||||
|
// 可以在这里处理卡顿,但不立即重连
|
||||||
|
})
|
||||||
|
|
||||||
|
player.on(flvjs.value.Events.RECOVERED_EARLY, () => {
|
||||||
|
if (cameraStatus.value !== 'connected') {
|
||||||
|
cameraStatus.value = 'connected'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
cameraStatus.value = 'error'
|
||||||
|
handleReconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理自动重连
|
||||||
|
const handleReconnect = () => {
|
||||||
|
// 只有当前在称重页面才重连
|
||||||
|
if (activeStep.value !== 2) return
|
||||||
|
|
||||||
|
// 检查重连次数
|
||||||
|
if (reconnectCount.value >= maxReconnectAttempts) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 增加重连计数
|
||||||
|
reconnectCount.value++
|
||||||
|
|
||||||
|
// 计算重连延迟(指数退避)
|
||||||
|
const delay = Math.min(1000 * 2 ** (reconnectCount.value - 1), 30000)
|
||||||
|
|
||||||
|
// 清除旧的定时器
|
||||||
|
if (reconnectTimer.value) {
|
||||||
|
clearTimeout(reconnectTimer.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置新的重连定时器
|
||||||
|
reconnectTimer.value = setTimeout(() => {
|
||||||
|
initCamera()
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新连接摄像头(手动)
|
||||||
|
const reconnectCamera = () => {
|
||||||
|
reconnectCount.value = 1 // 手动重连时重置计数
|
||||||
|
initCamera()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加一个定时检查状态的函数
|
||||||
|
const checkCameraStatus = () => {
|
||||||
|
if (!player || !cameraVideo.value) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 检查播放器状态
|
||||||
|
if (player.isPlaying && !player.isPlaying()) {
|
||||||
|
if (cameraStatus.value === 'connected') {
|
||||||
|
cameraStatus.value = 'error'
|
||||||
|
handleReconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 启动状态检查定时器
|
||||||
|
let statusCheckTimer: any = null
|
||||||
|
|
||||||
|
// 监听步骤变化
|
||||||
|
watch(activeStep, (newVal) => {
|
||||||
|
if (newVal === 2) {
|
||||||
|
// 进入称重登记页面,启动摄像头
|
||||||
|
reconnectCount.value = 1 // 重置重连计数
|
||||||
|
nextTick(() => {
|
||||||
|
initCamera()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 启动状态检查(每30秒检查一次)
|
||||||
|
statusCheckTimer = setInterval(checkCameraStatus, 30000)
|
||||||
|
} else {
|
||||||
|
// 离开称重登记页面,停止摄像头和定时器
|
||||||
|
stopCamera()
|
||||||
|
if (statusCheckTimer) {
|
||||||
|
clearInterval(statusCheckTimer)
|
||||||
|
statusCheckTimer = null
|
||||||
|
}
|
||||||
|
if (reconnectTimer.value) {
|
||||||
|
clearTimeout(reconnectTimer.value)
|
||||||
|
reconnectTimer.value = null
|
||||||
|
}
|
||||||
|
reconnectCount.value = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时清理所有定时器
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
stopCamera()
|
||||||
|
if (statusCheckTimer) {
|
||||||
|
clearInterval(statusCheckTimer)
|
||||||
|
statusCheckTimer = null
|
||||||
|
}
|
||||||
|
if (reconnectTimer.value) {
|
||||||
|
clearTimeout(reconnectTimer.value)
|
||||||
|
reconnectTimer.value = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 重新连接摄像头
|
||||||
|
// const reconnectCamera = () => {
|
||||||
|
// if (player) {
|
||||||
|
// player.unload()
|
||||||
|
// player.detachMediaElement()
|
||||||
|
// player.destroy()
|
||||||
|
// player = null
|
||||||
|
// }
|
||||||
|
// setTimeout(() => initCamera(), 1000)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 停止摄像头
|
||||||
|
const stopCamera = () => {
|
||||||
|
if (player) {
|
||||||
|
player.pause()
|
||||||
|
player.unload()
|
||||||
|
player.detachMediaElement()
|
||||||
|
player.destroy()
|
||||||
|
player = null
|
||||||
|
cameraStatus.value = 'disconnected'
|
||||||
|
}
|
||||||
|
if (reconnectTimer.value) {
|
||||||
|
clearTimeout(reconnectTimer.value)
|
||||||
|
reconnectTimer.value = null
|
||||||
|
}
|
||||||
|
reconnectCount.value = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 监听步骤变化
|
||||||
|
watch(activeStep, (newVal) => {
|
||||||
|
if (newVal === 2) {
|
||||||
|
// 进入称重登记页面,启动摄像头
|
||||||
|
nextTick(() => {
|
||||||
|
initCamera()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 离开相关页面,停止摄像头
|
||||||
|
stopCamera()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件挂载时
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadFlvJs()
|
||||||
|
pollingInterval = setInterval(getImg, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
stopCamera()
|
||||||
})
|
})
|
||||||
|
|
||||||
const workOrderResp = ref<WorkOrderResp>({
|
const workOrderResp = ref<WorkOrderResp>({
|
||||||
@@ -265,13 +577,15 @@ const workOrderResp = ref<WorkOrderResp>({
|
|||||||
totalCount: '',
|
totalCount: '',
|
||||||
createUserString: '',
|
createUserString: '',
|
||||||
updateUserString: '',
|
updateUserString: '',
|
||||||
matchResult: 'failed'
|
totalCalculatedWeight: '',
|
||||||
|
workOrderInfos: [],
|
||||||
|
matchResult: 'failed',
|
||||||
|
qrCodeData: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
// 称重登记页面数据
|
// 称重登记页面数据
|
||||||
const inputQuantity = ref('')
|
const inputQuantity = ref('')
|
||||||
const ahDeviceWeight = ref('10')
|
const ahDeviceWeight = ref('')
|
||||||
const calculatedWeight = ref('')
|
const calculatedWeight = ref('')
|
||||||
const weighingCount = ref(1)
|
const weighingCount = ref(1)
|
||||||
|
|
||||||
@@ -289,65 +603,77 @@ const columns = [
|
|||||||
{
|
{
|
||||||
title: '称重次数',
|
title: '称重次数',
|
||||||
dataIndex: 'weightTime',
|
dataIndex: 'weightTime',
|
||||||
key: 'weightTime'
|
key: 'weightTime',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '数量',
|
title: '数量',
|
||||||
dataIndex: 'quantity',
|
dataIndex: 'quantity',
|
||||||
key: 'quantity',
|
key: 'quantity',
|
||||||
className: 'green-bg'
|
className: 'green-bg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '重量(g)',
|
title: '重量(g)',
|
||||||
dataIndex: 'weight',
|
dataIndex: 'weight',
|
||||||
key: 'weight',
|
key: 'weight',
|
||||||
className: 'green-bg'
|
className: 'green-bg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '计算重量(g)',
|
title: '计算重量(g)',
|
||||||
dataIndex: 'calculatedWeight',
|
dataIndex: 'calculatedWeight',
|
||||||
key: 'calculatedWeight',
|
key: 'calculatedWeight',
|
||||||
className: 'green-bg'
|
className: 'green-bg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '抓拍图片',
|
title: '抓拍图片',
|
||||||
dataIndex: 'imgUrl',
|
dataIndex: 'image',
|
||||||
key: 'imgUrl',
|
key: 'image',
|
||||||
className: 'green-bg'
|
className: 'green-bg',
|
||||||
|
// 使用自定义渲染
|
||||||
|
render: ({ record }) => {
|
||||||
|
if (record.image && record.image !== '未抓拍') {
|
||||||
|
return h('div', { class: 'image-preview' }, [
|
||||||
|
h('img', {
|
||||||
|
src: record.image,
|
||||||
|
alt: '抓拍图片',
|
||||||
|
style: 'width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer;',
|
||||||
|
onClick: () => previewImage(record.image),
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
return h('span', record.image || '-')
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
dataIndex: 'action',
|
dataIndex: 'action',
|
||||||
key: 'action',
|
key: 'action',
|
||||||
slotName: 'action'
|
slotName: 'action',
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 防抖函数
|
// 防抖函数
|
||||||
const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
|
const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
|
||||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
let timer: ReturnType<typeof setTimeout> | null = null
|
||||||
return function (...args: Parameters<T>) {
|
return function (...args: Parameters<T>) {
|
||||||
if (timer) clearTimeout(timer);
|
if (timer) clearTimeout(timer)
|
||||||
timer = setTimeout(() => {
|
timer = setTimeout(() => {
|
||||||
func(...args);
|
func(...args)
|
||||||
}, delay);
|
}, delay)
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// 原始的物料编码变化处理函数
|
// 原始的物料编码变化处理函数
|
||||||
const originalHandleMaterialCodeChange = async () => {
|
const originalHandleMaterialCodeChange = async () => {
|
||||||
// 确保输入框内容是完整的物料编码
|
// 确保输入框内容是完整的物料编码
|
||||||
const materialCode = formData.inputMaterialCode?.trim();
|
const materialCode = formData.inputMaterialCode?.trim()
|
||||||
|
|
||||||
// 无论是否有输入,先重置所有物料相关字段,确保新数据能完全覆盖旧数据
|
// 无论是否有输入,先重置所有物料相关字段,确保新数据能完全覆盖旧数据
|
||||||
formData.encoding = "";
|
formData.encoding = ''
|
||||||
formData.materialName = "";
|
formData.materialName = ''
|
||||||
formData.materialSpec = "";
|
formData.materialSpec = ''
|
||||||
formData.unitWeight = 0;
|
formData.unitWeight = 0
|
||||||
formData.photoUrl = "";
|
formData.photoUrl = ''
|
||||||
formData.matchResult = "";
|
compareMatchResult.value = '';
|
||||||
|
|
||||||
// 如果有物料编码输入,获取物料数据
|
// 如果有物料编码输入,获取物料数据
|
||||||
if (materialCode) {
|
if (materialCode) {
|
||||||
@@ -358,17 +684,17 @@ const originalHandleMaterialCodeChange = async () => {
|
|||||||
// 即使获取失败,也保持字段为空,避免显示旧数据
|
// 即使获取失败,也保持字段为空,避免显示旧数据
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// 记录上次输入时间,用于判断是否是扫码枪输入
|
// 记录上次输入时间,用于判断是否是扫码枪输入
|
||||||
let lastInputTime = 0;
|
let lastInputTime = 0
|
||||||
// 记录输入内容,用于判断是否是新的扫码
|
// 记录输入内容,用于判断是否是新的扫码
|
||||||
let previousInput = '';
|
const previousInput = ''
|
||||||
|
|
||||||
// 处理键盘按下事件
|
// 处理键盘按下事件
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
// 获取当前时间
|
// 获取当前时间
|
||||||
const currentTime = Date.now();
|
const currentTime = Date.now()
|
||||||
|
|
||||||
// 如果输入速度非常快(小于100ms),认为是扫码枪输入
|
// 如果输入速度非常快(小于100ms),认为是扫码枪输入
|
||||||
if (currentTime - lastInputTime < 100 && formData.inputMaterialCode) {
|
if (currentTime - lastInputTime < 100 && formData.inputMaterialCode) {
|
||||||
@@ -376,33 +702,30 @@ const handleKeyDown = (event: KeyboardEvent) => {
|
|||||||
} else if (event.key.length === 1 && !event.ctrlKey && !event.altKey) {
|
} else if (event.key.length === 1 && !event.ctrlKey && !event.altKey) {
|
||||||
// 如果是新的输入(不是快速连续输入),清空输入框
|
// 如果是新的输入(不是快速连续输入),清空输入框
|
||||||
// 这样可以确保每次扫码都从空输入框开始
|
// 这样可以确保每次扫码都从空输入框开始
|
||||||
formData.inputMaterialCode = '';
|
formData.inputMaterialCode = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新上次输入时间
|
// 更新上次输入时间
|
||||||
lastInputTime = currentTime;
|
lastInputTime = currentTime
|
||||||
};
|
}
|
||||||
|
|
||||||
// 带防抖的物料编码变化处理函数
|
// 带防抖的物料编码变化处理函数
|
||||||
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500); // 500ms防抖延迟
|
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500) // 500ms防抖延迟
|
||||||
|
|
||||||
// 扫码核验获取物料信息
|
// 扫码核验获取物料信息
|
||||||
const fetchMaterialData = async (code: string) => {
|
const fetchMaterialData = async (code: string) => {
|
||||||
getMaterialDetail(code).then(res => {
|
getMaterialDetail(code).then((res) => {
|
||||||
if (res.code == '0') {
|
if (res.code === '0') {
|
||||||
// 更新表单数据
|
// 更新表单数据
|
||||||
formData.id = res.data?.id || "";
|
formData.id = res.data?.id || ''
|
||||||
formData.encoding = res.data?.encoding || "";
|
formData.encoding = res.data?.encoding || ''
|
||||||
formData.materialName = res.data?.materialName || "";
|
formData.materialName = res.data?.materialName || ''
|
||||||
formData.materialSpec = res.data?.materialSpec || "";
|
formData.materialSpec = res.data?.materialSpec || ''
|
||||||
formData.unitWeight = res.data?.unitWeight || 0;
|
formData.unitWeight = res.data?.unitWeight || 0
|
||||||
formData.photoUrl = res.data?.photoUrl || "";
|
formData.photoUrl = res.data?.photoUrl || ''
|
||||||
// 假设后端返回比对结果
|
|
||||||
// formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
|
|
||||||
formData.matchResult = res.data?.matchResult || 'success' // 这里根据实际接口返回调整
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理下一步
|
// 处理下一步
|
||||||
@@ -419,20 +742,20 @@ const handleNext = async () => {
|
|||||||
const workOrderData = {
|
const workOrderData = {
|
||||||
materialId: formData.id,
|
materialId: formData.id,
|
||||||
materialName: formData.materialName,
|
materialName: formData.materialName,
|
||||||
workOrderInfos: weighingList.value
|
workOrderInfos: weighingList.value,
|
||||||
}
|
}
|
||||||
// 调用后端接口
|
// 调用后端接口
|
||||||
addWorkOrder(workOrderData).then(res => {
|
addWorkOrder(workOrderData).then((res) => {
|
||||||
if (res.code == '0') {
|
if (res.code === '0') {
|
||||||
Notification.success({
|
Notification.success({
|
||||||
title: '操作成功',
|
title: '操作成功',
|
||||||
content: `工单创建成功!`
|
content: `工单创建成功!`,
|
||||||
})
|
})
|
||||||
workOrderResp.value.matchResult = 'success';
|
workOrderResp.value.matchResult = 'success'
|
||||||
workOrderResp.value.title = res.data?.title || "";
|
workOrderResp.value.title = res.data?.title || ''
|
||||||
workOrderResp.value.orderNo = res.data?.orderNo || "";
|
workOrderResp.value.orderNo = res.data?.orderNo || ''
|
||||||
workOrderResp.value.totalWeight = res.data?.totalWeight || "";
|
workOrderResp.value.totalWeight = res.data?.totalWeight || ''
|
||||||
workOrderResp.value.totalCount = res.data?.totalCount || "";
|
workOrderResp.value.totalCount = res.data?.totalCount || ''
|
||||||
|
|
||||||
// 关闭WebSocket连接
|
// 关闭WebSocket连接
|
||||||
closeWebSocket()
|
closeWebSocket()
|
||||||
@@ -440,13 +763,42 @@ const handleNext = async () => {
|
|||||||
activeStep.value++
|
activeStep.value++
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('创建工作订单失败:', error)
|
console.error('创建工作订单失败:', error)
|
||||||
Message.error('创建工作订单失败')
|
Message.error('创建工作订单失败')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else if (activeStep.value === 1 && compareMatchResult.value !== 'success') {
|
||||||
|
// 当在扫码核验页面点击开始比对时,调用后端接口获取比对结果
|
||||||
|
try {
|
||||||
|
// 这里应该调用后端的比对接口,暂时使用fetchMaterialData模拟
|
||||||
|
// 实际项目中应该替换为专门的比对接口
|
||||||
|
const materialCode = formData.inputMaterialCode?.trim()
|
||||||
|
if (!materialCode) {
|
||||||
|
Message.error('请先扫描物料编码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用后端接口获取比对结果
|
||||||
|
vmSend(materialCode).then((res) => {
|
||||||
|
if (res.code === '0') {
|
||||||
|
compareMatchResult.value = JSON.parse(res.data?.matchResult || '')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (compareMatchResult.value === 'success') {
|
||||||
|
// 比对成功,按钮变为下一步
|
||||||
|
Message.success('比对成功')
|
||||||
|
} else {
|
||||||
|
// 比对失败,提示错误
|
||||||
|
Message.error('比对失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('比对失败:', error)
|
||||||
|
Message.error('比对失败,请重试')
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
activeStep.value++
|
activeStep.value++
|
||||||
// 进入称重页面时建立WebSocket连接
|
// 进入称重页面时建立WebSocket连接
|
||||||
@@ -457,6 +809,8 @@ const handleNext = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 处理上一步
|
// 处理上一步
|
||||||
const handlePrevious = () => {
|
const handlePrevious = () => {
|
||||||
if (activeStep.value > 1) {
|
if (activeStep.value > 1) {
|
||||||
@@ -470,7 +824,31 @@ const handlePrevious = () => {
|
|||||||
|
|
||||||
// 返回第一步
|
// 返回第一步
|
||||||
const handleBackToFirst = () => {
|
const handleBackToFirst = () => {
|
||||||
|
// 重置所有数据
|
||||||
activeStep.value = 1
|
activeStep.value = 1
|
||||||
|
|
||||||
|
// 重置表单数据
|
||||||
|
formData.inputMaterialCode = ''
|
||||||
|
formData.id = ''
|
||||||
|
formData.encoding = ''
|
||||||
|
formData.materialName = ''
|
||||||
|
formData.materialSpec = ''
|
||||||
|
formData.unitWeight = 0
|
||||||
|
formData.photoUrl = ''
|
||||||
|
|
||||||
|
compareMatchResult.value = ''
|
||||||
|
|
||||||
|
// 重置称重登记页面数据
|
||||||
|
inputQuantity.value = ''
|
||||||
|
ahDeviceWeight.value = ''
|
||||||
|
calculatedWeight.value = ''
|
||||||
|
weighingCount.value = 1
|
||||||
|
// 清空称重列表
|
||||||
|
weighingList.value = []
|
||||||
|
|
||||||
|
// 重置工作订单响应数据
|
||||||
|
workOrderResp.value = {}
|
||||||
|
|
||||||
// 离开称重页面时关闭WebSocket连接
|
// 离开称重页面时关闭WebSocket连接
|
||||||
closeWebSocket()
|
closeWebSocket()
|
||||||
}
|
}
|
||||||
@@ -478,8 +856,8 @@ const handleBackToFirst = () => {
|
|||||||
// 计算重量
|
// 计算重量
|
||||||
const calculateWeight = () => {
|
const calculateWeight = () => {
|
||||||
if (inputQuantity.value && formData.unitWeight) {
|
if (inputQuantity.value && formData.unitWeight) {
|
||||||
const singleWeight = parseFloat(formData.unitWeight.toString())
|
const singleWeight = Number.parseFloat(formData.unitWeight.toString())
|
||||||
const quantity = parseFloat(inputQuantity.value)
|
const quantity = Number.parseFloat(inputQuantity.value)
|
||||||
if (!isNaN(singleWeight) && !isNaN(quantity)) {
|
if (!isNaN(singleWeight) && !isNaN(quantity)) {
|
||||||
calculatedWeight.value = (singleWeight * quantity).toFixed(2)
|
calculatedWeight.value = (singleWeight * quantity).toFixed(2)
|
||||||
}
|
}
|
||||||
@@ -489,7 +867,6 @@ const calculateWeight = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//处理确定
|
//处理确定
|
||||||
const handleConfirm = () => {
|
const handleConfirm = () => {
|
||||||
// 校验输入数量是否为空
|
// 校验输入数量是否为空
|
||||||
@@ -502,7 +879,19 @@ const handleConfirm = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 生成新的列表数据
|
const data = {
|
||||||
|
materialId: formData.id,
|
||||||
|
inputQuantity: inputQuantity.value,
|
||||||
|
ahDeviceWeight: ahDeviceWeight.value,
|
||||||
|
}
|
||||||
|
|
||||||
|
validateWeighing(data).then(res => {
|
||||||
|
if (res.code != '0') {
|
||||||
|
Message.error(res.msg || '系统异常!')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 立即创建一个新项的基本数据
|
||||||
const newItem = {
|
const newItem = {
|
||||||
key: (weighingList.value.length + 1).toString(),
|
key: (weighingList.value.length + 1).toString(),
|
||||||
weightTime: weighingCount.value,
|
weightTime: weighingCount.value,
|
||||||
@@ -510,16 +899,100 @@ const handleConfirm = () => {
|
|||||||
quantity: inputQuantity.value,
|
quantity: inputQuantity.value,
|
||||||
weight: ahDeviceWeight.value,
|
weight: ahDeviceWeight.value,
|
||||||
calculatedWeight: calculatedWeight.value,
|
calculatedWeight: calculatedWeight.value,
|
||||||
imgUrl: '图片'
|
image: '加载中...', // 先显示加载状态
|
||||||
}
|
}
|
||||||
// 添加到列表
|
|
||||||
|
// 先添加到列表,让用户能立即看到记录
|
||||||
weighingList.value.push(newItem)
|
weighingList.value.push(newItem)
|
||||||
// 重置输入
|
|
||||||
|
// 重置输入(让用户能继续输入)
|
||||||
inputQuantity.value = ''
|
inputQuantity.value = ''
|
||||||
ahDeviceWeight.value = '10'
|
ahDeviceWeight.value = ''
|
||||||
calculatedWeight.value = ''
|
calculatedWeight.value = ''
|
||||||
// 称重次数累加
|
|
||||||
weighingCount.value = weighingList.value.length + 1
|
weighingCount.value = weighingList.value.length + 1
|
||||||
|
|
||||||
|
// 异步执行抓拍,不阻塞主流程
|
||||||
|
if (cameraVideo.value && cameraStatus.value === 'connected') {
|
||||||
|
// 立即执行异步抓拍
|
||||||
|
capturePhoto().then((captureUrl) => {
|
||||||
|
// 找到刚刚添加的项,更新图片URL
|
||||||
|
const addedItem = weighingList.value.find((item) => item.key === newItem.key)
|
||||||
|
if (addedItem) {
|
||||||
|
addedItem.image = captureUrl || '抓拍失败'
|
||||||
|
// 触发视图更新
|
||||||
|
weighingList.value = [...weighingList.value]
|
||||||
|
}
|
||||||
|
Message.success('图片抓拍成功')
|
||||||
|
}).catch((error) => {
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 摄像头未连接,直接显示未抓拍
|
||||||
|
const addedItem = weighingList.value.find((item) => item.key === newItem.key)
|
||||||
|
if (addedItem) {
|
||||||
|
addedItem.image = '未抓拍'
|
||||||
|
weighingList.value = [...weighingList.value]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Message.success('添加成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 抓拍功能 - 内部方法,不暴露按钮
|
||||||
|
const capturePhoto = (): Promise<string> => {
|
||||||
|
// eslint-disable-next-line no-async-promise-executor
|
||||||
|
return new Promise(async (resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const video = cameraVideo.value
|
||||||
|
if (!video) {
|
||||||
|
reject(new Error('视频未初始化'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建canvas抓取当前帧
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = video.videoWidth || 640
|
||||||
|
canvas.height = video.videoHeight || 480
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
||||||
|
|
||||||
|
// 转换为Blob
|
||||||
|
const blob = await new Promise<Blob>((resolve) => {
|
||||||
|
canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.9)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 创建FormData
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', blob, `capture_${Date.now()}.jpg`)
|
||||||
|
|
||||||
|
// 调用后端接口
|
||||||
|
const response = await catchPhoto(formData)
|
||||||
|
if (response.msg !== 'ok') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageUrl = await response.data
|
||||||
|
resolve(imageUrl)
|
||||||
|
} catch (error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片预览函数
|
||||||
|
const previewImage = (url: string) => {
|
||||||
|
// 使用Arco Design的图片预览组件
|
||||||
|
Modal.info({
|
||||||
|
title: '图片预览',
|
||||||
|
content: () => h('div', { style: 'text-align: center;' }, [
|
||||||
|
h('img', {
|
||||||
|
src: url,
|
||||||
|
style: 'max-width: 100%; max-height: 500px; object-fit: contain;',
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
okText: '关闭',
|
||||||
|
hideCancel: true,
|
||||||
|
width: 'auto',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理重置
|
// 处理重置
|
||||||
@@ -532,7 +1005,7 @@ const handleReset = () => {
|
|||||||
// 处理删除
|
// 处理删除
|
||||||
const handleDelete = (key) => {
|
const handleDelete = (key) => {
|
||||||
// 过滤掉要删除的项
|
// 过滤掉要删除的项
|
||||||
weighingList.value = weighingList.value.filter(item => item.key !== key)
|
weighingList.value = weighingList.value.filter((item) => item.key !== key)
|
||||||
// 重新排序称重次数
|
// 重新排序称重次数
|
||||||
weighingList.value.forEach((item, index) => {
|
weighingList.value.forEach((item, index) => {
|
||||||
item.weightTime = index + 1
|
item.weightTime = index + 1
|
||||||
@@ -589,9 +1062,10 @@ const closeWebSocket = () => {
|
|||||||
// 组件卸载时关闭WebSocket连接
|
// 组件卸载时关闭WebSocket连接
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
closeWebSocket()
|
closeWebSocket()
|
||||||
|
if (pollingInterval) {
|
||||||
|
clearInterval(pollingInterval)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
defineOptions({ name: 'WeightManage' })
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -719,10 +1193,68 @@ defineOptions({ name: 'WeightManage' })
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 视频容器 - 替换原来的image-placeholder */
|
||||||
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 240px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-overlay.error {
|
||||||
|
background: rgba(255, 77, 79, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-badge {
|
||||||
|
background: #ff4d4f;
|
||||||
|
color: white;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
.large-image {
|
.large-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 240px;
|
||||||
margin: 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-placeholder {
|
.input-placeholder {
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ import {Message} from "@arco-design/web-vue";
|
|||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import {
|
import {
|
||||||
deleteWorkOrder,
|
deleteWorkOrder,
|
||||||
exportWorkOrder, getWorkOrder,
|
exportWorkOrder, getWorkOrderInfos,
|
||||||
listWorkOrder,
|
listWorkOrder,
|
||||||
type WorkOrderQuery,
|
type WorkOrderQuery,
|
||||||
type WorkOrderResp
|
type WorkOrderResp
|
||||||
@@ -172,7 +172,7 @@ const columns = ref<TableInstanceColumns[]>(processColumns([
|
|||||||
{ title: '物料编码', dataIndex: 'encoding' },
|
{ title: '物料编码', dataIndex: 'encoding' },
|
||||||
{ title: '单位克重', dataIndex: 'unitWeight' ,slotName: 'unitWeight'},
|
{ title: '单位克重', dataIndex: 'unitWeight' ,slotName: 'unitWeight'},
|
||||||
{ title: '总重量', dataIndex: 'totalWeight' ,slotName: 'totalWeight'},
|
{ title: '总重量', dataIndex: 'totalWeight' ,slotName: 'totalWeight'},
|
||||||
{ title: '称重次数', dataIndex: 'totalCount' },
|
{ title: '总数量', dataIndex: 'totalCount' },
|
||||||
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
@@ -218,7 +218,7 @@ const onDetail = async (record: WorkOrderResp) => {
|
|||||||
detailModalVisible.value = true
|
detailModalVisible.value = true
|
||||||
detailData.value = []
|
detailData.value = []
|
||||||
|
|
||||||
getWorkOrder(record.id).then(res => {
|
getWorkOrderInfos(record.id).then(res => {
|
||||||
if (res.code == '0') {
|
if (res.code == '0') {
|
||||||
detailData.value = res.data;
|
detailData.value = res.data;
|
||||||
detailLoading.value = false
|
detailLoading.value = false
|
||||||
@@ -258,9 +258,7 @@ const onPrint = (record: WorkOrderResp) => {
|
|||||||
router.push({
|
router.push({
|
||||||
path: '/print',
|
path: '/print',
|
||||||
query: {
|
query: {
|
||||||
materialName: record.materialName,
|
workerOrderId: record.id,
|
||||||
encoding: record.encoding,
|
|
||||||
orderNo: record.orderNo
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user