添加修改用户功能

src/pages/System/User/index.tsx

@@ -1,19 +1,24 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
-import { message, Modal, Input, Form, PageHeader, Button, Spin, Tree, Checkbox, Row, Col, Upload } from 'antd';
+import { message, Modal, Input, Form, PageHeader, Button, Spin, Tree, Checkbox, Row, Col, Upload, TreeSelect } from 'antd';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import tableProps from '@/utils/tableProps';
 import { getPage, getDataById, allocationIF, assignsRoles, updateRole } from './service';
 import { fetchAllDepartment } from '../Department/service';
 import { getDicData } from '@/utils/session';
 import { fetchIamUsers, syncIamUser } from './service';
-import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
+import { UploadOutlined, DownloadOutlined, EditOutlined } from '@ant-design/icons';
 const { Search } = Input;
+
 const entrust: React.FC<{}> = () => {
   const [roleModalForm] = Form.useForm();
+  const [editModalForm] = Form.useForm();
   const [open, setOpen] = useState<boolean>(false);
+  const [editOpen, setEditOpen] = useState<boolean>(false);
   const actionRef = useRef<ActionType>();
   const [spin, spinSet] = useState<boolean>(false);
   const [roles, setRoles] = useState<any>([]);
+  const [departments, setDepartments] = useState<any>([]);
+  const [departmentTreeData, setDepartmentTreeData] = useState<any>([]);
   //查询分页数据
   const [pageData, pageDataSet] = useState<any>({
     pageNo: 1,
@@ -29,6 +34,8 @@ const entrust: React.FC<{}> = () => {
   const [iamTotal, setIamTotal] = useState(0);
   const [iamPage, setIamPage] = useState({ pageNo: 1, pageSize: 10 });
   const [iamSearch, setIamSearch] = useState('');
+  const [currentUser, setCurrentUser] = useState<any>(null);
+
   useEffect(() => {
     getDepartmentList();
   }, []);
@@ -42,15 +49,58 @@ const entrust: React.FC<{}> = () => {
     { title: '部门', dataIndex: 'orgName', hideInSearch: true },
     { title: '邮箱', dataIndex: 'email' },
     {
-      title: '操作', width: '9%',
+      title: '操作', width: '12%',
       valueType: 'option',
       render: (_, record) => [
-        <Button type='text' onClick={() => { chooseRole(record) }}>分配角色</Button>
-        // <Button type='text' onClick={() => { handleUpdate(record) }}>修改</Button>,
-        // <Button type='text' onClick={() => { handleDelete(record.roleId) }}>删除</Button>
+        <Button type='text' onClick={() => { chooseRole(record) }}>分配角色</Button>,
+        <Button type='text' icon={<EditOutlined />} onClick={() => { handleEdit(record) }}>修改</Button>
       ]
     },
   ];
+
+  // 处理修改用户
+  const handleEdit = (record: any) => {
+    setCurrentUser(record);
+    editModalForm.resetFields();
+    editModalForm.setFieldsValue({
+      userId: record.userId,
+      name: record.name,
+      employeeNumber: record.employeeNumber,
+      email: record.email,
+      orgId: record.orgId,
+      orgName: record.orgName
+    });
+    setEditOpen(true);
+  };
+
+  // 关闭修改Modal
+  const closeEditModal = () => {
+    editModalForm.resetFields();
+    setEditOpen(false);
+    setCurrentUser(null);
+  };
+
+  // 提交修改
+  const onEditSubmit = async () => {
+    try {
+      const values = await editModalForm.validateFields();
+      const { success } = await updateRole(values);
+      if (success) {
+        message.success('修改成功！');
+        closeEditModal();
+        actionRef.current?.reload();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  // 部门选择变化
+  const handleDepartmentChange = (value: string, labelList: any) => {
+    const selectedLabel = labelList[labelList.length - 1];
+    editModalForm.setFieldsValue({ orgName: selectedLabel });
+  };
+
   //分配角色查询数据
   const chooseRole = (record: any) => {
     roleModalForm.resetFields();
@@ -89,6 +139,68 @@ const entrust: React.FC<{}> = () => {
       console.error(error);
     }
   };
+
+  // 修改用户Modal
+  const editUserModal = (
+    <Modal
+      title="修改用户信息"
+      visible={editOpen}
+      width="50%"
+      centered
+      destroyOnClose={true}
+      onOk={onEditSubmit}
+      onCancel={closeEditModal}
+    >
+      <Form form={editModalForm} {...layout}>
+        <Form.Item label="用户ID" name="userId" hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item 
+          label="用户名" 
+          name="name"
+          rules={[{ required: true, message: '请输入用户名' }]}
+        >
+          <Input placeholder="请输入用户名" />
+        </Form.Item>
+        <Form.Item 
+          label="用户账号" 
+          name="employeeNumber"
+          rules={[{ required: true, message: '请输入用户账号' }]}
+        >
+          <Input placeholder="请输入用户账号" />
+        </Form.Item>
+        <Form.Item 
+          label="邮箱" 
+          name="email"
+          rules={[
+            { type: 'email', message: '请输入正确的邮箱格式' },
+            { required: true, message: '请输入邮箱' }
+          ]}
+        >
+          <Input placeholder="请输入邮箱" />
+        </Form.Item>
+        <Form.Item 
+          label="部门" 
+          name="orgId"
+          rules={[{ required: true, message: '请选择部门' }]}
+        >
+          <TreeSelect
+            placeholder="请选择部门"
+            treeData={departmentTreeData}
+            onChange={handleDepartmentChange}
+            showSearch
+            treeNodeFilterProp="title"
+            allowClear
+            treeDefaultExpandAll
+          />
+        </Form.Item>
+        <Form.Item label="部门名称" name="orgName" hidden>
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+
   const setRoleModal = (
     <Modal
       title={"分配角色"}
@@ -168,6 +280,8 @@ const entrust: React.FC<{}> = () => {
       };
       generateList(data);
       treeDataListSet(dataList);
+      setDepartments(dataList);
+      setDepartmentTreeData(data);
     } catch (e) { }
   };
 
@@ -354,6 +468,7 @@ const entrust: React.FC<{}> = () => {
               onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }); setOrgId(''); }}
             />
             {setRoleModal}
+            {editUserModal}
             {/* IAM用户同步Modal */}
             <Modal
               title="同步用户信息"