增加Excel导入导出示例功能

web/src/view/example/excel/excel.vue

@@ -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>