From d7dec04cb321705e0a0ef09dd21e89a40c9c5c41 Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Sun, 13 Sep 2026 09:36:21 +0800
Subject: [PATCH] refactor(web-admin): extract PoundSlipQrcodeView for shared
 QR card

Keep admin dialog behavior while enabling public page and driver popup reuse.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../business/db/DbPoundSlipQrcodeDialog.vue   | 55 ++++++-------------
 .../business/db/PoundSlipQrcodeView.vue       | 50 +++++++++++++++++
 2 files changed, 67 insertions(+), 38 deletions(-)
 create mode 100644 web-admin/src/components/business/db/PoundSlipQrcodeView.vue

diff --git a/web-admin/src/components/business/db/DbPoundSlipQrcodeDialog.vue b/web-admin/src/components/business/db/DbPoundSlipQrcodeDialog.vue
index 706f96f6c..2389bc0b9 100644
--- a/web-admin/src/components/business/db/DbPoundSlipQrcodeDialog.vue
+++ b/web-admin/src/components/business/db/DbPoundSlipQrcodeDialog.vue
@@ -10,50 +10,25 @@
     append-to-body
     @close="handleClose"
   >
-    <div v-loading="loading" class="db-qrcode-body pound-slip-capture-inline">
-      <template v-if="captureRow">
-        <div class="capture-card">
-          <div class="capture-row capture-row-plate">
-            <div class="vehicle-plate">
-              <span class="vehicle-plate-dot vehicle-plate-dot-lt"></span>
-              <span class="vehicle-plate-dot vehicle-plate-dot-lb"></span>
-              <span class="vehicle-plate-text">{{ captureRow.vehicleNo }}</span>
-              <span class="vehicle-plate-dot vehicle-plate-dot-rt"></span>
-              <span class="vehicle-plate-dot vehicle-plate-dot-rb"></span>
-            </div>
-          </div>
-          <div class="capture-row capture-row-large">
-            <span class="label">往来单位：</span>
-            <span class="value">{{ captureRow.partnerCompany }}</span>
-          </div>
-          <div class="capture-row capture-row-large">
-            <span class="label">物料名称：</span>
-            <span class="value">
-              {{ formatQrcodeProductLabel(captureRow) }}（{{ captureRow.quantity }} {{ quantityUnitLabel }}）
-            </span>
-          </div>
-          <div v-if="captureRow.remarks" class="capture-row">
-            <span class="label">备注：</span>
-            <span class="value">{{ captureRow.remarks }}</span>
-          </div>
-        </div>
-        <div class="capture-card capture-qrcode">
-          <div class="capture-id">
-            {{ captureRow.date }}
-            {{ captureRow.businessType === '出库' ? '出库单ID：' : '入库单ID：' }}{{ captureRow.id }}
-          </div>
-          <div class="capture-qr-wrap">
-            <img v-if="captureQrObjectUrl" :src="captureQrObjectUrl" alt="二维码" class="capture-qr-img" />
-          </div>
-          <div class="capture-desc">出入库单标识（扫码核验）</div>
-        </div>
-      </template>
+    <div v-loading="loading" class="db-qrcode-body">
+      <PoundSlipQrcodeView
+        v-if="captureRow && captureQrObjectUrl"
+        :vehicle-no="captureRow.vehicleNo"
+        :partner-company="captureRow.partnerCompany"
+        :product-line="formatProductLine(captureRow)"
+        :remarks="captureRow.remarks || ''"
+        :date-text="captureRow.date"
+        :business-type="captureRow.businessType"
+        :inventory-id="captureRow.id"
+        :qr-object-url="captureQrObjectUrl"
+      />
     </div>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { inventoryApi, type InventoryRecord } from '@/api/db/inventory'
+import PoundSlipQrcodeView from '@/components/business/db/PoundSlipQrcodeView.vue'
 
 const props = defineProps<{
   visible: boolean
@@ -92,6 +67,10 @@ function formatQrcodeProductLabel(row: InventoryRecord) {
   return `${product} ${specification}`
 }
 
+function formatProductLine(row: InventoryRecord) {
+  return `${formatQrcodeProductLabel(row)}（${row.quantity} ${quantityUnitLabel.value}）`
+}
+
 function getQrImageUrl(inventoryId: string) {
   return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(inventoryId)}`
 }
diff --git a/web-admin/src/components/business/db/PoundSlipQrcodeView.vue b/web-admin/src/components/business/db/PoundSlipQrcodeView.vue
new file mode 100644
index 000000000..46b5ec6aa
--- /dev/null
+++ b/web-admin/src/components/business/db/PoundSlipQrcodeView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="pound-slip-capture-inline">
+    <div class="capture-card">
+      <div class="capture-row capture-row-plate">
+        <div class="vehicle-plate">
+          <span class="vehicle-plate-dot vehicle-plate-dot-lt"></span>
+          <span class="vehicle-plate-dot vehicle-plate-dot-lb"></span>
+          <span class="vehicle-plate-text">{{ vehicleNo }}</span>
+          <span class="vehicle-plate-dot vehicle-plate-dot-rt"></span>
+          <span class="vehicle-plate-dot vehicle-plate-dot-rb"></span>
+        </div>
+      </div>
+      <div class="capture-row capture-row-large">
+        <span class="label">往来单位：</span>
+        <span class="value">{{ partnerCompany }}</span>
+      </div>
+      <div class="capture-row capture-row-large">
+        <span class="label">物料名称：</span>
+        <span class="value">{{ productLine }}</span>
+      </div>
+      <div v-if="remarks" class="capture-row">
+        <span class="label">备注：</span>
+        <span class="value">{{ remarks }}</span>
+      </div>
+    </div>
+    <div class="capture-card capture-qrcode">
+      <div class="capture-id">
+        {{ dateText }}
+        {{ businessType === '出库' ? '出库单ID：' : '入库单ID：' }}{{ inventoryId }}
+      </div>
+      <div class="capture-qr-wrap">
+        <img :src="qrObjectUrl" alt="二维码" class="capture-qr-img" />
+      </div>
+      <div class="capture-desc">出入库单标识（扫码核验）</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  vehicleNo: string
+  partnerCompany: string
+  productLine: string
+  remarks?: string
+  dateText: string
+  businessType: string
+  inventoryId: string
+  qrObjectUrl: string
+}>()
+</script>