feat: 修改条码生成逻辑

This commit is contained in:
砂糖
2025-08-19 15:39:59 +08:00
parent dc315e90bf
commit 9db9b0ca57
14 changed files with 1209 additions and 289 deletions

View File

@@ -113,7 +113,7 @@
<el-input v-model="form.orderId" placeholder="请输入订单ID" :disabled="true" />
</el-form-item> -->
<el-form-item label="产品" prop="productId">
<ProductSelect v-model="form.productId" placeholder="请选择产品" @change="onProductChange" />
<ProductSelect :can-add="true" v-model="form.productId" placeholder="请选择产品" @change="onProductChange" />
</el-form-item>
<el-form-item label="产品数量" prop="quantity">
<el-input v-model="form.quantity" placeholder="请输入产品数量" />

View File

@@ -0,0 +1,231 @@
<template>
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">
<!-- 策略切换单选框 -->
<el-radio-group
v-model="currentStrategy"
size="mini"
>
<el-radio label="stockIo">盘点单</el-radio>
<el-radio label="order">订单</el-radio>
<el-radio label="purchase">采购计划</el-radio>
</el-radio-group>
<!-- 动态下拉选择框根据策略切换数据源 -->
<el-select
v-model="currentId"
:placeholder="`请选择${strategyLabels[currentStrategy]}`"
style="width: 200px;"
size="mini"
>
<el-option
v-for="item in currentList"
:key="item[keyField]"
:label="item[labelField]"
:value="item[keyField]"
/>
</el-select>
</div>
<div class="print-container" v-loading="loading">
<BarCode :barcodes="drawerBarcodeData" @delete="handleDelete" />
</div>
</div>
</template>
<script>
import BarCode from '../stockIo/panels/barcode.vue';
import { listStockIo } from '@/api/wms/stockIo';
import { listStockIoDetail } from '@/api/wms/stockIoDetail';
import { listOrder } from '@/api/wms/order';
import { listOrderDetail } from '@/api/wms/orderDetail';
import { listPurchasePlan } from '@/api/wms/purchasePlan';
import { listPurchasePlanDetail } from '@/api/wms/purchasePlanDetail';
import { mapState } from 'vuex';
import { ITEM_TYPE } from '../../../utils/enums';
// 策略配置 - 集中管理各策略的元数据
const strategyMetadata = {
stockIo: {
label: '盘点单',
listKey: 'stockIoList',
keyField: 'stockIoId',
labelField: 'stockIoCode'
},
order: {
label: '订单',
listKey: 'orderList',
keyField: 'orderId',
labelField: 'orderCode'
},
purchase: {
label: '采购计划',
listKey: 'purchaseList',
keyField: 'planId',
labelField: 'planCode'
}
};
// 策略实现 - 封装各策略的具体业务逻辑
const strategies = {
stockIo: {
// 加载列表数据
list: (vm) => {
if (vm.stockIoList.length) return;
vm.loading = true;
listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.stockIoList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
// 获取条码数据
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listStockIoDetail({ stockIoId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details
.filter(el => el.recordType === 0)
.map(item => ({
code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: item.itemType === ITEM_TYPE.PRODUCT
? `${vm.productMap[item.itemId]?.productName}[${vm.productMap[item.itemId]?.productCode}](${item.quantity})`
: `${vm.rawMaterialMap[item.itemId]?.rawMaterialName}[${vm.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
order: {
list: (vm) => {
if (vm.orderList.length) return;
vm.loading = true;
listOrder({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.orderList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listOrderDetail({ orderId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`product__${item.productId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.productMap[item.productId]?.productName}[${vm.productMap[item.productId]?.productCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
purchase: {
list: (vm) => {
if (vm.purchaseList.length) return;
vm.loading = true;
listPurchasePlan({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.purchaseList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listPurchasePlanDetail({ planId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`raw_material__${item.rawMaterialId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialName}[${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
}
};
export default {
name: 'Print',
components: { BarCode },
data() {
return {
currentStrategy: 'stockIo', // 默认策略
currentId: '', // 当前选中的ID
stockIoList: [], // 盘点单列表
orderList: [], // 订单列表
purchaseList: [], // 采购计划列表
drawerBarcodeData: [], // 条码数据
loading: false // 加载状态
};
},
computed: {
...mapState({
rawMaterialMap: state => state.category.rawMaterialMap,
productMap: state => state.category.productMap
}),
// 策略标签映射
strategyLabels() {
return Object.keys(strategyMetadata).reduce((obj, key) => {
obj[key] = strategyMetadata[key].label;
return obj;
}, {});
},
// 当前策略对应的列表数据
currentList() {
return this[strategyMetadata[this.currentStrategy].listKey] || [];
},
// 当前策略的主键字段
keyField() {
return strategyMetadata[this.currentStrategy].keyField;
},
// 当前策略的显示字段
labelField() {
return strategyMetadata[this.currentStrategy].labelField;
}
},
watch: {
// 策略切换时的处理
currentStrategy: {
handler(newVal) {
this.currentId = ''; // 清空选择
this.drawerBarcodeData = []; // 清空条码数据
// 加载对应策略的列表数据
if (strategies[newVal]?.list) {
strategies[newVal].list(this);
}
},
immediate: true // 初始化时执行
},
// 选中项变化时的处理
currentId(newVal) {
if (!newVal) {
this.drawerBarcodeData = [];
return;
}
// 获取对应策略的条码数据
if (strategies[this.currentStrategy]?.getBarcodeData) {
strategies[this.currentStrategy].getBarcodeData(this);
}
}
},
methods: {
handleDelete(cfg, idx) {
this.drawerBarcodeData.splice(idx, 1);
}
}
};
</script>
<style scoped lang="scss">
.print-container {
margin-top: 20px;
padding: 20px;
}
</style>

View File

@@ -1,218 +1,66 @@
<template>
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">
<!-- 策略切换单选框 -->
<el-radio-group
v-model="currentStrategy"
size="mini"
>
<el-radio label="stockIo">盘点单</el-radio>
<el-radio label="order">订单</el-radio>
<el-radio label="purchase">采购计划</el-radio>
</el-radio-group>
<!-- 录入二维码列表 -->
<el-form inline>
<el-form-item label="物料类型">
<el-select v-model="itemType" placeholder="请选择物料类型" clearable>
<el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="物料信息">
<ProductSelect can-add v-if="itemType === 'product'" v-model="itemId" placeholder="请选择产品"
@change="onItemChange" />
<SemiSelect can-add v-else-if="itemType === 'semi'" v-model="itemId" placeholder="请选择半成品"
@change="onItemChange" />
<RawMaterialSelect can-add v-else-if="itemType === 'raw_material'" v-model="itemId" placeholder="请选择原材料"
@change="onItemChange" />
<el-input v-else disabled v-model="itemId" placeholder="请先选择物料类型" :disabled="true" style="width: 100%;" />
</el-form-item>
</el-form>
<!-- 动态下拉选择框根据策略切换数据源 -->
<el-select
v-model="currentId"
:placeholder="`请选择${strategyLabels[currentStrategy]}`"
style="width: 200px;"
size="mini"
>
<el-option
v-for="item in currentList"
:key="item[keyField]"
:label="item[labelField]"
:value="item[keyField]"
/>
</el-select>
</div>
<div class="print-container" v-loading="loading">
<BarCode :barcodes="drawerBarcodeData" />
<BarCode :barcodes="drawerBarcodeData" @delete="handleDelete" />
</div>
</div>
</template>
<script>
import BarCode from '../stockIo/panels/barcode.vue';
import { listStockIo } from '@/api/wms/stockIo';
import { listStockIoDetail } from '@/api/wms/stockIoDetail';
import { listOrder } from '@/api/wms/order';
import { listOrderDetail } from '@/api/wms/orderDetail';
import { listPurchasePlan } from '@/api/wms/purchasePlan';
import { listPurchasePlanDetail } from '@/api/wms/purchasePlanDetail';
import { mapState } from 'vuex';
import { ITEM_TYPE } from '../../../utils/enums';
// 策略配置 - 集中管理各策略的元数据
const strategyMetadata = {
stockIo: {
label: '盘点单',
listKey: 'stockIoList',
keyField: 'stockIoId',
labelField: 'stockIoCode'
},
order: {
label: '订单',
listKey: 'orderList',
keyField: 'orderId',
labelField: 'orderCode'
},
purchase: {
label: '采购计划',
listKey: 'purchaseList',
keyField: 'planId',
labelField: 'planCode'
}
};
// 策略实现 - 封装各策略的具体业务逻辑
const strategies = {
stockIo: {
// 加载列表数据
list: (vm) => {
if (vm.stockIoList.length) return;
vm.loading = true;
listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.stockIoList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
// 获取条码数据
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listStockIoDetail({ stockIoId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details
.filter(el => el.recordType === 0)
.map(item => ({
code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: item.itemType === ITEM_TYPE.PRODUCT
? `${vm.productMap[item.itemId]?.productName}[${vm.productMap[item.itemId]?.productCode}](${item.quantity})`
: `${vm.rawMaterialMap[item.itemId]?.rawMaterialName}[${vm.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
order: {
list: (vm) => {
if (vm.orderList.length) return;
vm.loading = true;
listOrder({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.orderList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listOrderDetail({ orderId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`product__${item.productId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.productMap[item.productId]?.productName}[${vm.productMap[item.productId]?.productCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
purchase: {
list: (vm) => {
if (vm.purchaseList.length) return;
vm.loading = true;
listPurchasePlan({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.purchaseList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listPurchasePlanDetail({ planId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`raw_material__${item.rawMaterialId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialName}[${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
}
};
import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
export default {
name: 'Print',
components: { BarCode },
components: { BarCode, ProductSelect, SemiSelect, RawMaterialSelect },
dicts: ['stock_item_type'],
data() {
return {
currentStrategy: 'stockIo', // 默认策略
currentId: '', // 当前选中的ID
stockIoList: [], // 盘点单列表
orderList: [], // 订单列表
purchaseList: [], // 采购计划列表
drawerBarcodeData: [], // 条码数据
loading: false // 加载状态
loading: false, // 加载状态
itemId: undefined, // 物料ID
itemType: undefined, // 物料类型
};
},
computed: {
...mapState({
rawMaterialMap: state => state.category.rawMaterialMap,
productMap: state => state.category.productMap
}),
// 策略标签映射
strategyLabels() {
return Object.keys(strategyMetadata).reduce((obj, key) => {
obj[key] = strategyMetadata[key].label;
return obj;
}, {});
},
// 当前策略对应的列表数据
currentList() {
return this[strategyMetadata[this.currentStrategy].listKey] || [];
},
// 当前策略的主键字段
keyField() {
return strategyMetadata[this.currentStrategy].keyField;
},
// 当前策略的显示字段
labelField() {
return strategyMetadata[this.currentStrategy].labelField;
}
},
watch: {
// 策略切换时的处理
currentStrategy: {
handler(newVal) {
this.currentId = ''; // 清空选择
this.drawerBarcodeData = []; // 清空条码数据
// 加载对应策略的列表数据
if (strategies[newVal]?.list) {
strategies[newVal].list(this);
}
},
immediate: true // 初始化时执行
},
// 选中项变化时的处理
currentId(newVal) {
if (!newVal) {
this.drawerBarcodeData = [];
return;
}
// 获取对应策略的条码数据
if (strategies[this.currentStrategy]?.getBarcodeData) {
strategies[this.currentStrategy].getBarcodeData(this);
methods: {
onItemChange(item) {
// 选中后构造条码数据并插入
console.log(item);
const itemType = this.itemType;
const name = (itemType == 'semi' || itemType == 'product') ? item.productName : item.rawMaterialName;
const code = (itemType == 'semi' || itemType == 'product') ? item.productCode : item.rawMaterialCode;
const o = {
code: encodeURIComponent(`${itemType}__${item.itemId || ''}`),
count: 1,
textTpl: `${name}[${code}]`
}
this.drawerBarcodeData.push(o);
},
handleDelete(cfg, idx) {
console.log(cfg, idx);
this.drawerBarcodeData.splice(idx, 1);
}
}
};

View File

@@ -20,7 +20,7 @@
<el-form-item label="负责人" prop="salesManager">
<el-input v-model="queryParams.owner" :multiple="false" placeholder="请填写负责人" />
</el-form-item>
<el-form-item label="基础材质" prop="baseMaterialId">
<!-- <el-form-item label="基础材质" prop="baseMaterialId">
<CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
</el-form-item>
<el-form-item label="表面处理" prop="surfaceTreatmentId">
@@ -41,7 +41,7 @@
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -99,7 +99,7 @@
<el-table-column label="产品编号" align="center" prop="productCode" />
<el-table-column label="产品名称" align="center" prop="productName" />
<el-table-column label="负责人" align="center" prop="owner" />
<el-table-column label="基础材质" align="center">
<!-- <el-table-column label="基础材质" align="center">
<template slot-scope="scope">
<CategoryRenderer :category-id="scope.row.baseMaterialId" />
</template>
@@ -121,7 +121,7 @@
</el-table-column>
<el-table-column label="厚度" align="center" prop="thickness" />
<el-table-column label="宽度" align="center" prop="width" />
<el-table-column label="内径" align="center" prop="innerDiameter" />
<el-table-column label="内径" align="center" prop="innerDiameter" /> -->
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="是否启用" align="center" prop="isEnabled">
<template slot-scope="scope">
@@ -174,7 +174,7 @@
<!-- 添加或修改产品对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-divider>基础信息</el-divider>
<!-- <el-divider>基础信息</el-divider> -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品编号" prop="productCode">
@@ -198,7 +198,7 @@
</el-col>
</el-row>
<el-divider>分类信息</el-divider>
<!-- <el-divider>分类信息</el-divider>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="基础材质" prop="baseMaterialId">
@@ -251,7 +251,7 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-row> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>

View File

@@ -20,7 +20,7 @@
<el-form-item label="负责人" prop="salesManager">
<el-input v-model="queryParams.owner" :multiple="false" placeholder="请填写负责人" />
</el-form-item>
<el-form-item label="基础材质" prop="baseMaterialId">
<!-- <el-form-item label="基础材质" prop="baseMaterialId">
<CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
</el-form-item>
<el-form-item label="表面处理" prop="surfaceTreatmentId">
@@ -41,7 +41,7 @@
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -99,7 +99,7 @@
<el-table-column label="半成品编号" align="center" prop="productCode" />
<el-table-column label="半成品名称" align="center" prop="productName" />
<el-table-column label="负责人" align="center" prop="owner" />
<el-table-column label="基础材质" align="center">
<!-- <el-table-column label="基础材质" align="center">
<template slot-scope="scope">
<CategoryRenderer :category-id="scope.row.baseMaterialId" />
</template>
@@ -121,13 +121,13 @@
</el-table-column>
<el-table-column label="厚度" align="center" prop="thickness" />
<el-table-column label="宽度" align="center" prop="width" />
<el-table-column label="内径" align="center" prop="innerDiameter" />
<el-table-column label="内径" align="center" prop="innerDiameter" /> -->
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="是否启用" align="center" prop="isEnabled">
<!-- <el-table-column label="是否启用" align="center" prop="isEnabled">
<template slot-scope="scope">
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column label="BOM" align="center">
<template slot-scope="scope">
<BomInfoMini :bomId="scope.row.bomId" />
@@ -174,7 +174,7 @@
<!-- 添加或修改半成品对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-divider>基础信息</el-divider>
<!-- <el-divider>基础信息</el-divider> -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="半成品编号" prop="productCode">
@@ -198,7 +198,7 @@
</el-col>
</el-row>
<el-divider>分类信息</el-divider>
<!-- <el-divider>分类信息</el-divider>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="基础材质" prop="baseMaterialId">
@@ -251,7 +251,7 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-row> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>

View File

@@ -151,7 +151,7 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="原材料" prop="rawMaterialId">
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" can-add />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="form.owner" placeholder="请输入负责人" />

View File

@@ -17,7 +17,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="钢种/牌号" prop="steelGrade">
<!-- <el-form-item label="钢种/牌号" prop="steelGrade">
<el-input
v-model="queryParams.steelGrade"
placeholder="请输入钢种/牌号"
@@ -48,7 +48,7 @@
placeholder="请选择表面处理分类"
clearable
/>
</el-form-item>
</el-form-item> -->
<el-form-item label="是否启用" prop="isEnabled">
<el-select v-model="queryParams.isEnabled" placeholder="请选择是否启用" clearable>
<el-option
@@ -114,7 +114,7 @@
<el-table-column label="原材料编号" align="center" prop="rawMaterialCode" />
<el-table-column label="原材料名称" align="center" prop="rawMaterialName" />
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="钢种/牌号" align="center" prop="steelGrade" />
<!-- <el-table-column label="钢种/牌号" align="center" prop="steelGrade" /> -->
<!-- <el-table-column label="目标冷轧牌号" align="center" prop="targetColdGrade" />
<el-table-column label="基础材质分类" align="center">
<template slot-scope="scope">

View File

@@ -62,6 +62,14 @@
>
另存为图片
</el-button>
<el-button
type="text"
size="mini"
@click="handleDelete(cfg, idx)"
icon="el-icon-delete"
>
删除
</el-button>
</div>
<el-form-item label="二维码内容" label-width="70px" style="margin-bottom: 8px;">
<el-input disabled type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
@@ -196,6 +204,10 @@ export default {
}
return code;
},
handleDelete(cfg, idx) {
// this.barcodeConfigs.splice(idx, 1);
this.$emit('delete', cfg, idx);
},
getPaperPx() {
// mm to px, 1mm ≈ 3.78px
let width, height;