销售订单增加“预览打印”功能

src/views/hisStore/storeOrder/index.vue

@@ -519,7 +519,7 @@
               <el-tag prop="status" v-for="(item, index) in deliveryPayStatusOptions"    v-if="scope.row.deliveryPayStatus==item.dictValue">{{item.dictLabel}}</el-tag>
           </template>
       </el-table-column>
-      <el-table-column label="操作" fixed="right" width="80px" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" fixed="right" width="150px" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -533,6 +533,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>
@@ -765,6 +771,36 @@
       </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>
 
@@ -780,7 +816,7 @@ import {
   updateStoreOrder,
   exportStoreOrder,
   getOrderItemsNum,
-  importDeliveryNoteExpressTemplate, exportStoreOrderDetails, exportStoreOrderItemsDetails
+  importDeliveryNoteExpressTemplate, exportStoreOrderDetails, exportStoreOrderItemsDetails, downloadOrderExcel
 } from '@/api/hisStore/storeOrder'
 import { getUserList } from "@/api/hisStore/user";
 import { getAddressList } from "@/api/hisStore/userAddress";
@@ -806,6 +842,9 @@ export default {
   },
   data() {
     return {
+      previewExcelOpen: false, // 预览弹窗是否打开
+      previewExcelData: [],    // 解析后的Excel数据
+      previewLoading: false,   // 预览加载状态
       itemlist : [],
       orderOptions: [],
       importMsgOpen:false,
@@ -1548,8 +1587,60 @@ export default {
       }
       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;
+        });
+    },
   }
-};
+}
+;
 </script>
 <style scoped lang="scss">
 .items{
@@ -1588,6 +1679,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>