用户增加导出

client/src/utils/exportExcel.js

@@ -0,0 +1,45 @@
+import * as XLSX from 'xlsx';
+/**
+ * eg: .columns = [
+ *    { header: 'Id', key: 'id', wpx: 10 },
+ *    { header: 'Name', key: 'name', wch: 32 },
+ *    { header: 'D.O.B.', key: 'dob', width: 10, hidden: true }
+ * ]
+ * data: [{id: 1, name: 'John Doe', dob: new Date(1970,1,1)}]
+ * @param columns 定义列属性数组
+ * @param data  数据
+ * @param name  文件名
+ */
+export const generateExcel = (columns = [], data = [], name = '') => {
+  const headers = columns.map((item) => item.header);
+  // https://docs.sheetjs.com/docs/csf/features/#row-and-column-properties
+  const otherConfigs = columns.map(({ key, header, ...item }) => item);
+  const dataList = data.map((item) => {
+    let obj = {};
+    columns.forEach((col) => {
+      obj[col.header] = item[col.key];
+    });
+    return obj;
+  });
+  const workbook = XLSX.utils.book_new();
+  workbook.SheetNames.push(name);
+  const worksheet = XLSX.utils.json_to_sheet(dataList, {
+    header: headers,
+  });
+  worksheet['!cols'] = otherConfigs;
+  workbook.Sheets[name] = worksheet;
+  // 生成Blob数据
+  const excelData = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
+  const blobData = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  // 创建Blob URL
+  const blobUrl = URL.createObjectURL(blobData);
+  // 创建一个隐藏的<a>标签并设置href属性为Blob URL
+  const link = document.createElement('a');
+  link.href = blobUrl;
+  link.target = '_blank';
+  link.download = `${name}.xlsx`;
+  // 触发点击操作，开始下载文件
+  link.click();
+  // 释放Blob URL
+  URL.revokeObjectURL(blobUrl);
+};

client/src/views/login/index.vue

@@ -229,7 +229,7 @@ export default {
     getTimer() {
       const TIME_COUNT = 60;
       if (!this.timer) {
-        this.count = TIME_COUNT;
+        this.count = COUNT;
         this.disabled = true;
         this.timer = setInterval(() => {
           if (this.count > 0 && this.count <= TIME_COUNT) {

client/src/views/system/user.vue

@@ -68,16 +68,22 @@
               type="primary"
               icon="el-icon-search"
               @click="handleFilter"
-              >搜索</el-button
+            >搜索</el-button>
-            >
             <el-button
               class="filter-item"
               style="margin-left: 10px"
               type="primary"
               icon="el-icon-refresh-left"
               @click="resetFilter"
-              >重置</el-button
+            >重置</el-button>
-            >
+            <el-button
+              class="filter-item"
+              style="margin-left: 10px"
+              type="primary"
+              icon="el-icon-download"
+              @click="exportExcel"
+              :loading="listLoading"
+            >导出</el-button>
           </div>
           <div style="margin-top: 10px">
             <el-button type="primary" icon="el-icon-plus" @click="handleAddUser"
@@ -269,6 +275,7 @@ import checkPermission from "@/utils/permission";
 import { upUrl, upHeaders } from "@/api/file";
 import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
 import Treeselect from "@riophae/vue-treeselect";
+import {generateExcel} from "@/utils/exportExcel.js";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 const defaultUser = {
   id: "",
@@ -310,6 +317,12 @@ export default {
       filterOrgText: "",
       treeLoding: false,
       orgData: [],
+      columns : [
+         { header: '姓名', key: 'name', wpx: 60 },
+         { header: '账户', key: 'username', wch: 32 },
+         { header: '部门', key: 'dept_name', width: 30 },
+         { header: '角色', key: 'roles', width: 70 }
+      ],
     };
   },
   computed: {},
@@ -450,6 +463,37 @@ export default {
           .catch((e) => {});
       });
     },
+     //导出
+    exportExcel(){
+      let that = this;
+      this.listLoading = true;
+      //获取全部人员数据
+      let promises = [1,2, 3, 4].map(function (page) {
+        return getUserList({page:page,page_size:500}).then((res)=>{return res.data.results})
+      });
+      Promise.all(promises).then(function (posts) {
+        let data = JSON.parse(JSON.stringify(posts))
+        let list = [...data[0], ...data[1],...data[2], ...data[3]];
+        let exportData = [];
+        for(let i=0;i<list.length;i++){
+            let obj = {};
+            obj.name=list[i].name;
+            obj.username=list[i].username;
+            obj.dept_name=list[i].dept_name;
+            let rolesList = list[i].roles_;
+            let roles = rolesList.map((item)=>{
+                return item.name;
+            })
+            obj.roles=roles.toString();
+            exportData.push(obj)
+        }
+        generateExcel(that.columns,exportData,'账号清单');
+        that.listLoading = false;
+      }).catch(function(reason){
+          console.log('出错了',reason)
+          that.listLoading = false;
+      });
+    },
   },
 };
 </script>