feat(前端):新建分组

web-fe/src/pages/userList/index.tsx

@@ -3,9 +3,9 @@ import { Button, Col, Input, Pagination, Row, Table, Tree } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import type { DataNode } from 'antd/es/tree';
 import React, { useEffect, useState } from 'react';
+import CreatGroup from './mod/group';
 import styles from './index.less';
 
-// Define types for our data
 interface User {
   id: string;
   username: string;
@@ -24,7 +24,6 @@ const UserListPage: React.FC = () => {
   // State for organization tree
   const [orgTreeData, setOrgTreeData] = useState<DataNode[]>([]);
   const [selectedOrg, setSelectedOrg] = useState<string>('');
-  const [treeSelect, setTreeSelect] = useState<React.Key[]>([]);
 
   // State for user list
   const [users, setUsers] = useState<User[]>([]);
@@ -37,6 +36,9 @@ const UserListPage: React.FC = () => {
   const [pageSize, setPageSize] = useState<number>(10);
   const [totalUsers, setTotalUsers] = useState<number>(0);
 
+  // 添加分组
+   const [visible, setVisible] = useState<boolean>(false);
+
   // Mock data for organization tree
   useEffect(() => {
     // In a real application, this would come from an API
@@ -198,6 +200,7 @@ const UserListPage: React.FC = () => {
                   type="text"
                   style={{ marginRight: '8px', fontSize: '16px' }}
                   icon={<PlusOutlined />}
+                  onClick={() => setVisible(true)}  
                 />
                 <Button
                   type="text"
@@ -213,17 +216,13 @@ const UserListPage: React.FC = () => {
             </div>
             <div className={styles.tree_box}>
               <Tree
-                showIcon
+                showIcon={true}
                 treeData={orgTreeData}
                 defaultExpandAll
                 onSelect={onOrgSelect}
                 selectedKeys={[selectedOrg]}
-                switcherIcon={<TeamOutlined style={{fontSize:"16px"}} />}
-              >
-                {/* {orgTreeData.map((data) => (
-                  <TreeNode />
-                ))} */}
-              </Tree>
+                icon={<TeamOutlined style={{fontSize:"15px"}} />}
+              />
             </div>
           </div>
         </Col>
@@ -292,6 +291,7 @@ const UserListPage: React.FC = () => {
           </div>
         </Col>
       </Row>
+      <CreatGroup visible={visible} onCancel={()=>{setVisible(false)}} onOk={()=>{}} orgTreeData={[]}/>
     </div>
   );
 };

web-fe/src/pages/userList/mod/group/index.tsx

@@ -0,0 +1,80 @@
+// d:\VDI\vdi\web-fe\src\pages\userList\mod\group\index.tsx
+import React from 'react';
+import { Modal, Form, Input, Select } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+
+interface CreatGroupProps {
+  visible: boolean;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  orgTreeData: DataNode[];
+}
+
+const CreatGroup: React.FC<CreatGroupProps> = (props) => {
+  const { visible, onCancel, onOk, orgTreeData } = props;
+  const [form] = Form.useForm();
+
+  // Flatten tree data for parent group selection
+  const flattenTreeData = (data: DataNode[], result: { value: string; label: string }[] = []) => {
+    data.forEach(item => {
+      result.push({ value: item.key as string, label: item.title as string });
+      if (item.children) {
+        flattenTreeData(item.children, result);
+      }
+    });
+    return result;
+  };
+
+  const parentGroupOptions = flattenTreeData(orgTreeData);
+
+  const handleOk = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  const handleFinish = (values: any) => {
+    onOk(values);
+    form.resetFields();
+  };
+
+  return (
+    <Modal
+      title="添加用户分组"
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleFinish}
+      >
+        <Form.Item
+          name="groupName"
+          label="分组名"
+          rules={[{ required: true, message: '请输入分组名!' }]}
+        >
+          <Input placeholder="请输入分组名" />
+        </Form.Item>
+        
+        <Form.Item
+          name="parentGroup"
+          label="父分组名"
+        >
+          <Select
+            placeholder="请选择父分组"
+            options={parentGroupOptions}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CreatGroup;