upp

src/pages/Role/RoleAdd/index.tsx

@@ -1,13 +1,10 @@
 import { getRoleInfoByIdAPI, roleSaveAPI } from "@/store/action/role";
-import {
-  AddRoleType,
-  PermissionsAPIType,
-  RoleTableType,
-} from "@/types/api/role";
+
 import { Button, Checkbox, Input, message, Modal, Popconfirm } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import "./index.css";
+import { AddRoleType, PermissionsAPIType, RoleTableType } from "@/types";
 const { TextArea } = Input;
 
 type Props = {

src/pages/Role/index.tsx

@@ -4,7 +4,7 @@ import {
   roleDisplayAPI,
   roleRemoveAPI,
 } from "@/store/action/role";
-import { RoleTableType } from "@/types/api/role";
+import { RoleTableType } from "@/types";
 import { Button, Input, message, Popconfirm, Switch, Table } from "antd";
 import React, {
   useCallback,

src/pages/User/UserAdd/index.tsx

@@ -1,5 +1,9 @@
-import { Button, Form, Input, Modal, Popconfirm, Select } from "antd";
+import { RootState } from "@/store";
+import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/user";
+import { SaveUserType } from "@/types";
+import { Button, Form, Input, message, Modal, Popconfirm, Select } from "antd";
 import React, { useCallback, useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
 import "./index.css";
 
 type Props = {
@@ -14,7 +18,9 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
   const FormBoxRef = useRef<any>({});
 
   const getInfoInAPIFu = useCallback(async (id: number) => {
-    console.log("是编辑，在这里发请求拿数据");
+    const res =await getUserInfoByIdAPI(id)
+    FormBoxRef.current.setFieldsValue(res.data)
+    console.log("是编辑，在这里发请求拿数据",res);
   }, []);
 
   // 没有通过校验
@@ -29,17 +35,32 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
     }
   }, [getInfoInAPIFu, id]);
 
+  // 从仓库获取角色下拉列表信息
+  const roleList = useSelector(
+    (state: RootState) => state.userReducer.roleList
+  );
+
   // 通过校验点击确定
-  const onFinish = useCallback(async (values: any) => {
-    // if (res.code === 0) {
-    //   message.success(id ? "编辑成功!" : "新增成功!");
-    //   if (id) upTableList();
-    //   else addTableList();
-
-    //   closePage();
-    // }
-    console.log("通过校验，点击确定");
-  }, []);
+  const onFinish = useCallback(
+    async (values: any) => {
+      const obj: SaveUserType = {
+        ...values,
+        id: id ? id : null,
+      };
+
+      const res: any = await userSaveAPI(obj);
+
+      if (res.code === 0) {
+        message.success(id ? "编辑成功!" : "新增成功!");
+        if (id) upTableList();
+        else addTableList();
+
+        closePage();
+      }
+      console.log("通过校验，点击确定");
+    },
+    [addTableList, closePage, id, upTableList]
+  );
 
   return (
     <Modal
@@ -66,7 +87,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             rules={[{ required: true, message: "请输入账号名!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
-            <Input maxLength={15} showCount placeholder="请输入内容" />
+            <Input disabled={id} maxLength={15} showCount placeholder="请输入内容" />
           </Form.Item>
 
           <Form.Item
@@ -83,13 +104,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             name="roleId"
             rules={[{ required: true, message: "请选择角色!" }]}
           >
-            <Select
-              placeholder="请选择"
-              options={[
-                { label: 0, value: "1xx" },
-                { label: 1, value: "2xx" },
-              ]}
-            />
+            <Select placeholder="请选择" options={roleList} />
           </Form.Item>
 
           <Form.Item
@@ -101,7 +116,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
             <Input maxLength={8} showCount placeholder="请输入内容" />
           </Form.Item>
 
-          <div className="passTit">* 默认密码 123456</div>
+          {id ? null : <div className="passTit">* 默认密码 123456</div>}
 
           {/* 确定和取消按钮 */}
           <br />

src/pages/User/index.tsx

@@ -1,6 +1,7 @@
 import { RootState } from "@/store";
 import {
   getUserListAPI,
+  getUserRoleAPI,
   userDisplayAPI,
   userPassResetAPI,
   userRemoveAPI,
@@ -44,6 +45,11 @@ function User() {
     searchKey: "",
   });
 
+  // 进来用户管理页面获取角色的下拉列表
+  useEffect(() => {
+    dispatch(getUserRoleAPI());
+  }, [dispatch]);
+
   // 封装发送请求的函数
 
   const getList = useCallback(async () => {
@@ -206,7 +212,7 @@ function User() {
       },
       {
         title: "用户角色",
-        dataIndex: "dictTexture",
+        dataIndex: "roleName",
       },
       {
         title: "真实姓名",
@@ -243,11 +249,7 @@ function User() {
                 cancelText="取消"
                 onConfirm={() => resetPassFu(item.id!)}
               >
-                <Button
-                  size="small"
-                  type="text"
-                  onClick={() => openEditPageFu(item.id!)}
-                >
+                <Button size="small" type="text">
                   重置密码
                 </Button>
               </Popconfirm>

src/store/action/role.ts

@@ -1,4 +1,4 @@
-import { AddRoleType } from "@/types/api/role";
+import { AddRoleType } from "@/types";
 import http from "@/utils/http";
 import { AppDispatch } from "..";
 /**

src/store/action/user.ts

@@ -1,4 +1,4 @@
-import { UserTableAPIType } from "@/types";
+import { RoleTableType, SaveUserType, UserTableAPIType } from "@/types";
 import http from "@/utils/http";
 import { AppDispatch } from "..";
 /**
@@ -17,6 +17,18 @@ export const getUserListAPI = (data: UserTableAPIType) => {
 };
 
 /**
+ * 获取用户管理-角色列表
+ */
+export const getUserRoleAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("sys/user/getRole");
+    const data: RoleTableType[] = res.data;
+    const newData = data.map((v) => ({ label: v.roleName, value: v.id }));
+    dispatch({ type: "user/getRoleList", payload: newData });
+  };
+};
+
+/**
  * 用户-是否显示
  */
 export const userDisplayAPI = (id: number, display: number) => {
@@ -35,4 +47,18 @@ export const userRemoveAPI = (id: number) => {
  */
 export const userPassResetAPI = (id: number) => {
   return http.get(`sys/user/resetPass/${id}`);
-};
+};
+
+/**
+ * 新增/修改用户信息
+ */
+export const userSaveAPI = (data: SaveUserType) => {
+  return http.post("sys/user/save", data);
+};
+
+/**
+ * 通过id获取角色详情
+ */
+export const getUserInfoByIdAPI = (id: number) => {
+  return http.get(`sys/user/detail/${id}`);
+};

src/store/reducer/login.ts

@@ -1,5 +1,4 @@
-import { DictListTypeObj } from "@/types";
-import { PermissionsAPIType } from "@/types/api/role";
+import { DictListTypeObj, PermissionsAPIType } from "@/types";
 
 // 初始化状态
 const initState = {

src/store/reducer/role.ts

@@ -1,4 +1,4 @@
-import { RoleTableType } from "@/types/api/role";
+import { RoleTableType } from "@/types";
 
 // 初始化状态
 const initState = {

src/store/reducer/user.ts

@@ -7,13 +7,26 @@ const initState = {
     list: [] as UserTableListType[],
     total: 0,
   },
+  // 角色列表数据
+  roleList: [] as {
+    label: string;
+    value: number;
+  }[],
 };
 
 // 定义 action 类型
-type UserActionType = {
-  type: "user/getList";
-  payload: { list: UserTableListType[]; total: number };
-};
+type UserActionType =
+  | {
+      type: "user/getList";
+      payload: { list: UserTableListType[]; total: number };
+    }
+  | {
+      type: "user/getRoleList";
+      payload: {
+        label: string;
+        value: number;
+      }[];
+    };
 
 // 频道 reducer
 export default function userReducer(state = initState, action: UserActionType) {
@@ -21,9 +34,11 @@ export default function userReducer(state = initState, action: UserActionType) {
     // 获取列表数据
     case "user/getList":
       return { ...state, tableInfo: action.payload };
+    // 获取角色列表数据
+    case "user/getRoleList":
+      return { ...state, roleList: action.payload };
+
     default:
       return state;
   }
 }
-
-

src/types/api/user.d.ts

@@ -25,3 +25,11 @@ export type UserTableListType={
   updateTime: string;
   userName: string;
 }
+
+export type SaveUserType ={
+  id:number|null
+  userName:string
+  nickName:string
+  roleId:number
+  realName:string
+}

src/types/index.d.ts

@@ -3,4 +3,5 @@ export * from './api/wall'
 export * from './api/goods'
 export * from './api/hot'
 export * from './api/user'
-export * from './api/log'
+export * from './api/log'
+export * from './api/role'