feat: 用户管理联调

src/api/user.ts

@@ -55,7 +55,7 @@ export type UserInfo = {
 export type UserInfoResult = {
   success: boolean;
   data?: UserInfo;
-  code?: number;
+  code?: number | string;
 };
 
 type ResultTable = {
@@ -96,3 +96,33 @@ export const getMineLogs = (data?: object) => {
 export const addUser = (data?: object) => {
   return http.request<UserInfoResult>("post", "/api/user/add-user", { data });
 };
+
+/** 系统管理-用户管理-修改用户 */
+export const updateUser = (data?: object) => {
+  return http.request<UserInfoResult>("post", "/api/user/modify-user", {
+    data
+  });
+};
+
+/** 系统管理-用户管理-删除用户 */
+export const deleteUser = (data?: object) => {
+  return http.request<UserInfoResult>("post", "/api/user/delete-user", {
+    data
+  });
+};
+/** 系统管理-用户管理-重置密码 */
+export const resetPassword = (data?: object) => {
+  return http.request<UserInfoResult>("post", "/api/user/reset-password", {
+    data
+  });
+};
+/** 系统管理-用户管理-获取用户列表 */
+export const getUserList = (data?: object) => {
+  return http.request<ResultTable>("get", "/api/user/user-list", { data });
+};
+/** 系统管理-用户管理-获取用户详情 */
+export const getUserDetail = (data?: object) => {
+  return http.request<UserInfoResult>("get", "/api/user/user-detail", {
+    data
+  });
+};

src/views/systems/user/form/index.vue

@@ -13,11 +13,12 @@ const props = withDefaults(defineProps<FormProps>(), {
     nickname: "",
     username: "",
     password: "",
-    phone: "",
+    mobile: "",
     email: "",
-    sex: "",
+    gender: "",
     status: 1,
-    remark: ""
+    remark: "",
+    deptId: 0
   })
 });
 
@@ -84,9 +85,9 @@ defineExpose({ getRef });
         </el-form-item>
       </re-col>
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="手机号" prop="phone">
+        <el-form-item label="手机号" prop="mobile">
           <el-input
-            v-model="newFormInline.phone"
+            v-model="newFormInline.mobile"
             clearable
             placeholder="请输入手机号"
           />
@@ -105,7 +106,7 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="用户性别">
           <el-select
-            v-model="newFormInline.sex"
+            v-model="newFormInline.gender"
             placeholder="请选择用户性别"
             class="w-full"
             clearable

src/views/systems/user/index.vue

@@ -76,9 +76,9 @@ const {
             class="w-[180px]!"
           />
         </el-form-item>
-        <el-form-item label="手机号码：" prop="phone">
+        <el-form-item label="手机号码：" prop="mobile">
           <el-input
-            v-model="form.phone"
+            v-model="form.mobile"
             placeholder="请输入手机号码"
             clearable
             class="w-[180px]!"

src/views/systems/user/utils/hook.tsx

@@ -20,10 +20,11 @@ import {
 import {
   getRoleIds,
   getDeptList,
-  getUserList,
-  getAllRoleList
+  getUserList
+  // getAllRoleList
 } from "@/api/system";
-import { addUser } from "@/api/user";
+import { addUser, updateUser } from "@/api/user";
+import { getRoleList } from "@/api/role";
 import {
   ElForm,
   ElInput,
@@ -41,14 +42,15 @@ import {
   reactive,
   onMounted
 } from "vue";
+// import { id } from "element-plus/es/locale/index.mjs";
 
 export function useUser(tableRef: Ref, treeRef: Ref) {
   const form = reactive({
     // 左侧部门树的id
-    deptId: "",
-    username: "",
-    phone: "",
-    status: "",
+    // deptId: "",
+    // username: "",
+    // mobile: "",
+    // status: "",
     pageNum: 1,
     pageSize: 10
   });
@@ -129,7 +131,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       label: "手机号码",
       prop: "mobile",
       minWidth: 90
-      // formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
+      // formatter: ({ mobile }) => hideTextAtIndex(mobile, { start: 3, end: 6 })
     },
     {
       label: "状态",
@@ -299,17 +301,17 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     onSearch();
   }
 
-  function formatHigherDeptOptions(treeList) {
-    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
-    if (!treeList || !treeList.length) return;
-    const newTreeList = [];
-    for (let i = 0; i < treeList.length; i++) {
-      treeList[i].disabled = treeList[i].status === 0 ? true : false;
-      formatHigherDeptOptions(treeList[i].children);
-      newTreeList.push(treeList[i]);
-    }
-    return newTreeList;
-  }
+  // function formatHigherDeptOptions(treeList) {
+  //   // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+  //   if (!treeList || !treeList.length) return;
+  //   const newTreeList = [];
+  //   for (let i = 0; i < treeList.length; i++) {
+  //     treeList[i].disabled = treeList[i].status === 0 ? true : false;
+  //     formatHigherDeptOptions(treeList[i].children);
+  //     newTreeList.push(treeList[i]);
+  //   }
+  //   return newTreeList;
+  // }
 
   function openDialog(title = "新增", row?: FormItemProps) {
     addDialog({
@@ -317,16 +319,19 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       props: {
         formInline: {
           title,
-          higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
-          parentId: row?.dept.id ?? 0,
+          // higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
+          deptId: row?.deptId ?? 0,
           nickname: row?.nickname ?? "",
           username: row?.username ?? "",
           password: row?.password ?? "",
-          phone: row?.phone ?? "",
+          mobile: row?.mobile ?? "",
           email: row?.email ?? "",
           gender: row?.gender ?? "",
           status: row?.status ?? 1,
-          remark: row?.remark ?? ""
+          remark: row?.remark ?? "",
+          name: row?.username ?? "",
+          id: row?.id ?? 0,
+          avatar: row?.avatar ?? ""
         }
       },
       width: "46%",
@@ -349,12 +354,32 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
           if (valid) {
             console.log("curData", curData);
             // 表单规则校验通过
+            const {
+              avatar,
+              deptId,
+              email,
+              gender,
+              mobile,
+              name,
+              nickname,
+              username
+            } = curData;
+            const params = {
+              avatar,
+              deptId,
+              email,
+              gender,
+              mobile,
+              name,
+              nickname,
+              username,
+              id: title === "新增" ? null : curData.id
+            };
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
               // 新增用户
-              curData.name = curData.username;
-              curData.deptId = curData.dept || "";
-              addUser(curData).then(res => {
+
+              addUser(params).then(res => {
                 if (res.code === 200) {
                   message("新增用户成功", { type: "success" });
                   chores();
@@ -362,10 +387,22 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
                   message("新增用户失败", { type: "error" });
                 }
               });
-              chores();
+              // chores();
             } else {
               // 实际开发先调用修改接口，再进行下面操作
-              chores();
+              // 修改用户
+              // curData.name = curData.username;
+              console.log("curData", curData);
+              params.id = curData.id;
+              updateUser(params).then(res => {
+                if (res.code === "0") {
+                  message("修改用户成功", { type: "success" });
+                  chores();
+                } else {
+                  message("修改用户失败", { type: "error" });
+                }
+              });
+              // chores();
             }
           }
         });
@@ -479,8 +516,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
 
   /** 分配角色 */
   async function handleRole(row) {
-    // 选中的角色列表
-    const ids = (await getRoleIds({ userId: row.id })).data ?? [];
+    // TODO 选中的角色列表
+    const ids = (await getRoleIds({ id: row.id })).data ?? [];
     addDialog({
       title: `分配 ${row.username} 用户的角色`,
       props: {
@@ -517,7 +554,9 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     treeLoading.value = false;
 
     // 角色列表
-    roleOptions.value = (await getAllRoleList()).data;
+    roleOptions.value = (
+      await getRoleList({ pageNum: 1, pageSize: 100 })
+    ).data.records;
   });
 
   return {

src/views/systems/user/utils/types.ts

@@ -18,6 +18,7 @@ interface FormItemProps {
   remark: string;
   name?: string;
   deptId?: number;
+  avatar?: string;
 }
 interface FormProps {
   formInline: FormItemProps;

vite.config.ts

@@ -28,10 +28,13 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       proxy: {
         "/api": {
           // 这里填写后端地址
-          // 熊熊哥地址
-          // target: "http://192.168.1.194:5001",
+
+          // 旭哥地址
+          // target: "http://192.168.1.180:5001",
           // 服务器地址
-          target: "http://192.168.1.248:5001",
+          // target: "http://192.168.1.248:5001",
+          // 熊熊哥地址
+          target: "http://192.168.1.194:5001",
           changeOrigin: true,
           rewrite: path => path.replace(/^\/api/, "")
         }