添加用户

src/services/user/userManager.ts

@@ -19,3 +19,7 @@ export function getUserList(params: { pageNum: number; pageSize: number }) {
 export function getCurrentUser() {
 	return httpRequest<BaseResponse<User>>({ url: "/api/user/current" });
 }
+
+export function createUser(params: { username: string; nickname: string; password: string }) {
+	return httpRequest<BaseResponse>({ url: "/api/user/", method: "POST", params });
+}

src/views/userManage/UserManage.vue

@@ -1,7 +1,7 @@
 <template>
 	<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="addUser">新增用户</button>
+			<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>
 		</section>
 
@@ -10,21 +10,25 @@
 				<div class="w-10 self-stretch flex justify-center items-center">
 					<img src="@/assets/Icon-unselect.svg" alt="icon" />
 				</div>
-				<p class="w-16">用户名称</p>
-				<p>权限</p>
+				<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 class="w-10 self-stretch flex justify-center items-center">
 					<img :src="isSelect ? icon_select : icon_unselect" alt="" />
 				</div>
-				<p class="w-16">{{ user.nickname }}</p>
-				<p class="flex-auto">{{ user.role === 1 ? "管理员" : "用户" }}</p>
+				<p class="w-40">{{ user.username }}</p>
+				<p class="w-40">{{ user.nickname }}</p>
+				<p class="flex-auto">{{ user.role === 1 ? "管理员" : "普通用户" }}</p>
 			</div>
 		</section>
 
 		<van-overlay :show="showEditDialog">
-			<div class="flex justify-center items-center h-full"></div>
+			<div class="flex justify-center items-center h-full">
+				<AddUser @confirm="addUser" @cancel="showEditDialog = false" />
+			</div>
 		</van-overlay>
 	</div>
 </template>
@@ -34,7 +38,8 @@ import icon_unselect from "@/assets/Icon-unselect.svg";
 import icon_select from "@/assets/Icon-select.svg";
 import { showToast } from "vant";
 import { onMounted, ref } from "vue";
-import { getCurrentUser, getUserList, type User } from "@/services/user/userManager";
+import { createUser, getCurrentUser, getUserList, type User } from "@/services/user/userManager";
+import AddUser from "./components/AddUser.vue";
 
 const isSelect = ref<boolean>(false);
 const opDisable = ref<boolean>(true);
@@ -42,7 +47,7 @@ const showEditDialog = ref<boolean>(false);
 
 const userList = ref<User[]>([]);
 
-onMounted(() => {
+function getUsers() {
 	getUserList({ pageNum: 1, pageSize: 9999 }).then(res => {
 		if (res.success) {
 			userList.value = res.data.list;
@@ -50,14 +55,24 @@ onMounted(() => {
 			showToast(res.msg);
 		}
 	});
+}
+
+onMounted(() => {
+	getUsers();
 });
 
-function addUser() {
-    // TEST
-    getCurrentUser().then(res => {
-        if (res.success) {
-            console.log("current user:", res.data)
-        }
-    })
+function onAddUser() {
+	showEditDialog.value = true;
+}
+
+function addUser(user: { username: string; nickname: string; password: string }) {
+	createUser(user).then(res => {
+		if (res.success) {
+			showEditDialog.value = false;
+			getUsers();
+		} else {
+			showToast(res.msg);
+		}
+	});
 }
 </script>

src/views/userManage/components/AddUser.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="bg-white text-xl text-text px-5 py-7 rounded">
+		<h1 class="font-medium">新增用户</h1>
+		<section>
+			<div class="grid grid-cols-[5rem_1fr] gap-x-8 gap-y-4 min-w-[30rem] mt-4 mb-7 px-4">
+				<span class="text-right">用户名</span>
+				<input type="text" class="border border-[#eee] rounded-sm px-2" v-model="user.username" />
+				<span class="text-right">昵称</span>
+				<input type="text" class="border border-[#eee] rounded-sm px-2" v-model.trim="user.nickname" />
+				<span class="text-right">密码</span>
+				<input type="text" class="border border-[#eee] rounded-sm px-2" v-model.trim="user.password" />
+			</div>
+		</section>
+		<footer class="flex justify-center gap-x-6">
+			<button class="btn-dark px-6 py-1" @click="onConfirm">确定</button>
+			<button class="btn-light px-6 py-1" @click="$emit('cancel')">取消</button>
+		</footer>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { showToast } from "vant";
+import { reactive, ref, watch } from "vue";
+
+interface UserDto {
+	username: string;
+	nickname: string;
+	password: string;
+}
+
+const emit = defineEmits<{
+	(e: "confirm", user: UserDto): void;
+	(e: "cancel"): void;
+}>();
+
+const user = reactive<UserDto>({ username: "", nickname: "", password: "" });
+
+watch(
+	() => user.username,
+	newVal => {
+		const reg = /^\S+$/;
+		if (!reg.test(newVal)) {
+			user.username = user.username.trim();
+		}
+	}
+);
+function onConfirm() {
+    if (user.username === "") {
+        showToast("用户名不能为空")
+        return
+    }
+    if (user.nickname === "") {
+        showToast("昵称不能为空")
+        return
+    }
+    if (user.password === "") {
+        showToast("密码不能为空")
+        return
+    }
+	emit("confirm", user);
+}
+</script>