增加Excel导入导出示例功能

2021-01-28 00:48:47 +08:00
parent 21ef7bdcc0
commit f60b0f1750
15 changed files with 403 additions and 143 deletions
@@ -1,4 +1,31 @@
-import service from '@/utils/request'
+import service from '@/utils/request';
+import { Message } from 'element-ui';
+
+const handleFileError = (res, fileName) => {
+    if (typeof(res.data) !== "undefined") {
+        if (res.data.type == "application/json") {
+            const reader = new FileReader();
+            reader.onload = function() {
+                let message = JSON.parse(reader.result).msg;
+                Message({
+                    showClose: true,
+                    message: message,
+                    type: 'error'
+                })
+            };
+            reader.readAsText(new Blob([res.data]));
+        } 
+    } else {
+        var downloadUrl = window.URL.createObjectURL(new Blob([res]));
+        var a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = downloadUrl;
+        a.download = fileName;
+        var event = new MouseEvent("click");
+        a.dispatchEvent(event);
+    }        
+} 
+
 // @Tags FileUploadAndDownload
 // @Summary 分页文件列表
 // @Security ApiKeyAuth
@@ -28,4 +55,62 @@ export const deleteFile = (data) => {
        method: "post",
        data
    })
+}
+
+// @Tags ExaFileUploadAndDownload
+// @Summary 导出Excel
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce  application/octet-stream
+// @Param data body request.ExcelInfo true "导出Excel文件信息"
+// @Success 200
+// @Router /fileUploadAndDownload/exportExcel [post]
+export const exportExcel = (tableData, fileName) => {
+    service({
+        url: "/fileUploadAndDownload/exportExcel",
+        method: 'post',
+        data: {
+            fileName: fileName,
+            infoList: tableData
+        },
+        responseType: 'blob'
+    }).then((res)=>{
+        handleFileError(res, fileName)
+    })
+}
+
+// @Tags ExaFileUploadAndDownload
+// @Summary 导入Excel文件
+// @Security ApiKeyAuth
+// @accept multipart/form-data
+// @Produce  application/json
+// @Param file formData file true "导入Excel文件"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"导入成功"}"
+// @Router /fileUploadAndDownload/importExcel [post]
+export const loadExcelData = () => {
+    return service({
+        url: "/fileUploadAndDownload/loadExcel",
+        method: 'get'
+    })
+}
+
+// @Tags ExaFileUploadAndDownload
+// @Summary 下载模板
+// @Security ApiKeyAuth
+// @accept multipart/form-data
+// @Produce  application/json
+// @Param fileName query fileName true "模板名称"
+// @Success 200
+// @Router /fileUploadAndDownload/downloadTemplate [get]
+export const downloadTemplate = (fileName) => {   
+    return service({
+        url: "/fileUploadAndDownload/downloadTemplate",
+        method: 'get',
+        params:{
+            fileName: fileName
+        },
+        responseType: 'blob'
+    }).then((res)=>{
+        handleFileError(res, fileName)        
+    })
 }
@@ -1,69 +1,74 @@
 <template>
-  <div>
-    <el-upload
-      :action="`${path}/fileUploadAndDownload/upload`"
-      :before-remove="beforeRemove"
-      :file-list="fileList"
-      :headers="{'x-token':token}"
-      :limit="10"
-      :on-exceed="handleExceed"
-      :on-preview="handlePreview"
-      :on-remove="handleRemove"
-      class="upload-demo"
-      multiple
-    >
-      <el-button size="small" type="primary">点击上传</el-button>
-      <div class="el-upload__tip" slot="tip">未对文件格式及大小做校验</div>
-    </el-upload>
+  <div class="upload">
+    <el-row>
+      <el-col :span="2">
+        <el-upload
+          :action="`${path}/fileUploadAndDownload/importExcel`"
+          :headers="{'x-token':token}"
+          :on-success="loadExcel"
+          :show-file-list="false"
+        >
+          <el-button size="small" type="primary" icon="el-icon-upload2">导入</el-button>
+        </el-upload>
+      </el-col>
+      <el-col :span="2">
+        <el-button size="small" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
+      </el-col>
+      <el-col :span="2">
+        <el-button size="small" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
+      </el-col>
+    </el-row>
+    <el-table :data="tableData" border row-key="ID" stripe>
+      <el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
+      <el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
+      <el-table-column label="路由Path" min-width="160" prop="path"></el-table-column>
+      <el-table-column label="是否隐藏" min-width="100" prop="hidden">
+        <template slot-scope="scope">
+          <span>{{scope.row.hidden?"隐藏":"显示"}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="父节点" min-width="90" prop="parentId"></el-table-column>
+      <el-table-column label="排序" min-width="70" prop="sort"></el-table-column>
+      <el-table-column label="文件路径" min-width="360" prop="component"></el-table-column>
+    </el-table>
  </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
-const path = process.env.VUE_APP_BASE_API
+const path = process.env.VUE_APP_BASE_API;
+import { mapGetters } from 'vuex';
+import infoList from "@/mixins/infoList";
+import { exportExcel, loadExcelData, downloadTemplate } from "@/api/fileUploadAndDownload";
+import { getMenuList } from "@/api/menu";
 export default {
  name: 'Excel',
+  mixins: [infoList],
  data() {
    return {
-      path: path,
-
-      fileList: [
-        {
-          name: 'food.jpeg',
-          url:
-            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        },
-        {
-          name: 'food2.jpeg',
-          url:
-            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }
-      ]
+      listApi: getMenuList,
+      path: path
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'token'])
  },
  methods: {
-    handleRemove(file, fileList) {
-      this.$message.warning(
-        `共有 ${fileList.length} 个文件，移除了${file.name}`
-      )
+    handleExcelExport(fileName) {
+      if (!fileName || typeof fileName !== "string") {
+        fileName = "ExcelExport.xlsx";
+      }
+      exportExcel(this.tableData, fileName);
    },
-    handlePreview(file) {
-      this.$message.warning(`${file.name}选择完成`)
+    loadExcel() {
+      this.listApi = loadExcelData;
+      this.getTableData();
    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${
-          files.length
-        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
-      )
-    },
-    beforeRemove(file, fileList) {
-      return this.$confirm(
-        `共有 ${fileList.length} 个文件，确定移除 ${file.name}？`
-      )
+    downloadExcelTemplate() {
+      downloadTemplate('ExcelTemplate.xlsx')
    }
+  },
+  created() {
+    this.pageSize = 999;
+    this.getTableData();
  }
 }
 </script>