导出表格

src/dashoo.cn/frontend_web/src/pages/select/processselect/index.vue

@@ -33,11 +33,14 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
+          </el-form-item>
         </el-form>
       </div>
       <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
         <el-tab-pane label="准入" name="first">
-          <el-table :data="entityList" size="mini" border style="width: 100%" @sort-change="orderby">
+          <el-table :data="entityList" id="rebateSetTable0" size="mini" border style="width: 100%" @sort-change="orderby">
             <el-table-column align="center" label="公司名称" prop="SupplierName"></el-table-column>
             <el-table-column align="center" label="类型" prop="SupplierTypeCode">
               <template slot-scope="scope">
@@ -60,7 +63,7 @@
           </el-pagination>
         </el-tab-pane>
         <el-tab-pane label="增项" name="second">
-          <el-table :data="entityList" size="mini"  border style="width: 100%" @sort-change="orderby">
+          <el-table :data="entityList" id="rebateSetTable1" size="mini"  border style="width: 100%" @sort-change="orderby">
             <el-table-column align="center" label="公司名称" prop="SupplierName"></el-table-column>
             <el-table-column align="center" label="类型" prop="SupplierTypeCode">
               <template slot-scope="scope">
@@ -83,7 +86,7 @@
           </el-pagination>
         </el-tab-pane>
         <el-tab-pane label="年审" name="third">
-          <el-table :data="entityList" size="mini" border style="width: 100%" @sort-change="orderby">
+          <el-table :data="entityList" id="rebateSetTable2" size="mini" border style="width: 100%" @sort-change="orderby">
             <el-table-column align="center" label="公司名称" prop="SupplierName"></el-table-column>
             <el-table-column align="center" label="类型" prop="SupplierTypeName">
               <template slot-scope="scope">
@@ -114,7 +117,7 @@
           </el-pagination>
         </el-tab-pane>
         <el-tab-pane label="信息变更" name="fourth">
-          <el-table :data="entityList" size="mini" border style="width: 100%" @sort-change="orderby">
+          <el-table :data="entityList" id="rebateSetTable3" size="mini" border style="width: 100%" @sort-change="orderby">
             <el-table-column align="center" label="公司名称" prop="OldSupplierName"></el-table-column>
             <el-table-column align="center" label="当前状态" prop="Status">
               <template slot-scope="scope">
@@ -137,7 +140,7 @@
           </el-pagination>
         </el-tab-pane>
         <el-tab-pane label="资质变更" name="fifth">
-          <el-table :data="entityList" size="mini" border style="width: 100%" @sort-change="orderby">
+          <el-table :data="entityList" id="rebateSetTable4" size="mini" border style="width: 100%" @sort-change="orderby">
             <el-table-column align="center" label="公司名称" prop="SupplierName"></el-table-column>
             <el-table-column align="center" label="当前状态" prop="Status">
               <template slot-scope="scope">
@@ -188,6 +191,8 @@
   import api from '@/api/oilsupplier/select'
   import WfMultiHistory from '@/pages/select/processselect/wfmultihistory.vue'
   import WfHistory from '@/components/workflow/wfhistory.vue'
+  import FileSaver from 'file-saver'
+  import XLSX from 'xlsx'
 
   export default {
     components: {
@@ -255,31 +260,31 @@
         this.initDatas(tab.index)
       },
       openwfhistory (val) {
-        if (this.tabinx == '0') { // 准入
+        if (this.tabinx === '0') { // 准入
           this.entrydetail.business = val.BusinessKey
           this.entrydetail.instance = val.WorkflowId
           this.entrydetail.status = val.Status
           this.entrydetail.process = val.ProcessKey
           this.dialogVisible = true
-        } else if (this.tabinx == '1') { //  增项
+        } else if (this.tabinx === '1') { //  增项
           this.entrydetail.business = val.Id
           this.entrydetail.instance = val.WorkflowId
           this.dialogVisible = true
-        } else if (this.tabinx == '2') { // 年审
+        } else if (this.tabinx === '2') { // 年审
           this.entrydetail.business = val.Id
           this.entrydetail.instance = val.WorkflowId
           this.dialogVisible1 = true
-        } else if (this.tabinx == '3') { // 信息变更
+        } else if (this.tabinx === '3') { // 信息变更
           this.entrydetail.business = val.Id
           this.entrydetail.instance = val.WorkflowId
           this.dialogVisible1 = true
-        } else if (this.tabinx == '4') { // 资质变更
+        } else if (this.tabinx === '4') { // 资质变更
           this.entrydetail.business = val.Id
           this.entrydetail.instance = val.WorkflowId
           this.dialogVisible1 = true
         }
-
       },
+
       initDatas (val,event) {
         if (event != null) {
           this.currentPage = 1;
@@ -314,6 +319,40 @@
         })
       },
 
+      exportExcel() {
+        let tablename = "#rebateSetTable" + this.tabinx
+        /* generate workbook object from table */
+        let wb = XLSX.utils.table_to_book(
+          document.querySelector(tablename)
+        )
+        let filename
+        if (this.tabinx === '0') { // 准入
+          filename = "AccessIn.xlsx"
+        } else if (this.tabinx === '1') { //  增项
+          filename = "Addition.xlsx"
+        } else if (this.tabinx === '2') { // 年审
+          filename = "AnnualAuditor.xlsx"
+        } else if (this.tabinx === '3') { // 信息变更
+          filename = "InfoChanged.xlsx"
+        } else if (this.tabinx === '4') { // 资质变更
+          filename = "AptitudeChanged.xlsx"
+        }
+        /* get binary string as output */
+        let wbout = XLSX.write(wb, {
+          bookType: "xlsx",
+          bookSST: true,
+          type: "array"
+        })
+        try {
+          FileSaver.saveAs(
+            new Blob([wbout], { type: "application/octet-stream" }),
+            filename
+          )
+        } catch (e) {
+          if (typeof console !== "undefined") console.log(e, wbout);
+        }
+        return wbout
+      },
       searchCommand (command) {
         if (command === 'search') {
           this.dialogVisible = true