From b51180bfbfed8ec8b532938be23291f43d982835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=AF=BA?= <1253070437@qq.com>
Date: Sat, 11 Mar 2023 23:43:28 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E4=B8=8B=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=AF=BC=E5=85=A5=E5=AF=BC=E5=87=BA=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E8=AF=A5=E6=A8=A1=E5=9D=97=E5=AF=B9=E5=BA=94=E7=9A=84=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96=E9=85=8D=E7=BD=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 snowy-admin-web/src/api/biz/bizUserApi.js     |  10 +
 snowy-admin-web/src/locales/lang/en.js        |  14 +-
 snowy-admin-web/src/locales/lang/zh-cn.js     |  10 +
 snowy-admin-web/src/views/biz/user/impExp.vue | 105 +++++++
 snowy-admin-web/src/views/biz/user/index.vue  | 256 ++++++++++++------
 snowy-admin-web/src/views/sys/user/index.vue  |  25 +-
 6 files changed, 323 insertions(+), 97 deletions(-)
 create mode 100644 snowy-admin-web/src/views/biz/user/impExp.vue

diff --git a/snowy-admin-web/src/api/biz/bizUserApi.js b/snowy-admin-web/src/api/biz/bizUserApi.js
index eff4af13..5b280fa0 100644
--- a/snowy-admin-web/src/api/biz/bizUserApi.js
+++ b/snowy-admin-web/src/api/biz/bizUserApi.js
@@ -69,5 +69,15 @@ export default {
 	// 给人员授权角色
 	grantRole(data) {
 		return request('grantRole', data)
+	},
+	// 用户导入
+	userImport(data) {
+		return request('import', data)
+	},
+	// 用户导出
+	userExport(data) {
+		return request('export', data, 'get', {
+			responseType: 'blob'
+		})
 	}
 }
diff --git a/snowy-admin-web/src/locales/lang/en.js b/snowy-admin-web/src/locales/lang/en.js
index c7a4d297..0ffd3222 100644
--- a/snowy-admin-web/src/locales/lang/en.js
+++ b/snowy-admin-web/src/locales/lang/en.js
@@ -18,8 +18,9 @@ export default {
 		batchRemoveButton: 'batch Remove',
 		detailButton: 'detail',
 		searchKey: 'Search Key',
-		imports: 'import',
-		more: 'More'
+		imports: 'Import',
+		more: 'More',
+		export: 'Export',
 	},
 	model: {
 		user: 'user',
@@ -58,5 +59,14 @@ export default {
 		userStatus: 'User Status',
 		resetPassword: 'Reset Password',
 		role: 'Role',
+		batchExportButton: 'Batch Export',
+		grantRole: 'Grant Role',
+		grantResource: 'Grant Resource',
+		grantPermission: 'Grant Permission',
+		exportUserInfo: 'Export UserInfo',
+		placeholderNameAndSearchKey: 'Please enter your name or keyword',
+		placeholderUserStatus: 'Please select status',
+		popconfirmDeleteUser: 'Are you sure you want to delete it？',
+		popconfirmResatUserPwd: 'Are you sure you want to reset？'
 	}
 }
diff --git a/snowy-admin-web/src/locales/lang/zh-cn.js b/snowy-admin-web/src/locales/lang/zh-cn.js
index 3ddfa113..7ee89578 100644
--- a/snowy-admin-web/src/locales/lang/zh-cn.js
+++ b/snowy-admin-web/src/locales/lang/zh-cn.js
@@ -22,6 +22,7 @@ export default {
 		searchKey: '关键词',
 		imports: '导入',
 		more: '更多',
+		export: '导出',
 	},
 	model: {
 		user: '用户',
@@ -60,5 +61,14 @@ export default {
 		userStatus: '用户状态',
 		resetPassword: '重置密码',
 		role: '角色',
+		batchExportButton: '批量导出',
+		grantRole: '授权角色',
+		grantResource: '授权资源',
+		grantPermission: '授权权限',
+		exportUserInfo: '导出信息',
+		placeholderNameAndSearchKey: '请输入姓名或关键词',
+		placeholderUserStatus: '请选择状态',
+		popconfirmDeleteUser: '确定要删除吗？',
+		popconfirmResatUserPwd: '确定要重置吗？'
 	}
 }
diff --git a/snowy-admin-web/src/views/biz/user/impExp.vue b/snowy-admin-web/src/views/biz/user/impExp.vue
new file mode 100644
index 00000000..5d1681b6
--- /dev/null
+++ b/snowy-admin-web/src/views/biz/user/impExp.vue
@@ -0,0 +1,105 @@
+<template>
+	<a-drawer
+		title="导入导出"
+		:width="620"
+		:visible="visible"
+		:destroy-on-close="true"
+		:footer-style="{ textAlign: 'right' }"
+		@close="onClose"
+	>
+		<span
+			>导入数据格式严格按照系统模板进行数据录入，请点击
+			<a-button type="primary" size="small" @click="downloadImportUserTemplate">下载模板</a-button>
+		</span>
+		<a-divider dashed />
+		<div>
+			<a-spin :spinning="impUploadLoading">
+				<a-upload-dragger :show-upload-list="false" :custom-request="customRequestLocal">
+					<p class="ant-upload-drag-icon">
+						<inbox-outlined></inbox-outlined>
+					</p>
+					<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+					<p class="ant-upload-hint">仅支持xls、xlsx格式文件</p>
+				</a-upload-dragger>
+			</a-spin>
+		</div>
+		<a-alert v-if="impAlertStatus" type="info" :show-icon="false" banner closable @close="onImpClose" class="mt-3">
+			<template #description>
+				<p>导入总数：{{ impResultData.totalCount }} 条</p>
+				<p>导入成功：{{ impResultData.successCount }} 条</p>
+				<div v-if="impResultData.errorCount > 0">
+					<p><span style="color: red">失败条数：</span>{{ impResultData.errorCount }} 条</p>
+					<a-table :dataSource="impResultErrorDataSource" :columns="impErrorColumns" size="small" />
+				</div>
+			</template>
+		</a-alert>
+	</a-drawer>
+</template>
+
+<script setup name="bizUserImpExp">
+	import userApi from '@/api/sys/userApi'
+	import bizUserApi from '@/api/biz/bizUserApi'
+	import downloadUtil from '@/utils/downloadUtil'
+
+	const impUploadLoading = ref(false)
+	const impAlertStatus = ref(false)
+	const impResultData = ref({})
+	const impResultErrorDataSource = ref([])
+	// 导入
+	const customRequestLocal = (data) => {
+		impUploadLoading.value = true
+		const fileData = new FormData()
+		fileData.append('file', data.file)
+		return bizUserApi
+			.userImport(fileData)
+			.then((res) => {
+				impAlertStatus.value = true
+				impResultData.value = res
+				impResultErrorDataSource.value = res.errorDetail
+			})
+			.finally(() => {
+				impUploadLoading.value = false
+			})
+	}
+	// 关闭导入提示
+	const onImpClose = () => {
+		impAlertStatus.value = false
+	}
+	const impErrorColumns = [
+		{
+			title: '索引',
+			dataIndex: 'index',
+			width: '80px'
+		},
+		{
+			title: '原因',
+			dataIndex: 'msg'
+		}
+	]
+	// 定义emit事件
+	const emit = defineEmits({ successful: null })
+	// 默认是关闭状态
+	let visible = ref(false)
+	const submitLoading = ref(false)
+
+	// 打开抽屉
+	const onOpen = () => {
+		visible.value = true
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		visible.value = false
+		// 关闭导入的提示
+		onImpClose()
+	}
+	// 下载用户导入模板
+	const downloadImportUserTemplate = () => {
+		userApi.userDownloadImportUserTemplate().then((res) => {
+			downloadUtil.resultDownload(res)
+		})
+	}
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
diff --git a/snowy-admin-web/src/views/biz/user/index.vue b/snowy-admin-web/src/views/biz/user/index.vue
index ce367be2..f18c73a4 100644
--- a/snowy-admin-web/src/views/biz/user/index.vue
+++ b/snowy-admin-web/src/views/biz/user/index.vue
@@ -14,6 +14,39 @@
 			</a-card>
 		</a-col>
 		<a-col :span="19">
+			<a-card :bordered="false" style="margin-bottom: 10px">
+				<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+					<a-row :gutter="24">
+						<a-col :span="8">
+							<a-form-item name="searchKey" :label="$t('common.searchKey')">
+								<a-input
+									v-model:value="searchFormState.searchKey"
+									:placeholder="$t('user.placeholderNameAndSearchKey')"
+								/>
+							</a-form-item>
+						</a-col>
+						<a-col :span="8">
+							<a-form-item name="userStatus" :label="$t('user.userStatus')">
+								<a-select v-model:value="searchFormState.userStatus" :placeholder="$t('user.placeholderUserStatus')">
+									<a-select-option v-for="item in statusData" :key="item.dictValue" :value="item.dictValue">{{
+										item.name
+									}}</a-select-option>
+								</a-select>
+							</a-form-item>
+						</a-col>
+						<a-col :span="8">
+							<a-button type="primary" @click="table.refresh(true)">
+								<template #icon><SearchOutlined /></template>
+								{{ $t('common.searchButton') }}
+							</a-button>
+							<a-button class="snowy-buttom-left" @click="() => searchFormRef.resetFields()">
+								<template #icon><redo-outlined /></template>
+								{{ $t('common.resetButton') }}
+							</a-button>
+						</a-col>
+					</a-row>
+				</a-form>
+			</a-card>
 			<a-card :bordered="false">
 				<s-table
 					ref="table"
@@ -26,43 +59,31 @@
 					:row-selection="options.rowSelection"
 				>
 					<template #operator class="table-operator">
-						<a-form
-							ref="searchFormRef"
-							name="advanced_search"
-							class="ant-advanced-search-form"
-							:model="searchFormState"
-						>
-							<a-row :gutter="24">
-								<a-col :span="6">
-									<a-form-item name="searchKey">
-										<a-input v-model:value="searchFormState.searchKey" placeholder="请输入姓名或账号"></a-input>
-									</a-form-item>
-								</a-col>
-								<a-col :span="6">
-									<a-form-item name="userStatus">
-										<a-select v-model:value="searchFormState.userStatus" placeholder="请选择状态">
-											<a-select-option v-for="item in statusData" :key="item.dictValue" :value="item.dictValue">{{
-												item.name
-											}}</a-select-option>
-										</a-select>
-									</a-form-item>
-								</a-col>
-								<a-col :span="6">
-									<a-button type="primary" @click="table.refresh(true)">{{ $t('common.searchButton') }}</a-button>
-									<a-button class="snowy-buttom-left" @click="() => searchFormRef.resetFields()">{{
-										$t('common.resetButton')
-									}}</a-button>
-								</a-col>
-								<a-col :span="6">
-									<a-button type="primary" class="primaryAdd" @click="form.onOpen()" v-if="hasPerm('bizUserAdd')">
-										<span>{{ $t('common.addButton') }}{{ $t('model.bizUser') }}</span>
-									</a-button>
-									<a-button danger @click="removeBatchUser()" v-if="hasPerm('bizUserBatchDelete')">{{
-										$t('common.batchRemoveButton')
-									}}</a-button>
-								</a-col>
-							</a-row>
-						</a-form>
+						<a-space>
+							<a-button type="primary" @click="form.onOpen()" v-if="hasPerm('bizUserAdd')">
+								<template #icon><plus-outlined /></template>
+								<span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span>
+							</a-button>
+							<a-button @click="ImpExpRef.onOpen()" v-if="hasPerm('bizUserImport')">
+								<template #icon><import-outlined /></template>
+								<span>{{ $t('common.imports') }}</span>
+							</a-button>
+							<a-button @click="exportBatchUserVerify" v-if="hasPerm('bizUserBatchExport')">
+								<template #icon><delete-outlined /></template>
+								{{ $t('user.batchExportButton') }}
+							</a-button>
+							<a-popconfirm
+								title="删除此信息？"
+								:visible="deleteVisible"
+								@visibleChange="deleteVisibleChange"
+								@confirm="deleteBatchUser"
+							>
+								<a-button danger v-if="hasPerm('bizUserBatchDelete')">
+									<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'">
@@ -82,18 +103,35 @@
 						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a @click="form.onOpen(record)" v-if="hasPerm('bizUserEdit')">{{ $t('common.editButton') }}</a>
-							<a-divider type="vertical" v-if="hasPerm(['bizUserEdit', 'bizUserGrantRole'], 'and')" />
-							<a @click="selectRole(record)" v-if="hasPerm('bizUserGrantRole')">角色</a>
-							<a-divider type="vertical" v-if="hasPerm(['bizUserGrantRole', 'bizUserPwdReset'], 'and')" />
-							<a-popconfirm title="确定重置此人员密码？" @confirm="resetPassword(record)">
-								<a v-if="hasPerm('bizUserPwdReset')">重置密码</a>
-							</a-popconfirm>
-							<a-divider type="vertical" v-if="hasPerm(['bizUserPwdReset', 'bizUserDelete'], 'and')" />
-							<a-popconfirm title="确定要删除此人员吗？" @confirm="removeUser(record)">
+							<a-divider type="vertical" v-if="hasPerm(['bizUserEdit', 'bizUserDelete'], 'and')" />
+							<a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="removeUser(record)">
 								<a-button type="link" danger size="small" v-if="hasPerm('bizUserDelete')">{{
 									$t('common.removeButton')
 								}}</a-button>
 							</a-popconfirm>
+							<a-divider type="vertical" v-if="hasPerm(['bizUserGrantRole', 'bizUserPwdReset'], 'and')" />
+							<a-dropdown v-if="hasPerm(['bizUserGrantRole', 'bizUserPwdReset'], 'and')">
+								<a class="ant-dropdown-link">
+									{{ $t('common.more') }}
+									<DownOutlined />
+								</a>
+								<template #overlay>
+									<a-menu>
+										<a-menu-item v-if="hasPerm('bizUserPwdReset')">
+											<a-popconfirm
+												:title="$t('user.popconfirmResatUserPwd')"
+												placement="topRight"
+												@confirm="resetPassword(record)"
+											>
+												<a>{{ $t('user.resetPassword') }}</a>
+											</a-popconfirm>
+										</a-menu-item>
+										<a-menu-item v-if="hasPerm('bizUserGrantRole')">
+											<a @click="selectRole(record)">{{ $t('user.grantRole') }}</a>
+										</a-menu-item>
+									</a-menu>
+								</template>
+							</a-dropdown>
 						</template>
 					</template>
 				</s-table>
@@ -108,13 +146,16 @@
 		:role-global="false"
 		@onBack="roleBack"
 	/>
+	<ImpExp ref="ImpExpRef" />
 </template>
 <script setup name="bizUser">
 	import { message, Empty } from 'ant-design-vue'
-	import { getCurrentInstance } from 'vue'
+	import tool from '@/utils/tool'
+	import downloadUtil from '@/utils/downloadUtil'
 	import bizUserApi from '@/api/biz/bizUserApi'
 	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
+	import ImpExp from './impExp.vue'
 
 	const columns = [
 		{
@@ -163,11 +204,10 @@
 			title: '操作',
 			dataIndex: 'action',
 			align: 'center',
-			width: '240px'
+			width: '220px'
 		})
 	}
-	const { proxy } = getCurrentInstance()
-	const statusData = proxy.$TOOL.dictTypeList('COMMON_STATUS')
+	const statusData = tool.dictTypeList('COMMON_STATUS')
 	const searchFormRef = ref()
 	let defaultExpandedKeys = ref([])
 	let searchFormState = reactive({})
@@ -181,7 +221,8 @@
 	const selectedRecord = ref({})
 	const loading = ref(false)
 	const cardLoading = ref(true)
-
+	const ImpExpRef = ref()
+	const deleteVisible = ref(false)
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
 		return bizUserApi.userPage(Object.assign(parameter, searchFormState)).then((res) => {
@@ -189,28 +230,30 @@
 		})
 	}
 	// 左侧树查询
-	bizUserApi.userOrgTreeSelector().then((res) => {
-		cardLoading.value = false
-		if (res !== null) {
-			treeData.value = res
-			// 默认展开2级
-			treeData.value.forEach((item) => {
-				// 因为0的顶级
-				if (item.parentId === '0') {
-					defaultExpandedKeys.value.push(item.id)
-					// 取到下级ID
-					if (item.children) {
-						item.children.forEach((items) => {
-							defaultExpandedKeys.value.push(items.id)
-						})
+	bizUserApi
+		.userOrgTreeSelector()
+		.then((res) => {
+			cardLoading.value = false
+			if (res !== null) {
+				treeData.value = res
+				// 默认展开2级
+				treeData.value.forEach((item) => {
+					// 因为0的顶级
+					if (item.parentId === '0') {
+						defaultExpandedKeys.value.push(item.id)
+						// 取到下级ID
+						if (item.children) {
+							item.children.forEach((items) => {
+								defaultExpandedKeys.value.push(items.id)
+							})
+						}
 					}
-				}
-			})
-		}
-	})
-	.finally(() => {
-		cardLoading.value = false
-	})
+				})
+			}
+		})
+		.finally(() => {
+			cardLoading.value = false
+		})
 	// 列表选择配置
 	const options = {
 		alert: {
@@ -238,19 +281,23 @@
 	const editStatus = (record) => {
 		loading.value = true
 		if (record.userStatus === 'ENABLE') {
-			bizUserApi.userDisableUser(record).then(() => {
-				table.value.refresh()
-			})
-			.finally(() => {
-				loading.value = false
-			})
+			bizUserApi
+				.userDisableUser(record)
+				.then(() => {
+					table.value.refresh()
+				})
+				.finally(() => {
+					loading.value = false
+				})
 		} else {
-			bizUserApi.userEnableUser(record).then(() => {
-				table.value.refresh()
-			})
-			.finally(() => {
-				loading.value = false
-			})
+			bizUserApi
+				.userEnableUser(record)
+				.then(() => {
+					table.value.refresh()
+				})
+				.finally(() => {
+					loading.value = false
+				})
 		}
 	}
 	// 删除人员
@@ -264,12 +311,49 @@
 			table.value.refresh()
 		})
 	}
-	// 批量删除人员
-	const removeBatchUser = () => {
+	// 批量导出校验并加参数
+	const exportBatchUserVerify = () => {
+		if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) {
+			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) => {
+		bizUserApi.userExport(params).then((res) => {
+			downloadUtil.resultDownload(res)
+		})
+	}
+	// 批量删除校验
+	const deleteVisibleChange = () => {
+		if (deleteVisible.value) {
+			deleteVisible.value = false
+			return false
+		}
 		if (selectedRowKeys.value.length < 1) {
 			message.warning('请选择一条或多条数据')
-			return
+			deleteVisible.value = false
+			return false
+		} else {
+			deleteVisible.value = true
 		}
+	}
+	// 批量删除
+	const deleteBatchUser = () => {
 		const params = selectedRowKeys.value.map((m) => {
 			return {
 				id: m
diff --git a/snowy-admin-web/src/views/sys/user/index.vue b/snowy-admin-web/src/views/sys/user/index.vue
index 936130d5..a36c7933 100644
--- a/snowy-admin-web/src/views/sys/user/index.vue
+++ b/snowy-admin-web/src/views/sys/user/index.vue
@@ -19,12 +19,15 @@
 					<a-row :gutter="24">
 						<a-col :span="8">
 							<a-form-item name="searchKey" :label="$t('common.searchKey')">
-								<a-input v-model:value="searchFormState.searchKey" placeholder="请输入姓名或账号关键词"></a-input>
+								<a-input
+									v-model:value="searchFormState.searchKey"
+									:placeholder="$t('user.placeholderNameAndSearchKey')"
+								/>
 							</a-form-item>
 						</a-col>
 						<a-col :span="8">
 							<a-form-item name="userStatus" :label="$t('user.userStatus')">
-								<a-select v-model:value="searchFormState.userStatus" placeholder="请选择状态">
+								<a-select v-model:value="searchFormState.userStatus" :placeholder="$t('user.placeholderUserStatus')">
 									<a-select-option v-for="item in statusData" :key="item.dictValue" :value="item.dictValue">{{
 										item.name
 									}}</a-select-option>
@@ -67,7 +70,7 @@
 							</a-button>
 							<a-button @click="exportBatchUserVerify">
 								<template #icon><delete-outlined /></template>
-								批量导出
+								{{ $t('user.batchExportButton') }}
 							</a-button>
 							<a-popconfirm
 								title="删除此信息？"
@@ -95,7 +98,7 @@
 						<template v-if="column.dataIndex === 'action'">
 							<a @click="form.onOpen(record)">{{ $t('common.editButton') }}</a>
 							<a-divider type="vertical" />
-							<a-popconfirm title="确定要删除此用户吗？" placement="topRight" @confirm="removeUser(record)">
+							<a-popconfirm :title="$t('user.popconfirmDeleteUser')" placement="topRight" @confirm="removeUser(record)">
 								<a-button type="link" danger size="small">
 									{{ $t('common.removeButton') }}
 								</a-button>
@@ -109,21 +112,25 @@
 								<template #overlay>
 									<a-menu>
 										<a-menu-item>
-											<a-popconfirm title="确定重置此用户密码？" placement="topRight" @confirm="resetPassword(record)">
+											<a-popconfirm
+												:title="$t('user.popconfirmResatUserPwd')"
+												placement="topRight"
+												@confirm="resetPassword(record)"
+											>
 												<a>{{ $t('user.resetPassword') }}</a>
 											</a-popconfirm>
 										</a-menu-item>
 										<a-menu-item>
-											<a @click="selectRole(record)">授权角色</a>
+											<a @click="selectRole(record)">{{ $t('user.grantRole') }}</a>
 										</a-menu-item>
 										<a-menu-item>
-											<a @click="grantResourceFormRef.onOpen(record)">授权资源</a>
+											<a @click="grantResourceFormRef.onOpen(record)">{{ $t('user.grantResource') }}</a>
 										</a-menu-item>
 										<a-menu-item>
-											<a @click="grantPermissionFormRef.onOpen(record)">授权权限</a>
+											<a @click="grantPermissionFormRef.onOpen(record)">{{ $t('user.grantPermission') }}</a>
 										</a-menu-item>
 										<a-menu-item>
-											<a @click="exportUserInfo(record)">导出信息</a>
+											<a @click="exportUserInfo(record)">{{ $t('user.exportUserInfo') }}</a>
 										</a-menu-item>
 									</a-menu>
 								</template>