fix: 点位管理新增导入导出功能

src/api/siteAdmin/PositionAdmin.js

@@ -49,4 +49,21 @@ export default class PositionAdmin {
       params: { id: id },
       params: { id: id },
     });
     });
   }
   }
+  // 点位管理导出
+  exportExcel(params) {
+    return request({
+      url: "/site/point/export",
+      method: "get",
+      params: params,
+      responseType: "blob",
+    });
+  }
+  // 点位管理导入
+  importExcel(data) {
+    return request({
+      url: "/site/point/import",
+      method: "post",
+      data: data,
+    });
+  }
 }
 }

src/views/modules/siteAdmin/positionAdmin/index.vue

@@ -32,20 +32,32 @@
     <div class="bg-white top" style="height: calc(100% - 120px);">
     <div class="bg-white top" style="height: calc(100% - 120px);">
       <div style="height: calc(100% - 80px);">
       <div style="height: calc(100% - 80px);">
         <el-row type="flex">
         <el-row type="flex">
-          <el-col :span="22" class="rowTabs">
+          <el-col :span="19" class="rowTabs">
             <div v-for="item in equipmentOptions" :class="{ rowItem: true, rowActive: item.value == tabsActive }"
             <div v-for="item in equipmentOptions" :class="{ rowItem: true, rowActive: item.value == tabsActive }"
               :key="item.value" @click="clickTabsItem(item)">{{
               :key="item.value" @click="clickTabsItem(item)">{{
               item.label
               item.label
               }}</div>
               }}</div>
           </el-col>
           </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 type="primary" icon="el-icon-download" size="small" @click="importDataEvent">导入</el-button>
             <el-button v-if="hasPermission('positionAdmin:add')" type="primary" icon="el-icon-plus" size="small"
             <el-button v-if="hasPermission('positionAdmin:add')" type="primary" icon="el-icon-plus" size="small"
               @click="pointAdminAdd()">新增</el-button>
               @click="pointAdminAdd()">新增</el-button>
           </el-col>
           </el-col>
         </el-row>
         </el-row>
         <vxe-table border="inner" ref="xTable" show-overflow auto-resize resizable height="auto" :loading="loading"
         <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"
           :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']
+          }" :import-config="{
+          importMethod: importMethod,
+          types: ['csv', 'xls', 'xlsx'],
+          remote: true}">
           <vxe-column field="equipmentType_dictText" title="设备类型" align="center"></vxe-column>
           <vxe-column field="equipmentType_dictText" title="设备类型" align="center"></vxe-column>
           <vxe-column field="mapId_dictText" title="地图名称" align="center"></vxe-column>
           <vxe-column field="mapId_dictText" title="地图名称" align="center"></vxe-column>
           <vxe-column field="name" title="点位编号" align="center"></vxe-column>
           <vxe-column field="name" title="点位编号" align="center"></vxe-column>
@@ -113,6 +125,7 @@ export default {
         total: 0,
         total: 0,
         currentPage: 1,
         currentPage: 1,
         pageSize: 10,
         pageSize: 10,
+        orders: []
       },
       },
       equipmentOptions: [
       equipmentOptions: [
         { label: '全部', value: '-1' },
         { label: '全部', value: '-1' },
@@ -229,6 +242,47 @@ export default {
       this.tablePage.pageSize = pageSize
       this.tablePage.pageSize = pageSize
       this.getPointPage()
       this.getPointPage()
     },
     },
+    // 打开导出弹窗
+    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.PositionAdmin.exportExcel(params).then((res) => {
+        // 将二进制流文件写入excel表，以下为重要步骤
+        this.$utils.downloadExcel(res.data, options.filename)
+      }).catch(function (err) {
+        if (err.response) {
+          console.log(err.response)
+        }
+      })
+    },
+    importDataEvent () {
+      this.$refs.xTable.importData()
+    },
+    // 自定义服务端导入
+    importMethod ({ file }) {
+      // 处理表单
+      const formBody = new FormData()
+      formBody.append('file', file)
+      this.PositionAdmin.importExcel(formBody).then(result => {
+        this.$message.success(result)
+      })
+    },
   },
   },
   created () {
   created () {
     this.PositionAdmin = new PositionAdmin()
     this.PositionAdmin = new PositionAdmin()