报表功能调整

package.json

@@ -36,6 +36,7 @@
     "echarts-gl": "^2.0.8",
     "echarts-wordcloud": "^2.0.0",
     "element-ui": "2.15.6",
+    "exceljs": "^4.4.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "highlight.js": "^11.2.0",
@@ -65,6 +66,7 @@
     "vuedraggable": "^2.20.0",
     "vuex": "3.6.0",
     "vxe-table": "^3.7.8",
+    "vxe-table-plugin-export-xlsx": "legacy",
     "xe-utils": "^3.5.11",
     "xlsx": "^0.18.5",
     "zradmin": "file:"

src/main.js

@@ -46,7 +46,11 @@ import * as echarts from 'echarts'
 import ECharts from 'vue-echarts'
 // VXE-Table相关组件
 import VXETable from 'vxe-table'
-
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
+import ExcelJS from 'exceljs'
+VXETable.use(VXETablePluginExportXLSX, {
+  ExcelJS,
+})
 import 'vxe-table/lib/style.css'
 
 import dataV from '@jiaminghi/data-view'
@@ -108,6 +112,7 @@ Vue.use(Element, {
 })
 
 Vue.use(VXETable)
+
 Vue.use(dataV)
 Vue.use(AFTableColumn)
 DictData.install()

src/views/qualityManagement/gp12/report/QualityReport.vue

@@ -22,12 +22,14 @@
             </el-form-item>
             <el-form-item label="站点" prop="siteNo">
                 <el-select v-model="queryParams.siteNo" placeholder="请选择站点" @change="selectChange">
+                    <el-option label="全部" value=""></el-option>
                     <el-option v-for="item in siteOptions" :key="item.code" :label="item.name" :value="item.code">
                     </el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="班组" prop="team">
                 <el-select v-model="queryParams.team" placeholder="请选择班组" @change="selectChange">
+                    <el-option label="全部" value=""></el-option>
                     <el-option v-for="item in teamOptions" :key="item.code" :label="item.name" :value="item.code">
                     </el-option>
                 </el-select>
@@ -43,6 +45,7 @@
             <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
             </el-form-item>
         </el-form>
         <!-- 统计数据区域 -->
@@ -58,8 +61,9 @@
         <!-- 数据区域 -->
         <vxe-table size="mini" ref="xTable" border height="860px" :scroll-y="{ gt: 500 }" :data="dataList"
             :loading="loading" :row-config="{ isHover: true, isCurrent: true, height: 60 }"
-            :column-config="{ resizable: true }" :header-cell-style="headerCellStyle" :merge-cells="mergeCells"
+            :column-config="{ resizable: true }" :header-cell-style="headerCellStyle" :export-config="exportConfig"
-            :cell-style="cellStyle" @menu-click="contextMenuClickEvent" :menu-config="tableMenu">
+            :merge-cells="mergeCells" :cell-style="cellStyle" @menu-click="contextMenuClickEvent"
+            :menu-config="tableMenu">
             <vxe-colgroup title="工单信息" align="center" fixed="left">
                 <vxe-column field="workOrder" title="工单号" align="center" width="100px" />
                 <vxe-column field="partNumber" title="零件号" align="center" width="100px" />
@@ -198,6 +202,26 @@ export default {
             },
             // 总记录数
             total: 0,
+            exportConfig: {
+                types: ['xlsx'],
+                remote: false,
+                original: false,
+                isPrint: false,
+                mode: 'current',
+                message: true,
+                sheetMethod({ options, worksheet }) {
+                    if (options.mergeCells && options.mergeCells.length) {
+                        options.mergeCells.forEach(merge => {
+                            worksheet.mergeCells(
+                                merge.row + 1, // 起始行（从1开始）
+                                merge.col + 1, // 起始列（从1开始）
+                                merge.row + merge.rowspan, // 结束行
+                                merge.col + merge.colspan // 结束列
+                            );
+                        });
+                    }
+                }
+            }
         };
     },
     created() {
@@ -382,6 +406,20 @@ export default {
                 fontWeight: '600',
             }
         },
+        handleExport() {
+            const $table = this.$refs.xTable
+            if ($table) {
+                $table.exportData()
+                // 设置导出类型为 xlsx
+                // $table.exportData({
+                //     type: 'xlsx', 
+                // }).then(() => {
+                //     console.log('导出成功');
+                // }).catch(error => {
+                //     console.error('导出失败:', error);
+                // });
+            }
+        }
     },
 };
 </script>