修改打印条码

2026-01-06 10:33:53 +08:00
parent e0e0427ac0
commit 9991cce1ff
3 changed files with 207 additions and 128 deletions
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java
@@ -25,7 +25,7 @@ import com.ruoyi.common.core.page.TableDataInfo;

 /**
 * 条码打印Controller
- * 
+ *
 * @author gw
 * @date 2025-09-12
 */
@@ -108,7 +108,7 @@ public class BasProductCodeController extends BaseController
    }

    @PostMapping("/getInCode")
-    public AjaxResult getInCode(BasProductCode basProductCode)
+    public AjaxResult getInCode(@RequestBody BasProductCode basProductCode)
    {
        return toErpService.getInCode(basProductCode);
    }
--- a/ruoyi-ui/src/api/bas/BasProductCode.js
+++ b/ruoyi-ui/src/api/bas/BasProductCode.js
@@ -42,3 +42,12 @@ export function delBasProductCode(id) {
    method: 'delete'
  })
 }
+
+//获取erp 数据
+export function getErpProductCodeData(data) {
+  return request({
+    url: '/bas/BasProductCode/getInCode',
+    method: 'post',
+    data: data
+  })
+}
--- a/ruoyi-ui/src/views/bas/BasProductCode/index.vue
+++ b/ruoyi-ui/src/views/bas/BasProductCode/index.vue
@@ -44,22 +44,79 @@
            </el-form-item>
          </el-form>
        </div>
-
-
      </el-col>

+      <!-- 打印专用区域（修改隐藏方式，避免display:none导致二维码渲染失败） -->
+      <vue-easy-print ref="easyPrint2" class="print-container">
+        <div v-for="(item, index) in previewDataList" :key="index" style="page-break-after:always">
+          <div class="preview-box">
+            <div class="preview-content">
+              <div class="preview-row">
+                <span class="preview-label">MODEL:</span>
+                <span class="preview-value">{{ item.model }}</span>
+              </div>
+              <div class="preview-row">
+                <span class="preview-label">SERIAL:</span>
+                <span class="preview-value">{{ item.serial }}</span>
+              </div>
+              <div class="preview-row">
+                <span class="preview-label">COLOR:</span>
+                <span class="preview-value">{{ item.color }}</span>
+              </div>
+              <div class="preview-row">
+                <div class="preview-col">
+                  <span class="preview-label">V:</span>
+                  <span class="preview-value">{{ item.v }}</span>
+                </div>
+                <div class="preview-col">
+                  <span class="preview-label">Hz:</span>
+                  <span class="preview-value">{{ item.hz }}</span>
+                </div>
+                <div class="preview-col">
+                  <span class="preview-label">PH:</span>
+                  <span class="preview-value">{{ item.ph }}</span>
+                </div>
+              </div>
+              <div class="preview-row">
+                <div class="preview-col">
+                  <span class="preview-label">N.W.:</span>
+                  <span class="preview-value">{{ item.nW }}</span>
+                </div>
+                <div class="preview-col">
+                  <span class="preview-label">G.W.:</span>
+                  <span class="preview-value">{{ item.gW }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="qrcode-container">
+              <vue-qr
+                :key="`qr-${index}-${item.serial}`"
+                :text="item.qrCode"
+                :size="100"
+                :margin="0"
+                :correctLevel="2"
+                :callback="onQrReady"
+                :qid="String(index)"
+              />
+              <img v-if="item.qrDataUrl" :src="item.qrDataUrl" :width="100" :height="100" />
+              <div class="qrcode-label">{{ item.spare4 }}</div>
+            </div>
+          </div>
+        </div>
+      </vue-easy-print>
+
      <!-- 右侧预览区域 -->
      <el-col :span="16">
        <!-- 预览弹框 -->
-         <el-dialog
-           title="标签预览"
-           :visible.sync="showPreview"
-           width="700px"
-           :close-on-click-modal="false"
-           append-to-body
-         >
-           <div class="preview-container">
-             <div class="label-content">
+        <el-dialog
+          title="标签预览"
+          :visible.sync="showPreview"
+          width="800px"
+          :close-on-click-modal="false"
+          append-to-body
+        >
+          <div class="preview-container">
+            <div class="label-content">
              <div class="preview-box">
                <div class="preview-content">
                  <div class="preview-row">
@@ -102,7 +159,7 @@
                <!-- 二维码区域 -->
                <div class="qrcode-container">
                  <vue-qr
-                    :text="qrCodeValue"
+                    :text="qrCodeValue(previewData)"
                    :size="200"
                    :margin="0"
                    :correctLevel="2"
@@ -114,71 +171,27 @@
            </div>
          </div>

-          <!-- 打印专用区域（隐藏） -->
-          <vue-easy-print style="display: none;" ref="easyPrint2">
-            <div style="page-break-after:always">
-              <div class="preview-row" >
-                <span class="preview-label">MODEL:</span>
-                <span class="preview-value">{{ previewData.model }}</span>
-              </div>
-              <div class="preview-row" >
-                <span class="preview-label">SERIAL:</span>
-                <span class="preview-value">{{ previewData.serial }}</span>
-              </div>
-              <div class="preview-row" >
-                <span class="preview-label">COLOR:</span>
-                <span class="preview-value">{{ previewData.color }}</span>
-              </div>
-              <div class="preview-row" >
-                <div class="preview-col">
-                  <span class="preview-label">V:</span>
-                  <span class="preview-value">{{ previewData.v }}</span>
-                </div>
-                <div class="preview-col">
-                  <span class="preview-label">Hz:</span>
-                  <span class="preview-value">{{ previewData.hz }}</span>
-                </div>
-                <div class="preview-col">
-                  <span class="preview-label">PH:</span>
-                  <span class="preview-value">{{ previewData.ph }}</span>
-                </div>
-              </div>
-              <div class="preview-row" >
-                <div class="preview-col">
-                  <span class="preview-label">N.W.:</span>
-                  <span class="preview-value">{{ previewData.nW }}</span>
-                </div>
-                <div class="preview-col">
-                  <span class="preview-label">G.W.:</span>
-                  <span class="preview-value">{{ previewData.gW }}</span>
-                </div>
-              </div>
-
-              <div class="qrcode-container">
-                <vue-qr
-                  :text="qrCodeValue"
-                  :size="100"
-                  :margin="0"
-                  :correctLevel="2"
-                  error-correction-level="M"
-                />
-                <div class="qrcode-label">{{ previewData.spare4 }}</div>
-              </div>
-              <!--              <div class="label-content">
-
-                            </div>-->
-            </div>
-          </vue-easy-print>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showPreview = false">关 闭</el-button>
-            <el-button type="primary" @click="submitForm" :loading="submitLoading">保存并打印</el-button>
+            <el-button type="primary" @click="submitForm" :loading="submitLoading">保存</el-button>
          </div>
        </el-dialog>

        <!-- 历史数据区域 -->
        <div class="list-container" style="padding-bottom: 60px;">
          <div class="section-header" style="margin-bottom: 20px;">
-            <h3>历史数据</h3>
+            <h3>打印数据</h3>
+            <!--            <div class="header-actions">
+                          <el-button
+                            type="info"
+                            size="small"
+                            @click="getProductCode"
+                            :disabled="!hasSelection"
+                            icon="el-icon-delete"
+                          >
+                            获取条码数据
+                          </el-button>
+                        </div>-->
            <div class="header-actions">
              <el-button
                type="danger"
@@ -215,8 +228,8 @@
            @selection-change="handleSelectionChange"
            stripe
            border
-             style="width: 100%;margin-bottom: 40px;height: 575px;"
-            >
+            style="width: 100%;margin-bottom: 40px;height: 575px;"
+          >
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column
              v-for="column in tableColumns"
@@ -227,9 +240,11 @@
              :formatter="column.formatter"
              show-overflow-tooltip
            />
-            <el-table-column label="操作" width="180" align="center" fixed="right">
+            <el-table-column label="操作" width="260" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
+                <el-button size="mini" type="text" @click="handleErpData(scope.row)" icon="el-icon-edit">补全数据
+                </el-button>
                <el-button size="mini" type="text" @click="handlePrint(scope.row)" icon="el-icon-printer">打印</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.row)" icon="el-icon-delete" class="danger-text">删除</el-button>
              </template>
@@ -289,14 +304,14 @@
        style="width: 100%"
      >
        <el-table-column type="index" width="50" align="center" />
-         <el-table-column label="品号" align="center" prop="productId" />
-      <el-table-column label="品名" align="center" prop="productName" />
-      <el-table-column label="规格" align="center" prop="spec" />
-      <el-table-column label="单位" align="center" prop="unit" />
-      <el-table-column label="托盘尺寸" align="center" prop="spare10" />
-      <el-table-column label="长" align="center" prop="spare36" />
-      <el-table-column label="宽" align="center" prop="spare37" />
-      <el-table-column label="高" align="center" prop="spare38" />
+        <el-table-column label="品号" align="center" prop="productId"/>
+        <el-table-column label="品名" align="center" prop="productName"/>
+        <el-table-column label="规格" align="center" prop="spec"/>
+        <el-table-column label="单位" align="center" prop="unit"/>
+        <el-table-column label="托盘尺寸" align="center" prop="spare10"/>
+        <el-table-column label="长" align="center" prop="spare36"/>
+        <el-table-column label="宽" align="center" prop="spare37"/>
+        <el-table-column label="高" align="center" prop="spare38"/>
      </el-table>
      <pagination
        v-show="productTotal > 0"
@@ -312,7 +327,13 @@
 <script>
 import VueQr from 'vue-qr'
 import VueEasyPrint from 'vue-easy-print'
-import {addBasProductCode, delBasProductCode, listBasProductCode, updateBasProductCode} from "@/api/bas/BasProductCode"
+import {
+  addBasProductCode,
+  delBasProductCode,
+  getErpProductCodeData,
+  listBasProductCode,
+  updateBasProductCode
+} from "@/api/bas/BasProductCode"
 import {listBasProduct} from "@/api/bas/BasProduct"

 // 常量配置
@@ -328,7 +349,8 @@ const FORM_FIELDS = [
  { prop: 'gW', label: '毛重', placeholder: '请输入毛重', required: true },
  { prop: 'spare1', label: '订单号', placeholder: '请输入订单号', required: true },
  { prop: 'spare2', label: '机型', placeholder: '请输入机型', required: true },
-  { prop: 'spare3', label: '分销', placeholder: '请输入分销', required: true }
+  {prop: 'spare3', label: '分销', placeholder: '请输入分销', required: true},
+  {prop: 'spare5', label: '数量', placeholder: '请输入数量', required: true},
 ]

 const TABLE_COLUMNS = [
@@ -349,7 +371,8 @@ const TABLE_COLUMNS = [
  },
  { prop: 'spare1', label: '订单号', width: 150 },
  { prop: 'spare2', label: '机型', width: 120 },
-  { prop: 'spare3', label: '分销', width: 100 }
+  {prop: 'spare3', label: '分销', width: 100},
+  {prop: 'spare5', label: '数量', width: 100},
 ]

 const DEFAULT_FORM = {
@@ -406,7 +429,9 @@ export default {
      // 总条数
      total: 0,
      // 预览数据
-      previewData: { ...DEFAULT_PREVIEW_DATA },
+      previewDataList: [],
+      previewData: {},
+      codeDataList: [],
      // 选中数据
      selectedRows: [],
      // 是否显示预览
@@ -433,17 +458,6 @@ export default {
    }
  },
  computed: {
-    // 二维码内容
-    qrCodeValue() {
-      console.log(this.previewData)
-      const text = `${this.previewData.spare1}@${this.previewData.model}@${this.previewData.spare2}@${this.previewData.spare3}@${this.previewData.serial}`
-      var bm = this.procode(text)
-      return "MODEL:" + this.previewData.model + " COLOR:" + this.previewData.color
-        + " SERIAL:" + this.previewData.serial + " V:" + this.previewData.v
-        + " Hz:" + this.previewData.hz + " PH:" + this.previewData.ph
-        + " N.W.:" + this.previewData.nW + " G.W.:" + this.previewData.gW+" ITEM_CODE:"+this.previewData.spare4+ " @:" + bm + "@"
-
-    },
    // 是否有选中项
    hasSelection() {
      return this.selectedRows.length > 0
@@ -461,6 +475,18 @@ export default {
        this.$message.error('初始化失败：' + error.message)
      }
    },
+    // 二维码内容
+    qrCodeValue(data) {
+      console.log('二维码内容')
+      console.log(data)
+      const text = `${data.spare1}@${data.model}@${data.spare2}@${data.spare3}@${data.serial}`
+      var bm = this.procode(text)
+      return "MODEL:" + data.model + " COLOR:" + data.color
+        + " SERIAL:" + data.serial + " V:" + data.v
+        + " Hz:" + data.hz + " PH:" + data.ph
+        + " N.W.:" + data.nW + " G.W.:" + data.gW + " ITEM_CODE:" + data.spare4 + " @:" + bm + "@"
+
+    },

    // 生成表单验证规则
    generateRules() {
@@ -547,7 +573,7 @@ export default {
        this.$message.success(message)

        await this.getList()
-        await this.autoPrint()
+        //await this.autoPrint()

      } catch (error) {
        this.$message.error('保存失败：' + error.message)
@@ -565,7 +591,7 @@ export default {
    handleEdit(row) {
      this.form = { ...row }
      this.previewData = { ...row }
-     // this.showPreview = true
+      // this.showPreview = true
    },

    // 删除按钮操作
@@ -591,16 +617,36 @@ export default {
        }
      }
    },
+    handleErpData(row) {
+
+
+      const param = {
+        spare1: row.spare1
+      }
+      getErpProductCodeData(param).then(response => {
+        if (response.code === 200) {
+          this.$message.success('获取成功')
+        } else {
+          this.$message.error('获取失败')
+        }
+      }).finally(
+        () => {
+          this.getList()
+        }
+      )
+
+
+    },

    // 批量删除
-    async handleBatchDelete() {
+    handleBatchDelete() {
      if (!this.hasSelection) {
        this.$message.warning('请选择要删除的数据')
        return
      }

      try {
-        await this.$confirm(
+        this.$confirm(
          `是否确认删除选中的${this.selectedRows.length}条数据？`,
          '警告',
          {
@@ -611,10 +657,10 @@ export default {
        )

        const ids = this.selectedRows.map(row => row.id)
-        await delBasProductCode(ids.join(','))
+        delBasProductCode(ids.join(','))

        this.$message.success('批量删除成功')
-        await this.getList()
+        this.getList()

      } catch (error) {
        if (error !== 'cancel') {
@@ -623,21 +669,42 @@ export default {
      }
    },

-    // 打印按钮操作
+    // 打印按钮操作 - 一次性打印多个标签
    async handlePrint(row) {
      try {
-        this.previewData = { ...row }
-        this.showPreview = true
+        // 获取serial的后四位并确保是4位数字（前面补0）
+        const serialSuffix = row.serial.slice(-4);
+        const formattedSerial = serialSuffix.padStart(4, '0');

-        await this.$nextTick()
-        setTimeout(() => {
-          this.$refs.easyPrint2.print()
-        }, 100)
+        // 根据数量生成多个预览数据
+        const quantity = parseInt(row.spare5) || 1;
+
+        // 创建打印数据数组
+        this.previewDataList = [];
+        for (let i = 0; i < quantity; i++) {
+          // 创建新的预览数据副本
+          const newPreviewData = {...row};
+
+          // 如果需要序列号递增，可以这样处理：
+          const newSerialNum = parseInt(formattedSerial) + i;
+          newPreviewData.serial = `${row.serial.slice(0, -4)}${newSerialNum.toString().padStart(4, '0')}`;
+          newPreviewData.qrCode = this.qrCodeValue(newPreviewData);
+          newPreviewData.qrDataUrl = '';
+          this.previewDataList.push(newPreviewData);
+        }
+
+        // 等待DOM更新后执行打印（修复2：增加更长的延迟确保二维码渲染完成）
+        await this.$nextTick();
+        await this.delay(200);
+        this.$refs.easyPrint2.print();

      } catch (error) {
-        this.$message.error('打印失败：' + error.message)
+        this.$message.error('打印失败：' + error.message);
      }
    },
+    delay(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    },

    // 自动打印功能
    async autoPrint() {
@@ -805,20 +872,10 @@ export default {
  margin-bottom: 0;
 }

-
-
-
-
-
-
-
-
 .list-container .el-table {
  height: 100%;
 }

-
-
 .preview-display {
  height: 100%;
  overflow: hidden;
@@ -876,7 +933,6 @@ export default {
  color: #f78989 !important;
 }

-
 .empty-preview i {
  font-size: 48px;
  margin-bottom: 16px;
@@ -887,7 +943,6 @@ export default {
  margin: 0;
 }

-
 .label-content {
  border: 1px solid #e4e7ed;
  border-radius: 0px;
@@ -905,16 +960,14 @@ export default {
  box-sizing: border-box;
 }

-
 .preview-row {
  display: flex;
  align-items: center;
-  margin-bottom: 30px;
+  margin-bottom: 15px;
  min-height: 0;
-  padding-left: 15px;
+  padding-left: 5px;
 }

-
 .preview-col {
  flex: 1;
  display: flex;
@@ -937,7 +990,6 @@ export default {
  word-break: break-all;
 }

-
 .qrcode-label {
  margin-top: 1px;
  font-size: 10px;
@@ -945,6 +997,15 @@ export default {
  color: #000000;
  text-align: center;
 }
+.qrcode-container {
+  display: inline-block;
+}
+.qrcode-container canvas {
+  display: none !important;
+}
+.qrcode-container img {
+  display: block !important;
+}

 /* 动画效果 */
 .preview-display {
@@ -992,4 +1053,13 @@ export default {
    background-color: transparent;
  }
 }
+
+/* 修复4：修改打印容器的隐藏方式，使用定位而非display:none */
+.print-container {
+  position: absolute;
+  visibility: visible;
+  z-index: -9999;
+  top: 0;
+  left: -9999px;
+}
 </style>