导出 pdf

package.json

@@ -23,7 +23,9 @@
     "echarts": "^4.2.1",
     "element-ui": "2.15.13",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "js-cookie": "2.2.0",
+    "jspdf": "^4.0.0",
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "moment": "^2.29.2",

src/views/inventorys/stocktaking.vue

@@ -720,38 +720,6 @@
               <td>实际盘点清单数量</td>
               <td>{{ summaryModal.data ? summaryModal.data.actualCount : '' }}</td>
             </tr>
-            <tr>
-              <td colspan="4" style="padding: 0;">
-                <div style="margin-top: 20px;">
-                  <h4 style="margin-bottom: 12px; font-size: 16px; font-weight: bold;">盘点物资计划详情列表</h4>
-                  <div style="overflow-x: auto; max-width: 100%;">
-                    <Table
-                      :columns="planDetailColumns"
-                      :data="summaryModal.inventoryList"
-                      :loading="summaryModal.loading"
-                      border
-                      style="width: 100%;"
-                    >
-                    <template slot="photos" slot-scope="{ row }">
-                      <div v-if="row.photos && row.photos.length > 0" style="display: flex; gap: 4px; flex-wrap: wrap">
-                        <img
-                          v-for="(photo, index) in row.photos.slice(0, 3)"
-                          :key="index"
-                          :src="photo.url"
-                          style="width: 50px; height: 50px; object-fit: cover; cursor: pointer; border: 1px solid #eee"
-                          @click="previewImage(photo.url)"
-                        />
-                        <span v-if="row.photos.length > 3" style="line-height: 50px; color: #999"
-                          >+{{ row.photos.length - 3 }}</span
-                        >
-                      </div>
-                      <span v-else>-</span>
-                    </template>
-                  </Table>
-                </div>
-                </div>
-              </td>
-            </tr>
             <tr>
               <td class="sign-cell">签字区</td>
               <td colspan="3" style="text-align: left">
@@ -760,13 +728,38 @@
             </tr>
           </table>
         </div>
-        <div style="margin: 24px 0 8px 0">
+        <div style="margin: 24px 0 8px 0" class="signature-section">
           <span style="font-weight: bold">签名：</span>
           <div class="signature-pad-wrapper" style="margin-top: 8px">
             <canvas ref="summarySignaturePad" class="signature-canvas" />
             <Button size="small" style="margin-top: 8px;" @click="clearSummarySignature">清除签名</Button>
           </div>
         </div>
+        <div class="inventory-detail-section" style="margin-top: 20px;">
+          <h4 style="margin-bottom: 12px; font-size: 16px; font-weight: bold;">盘点物资计划详情列表</h4>
+          <div style="overflow-x: auto; max-width: 100%;" class="inventory-table-wrapper">
+            <Table
+              :columns="planDetailColumns"
+              :data="summaryModal.inventoryList"
+              :loading="summaryModal.loading"
+              border
+              style="width: 100%;"
+              class="inventory-print-table"
+            >
+            <template slot="photos" slot-scope="{ row }">
+              <div v-if="row.files && row.files.length" class="photo-list">
+                <div v-for="(file, index) in row.files.slice(0, 3)" :key="index" class="photo-item">
+                  <img :src="file.url" @click="previewImage(file.url)" />
+                </div>
+                <div v-if="row.files.length > 3" class="photo-more">
+                  +{{ row.files.length - 3 }}
+                </div>
+              </div>
+              <span v-else>-</span>
+            </template>
+          </Table>
+        </div>
+        </div>
       </div>
       <template slot="footer">
         <Button v-print="'#print-table'">打印</Button>
@@ -1365,6 +1358,12 @@ export default {
         inventoryList: []
       },
       planDetailColumns: [
+        // {
+        //   title: 'id',
+        //   key: 'id',
+        //   width: 100,
+        //   align: 'center'
+        // },
         {
           title: '所属种类',
           key: 'suoshuzhonglei',
@@ -1469,7 +1468,7 @@ export default {
           key: 'check_num',
           width: 100,
           render: (h, params) => {
-            const quantity = params.row.check_num || '-'
+            const quantity = params.row.check_num
             const unit = params.row.inventory?.jiliangdanwei || ''
             if (quantity === '-') {
               return h('span', '-')
@@ -1498,8 +1497,7 @@ export default {
         {
           title: '备注',
           key: 'remark',
-          width: 120,
-          tooltip: true
+          width: 120
         }
       ],
       summaryModal: {
@@ -2424,12 +2422,12 @@ export default {
           // 对数据进行排序：盘点数量和在库数量不同的排在前面
           list.sort((a, b) => {
             // 判断 a 是否不同
-            const aQuantity = a.check_num || '-'
+            const aQuantity = a.check_num
             const aOriginalQuantity = a.inventory?.zaikushuliang
             const aIsDifferent = (aOriginalQuantity == null || aOriginalQuantity === '') || (aOriginalQuantity != null && String(aQuantity) !== String(aOriginalQuantity))
 
             // 判断 b 是否不同
-            const bQuantity = b.check_num || '-'
+            const bQuantity = b.check_num
             const bOriginalQuantity = b.inventory?.zaikushuliang
             const bIsDifferent = (bOriginalQuantity == null || bOriginalQuantity === '') || (bOriginalQuantity != null && String(bQuantity) !== String(bOriginalQuantity))
 
@@ -3254,4 +3252,201 @@ export default {
   cursor: crosshair;
   background: #fff;
 }
+
+/* 打印样式 */
+@media print {
+  /* 全局打印设置 */
+  @page {
+    size: A4;
+    margin: 15mm;
+  }
+
+  /* 确保打印时显示所有内容 */
+  #print-table {
+    width: 100% !important;
+    page-break-inside: auto;
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    display: block !important;
+  }
+
+  /* 表格可以跨页显示 */
+  .summary-table {
+    page-break-inside: auto;
+    border-collapse: collapse;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  .summary-table tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+
+  /* 表格行可以跨页，但尽量保持完整 */
+  .summary-table td {
+    page-break-inside: avoid;
+  }
+
+  /* 盘点物资列表单元格允许跨页 */
+  .summary-table .inventory-list-cell {
+    page-break-inside: auto !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .summary-table .inventory-list-cell td {
+    page-break-inside: auto !important;
+    height: auto !important;
+  }
+
+  /* 盘点物资表格允许跨页 */
+  .inventory-table-wrapper {
+    page-break-inside: auto !important;
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    display: block !important;
+  }
+
+  /* iView Table 组件打印样式 */
+  #print-table .ivu-table,
+  .inventory-print-table {
+    page-break-inside: auto !important;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    display: table !important;
+  }
+
+  #print-table .ivu-table-wrapper {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  #print-table .ivu-table-body-wrapper {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    display: block !important;
+  }
+
+  #print-table .ivu-table-body {
+    page-break-inside: auto !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    display: table-row-group !important;
+  }
+
+  /* 表格行可以跨页，但尽量保持单行完整 */
+  #print-table .ivu-table-row {
+    page-break-inside: avoid;
+    page-break-after: auto;
+    display: table-row !important;
+  }
+
+  /* 表格单元格允许跨页 */
+  #print-table .ivu-table td,
+  #print-table .ivu-table th {
+    page-break-inside: auto;
+    display: table-cell !important;
+  }
+
+  /* 表格头部在每页重复 */
+  #print-table .ivu-table-header {
+    display: table-header-group !important;
+  }
+
+  #print-table .ivu-table-header-wrapper {
+    display: block !important;
+    overflow: visible !important;
+  }
+
+  /* 签字区尽量在同一页 */
+  .summary-table .sign-cell {
+    page-break-inside: avoid;
+  }
+
+  /* 隐藏不需要打印的元素 */
+  .signature-pad-wrapper,
+  .ivu-modal-footer,
+  .ivu-modal-header,
+  .ivu-modal-mask,
+  .ivu-modal-wrap,
+  .inventory-detail-section {
+    display: none !important;
+  }
+
+  /* 确保打印时背景色和边框显示 */
+  .summary-table td {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    background: #fff !important;
+    border: 1px solid #333 !important;
+  }
+
+  /* 确保所有内容可见，移除所有高度和溢出限制 */
+  #print-table * {
+    overflow: visible !important;
+  }
+
+  #print-table .ivu-table * {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* 确保表格内容完整显示 */
+  #print-table .ivu-table-body-wrapper,
+  #print-table .ivu-table-body-wrapper * {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  /* 移除可能的固定定位 */
+  #print-table .ivu-table-fixed,
+  #print-table .ivu-table-fixed-right {
+    position: static !important;
+  }
+
+  /* 确保所有滚动容器在打印时展开 */
+  #print-table [style*="overflow"],
+  #print-table [style*="max-height"],
+  #print-table [style*="height"] {
+    overflow: visible !important;
+    max-height: none !important;
+    height: auto !important;
+  }
+
+  /* 确保表格容器完全展开 */
+  #print-table .ivu-table-body,
+  #print-table .ivu-table-body table {
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  /* 确保所有行都显示 */
+  #print-table .ivu-table-row {
+    display: table-row !important;
+    visibility: visible !important;
+  }
+
+  /* 移除任何可能隐藏内容的样式 */
+  #print-table .ivu-table-body tr {
+    display: table-row !important;
+    page-break-inside: avoid;
+  }
+
+  /* 确保表格在打印时使用标准表格布局 */
+  #print-table .ivu-table {
+    table-layout: auto !important;
+  }
+}
 </style>

vue.config.js

@@ -78,6 +78,10 @@ module.exports = {
       }
     }
   },
+  transpileDependencies: [
+    'fast-png',
+    'iobuffer'
+  ],
   chainWebpack(config) {
     // it can improve the speed of the first screen, it is recommended to turn on preload
     config.plugin('preload').tap(() => [{