fix: 设备台账新增导出按钮

src/api/equipmentAdmin/EquipmentAccount.js

@@ -49,4 +49,13 @@ export default class EquipmentAccount {
       params: { id: id },
     });
   }
+  // 设备台账导出
+  exportExcel(params) {
+    return request({
+      url: "/facility/equipment/export",
+      method: "get",
+      params: params,
+      responseType: "blob",
+    });
+  }
 }

src/views/modules/equipmentAdmin/equipmentAccount/index.vue

@@ -41,21 +41,29 @@
     <div class="bg-white top" style="height: calc(100% - 120px);">
       <div style="height: calc(100% - 80px);">
         <el-row type="flex">
-          <el-col :span="22" class="rowTabs">
+          <el-col :span="19" class="rowTabs">
             <div v-for="item in $dictUtils.getDictList('tms_facility_type')"
               :class="{ rowItem: true, rowActive: item.value == tabsActive }" :key="item.value"
               @click="clickTabsItem(item)">{{
               item.label
               }}</div>
           </el-col>
-          <el-col :span="2" class="rowBtn">
+          <el-col :span="5" class="rowBtn">
+            <el-button type="primary" icon="el-icon-upload2" size="small" @click="openExportEvent">导出</el-button>
             <el-button v-if="hasPermission('equipmentAccount:add')" type="primary" icon="el-icon-plus" size="small"
               @click="accountAdd()">新增</el-button>
           </el-col>
         </el-row>
         <vxe-table border="inner" ref="xTable" show-overflow auto-resize resizable height="auto" :loading="loading"
           :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }" :data="tableData"
-          header-align="center" :column-config="{ width: '130px' }">
+          header-align="center" :column-config="{ width: '130px' }" :export-config="{
+            remote: true,
+            filename: `用户数据${moment(new Date()).format('YYYY-MM-DD')}`,
+            sheetName: '用户数据',
+            exportMethod: exportMethod,
+            types: ['xlsx'],
+            modes: ['current', 'selected', 'all']
+          }">
           <vxe-column field="equipmentType_dictText" title="设备类型" align="center" width="100px"></vxe-column>
           <vxe-column field="equipmentNo" title="设备ID" align="center" width="100px"></vxe-column>
           <vxe-column field="name" title="设备名称" align="center" width="180px"></vxe-column>
@@ -135,6 +143,7 @@ export default {
         total: 0,
         currentPage: 1,
         pageSize: 10,
+        orders: []
       },
       onlineStatusOptions: [
         { label: '全部', value: '-1' },
@@ -250,6 +259,35 @@ export default {
       this.tablePage.pageSize = pageSize
       this.getEquipmentPage()
     },
+    // 打开导出弹窗
+    openExportEvent () {
+      this.$refs.xTable.openExport()
+    },
+    // 自定义服务端导出
+    exportMethod ({ options }) {
+      // 传给服务端的参数
+      const params = {
+        'current': this.tablePage.currentPage,
+        'size': this.tablePage.pageSize,
+        'orders': this.tablePage.orders,
+        ...this.searchForm,
+        filename: options.filename,
+        sheetName: options.sheetName,
+        isHeader: options.isHeader,
+        original: options.original,
+        mode: options.mode,
+        selectIds: options.mode === 'selected' ? options.data.map(item => item.id) : [],
+        exportFields: options.columns.map(column => column.property)
+      }
+      return this.EquipmentAccount.exportExcel(params).then((res) => {
+        // 将二进制流文件写入excel表，以下为重要步骤
+        this.$utils.downloadExcel(res.data, options.filename)
+      }).catch(function (err) {
+        if (err.response) {
+          console.log(err.response)
+        }
+      })
+    },
   },
   created () {
     this.EquipmentAccount = new EquipmentAccount()