【更新】完善前端用户管理导出用户功能

snowy-admin-web/src/utils/downloadUtil.js

@@ -0,0 +1,25 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+export default {
+	// 对下载的流进行处理，直接从浏览器下载下来
+	resultDownload (res) {
+		const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
+		const contentDisposition = res.headers['content-disposition']
+		const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+		const $link = document.createElement('a')
+		$link.href = URL.createObjectURL(blob)
+		$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
+		$link.click()
+		document.body.appendChild($link)
+		document.body.removeChild($link) // 下载完成移除元素
+		window.URL.revokeObjectURL($link.href) // 释放掉blob对象
+	}
+}

snowy-admin-web/src/views/sys/user/index.vue

@@ -56,18 +56,31 @@
 					:row-selection="options.rowSelection"
 				>
 					<template #operator class="table-operator">
-						<a-button type="primary" class="primaryAdd" @click="form.onOpen()">
+						<a-space>
-							<template #icon><plus-outlined /></template>
+							<a-button type="primary" @click="form.onOpen()">
-							<span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span>
+								<template #icon><plus-outlined /></template>
-						</a-button>
+								<span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span>
-						<a-button class="primaryAdd" @click="ImpExpRef.onOpen()">
+							</a-button>
-							<template #icon><import-outlined /></template>
+							<a-button @click="ImpExpRef.onOpen()">
-							<span>{{ $t('common.imports') }}</span>
+								<template #icon><import-outlined /></template>
-						</a-button>
+								<span>{{ $t('common.imports') }}</span>
-						<a-button danger @click="removeBatchUser()">
+							</a-button>
-							<template #icon><delete-outlined /></template>
+							<a-button @click="exportBatchUserVerify">
-							{{ $t('common.batchRemoveButton') }}
+								<template #icon><delete-outlined /></template>
-						</a-button>
+								批量导出
+							</a-button>
+							<a-popconfirm
+								title="删除此信息？"
+								:visible="deleteVisible"
+								@visibleChange="deleteVisibleChange"
+								@confirm="deleteBatchUser"
+							>
+								<a-button danger>
+									<template #icon><delete-outlined /></template>
+									{{ $t('common.batchRemoveButton') }}
+								</a-button>
+							</a-popconfirm>
+						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
 						<template v-if="column.dataIndex === 'avatar'">
@@ -136,6 +149,7 @@
 <script setup name="sysUser">
 	import { message, Empty } from 'ant-design-vue'
 	import tool from '@/utils/tool'
+	import downloadUtil from '@/utils/downloadUtil'
 	import userApi from '@/api/sys/userApi'
 	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
@@ -207,7 +221,7 @@
 	const ImpExpRef = ref()
 	const grantResourceFormRef = ref()
 	const grantPermissionFormRef = ref()
-
+	const deleteVisible = ref(false)
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
 		return userApi.userPage(Object.assign(parameter, searchFormState)).then((res) => {
@@ -291,12 +305,49 @@
 			table.value.refresh()
 		})
 	}
-	// 批量删除用户
+	// 批量导出校验并加参数
-	const removeBatchUser = () => {
+	const exportBatchUserVerify = () => {
-		if (selectedRowKeys.value.length < 1) {
+		if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) {
-			message.warning('请选择一条或多条数据')
+			message.warning('请输入查询条件或勾选要导出的信息')
+		}
+		if (selectedRowKeys.value.length > 0) {
+			const params = selectedRowKeys.value.map((m) => {
+				return m
+			})
+			exportBatchUser(params)
 			return
 		}
+		if (searchFormState.searchKey || searchFormState.userStatus) {
+			const params = {
+				searchKey: searchFormState.searchKey,
+				userStatus: searchFormState.userStatus
+			}
+			exportBatchUser(params)
+			return
+		}
+	}
+	// 批量导出
+	const exportBatchUser = (params) => {
+		userApi.userExport(params).then((res) => {
+			downloadUtil.resultDownload(res)
+		})
+	}
+	// 批量删除校验
+	const deleteVisibleChange = () => {
+		if (deleteVisible.value) {
+			deleteVisible.value = false
+			return false
+		}
+		if (selectedRowKeys.value.length < 1) {
+			message.warning('请选择一条或多条数据')
+			deleteVisible.value = false
+			return false
+		} else {
+			deleteVisible.value = true
+		}
+	}
+	// 批量删除
+	const deleteBatchUser = () => {
 		const params = selectedRowKeys.value.map((m) => {
 			return {
 				id: m
@@ -340,16 +391,7 @@
 			id: record.id
 		}
 		userApi.userExportUserInfo(params).then((res) => {
-			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
+			downloadUtil.resultDownload(res)
-			const contentDisposition = res.headers['content-disposition']
-			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
-			const $link = document.createElement('a')
-			$link.href = URL.createObjectURL(blob)
-			$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
-			$link.click()
-			document.body.appendChild($link)
-			document.body.removeChild($link) // 下载完成移除元素
-			window.URL.revokeObjectURL($link.href) // 释放掉blob对象
 		})
 	}
 </script>
@@ -361,9 +403,6 @@
 	.ant-form-item {
 		margin-bottom: 0 !important;
 	}
-	.primaryAdd {
-		margin-right: 10px;
-	}
 	.snowy-table-avatar {
 		margin-top: -10px;
 		margin-bottom: -10px;