双奇点-仓储物流-入库管理 添加条形码显示

周宾

2025-12-12 6bd7b3c2be00614ae9c0bae7e662043bfa1df04e

双奇点-仓储物流-入库管理 添加条形码显示

 package.json

@@ -31,6 +31,7 @@
    "fuse.js": "6.6.2",
    "js-beautify": "1.14.11",
    "js-cookie": "3.0.5",
    "jsbarcode": "^3.12.1",
    "jsencrypt": "3.3.2",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",

 src/views/inventoryManagement/receiptManagement/index.vue

@@ -44,6 +44,13 @@
        <el-table-column fixed="right" label="操作" min-width="60" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm('edit', scope.row);" :disabled="scope.row.createUser !== userStore.id">编辑</el-button>
            <el-button
              link
              type="success"
              size="small"
              @click="showQRCode(scope.row)"
              >生成条形码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
@@ -127,6 +134,21 @@
        </div>
      </template>
    </el-dialog>
     <!-- 二维码显示对话框 -->
    <el-dialog
      v-model="qrCodeDialogVisible"
      title="商品条形码"
      width="400px"
      center
    >
      <div style="text-align: center;">
        <img id="barcode" style="width:200px;height: 50px;"/>
        <!-- <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" /> -->
        <div style="margin: 20px;">
          <el-button type="primary" @click="downloadQRCode">下载二条形码</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

@@ -135,6 +157,8 @@
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { ElMessageBox } from "element-plus";
import useUserStore from '@/store/modules/user'
import QRCode from "qrcode";
import JsBarcode from "jsbarcode";
import {
  getStockInPage,
  updateStockIn,
@@ -456,6 +480,47 @@
    }
  }

// 二维码相关变量
const qrCodeDialogVisible = ref(false);
const qrCodeUrl = ref("");
// 显示二维码
const showQRCode = async (row) => {
  try {
    // 构建二维码内容，只包含采购合同号（纯文本）
    const qrContent = row.id || '';
    // 检查内容是否为空
    if (!qrContent) {
      proxy.$modal.msgWarning("该行商品id，无法生成条形码");
      return;
    }
    qrCodeDialogVisible.value = true;
    await nextTick();
    JsBarcode("#barcode", qrContent+'', {
      width:10,
      height:100,
      displayValue: false
    });
  } catch (error) {
    console.error('生成条形码失败:', error);
    proxy.$modal.msgError("生成条形码失败：" + error.message);
  }
};
const downloadQRCode = () => {
  const imgSrc = document.getElementById('barcode').src
  console.log(imgSrc)
  const a = document.createElement('a');
  if(!imgSrc){
    proxy.$modal.msgWarning('暂无条形码')
    return
  }
  a.href = imgSrc;
  a.download = `商品条形码_${new Date().getTime()}.png`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  proxy.$modal.msgSuccess("下载成功");
};

// 关闭弹框
  const closeDia = () => {
    proxy.$refs.formRef.resetFields()