From 73843706dae6cc56aa9855b5691b1bcb5afba349 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Wed, 12 Feb 2025 14:25:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/Icon-partial-select.svg  |  1 +
 src/assets/Icon-partialselect.svg   |  1 -
 src/services/user/userManager.ts    |  4 +++
 src/views/userManage/UserManage.vue | 58 ++++++++++++++++++++++++++++++++-----
 4 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100755 src/assets/Icon-partial-select.svg
 delete mode 100755 src/assets/Icon-partialselect.svg

diff --git a/src/assets/Icon-partial-select.svg b/src/assets/Icon-partial-select.svg
new file mode 100755
index 0000000..a90cbbc
--- /dev/null
+++ b/src/assets/Icon-partial-select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53599"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53599)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g><rect x="5" y="14" width="20" height="3" rx="1.5" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/Icon-partialselect.svg b/src/assets/Icon-partialselect.svg
deleted file mode 100755
index a90cbbc..0000000
--- a/src/assets/Icon-partialselect.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53599"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53599)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g><rect x="5" y="14" width="20" height="3" rx="1.5" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/services/user/userManager.ts b/src/services/user/userManager.ts
index bc80667..192f996 100644
--- a/src/services/user/userManager.ts
+++ b/src/services/user/userManager.ts
@@ -23,3 +23,7 @@ export function getCurrentUser() {
 export function createUser(params: { username: string; nickname: string; password: string }) {
 	return httpRequest<BaseResponse>({ url: "/api/user/", method: "POST", params });
 }
+
+export function deleteUser(userId: number) {
+	return httpRequest<BaseResponse>({ url: `/api/user/${userId}`, method: "DELETE" });
+}
diff --git a/src/views/userManage/UserManage.vue b/src/views/userManage/UserManage.vue
index 6f5ba88..5c937ad 100644
--- a/src/views/userManage/UserManage.vue
+++ b/src/views/userManage/UserManage.vue
@@ -2,22 +2,38 @@
 	<div class="component-page">
 		<section class="flex items-center h-20 gap-3 pl-3">
 			<button class="btn-light px-3 py-1 text-xs" @click="onAddUser">新增用户</button>
-			<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">删除用户</button>
+			<button
+				:disabled="selectedIds.length === 0"
+				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
+				@click="onDeleteUser">
+				删除用户
+			</button>
 		</section>
 
 		<section>
 			<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
-				<div class="w-10 self-stretch flex justify-center items-center">
-					<img src="@/assets/Icon-unselect.svg" alt="icon" />
+				<div class="w-10 self-stretch flex justify-center items-center" @click="onSelectAll">
+					<img
+						:src="
+							selectedIds.length > 0
+								? selectedIds.length === userList.length
+									? icon_select
+									: icon_partial
+								: icon_unselect
+						"
+						alt="icon" />
 				</div>
 				<p class="w-40">用户名</p>
 				<p class="w-40">昵称</p>
 				<p>类型</p>
 			</header>
 
-			<div v-for="user in userList" class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
+			<div
+				v-for="user in userList"
+				class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]"
+				@click="onItemSelect(user)">
 				<div class="w-10 self-stretch flex justify-center items-center">
-					<img :src="isSelect ? icon_select : icon_unselect" alt="" />
+					<img :src="selectedIds.includes(user.id) ? icon_select : icon_unselect" alt="" />
 				</div>
 				<p class="w-40">{{ user.username }}</p>
 				<p class="w-40">{{ user.nickname }}</p>
@@ -36,16 +52,17 @@
 <script lang="ts" setup>
 import icon_unselect from "@/assets/Icon-unselect.svg";
 import icon_select from "@/assets/Icon-select.svg";
+import icon_partial from "@/assets/Icon-partial-select.svg";
+
 import { showToast } from "vant";
 import { onMounted, ref } from "vue";
-import { createUser, getCurrentUser, getUserList, type User } from "@/services/user/userManager";
+import { createUser, deleteUser, getUserList, type User } from "@/services/user/userManager";
 import AddUser from "./components/AddUser.vue";
 
-const isSelect = ref<boolean>(false);
-const opDisable = ref<boolean>(true);
 const showEditDialog = ref<boolean>(false);
 
 const userList = ref<User[]>([]);
+const selectedIds = ref<number[]>([]);
 
 function getUsers() {
 	getUserList({ pageNum: 1, pageSize: 9999 }).then(res => {
@@ -65,6 +82,20 @@ function onAddUser() {
 	showEditDialog.value = true;
 }
 
+function onItemSelect(user: User) {
+	if (selectedIds.value.includes(user.id)) {
+		selectedIds.value = selectedIds.value.filter(id => id !== user.id);
+	} else {
+		selectedIds.value = [...selectedIds.value, user.id];
+	}
+}
+function onSelectAll() {
+	if (selectedIds.value.length === userList.value.length) {
+		selectedIds.value = [];
+	} else {
+		selectedIds.value = userList.value.map(user => user.id);
+	}
+}
 function addUser(user: { username: string; nickname: string; password: string }) {
 	createUser(user).then(res => {
 		if (res.success) {
@@ -75,4 +106,15 @@ function addUser(user: { username: string; nickname: string; password: string })
 		}
 	});
 }
+function onDeleteUser() {
+	if (selectedIds.value.length === 0) return;
+	deleteUser(selectedIds.value[0]).then(res => {
+		if (res.success) {
+            selectedIds.value = []
+			getUsers();
+		} else {
+			showToast(res.msg);
+		}
+	});
+}
 </script>