二维码生成独立页面

2025-07-30 10:53:06 +08:00
parent cb6fd3f57e
commit 347f400578
9 changed files with 137 additions and 122 deletions
--- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
@@ -25,16 +25,7 @@

 <script>
 import { listRawMaterial } from "@/api/wms/rawMaterial";
-
-function debounce(fn, delay) {
-  let timer = null;
-  return function (...args) {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-}
+import { mapGetters } from "vuex";

 export default {
  name: "RawMaterialSelect",
@@ -62,18 +53,13 @@ export default {
    }
  },
  mounted() {
-    this.fetchOptions("");
+    this.options = this.rawMaterialList;
+    console.log(this.options, this.rawMaterialList);
+  },
+  computed: {
+    ...mapGetters(['rawMaterialList'])
  },
  methods: {
-    fetchOptions() {
-      this.loading = true;
-      listRawMaterial({ pageNum: 1, pageSize: 9999 }).then(res => {
-        this.options = res.rows || [];
-        this.loading = false;
-      }).catch(() => {
-        this.loading = false;
-      });
-    },
    async onChange(val) {
      const rawMaterial = this.options.find(p => p.rawMaterialId === val);
      this.$emit('change', rawMaterial);
--- a/klp-ui/src/store/modules/category.js
+++ b/klp-ui/src/store/modules/category.js
@@ -5,7 +5,9 @@ import { listRawMaterial } from '@/api/wms/rawMaterial';
 const state = {
  categoryList: [],
  productMap: {},
-  rawMaterialMap: {}
+  rawMaterialMap: {},
+  productList: [],
+  rawMaterialList: []
 };

 const mutations = {
@@ -17,6 +19,12 @@ const mutations = {
  },
  SET_RAW_MATERIAL_MAP(state, map) {
    state.rawMaterialMap = map;
+  },
+  SET_PRODUCT_LIST(state, list) {
+    state.productList = list;
+  },
+  SET_RAW_MATERIAL_LIST(state, list) {
+    state.rawMaterialList = list;
  }
 };

@@ -40,6 +48,7 @@ const actions = {
        map[item.productId] = item;
      });
      commit('SET_PRODUCT_MAP', map);
+      commit('SET_PRODUCT_LIST', res.rows || []);
      return map;
    });
  },
@@ -53,20 +62,14 @@ const actions = {
        map[item.rawMaterialId] = item;
      });
      commit('SET_RAW_MATERIAL_MAP', map);
+      commit('SET_RAW_MATERIAL_LIST', res.rows || []);
      return map;
    });
  }
 };
-
-const getters = {
-  productList: state => Object.values(state.productMap),
-  rawMaterialList: state => Object.values(state.rawMaterialMap)
-}
-
 export default {
  namespaced: true,
  state,
  mutations,
  actions,
-  getters
 }; 
--- a/klp-ui/src/views/wms/print/index.vue
+++ b/klp-ui/src/views/wms/print/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div style="position: relative;">
+    <el-select v-model="stockIoId" placeholder="请选择盘点单" style="position: absolute; top: 10px; left: 10px;">
+      <el-option v-for="item in stockIoList" :key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
+    </el-select>
+    <div class="print-container" v-loading="loading">
+      <BarCode :barcodes="drawerBarcodeData" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BarCode from '../stockIo/panels/barcode.vue';
+import { listStockIo } from '@/api/wms/stockIo';
+import { listStockIoDetail } from '@/api/wms/stockIoDetail';
+import { mapState } from 'vuex';
+import { ITEM_TYPE } from '../../../utils/enums';
+
+export default {
+  name: 'Print',
+  components: {
+    BarCode
+  },
+  data() {
+    return {
+      activeTab: 'layout',
+      stockIoList: [],
+      stockIoId: '',
+      drawerBarcodeData: {},
+      loading: false
+    }
+  },
+  computed: {
+    ...mapState({
+      rawMaterialMap: state => state.category.rawMaterialMap,
+      productMap: state => state.category.productMap
+    })
+  },
+  watch: {
+    stockIoId: {
+      handler(newVal) {
+        console.log(newVal, '数据侦听');
+        this.loading = true;
+        listStockIoDetail({ stockIoId: newVal }).then(res => {
+          const details = res.rows || [];
+          // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
+          const barcodes = details.filter(el => el.recordType == 0).map(item => {
+            return {
+              code: encodeURIComponent(`${item.itemId || ''}`),
+              count: Math.min(item.quantity, 10),
+              textTpl: item.itemType == ITEM_TYPE.PRODUCT ? 
+              `${this.productMap[item.itemId]?.productName}[${this.productMap[item.itemId]?.productCode}](${item.quantity})` 
+              : `${this.rawMaterialMap[item.itemId]?.rawMaterialName}[${this.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
+            }
+          });
+          this.drawerBarcodeData = barcodes;
+        }).finally(() => {
+          this.loading = false;
+        });
+      }
+    }
+  },
+  created() {
+    listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
+      this.stockIoList = res.rows;
+    });
+  }
+}
+</script>
+<style scoped lang="scss">
+
+</style>
--- a/klp-ui/src/views/wms/print/scaner.vue
+++ b/klp-ui/src/views/wms/print/scaner.vue
--- a/klp-ui/src/views/wms/purchasePlan/index.vue
+++ b/klp-ui/src/views/wms/purchasePlan/index.vue
@@ -117,8 +117,8 @@
    />

    <!-- 添加或修改采购计划主对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="采购计划编号" prop="planCode">
          <el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
        </el-form-item>
--- a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
@@ -8,56 +8,16 @@
          <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="负责人" prop="owner">
-          <el-input v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
+          <el-input v-model="mainForm.owner" :multiple="false" placeholder="请填写负责人" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
        </el-form-item>
      </el-form>
    </el-card>
-    <div class="transfer-content">
-      <!-- 原料区（待筛选） -->
-      <el-card class="section-card left-table" shadow="never">
-        <div slot="header" class="section-title">原料区（待筛选）</div>
-        <div class="filter-bar">
-          <el-input
-            v-model="rawMaterialNameFilter"
-            placeholder="请输入原材料名称"
-            size="small"
-            style="width: 200px; margin-bottom: 10px;"
-            @keyup.enter.native="handleRawMaterialFilter"
-            clearable
-          />
-          <el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
-        </div>
-        <el-table
-          :data="rawMaterialList"
-          @selection-change="handleSelectionChange"
-          style="width: 100%"
-          ref="leftTable"
-          border
-          :loading="rawMaterialLoading"
-        >
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="rawMaterialName" label="原材料名称" />
-          <el-table-column prop="rawMaterialCode" label="原材料编码" />
-          <el-table-column prop="unit" label="单位" />
-        </el-table>
-        <el-pagination
-          :current-page="pageNum"
-          :page-size="pageSize"
-          :total="total"
-          @current-change="handlePageChange"
-          layout="total, prev, pager, next"
-        />
-      </el-card>
-      <!-- 中间操作按钮 -->
-      <div class="transfer-actions">
-        <el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
-        <el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
-      </div>
+    <div>
      <!-- 采购单明细区 -->
-      <el-card class="section-card right-table" shadow="never">
+      <el-card shadow="never">
        <div slot="header" class="section-title">采购单明细</div>
        <el-table
          :data="purchaseList"
@@ -67,8 +27,11 @@
          border
        >
          <el-table-column type="selection" width="55" />
-          <el-table-column prop="rawMaterialName" label="原材料名称" />
-          <el-table-column prop="rawMaterialCode" label="原材料编码" />
+          <el-table-column prop="rawMaterialId" label="原材料">
+            <template #default="scope">
+              <RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="请选择原材料" />
+            </template>
+          </el-table-column>
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="quantity" label="计划采购数">
            <template #default="scope">
@@ -98,10 +61,11 @@
 import { createPurchasePlan } from '@/api/wms/purchasePlan'
 import { listRawMaterial } from '@/api/wms/rawMaterial'
 import UserSelect from '@/components/KLPService/UserSelect'
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'

 export default {
  name: 'CreatePurchasePanel',
-  components: { UserSelect },
+  components: { UserSelect, RawMaterialSelect },
  props: {
    orderId: {
      type: [String, Number],
--- a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
@@ -136,9 +136,9 @@
          <RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
        </el-form-item>
        <el-form-item label="负责人" prop="owner">
-          <el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
+          <el-input v-model="form.owner" placeholder="请输入负责人" />
        </el-form-item>
-        <el-form-item label="计划采购数量" prop="quantity">
+        <el-form-item label="采购数量" prop="quantity">
          <el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
--- a/klp-ui/src/views/wms/stockIo/index.vue
+++ b/klp-ui/src/views/wms/stockIo/index.vue
@@ -136,12 +136,12 @@
            icon="el-icon-document"
            @click="showDetail(scope.row)"
          >明细</el-button>
-          <el-button
+          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            @click="handleShowBarcodeDrawer(scope.row)"
-          >打印条码</el-button>
+          >打印条码</el-button> -->
        </template>
      </el-table-column>
    </el-table>
@@ -206,7 +206,7 @@
      />
    </el-dialog>
    <!-- 条码打印抽屉 -->
-    <el-drawer
+    <!-- <el-drawer
      title="条码打印"
      :visible.sync="drawerBarcodeVisible"
      size="100%"
@@ -220,7 +220,7 @@
        :barcodeWidth="drawerBarcodeData.barcodeWidth"
        :barcodeHeight="drawerBarcodeData.barcodeHeight"
      />
-    </el-drawer>
+    </el-drawer> -->
  </div>
 </template>

@@ -297,13 +297,13 @@ export default {
      detailDialogVisible: false,
      detailStockIo: null,
      // 条码打印抽屉相关
-      drawerBarcodeVisible: false,
-      drawerBarcodeData: {
-        barcodes: [],
-        perRow: 3,
-        barcodeWidth: 180,
-        barcodeHeight: 60
-      },
+      // drawerBarcodeVisible: false,
+      // drawerBarcodeData: {
+      //   barcodes: [],
+      //   perRow: 3,
+      //   barcodeWidth: 180,
+      //   barcodeHeight: 60
+      // },
    };
  },
  created() {
@@ -438,22 +438,22 @@ export default {
      // 刷新列表
      this.getList();
    },
-    async handleShowBarcodeDrawer(row) {
-      // 获取明细列表
-      const res = await listStockIoDetail({ stockIoId: row.stockIoId });
-      const details = res.data || res.rows || [];
-      // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
-      const barcodes = details.filter(el => el.recordType == 0).map(item => {
-        return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
-      });
-      this.drawerBarcodeData = {
-        barcodes,
-        perRow: 3,
-        barcodeWidth: 180,
-        barcodeHeight: 60
-      };
-      this.drawerBarcodeVisible = true;
-    },
+    // async handleShowBarcodeDrawer(row) {
+    //   // 获取明细列表
+    //   const res = await listStockIoDetail({ stockIoId: row.stockIoId });
+    //   const details = res.data || res.rows || [];
+    //   // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
+    //   const barcodes = details.filter(el => el.recordType == 0).map(item => {
+    //     return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
+    //   });
+    //   // this.drawerBarcodeData = {
+    //   //   barcodes,
+    //   //   perRow: 3,
+    //   //   barcodeWidth: 180,
+    //   //   barcodeHeight: 60
+    //   // };
+    //   // this.drawerBarcodeVisible = true;
+    // },
    getIoTypeTagType(type) {
      if (type === 'in') return 'success';
      if (type === 'out') return 'primary';
--- a/klp-ui/src/views/wms/stockIo/panels/barcode.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/barcode.vue
@@ -12,7 +12,7 @@
      <div class="barcode-control-bar">
        <el-tabs v-model="activeTab" stretch>
          <el-tab-pane label="排版设置" name="layout" />
-          <el-tab-pane label="条码明细" name="detail" />
+          <el-tab-pane label="二维码明细" name="detail" />
        </el-tabs>
      </div>
      <!-- 设置区 -->
@@ -21,12 +21,9 @@
          <el-form-item label="每行数量">
            <el-input-number v-model="perRow" :min="1" :max="10" />
          </el-form-item>
-          <el-form-item label="条码宽度">
+          <el-form-item label="二维码尺寸">
            <el-input-number v-model="barcodeWidth" :min="60" :max="600" />
          </el-form-item>
-          <el-form-item label="条码高度">
-            <el-input-number v-model="barcodeHeight" :min="20" :max="200" />
-          </el-form-item>
          <el-form-item label="纸张尺寸">
            <el-select v-model="paperSize" placeholder="请选择纸张尺寸" style="width: 160px">
              <el-option label="A4 (210mm x 297mm)" value="A4" />
@@ -52,13 +49,13 @@
          </el-form-item>
        </el-form>
        <el-form v-else label-width="80px" size="small" label-position="top">
-          <el-form-item label="条码明细">
+          <el-form-item label="二维码明细">
            <div v-for="(cfg, idx) in barcodeConfigs" :key="idx" style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
              <div style="margin-bottom: 8px; font-weight: bold; color: #666;">条码 {{ idx + 1 }}</div>
-              <el-form-item label="条码内容" label-width="70px" style="margin-bottom: 8px;">
-                <el-input type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
+              <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="请输入条码内容" />
              </el-form-item>
-              <el-form-item label="数量" label-width="70px" style="margin-bottom: 8px;">
+              <el-form-item label="生成数量" label-width="70px" style="margin-bottom: 8px;">
                <el-input-number v-model.number="cfg.count" :min="1" :max="100" size="mini" />
              </el-form-item>
              <el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
@@ -156,14 +153,7 @@ export default {
    barcodes: {
      handler(newVal) {
        // 初始化barcodeConfigs
-        this.barcodeConfigs = newVal.map((b, i) => {
-          const old = this.barcodeConfigs[i] || {};
-          return {
-            code: b,
-            count: old.count || 1,
-            textTpl: typeof old.textTpl === 'string' ? old.textTpl : b
-          };
-        });
+        this.barcodeConfigs = newVal;
        this.$nextTick(this.renderPreviewIframe);
      },
      immediate: true