+elective xlsx output

package.json

@@ -44,7 +44,7 @@
     "docxtemplater": "^3.23.2",
     "echarts": "4.9.0",
     "element-ui": "2.15.0",
-    "file-saver": "^2.0.4",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.0.0-rc.7",
@@ -70,7 +70,8 @@
     "vue-router": "3.4.9",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/components/table-to-excel-mixin.js

@@ -0,0 +1,27 @@
+import * as xlsx from 'xlsx'
+import fileSaver from 'file-saver'
+
+export default {
+  methods: {
+    exportExcel($event, tableId = 'output-table', fileName = 'output.xlsx') {
+      const tableDom = document.getElementById(tableId)
+      if (!tableDom) return
+
+      const wb = xlsx.utils.table_to_book(tableDom)
+      const wbOut = xlsx.write(wb, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+      })
+
+      try {
+        fileSaver.saveAs(
+          new Blob([wbOut], { type: 'application/octet-stream' }),
+          fileName
+        )
+      } catch (e) {
+        console.log('export excel error', e, wbOut)
+      }
+    }
+  }
+}

src/views/elective/generation/detail.vue

@@ -5,7 +5,11 @@
       <mx-condition :query-params="queryParams" :require-fields="requireFields" :local-data="localData"
                     @query="handleQuery"></mx-condition>
     </el-card>
-    <mx-table :rows="detailTable.rows" :prop-defines="detailTable.columns" border class="mt20 elective-flow-table">
+    <div v-if="enableOutput" class="text-right mt20">
+      <el-button type="primary" icon="el-icon-printer" @click="exportExcel">导出</el-button>
+    </div>
+    <mx-table :rows="detailTable.rows" :prop-defines="detailTable.columns" border
+              id="output-table" class="mt20 elective-flow-table">
       <template #pagedIndex="{$index}">
         {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
       </template>
@@ -49,6 +53,7 @@
       </template>
     </mx-table>
     <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+                :page-sizes="pageSizes"
                 @pagination="loadGenerationDetails"></pagination>
     <el-dialog title="选科流程明细" v-if="logVisible" :visible.sync="logVisible" :width="logDialogWidth">
       <elective-generation-flow-log :groups="prevData.groups" :histories="logRow.histories"
@@ -80,6 +85,7 @@ import ElectiveFlowRankDescriptor from '@/views/elective/generation/components/e
 import { getStudentElectiveModels } from '@/api/webApi/elective/selected-subject'
 import ElectiveAiTable from '@/views/elective/select/components/elective-ai-table'
 import EventBus from '@/components/EventBus'
+import ExportExcelMixin from '@/components/table-to-excel-mixin'
 
 export default {
   components: {
@@ -89,7 +95,7 @@ export default {
     ElectiveGenerationFlowLog,
     MxCondition
   },
-  mixins: [transferMixin, groupTranslateMixin, ElectiveColorMap, ElectiveToolsMixin],
+  mixins: [transferMixin, groupTranslateMixin, ElectiveColorMap, ElectiveToolsMixin, ExportExcelMixin],
   name: 'generation-detail',
   computed: {
     ...mapGetters(['school']),
@@ -170,6 +176,13 @@ export default {
       const expectedWidth = (this.prevData.groups.length + 3) * 160 // 假定elective-generation-flow-log 单格宽160
       const finalWidth = Math.min(expectedWidth, window.innerWidth * 0.8)
       return finalWidth + 'px'
+    },
+    enableOutput() {
+      // noinspection JSIncompatibleTypesComparison
+      return this.$route.query?.output == 1
+    },
+    pageSizes() {
+      return this.enableOutput ? [20, 50, 100, 200, 500, 9999] : undefined
     }
   },
   data() {