feat(标签渲染): 添加订货单位可编辑功能并优化标签数据加载
为标签渲染组件中的订货单位字段添加contenteditable属性,允许用户直接编辑 重构标签数据加载逻辑,当传入coilId时自动查询并填充合同号和订货单位 添加加载状态指示器,提升用户体验
This commit is contained in:
@@ -19,7 +19,7 @@
|
|||||||
<!-- 第一行:订货单位 + 合同号 -->
|
<!-- 第一行:订货单位 + 合同号 -->
|
||||||
<div class="info-grid-item label-cell">订货单位</div>
|
<div class="info-grid-item label-cell">订货单位</div>
|
||||||
<div class="info-grid-item value-cell">
|
<div class="info-grid-item value-cell">
|
||||||
<div class="nob">{{ content.orderUnit || '' }}</div>
|
<div class="nob" contenteditable>{{ content.orderUnit || '' }}</div>
|
||||||
<!-- <input type="text" :value="content.orderUnit || ''" /> -->
|
<!-- <input type="text" :value="content.orderUnit || ''" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="info-grid-item label-cell">合同号</div>
|
<div class="info-grid-item label-cell">合同号</div>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<div class="info-grid-item label-cell">订货单位</div>
|
<div class="info-grid-item label-cell">订货单位</div>
|
||||||
<div class="info-grid-item value-cell">
|
<div class="info-grid-item value-cell">
|
||||||
<!-- <input type="text" class="nob" :value="content.orderUnit || ''" /> -->
|
<!-- <input type="text" class="nob" :value="content.orderUnit || ''" /> -->
|
||||||
<div class="nob">{{ content.orderUnit || '' }}</div>
|
<div class="nob" contenteditable>{{ content.orderUnit || '' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-grid-item label-cell">合同号</div>
|
<div class="info-grid-item label-cell">合同号</div>
|
||||||
<div class="info-grid-item value-cell">
|
<div class="info-grid-item value-cell">
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
<!-- 第一行:订货单位 + 合同号 -->
|
<!-- 第一行:订货单位 + 合同号 -->
|
||||||
<div class="info-grid-item label-cell">订货单位</div>
|
<div class="info-grid-item label-cell">订货单位</div>
|
||||||
<div class="info-grid-item value-cell">
|
<div class="info-grid-item value-cell">
|
||||||
<div class="nob">{{ content.orderUnit || '' }}</div>
|
<div class="nob" contenteditable>{{ content.orderUnit || '' }}</div>
|
||||||
<!-- <input type="text" class="nob" :value="content.orderUnit || ''" /> -->
|
<!-- <input type="text" class="nob" :value="content.orderUnit || ''" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="info-grid-item label-cell">合同号</div>
|
<div class="info-grid-item label-cell">合同号</div>
|
||||||
|
|||||||
@@ -1,52 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-render-container">
|
<div class="label-render-container" v-loading="loading">
|
||||||
<!-- 标签预览容器 -->
|
<!-- 标签预览容器 -->
|
||||||
<div class="preview-container" :id="hideActions ? undefined : 'label-preview-container'" ref="labelRef">
|
<div class="preview-container" :id="hideActions ? undefined : 'label-preview-container'" ref="labelRef">
|
||||||
<MaterialTag
|
<MaterialTag
|
||||||
v-if="tagType === '2'"
|
v-if="tagType === '2'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="100"
|
:paperWidthMm="100"
|
||||||
:paperHeightMm="80"
|
:paperHeightMm="80"
|
||||||
/>
|
/>
|
||||||
<OuterTagPreview
|
<OuterTagPreview
|
||||||
v-if="tagType === '3'"
|
v-if="tagType === '3'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="180"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
<GalvanizedTag
|
<GalvanizedTag
|
||||||
v-if="tagType === '4'"
|
v-if="tagType === '4'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="180"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
<WhereTag
|
<WhereTag
|
||||||
v-if="tagType === 'where'"
|
v-if="tagType === 'where'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="100"
|
:paperWidthMm="100"
|
||||||
:paperHeightMm="80"
|
:paperHeightMm="80"
|
||||||
/>
|
/>
|
||||||
<ZincRawTag
|
<ZincRawTag
|
||||||
v-if="tagType === '5'"
|
v-if="tagType === '5'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="100"
|
:paperWidthMm="100"
|
||||||
:paperHeightMm="80"
|
:paperHeightMm="80"
|
||||||
/>
|
/>
|
||||||
<DuGeTag
|
<DuGeTag
|
||||||
v-if="tagType === 'ge'"
|
v-if="tagType === 'ge'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="180"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
<TuoZhiTag
|
<TuoZhiTag
|
||||||
v-if="tagType === '6'"
|
v-if="tagType === '6'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="180"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
<SplitTag
|
<SplitTag
|
||||||
v-if="tagType === 'split'"
|
v-if="tagType === 'split'"
|
||||||
:content="content"
|
:content="innerContent"
|
||||||
:paperWidthMm="100"
|
:paperWidthMm="100"
|
||||||
:paperHeightMm="80"
|
:paperHeightMm="80"
|
||||||
/>
|
/>
|
||||||
@@ -63,6 +63,7 @@ import domToImage from 'dom-to-image';
|
|||||||
import html2canvas from 'html2canvas'; // 高清渲染
|
import html2canvas from 'html2canvas'; // 高清渲染
|
||||||
import { Message } from 'element-ui';
|
import { Message } from 'element-ui';
|
||||||
import { PDFDocument } from 'pdf-lib';
|
import { PDFDocument } from 'pdf-lib';
|
||||||
|
import { getMaterialCoil } from '@/api/wms/coil';
|
||||||
|
|
||||||
import MaterialTag from './MaterialTag.vue';
|
import MaterialTag from './MaterialTag.vue';
|
||||||
import OuterTagPreview from './OuterTagPreview.vue';
|
import OuterTagPreview from './OuterTagPreview.vue';
|
||||||
@@ -88,6 +89,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
labelType: '2',
|
labelType: '2',
|
||||||
|
innerContent: {},
|
||||||
tagSizeMap: {
|
tagSizeMap: {
|
||||||
'2': {
|
'2': {
|
||||||
width: 100,
|
width: 100,
|
||||||
@@ -121,7 +123,8 @@ export default {
|
|||||||
width: 100,
|
width: 100,
|
||||||
height: 80,
|
height: 80,
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
loading: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -149,7 +152,22 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
content: {
|
content: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
const { itemName, itemType, warehouseId } = newVal;
|
const { itemName, itemType, warehouseId, coilId } = newVal;
|
||||||
|
// 额外查询出合同号和订货单位
|
||||||
|
if (!coilId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.loading = true;
|
||||||
|
getMaterialCoil(coilId).then(res => {
|
||||||
|
this.loading = false;
|
||||||
|
this.innerContent = {
|
||||||
|
...res.data,
|
||||||
|
// 保留前10个字符的订货单位
|
||||||
|
orderUnit: res.data.orderList?.[0]?.customer?.substring(0, 12) || '',
|
||||||
|
contractNumber: res.data.orderList?.[0]?.contractCode || '',
|
||||||
|
} || {};
|
||||||
|
})
|
||||||
|
|
||||||
// 在镀锌原料库或者在镀锌分条原料库的卷使用镀锌原料标签
|
// 在镀锌原料库或者在镀锌分条原料库的卷使用镀锌原料标签
|
||||||
if (itemType == 'raw_material' && (warehouseId == '1988150263284953089' || warehouseId == '1988150487185289217')) {
|
if (itemType == 'raw_material' && (warehouseId == '1988150263284953089' || warehouseId == '1988150487185289217')) {
|
||||||
this.labelType = '5';
|
this.labelType = '5';
|
||||||
|
|||||||
Reference in New Issue
Block a user