From eceaba0ba7f9c836b0e50529bfd7eb1268501619 Mon Sep 17 00:00:00 2001 From: shijing Date: Fri, 20 Oct 2023 15:14:07 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=A2=9E=E5=8A=A0=E5=AF=BC?= =?UTF-8?q?=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/dist/index.html | 2 +- client/src/utils/exportExcel.js | 45 +++++++++++++++++++++++++++ client/src/views/login/index.vue | 2 +- client/src/views/system/user.vue | 52 +++++++++++++++++++++++++++++--- 4 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 client/src/utils/exportExcel.js diff --git a/client/dist/index.html b/client/dist/index.html index 9772179..3c4dacb 100644 --- a/client/dist/index.html +++ b/client/dist/index.html @@ -1 +1 @@ -vue Admin Template
\ No newline at end of file +vue Admin Template
\ No newline at end of file diff --git a/client/src/utils/exportExcel.js b/client/src/utils/exportExcel.js new file mode 100644 index 0000000..dcf69fc --- /dev/null +++ b/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); + // 创建一个隐藏的标签并设置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); +}; \ No newline at end of file diff --git a/client/src/views/login/index.vue b/client/src/views/login/index.vue index af952a6..571de2b 100644 --- a/client/src/views/login/index.vue +++ b/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) { diff --git a/client/src/views/system/user.vue b/client/src/views/system/user.vue index b0cbab5..72e6c12 100644 --- a/client/src/views/system/user.vue +++ b/client/src/views/system/user.vue @@ -68,16 +68,22 @@ type="primary" icon="el-icon-search" @click="handleFilter" - >搜索 + >搜索 重置 + >重置 + 导出
{}); }); }, + //导出 + 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{ + 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; + }); + }, }, };