打印

package.json

@@ -99,7 +99,8 @@
     "vue-router": "3.4.9",
     "vuedraggable": "^2.24.3",
     "vuex": "3.6.0",
-    "wangeditor": "^4.7.5"
+    "wangeditor": "^4.7.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/views/hisStore/storeOrder/healthStoreList.vue

@@ -518,7 +518,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" fixed="right" label="操作" width="80px">
+      <el-table-column align="center" fixed="right" label="操作" width="200px">
         <template slot-scope="scope">
           <el-button
             v-hasPermi="['store:storeOrder:query']"
@@ -540,6 +540,12 @@
             @click="handleGenPayUrl(scope.row)"
             v-hasPermi="['store:storeOrder:genPayUrl']"
           >生成付款链接</el-button> -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handlePreviewPrintOrder(scope.row)"
+          >预览打印</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -806,6 +812,35 @@
         <el-button type="primary" @click="submitDeliveryNote">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 新增：Excel预览打印弹窗 -->
+    <el-dialog
+      title="订单Excel预览打印"
+      :visible.sync="previewExcelOpen"
+      width="90%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div v-loading="previewLoading" class="excel-preview-container">
+        <!-- Excel预览表格 -->
+        <div v-if="previewExcelData.length > 0" class="excel-preview-content">
+          <table class="excel-table" border="1" cellpadding="5" cellspacing="0">
+            <tbody>
+            <tr v-for="(row, rowIndex) in previewExcelData" :key="rowIndex">
+              <td v-for="(cell, colIndex) in row" :key="colIndex" :style="{ minWidth: '120px' }">
+                {{ cell || '' }}
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else-if="!previewLoading" class="empty-tip">暂无预览数据</div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewExcelOpen = false">关闭</el-button>
+        <el-button type="primary" @click="printExcelContent">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -847,6 +882,9 @@ export default {
   },
   data() {
     return {
+      previewExcelOpen: false, // 预览弹窗是否打开
+      previewExcelData: [],    // 解析后的Excel数据
+      previewLoading: false,   // 预览加载状态
       loginType:null,
       importMsgOpen: false,
       importMsg: '',
@@ -1644,8 +1682,104 @@ export default {
         return;
       }
       this.$refs.upload.submit();
-    }
+    },
+
+    /** 新增：预览并打印订单Excel */
+    handlePreviewPrintOrder(row) {
+      this.previewLoading = true;
+      this.previewExcelData = [];
+      downloadOrderExcel(row.id)
+        .then(response => {
+          if (response instanceof Blob) return response.arrayBuffer();
+          throw new Error('响应不是Excel文件格式');
+        })
+        .then(arrayBuffer => {
+          const XLSX = require('xlsx');
+          const workbook = XLSX.read(arrayBuffer, { type: 'array' });
+          const sheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[sheetName];
+          const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
+          const excelData = [];
+
+          for (let row = 0; row <= range.e.r; row++) {
+            const rowData = [];
+            let isRowEmpty = true;
+            for (let col = 0; col <= range.e.c; col++) {
+              const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];
+              const cellValue = cell ? cell.v : '';
+              rowData.push(cellValue);
+              if (cellValue !== '' && cellValue !== null && cellValue !== undefined) {
+                isRowEmpty = false;
+              }
+            }
+            if (!isRowEmpty) {
+              if (rowData.some(item => item.includes('销售退款明细单'))) {
+                excelData.push(['' +
+                '', '' +
+                '']);
+                excelData.push(rowData);
+              } else {
+                excelData.push(rowData);
+              }
+            }
+          }
+
+          this.previewExcelData = excelData;
+          this.previewExcelOpen = true;
+        })
+        .catch(error => {
+          console.error('预览Excel失败:', error);
+          this.$message.error(`预览失败：${error.message || '请重试'}`);
+        })
+        .finally(() => {
+          this.previewLoading = false;
+        });
+    },
+
+    /** 新增：打印预览的Excel内容 */
+    printExcelContent() {
+      if (this.previewExcelData.length === 0) {
+        this.$message.warning('暂无可打印的数据');
+        return;
+      }
+      // 1. 创建新打印窗口
+      const printWindow = window.open('', '_blank');
+      if (!printWindow) {
+        this.$message.warning('浏览器弹窗被拦截，请允许弹窗后重试');
+        return;
+      }
 
+      // 2. 构建打印页面的HTML
+      printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <meta charset="UTF-8">
+        <title>订单详情打印</title>
+        <style>
+          table { border-collapse: collapse; width: 100%; margin: 20px 0; }
+          td { border: 1px solid #000; padding: 8px; min-width: 120px; text-align: center; }
+          h3 { text-align: center; }
+        </style>
+      </head>
+      <body>
+        <h3>订单详情</h3>
+        <table>
+          <tbody>
+            ${this.previewExcelData.map(row => `
+              <tr>
+                ${row.map(cell => `<td>${cell || ''}</td>`).join('')}
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </body>
+      </html>
+    `);
+      printWindow.document.close();
+      printWindow.print();
+      printWindow.onafterprint = () => printWindow.close();
+    },
   }
 }
 </script>
@@ -1691,6 +1825,46 @@ export default {
 .el-descriptions-item__label.is-bordered-label {
   font-weight: normal;
 }
+/* 新增：Excel预览样式 */
+.excel-preview-container {
+  padding: 10px;
+  max-height: 600px;
+  overflow: auto;
+
+  .excel-table {
+    width: 100%;
+    border-collapse: collapse;
 
+    td {
+      border: 1px solid #e6e6e6;
+      padding: 8px;
+      text-align: center;
+    }
+  }
+
+  .empty-tip {
+    text-align: center;
+    padding: 20px;
+    color: #999;
+  }
+}
+</style>
+
+<style>
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  .print-content, .print-content * {
+    visibility: visible;
+  }
+  .print-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    width: 100%;
+  }
+}
 </style>