用户管理支持选择

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" });
+}

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>