feat(库存管理): 添加入库单打印功能

src/views/warehouseManagement/stockManagement/components/printStockEnter.vue

@@ -0,0 +1,202 @@
+<template>
+  <ele-modal
+    title="入库单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="80%"
+    @close="close"
+  >
+    <div
+      id="printSection"
+      style="
+        font-family: SimSun, serif;
+        padding: 20px;
+      "
+    >
+      <!-- 入库单标题 -->
+      <div style="text-align: center; margin-bottom: 20px;">
+        <h2 style="margin: 0; font-size: 24px; font-weight: bold;">入库单</h2>
+      </div>
+      
+      <!-- 供应商信息 -->
+      <div style="margin-bottom: 20px; width: 100%;">
+        <div style="width: 100%; display: flex;">
+          <div style="width: 40%;">
+            <strong>供应商名称：</strong>{{ rowList.supplierName || '' }}
+          </div>
+          <div style="width: 30%;">
+            <strong>日期：</strong>{{ rowList.storageTime || '' }}
+          </div>
+          <div style="width: 30%;">
+            <strong>编号：</strong>{{ rowList.bizNo || '' }}
+          </div>
+        </div>
+      </div>
+      
+      <!-- 入库物品表格 -->
+      <table
+        border="1"
+        cellspacing="0"
+        style="
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 14px;
+        "
+      >
+        <thead>
+          <tr>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">编号</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 180px;">名称</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 140px;">规格</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">单位</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">入库数量</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">单价</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">金额</th>
+            <th style="border: 1px solid #000; padding: 8px; text-align: center;">批次号</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in rowList.outInDetailList" :key="index">
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ index + 1 }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.categoryName || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.specification || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.measureUnit || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.measureQuantity || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.unitPrice || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.totalMoney || ''}}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ row?.batchNo || '' }}</td>
+          </tr>
+          
+          <!-- 合计金额行 -->
+          <tr>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;" colspan="2">合计：</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ totalAmount || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ totalAllPrice || '' }}</td>
+            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
+          </tr>
+        </tbody>
+      </table>
+      
+      <!-- 签字区域 -->
+      <div style="margin-top: 20px; display: flex; width: 100%;">
+        <div style="width: 25%;">
+          <strong>主管：</strong>
+          <div style="height: 30px;"></div>
+        </div>
+        <div style="width: 25%;">
+          <strong>仓库：</strong>
+          <div style="height: 30px;"></div>
+        </div>
+        <div style="width: 25%;">
+          <strong>记账：</strong>
+          <div style="height: 30px;"></div>
+        </div>
+        <div style="width: 25%;">
+          <strong>经手人：</strong>
+          <div style="height: 30px;"></div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+  import storageApi from '@/api/warehouseManagement';
+  export default {
+    name: 'print',
+    components: {},
+    computed: {
+      // 计算总数量
+      totalAmount() {
+        if (!this.rowList?.outInDetailList || !Array.isArray(this.rowList.outInDetailList)) {
+          return 0;
+        }
+        
+        return this.rowList.outInDetailList.reduce((sum, row) => {
+          const amount = parseFloat(row.measureQuantity || 0);
+          return sum + (isNaN(amount) ? 0 : amount);
+        }, 0);
+      },
+      
+      // 计算总金额
+      totalAllPrice() {
+        if (!this.rowList?.outInDetailList || !Array.isArray(this.rowList.outInDetailList)) {
+          return 0;
+        }
+        
+        return this.rowList.outInDetailList.reduce((sum, row) => {
+          const amount = parseFloat(row.totalMoney || 0);
+          return sum + (isNaN(amount) ? 0 : amount);
+        }, 0);
+      }
+    },
+    props: {},
+    data() {
+      return {
+        QRvisible: false,
+        rowList: [],
+      };
+    },
+
+    methods: {
+
+      async init(id) {
+        const res = await storageApi.getInboundDetailsById(id);
+        console.log('res', res);
+        this.rowList = res;
+        this.QRvisible = true;
+      },
+
+      close() {
+        this.rowList = [];
+        this.QRvisible = false;
+      },
+      
+      print() {
+        const printSection = document.getElementById('printSection');
+        
+        // 创建打印任务
+        const printWindow = window.open('', '_blank');
+        printWindow.document.open();
+        printWindow.document.write('<html><head><title>打印预览</title>');
+        printWindow.document.write(
+          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+        );
+        printWindow.document.write('</head><body>');
+        printWindow.document.write(printSection.innerHTML);
+        printWindow.document.write('</body></html>');
+        printWindow.document.close();
+        printWindow.onload = function () {
+          printWindow.print();
+        };
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  #printSection {
+    
+  }
+  table {
+    border-collapse: collapse;
+  }
+  th, td {
+    border: 1px solid #000;
+    text-align: center;
+    padding: 8px;
+  }
+  @media print {
+    .no-print {
+      display: none;
+    }
+  }
+</style>

src/views/warehouseManagement/stockManagement/index.vue

@@ -188,6 +188,11 @@
           <el-button icon="el-icon-printer" type="primary" @click="print"
             >打印</el-button
           >
+
+          <el-button icon="el-icon-printer" type="primary" @click="printkEnter"
+            >打印入库单</el-button
+          >
+
           <!-- <el-button
             icon="el-icon-plus"
             v-if="clientEnvironmentId == 4"
@@ -271,6 +276,7 @@
     </el-card>
 
     <printQRCode ref="printQRCodeRef"></printQRCode>
+    <printStockEnter ref="printStockEnterRef"></printStockEnter>
 
     <!--  <priceMaintenanceDialog ref="priceMaintenanceDialogRef" /> -->
   </div>
@@ -286,6 +292,7 @@
   ('@/view/warehouseManagement/stockManagement/components/priceMaintenanceDialog.vue');
 
   import printQRCode from './components/printQRCode.vue';
+  import printStockEnter from './components/printStockEnter.vue';
   import {
     warehousingType,
     sceneState,
@@ -293,7 +300,7 @@
     useDict
   } from '@/utils/dict/index';
   export default {
-    components: { printQRCode },
+    components: { printQRCode, printStockEnter },
     data() {
       return {
         auditStatus,
@@ -704,6 +711,18 @@
         this.$refs.printQRCodeRef.init(this.currentRow.id);
 
         console.log('print');
+      },
+
+      printkEnter() {
+        if (!this.currentRow.id) {
+          return this.$message({
+            message: '请先选择单据',
+            type: 'warning',
+            duration: 2000
+          });
+        }
+
+        this.$refs.printStockEnterRef.init(this.currentRow.id);
       }
     }
   };