提交

art-design-pro/src/views/inventory/index.vue

@@ -363,7 +363,7 @@
     <!-- 磅单二维码弹窗：供截图保存，不依赖 HTTPS；遮罩深黑避免截到背后内容 -->
     <el-dialog
       v-model="qrcodeModalOpen"
-      title="山峡出入库磅单二维码"
+      :title="qrcodeDialogTitle"
       width="400px"
       class="qrcode-dialog"
       modal-class="qrcode-dialog-overlay"
@@ -380,20 +380,30 @@
               <span class="vehicle-plate-dot vehicle-plate-dot-rb"></span>
             </div>
           </div>
-          <div class="capture-row"><span class="label">日期：</span><span class="value">{{ captureRow.date }}</span></div>
-          <div class="capture-row"><span class="label">往来单位：</span><span class="value">{{ captureRow.partnerCompany }}</span></div>
-          <div class="capture-row"><span class="label">物料名称：</span><span class="value">{{ captureRow.product }}</span></div>
-          <div class="capture-row"><span class="label">数量(吨)：</span><span class="value">{{ captureRow.quantity }}</span></div>
-          <div v-if="captureRow.remarks" class="capture-row"><span class="label">备注：</span><span class="value">{{ captureRow.remarks }}</span></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">
+              {{ captureRow.product }}（数量：{{ captureRow.quantity }} 吨）
+            </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.businessType === '出库' ? '出库单ID：' : '入库单ID：' }}{{ captureRow.id }}</div>
+          <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>
-        <div class="qrcode-dialog-hint">请截图保存上方二维码及磅单信息</div>
       </div>
     </el-dialog>
   </div>
@@ -449,6 +459,11 @@
   const captureRow = ref<InventoryRecord | null>(null)
   const captureQrObjectUrl = ref<string>('')
 
+  const qrcodeDialogTitle = computed(() => {
+    const date = captureRow.value?.date
+    return date ? `山峡磅单二维码（${date}）` : '山峡磅单二维码'
+  })
+
   const formRef = ref()
   // formData初始化时保持干净，不依赖路由参数
   const formData = reactive<InventoryCreate>({
@@ -1001,10 +1016,14 @@
     color: var(--el-color-danger);
   }
 
-  /* 磅单二维码弹窗：标题栏高度缩小，内容区上下边距缩小 */
+  /* 磅单二维码弹窗：标题栏高度进一步缩小，内容区上下边距缩小，标题加大加粗 */
   :deep(.qrcode-dialog.el-dialog) {
     .el-dialog__header {
-      padding: 4px 12px 2px;
+      padding: 2px 10px 0;
+      .el-dialog__title {
+        font-size: 20px;
+        font-weight: 700;
+      }
     }
     .el-dialog__body {
       padding: 6px 16px;
@@ -1017,18 +1036,10 @@
     max-height: 70vh;
     overflow-y: auto;
   }
-  .qrcode-dialog-hint {
-    margin-top: 6px;
-    padding: 5px 10px;
-    font-size: 12px;
-    color: #6b7280;
-    text-align: center;
-    background: #f3f4f6;
-    border-radius: 6px;
-  }
   .pound-slip-capture-inline {
     background: #f5f7fa;
-    padding: 6px 10px;
+    padding: 4px 8px;
+    margin: 6px 10px;
     font-family: inherit;
   }
   .pound-slip-capture-inline .capture-header {
@@ -1045,8 +1056,8 @@
   .pound-slip-capture-inline .capture-card {
     background: #fff;
     border-radius: 8px;
-    margin-bottom: 8px;
-    padding: 8px 10px;
+    margin: 10px;
+    padding: 6px 8px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   }
   .pound-slip-capture-inline .capture-title {
@@ -1062,6 +1073,10 @@
     margin-bottom: 4px;
     font-size: 13px;
   }
+  .pound-slip-capture-inline .capture-row-large {
+    font-size: 15px;
+    font-weight: 600;
+  }
   .pound-slip-capture-inline .capture-row .label {
     color: #6b7280;
     min-width: 82px;
@@ -1088,14 +1103,14 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 6px 28px;
+    padding: 10px 32px;
     background: #F5D000;
     border: 3px solid #fff;
     border-radius: 8px;
     box-shadow: 0 0 0 2px #fff;
   }
   .pound-slip-capture-inline .vehicle-plate-text {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: 700;
     color: #000;
     letter-spacing: 1px;
@@ -1115,27 +1130,32 @@
     text-align: center;
   }
   .pound-slip-capture-inline .capture-id {
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 700;
     color: #111827;
     margin-bottom: 6px;
   }
   .pound-slip-capture-inline .capture-qr-wrap {
     padding: 8px 0;
-    min-height: 168px;
+    min-height: 200px;
   }
   .pound-slip-capture-inline .capture-qr-img {
-    width: 168px;
-    height: 168px;
+    width: 200px;
+    height: 200px;
     display: inline-block;
   }
   .pound-slip-capture-inline .capture-desc {
-    font-size: 13px;
-    font-weight: 600;
+    font-size: 9px;
+    font-weight: 500;
     color: #374151;
     margin-top: 4px;
   }
 
+  /* 根容器去掉内边距，便于整体更紧凑截图 */
+  .qrcode-dialog-body.pound-slip-capture-inline {
+    padding: 0;
+  }
+
   /* 保留原屏外截图样式（若有其他地方引用可删） */
   .pound-slip-capture {
     position: fixed;

mobile-h5/src/views/inventory/index.vue

@@ -292,7 +292,7 @@
     <!-- 磅单二维码弹窗：供截图保存，不依赖 HTTPS -->
     <van-dialog
       v-model:show="qrcodeModalOpen"
-      title="山峡出入库磅单二维码"
+      :title="qrcodeDialogTitle"
       :show-cancel-button="false"
       confirm-button-text=""
       :show-confirm-button="false"
@@ -312,27 +312,37 @@
               <span class="vehicle-plate-dot vehicle-plate-dot-rb"></span>
             </div>
           </div>
-          <div class="capture-row"><span class="label">日期：</span><span class="value">{{ captureRow.date }}</span></div>
-          <div class="capture-row"><span class="label">往来单位：</span><span class="value">{{ captureRow.partnerCompany }}</span></div>
-          <div class="capture-row"><span class="label">物料名称：</span><span class="value">{{ captureRow.product }}</span></div>
-          <div class="capture-row"><span class="label">数量(吨)：</span><span class="value">{{ captureRow.quantity }}</span></div>
-          <div v-if="captureRow.remarks" class="capture-row"><span class="label">备注：</span><span class="value">{{ captureRow.remarks }}</span></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">
+              {{ captureRow.product }}（数量：{{ captureRow.quantity }} 吨）
+            </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.businessType === '出库' ? '出库单ID：' : '入库单ID：' }}{{ captureRow.id }}</div>
+          <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>
-        <div class="qrcode-dialog-hint">请截图保存上方二维码及磅单信息</div>
       </div>
     </van-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, computed } from 'vue'
 import dayjs from 'dayjs'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast, showDialog } from 'vant'
@@ -370,6 +380,11 @@ const qrcodeModalOpen = ref(false)
 const captureRow = ref<InventoryRecord | null>(null)
 const captureQrObjectUrl = ref<string>('')
 
+const qrcodeDialogTitle = computed(() => {
+  const date = captureRow.value?.date
+  return date ? `山峡磅单二维码（${date}）` : '山峡磅单二维码'
+})
+
 const loadData = async (reset = false) => {
   if (reset) {
     currentPage.value = 1
@@ -833,10 +848,14 @@ onMounted(() => {
   }
 }
 
-/* 磅单二维码弹窗：标题栏高度缩小，内容区上下边距缩小 */
+/* 磅单二维码弹窗：标题栏高度进一步缩小，内容区上下边距缩小，标题加大加粗 */
 :deep(.qrcode-dialog) {
   .van-dialog__header {
-    padding: 4px 12px 2px;
+    padding: 17px 10px 0;
+    .van-dialog__title {
+      font-size: 20px;
+      font-weight: 700;
+    }
   }
   .van-dialog__content {
     padding: 6px 16px;
@@ -876,20 +895,11 @@ onMounted(() => {
 .qrcode-dialog-body {
   max-height: 70vh;
   overflow-y: auto;
-  padding: 6px 10px;
-}
-.qrcode-dialog-hint {
-  margin-top: 6px;
-  padding: 5px 10px;
-  font-size: 12px;
-  color: #6b7280;
-  text-align: center;
-  background: #f3f4f6;
-  border-radius: 6px;
 }
 .pound-slip-capture-inline {
   background: #f5f7fa;
-  padding: 6px 10px;
+  padding: 4px 8px;
+  margin: 6px 10px;
   font-family: inherit;
   .capture-header {
     font-size: 15px;
@@ -905,8 +915,8 @@ onMounted(() => {
   .capture-card {
     background: #fff;
     border-radius: 8px;
-    margin-bottom: 8px;
-    padding: 8px 10px;
+    margin: 0;
+    padding: 6px 0;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   }
   .capture-title {
@@ -921,6 +931,10 @@ onMounted(() => {
     align-items: center;
     margin-bottom: 4px;
     font-size: 13px;
+    &.capture-row-large {
+      font-size: 15px;
+      font-weight: 600;
+    }
     .label {
       color: #6b7280;
       min-width: 82px;
@@ -949,14 +963,14 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 6px 28px;
+    padding: 10px 32px;
     background: #F5D000;
     border: 3px solid #fff;
     border-radius: 8px;
     box-shadow: 0 0 0 2px #fff;
   }
   .pound-slip-capture-inline .vehicle-plate-text {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: 700;
     color: #000;
     letter-spacing: 1px;
@@ -977,27 +991,32 @@ onMounted(() => {
     text-align: center;
   }
   .capture-id {
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 700;
     color: #111827;
     margin-bottom: 6px;
   }
   .capture-qr-wrap {
     padding: 8px 0;
-    min-height: 168px;
+    min-height: 200px;
   }
   .capture-qr-img {
-    width: 168px;
-    height: 168px;
+    width: 200px;
+    height: 200px;
     display: inline-block;
   }
   .capture-desc {
-    font-size: 13px;
-    font-weight: 600;
+    font-size: 9px;
+    font-weight: 500;
     color: #374151;
     margin-top: 4px;
   }
 }
+
+/* 根容器去掉内边距，便于整体更紧凑截图 */
+.qrcode-dialog-body.pound-slip-capture-inline {
+  padding: 0;
+}
 </style>
 
 <!-- 磅单二维码弹窗内容可能被 teleport 到 body，需全局样式保证车牌黄底白字生效 -->
@@ -1016,14 +1035,14 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 6px 28px;
+    padding: 10px 32px;
     background: #F5D000;
     border: 3px solid #fff;
     border-radius: 8px;
     box-shadow: 0 0 0 2px #fff;
   }
   .vehicle-plate-text {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: 700;
     color: #000;
     letter-spacing: 1px;