feat 修改逻辑

src/pages/Settings/Menu.tsx

@@ -1,4 +1,13 @@
-import {ActionType, PageContainer, ProForm, ProFormText,ProFormRadio,ProFormDigit, ProTable,} from '@ant-design/pro-components';
+import {
+  ActionType,
+  PageContainer,
+  ProForm,
+  ProFormText,
+  ProFormRadio,
+  ProFormDigit,
+  ProFormTreeSelect,
+  ProTable,
+} from '@ant-design/pro-components';
 import {Button, Card, Modal, TreeSelect} from 'antd';
 import React, {useEffect, useRef, useState} from 'react';
 import {AddOutline} from 'antd-mobile-icons';
@@ -51,9 +60,8 @@ class Service {
   }
 }
 
-const Edit: React.FC<{ bundle: EditBundle; treeData: any[]; onSuccess?: () => void }> = (props) => {
-  const {bundle, treeData} = props;
-  console.log("treeData" + treeData)
+const Edit: React.FC<{ bundle: EditBundle;  onSuccess?: () => void }> = (props) => {
+  let {bundle} = props;
 
   const [form] = ProForm.useForm<MenuVO>();
   const [loading, setLoading] = React.useState(false);
@@ -117,29 +125,46 @@ const Edit: React.FC<{ bundle: EditBundle; treeData: any[]; onSuccess?: () => vo
         }}
       >
 
-        <ProFormRadio.Group name="type" label="类型" value='2' options={[{label: '目录', value: '1',}, {label: '菜单', value: '2'}, {label: '按钮', value: '3'}]}/>
-        <ProFormRadio.Group name="status" label="状态" value='1' options={[{label: '正常', value: '1',}, {label: '隐藏', value: '2'}]}/>
-        <ProFormRadio.Group name="target" label="目标" value='1' options={[{label: '页签', value: '1',}, {label: '新窗口', value: '2'}]}/>
-        <ProFormRadio.Group name="hasRefresh" label="是否刷新" value='1' options={[{label: '不刷新', value: '0',}, {label: '刷新', value: '1'}]}/>
+        <ProFormRadio.Group name='type' label='类型' value='2'
+                            options={[
+                              {label: '目录', value: '1',},
+                              {label: '菜单', value: '2'},
+                              {label: '按钮', value: '3'}]}></ProFormRadio.Group>
+        <ProFormRadio.Group name='status' label='状态' value='1'
+                            options={[{label: '正常', value: '1',}, {label: '隐藏', value: '2'}]}/>
+        <ProFormRadio.Group name='target' label='目标' value='1'
+                            options={[{label: '页签', value: '1',}, {label: '新窗口', value: '2'}]}/>
+        <ProFormRadio.Group name='hasRefresh' label='是否刷新' value='1'
+                            options={[{label: '不刷新', value: '0',}, {label: '刷新', value: '1'}]}/>
         <ProFormText name='name' label={'菜单名称'} placeholder={'请输入菜单名称'}
                      rules={[{required: true, message: '请输入菜单名称',}, {
                        min: 3,
                        max: 30,
                        message: '菜单名称长度必须在3-30之间',
                      },]}></ProFormText>
-        <ProForm.Item label='父菜单' name='parentId'>
-          <TreeSelect
-            showSearch
-            style={{width: '100%'}}
-            value={value}
-            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
-            placeholder="请选择父菜单ID"
-            allowClear
-            treeDefaultExpandAll
-            onChange={onChange}
-            treeData={treeData}
-          />
-        </ProForm.Item>
+
+        <ProFormTreeSelect
+          label='父菜单' name='parentId'
+          style={{width: '100%'}}
+          placeholder="请选择父菜单ID"
+          allowClear
+          request={async () => {
+            const transformToTreeData = (data: MenuVO[]): any[] =>
+              data.map((item) => ({
+                title: item.name,
+                value: item.id,
+                key: item.id,
+                children: item.children ? transformToTreeData(item.children) : [],
+              }));
+            const res = await Service.listTree({});
+            if (res.success) {
+              return transformToTreeData(res.data);
+            }
+            return Promise.resolve({});
+          }}
+        >
+        </ProFormTreeSelect>
+
         <ProFormText name='icon' label={'图标'} placeholder={'请输入图标'}></ProFormText>
 
         <ProFormDigit name='sortNum' label={'显示顺序'} placeholder={'请输入显示顺序'}></ProFormDigit>
@@ -150,34 +175,15 @@ const Edit: React.FC<{ bundle: EditBundle; treeData: any[]; onSuccess?: () => vo
   );
 };
 
-const transformToTreeData = (data: MenuVO[]): any[] =>
-  data.map((item) => ({
-    title: item.name,
-    value: item.id,
-    key: item.id,
-    children: item.children ? transformToTreeData(item.children) : [],
-  }));
+
 const MenuExp: React.FC = () => {
   const bundle = useEdit();
   const ref = useRef<ActionType>();
 
-  const [treeData, setTreeData] = useState<any[]>([]);
-
-  const loadData = async () => {
-    const res = await Service.listTree({});
-    if (res.success) {
-      setTreeData(transformToTreeData(res.data));
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
   return (
     <>
       <PageContainer content={''}>
-        {bundle.open && <Edit bundle={bundle} treeData={treeData} onSuccess={() => ref.current?.reload()}></Edit>}
+        {bundle.open && <Edit bundle={bundle} onSuccess={() => ref.current?.reload()}></Edit>}
         <Card>
           <ProTable<MenuVO>
             rowKey={'id'}
@@ -202,10 +208,7 @@ const MenuExp: React.FC = () => {
               {
                 title: '类型',
                 dataIndex: 'type',
-              },
-              {
-                title: '父菜单ID',
-                dataIndex: 'parentId',
+                render: (text) => (text === 1 ? '目录' : text === 2 ? '菜单' : '按钮'),
               },
               {
                 title: '显示顺序',
@@ -218,14 +221,17 @@ const MenuExp: React.FC = () => {
               {
                 title: '目标',
                 dataIndex: 'target',
+                render: (text) => (text === 1 ? '页签' : '新窗口'),
               },
               {
                 title: '状态',
                 dataIndex: 'status',
+                render: (text) => (text === 1 ? '正常' : '隐藏'),
               },
               {
                 title: '是否刷新',
                 dataIndex: 'hasRefresh',
+                render: (text) => (text === 1 ? '刷新' : '不刷新'),
               },
               {
                 title: '权限标识',

src/pages/Settings/Role.tsx

@@ -2,14 +2,14 @@ import {
   ActionType,
   PageContainer,
   ProForm,
-  ProFormText,
+  ProFormText, ProFormTreeSelect,
   ProTable,
 } from '@ant-design/pro-components';
-import { Button, Card, Modal } from 'antd';
-import React, { useRef } from 'react';
-import { AddOutline } from 'antd-mobile-icons';
-import { EditBundle, useEdit } from '@/core/hooks/useEdit';
-import { invoke } from '@/core/network';
+import {Button, Card, Modal, TreeSelect} from 'antd';
+import React, {useEffect, useRef, useState} from 'react';
+import {AddOutline} from 'antd-mobile-icons';
+import {EditBundle, useEdit} from '@/core/hooks/useEdit';
+import {invoke} from '@/core/network';
 
 type Role = {
   id?: number;
@@ -25,6 +25,23 @@ type RoleList = {
   current: number;
 };
 
+type MenuVO = {
+  id?: number;
+  name: string;
+  sortNum: number;
+  status: number;
+  type: number;
+  parentId?: number;
+  url?: string;
+  target?: string;
+  hasRefresh?: number;
+  perms?: string;
+  icon?: string;
+  children?: MenuVO[];
+};
+
+type MenuList = MenuVO[];
+
 class Service {
   public static async list(current: number, size: number) {
     return invoke<RoleList>('/apis/admin/role/page', {
@@ -54,10 +71,17 @@ class Service {
       method: 'GET',
     });
   }
+
+  public static async listTree(query: { keyword?: string; status?: number }) {
+    return invoke<MenuList>('/apis/admin/menu/tree/list', {
+      method: 'POST',
+      data: query,
+    });
+  }
 }
 
 const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) => {
-  const { bundle } = props;
+  const {bundle} = props;
   const [form] = ProForm.useForm<Role>();
   const [loading, setLoading] = React.useState(false);
 
@@ -95,7 +119,7 @@ const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) =
       <ProForm
         className={'mt-5'}
         form={form}
-        labelCol={{ span: 4 }}
+        labelCol={{span: 4}}
         layout={'horizontal'}
         submitter={false}
         request={async () => {
@@ -125,6 +149,32 @@ const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) =
           ]}
           placeholder={'请输入角色名称'}
         ></ProFormText>
+
+        <ProFormTreeSelect
+          fieldProps={{
+            'multiple': 'true',
+          }}
+          label='父菜单' name='menuIds'
+          style={{width: '100%'}}
+          placeholder="请选择菜单"
+          allowClear
+          request={async () => {
+            const transformToTreeData = (data: MenuVO[]): any[] =>
+              data.map((item) => ({
+                title: item.name,
+                value: item.id,
+                key: item.id,
+                children: item.children ? transformToTreeData(item.children) : [],
+              }));
+            const res = await Service.listTree({});
+            if (res.success) {
+              return transformToTreeData(res.data);
+            }
+            return Promise.resolve({});
+          }}
+        >
+        </ProFormTreeSelect>
+
       </ProForm>
     </Modal>
   );
@@ -133,7 +183,6 @@ const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) =
 const RoleExp: React.FC = () => {
   const bundle = useEdit();
   const ref = useRef<ActionType>();
-
   return (
     <PageContainer content={''}>
       {bundle.open && <Edit bundle={bundle} onSuccess={() => ref.current?.reload()}></Edit>}
@@ -180,7 +229,7 @@ const RoleExp: React.FC = () => {
           actionRef={ref}
           toolbar={{
             actions: [
-              <Button icon={<AddOutline />} key={'add'} type={'primary'} onClick={bundle.create}>
+              <Button icon={<AddOutline/>} key={'add'} type={'primary'} onClick={bundle.create}>
                 添加
               </Button>,
             ],

src/pages/Settings/Staff.tsx

@@ -1,15 +1,9 @@
-import {
-  ActionType,
-  PageContainer,
-  ProForm,
-  ProFormText,
-  ProTable,
-} from '@ant-design/pro-components';
-import { Button, Card, Modal } from 'antd';
-import React, { useRef } from 'react';
-import { AddOutline } from 'antd-mobile-icons';
-import { EditBundle, useEdit } from '@/core/hooks/useEdit';
-import { invoke } from '@/core/network';
+import {ActionType, PageContainer, ProForm, ProFormSelect, ProFormText, ProTable,} from '@ant-design/pro-components';
+import {Button, Card, Modal} from 'antd';
+import React, {useRef} from 'react';
+import {AddOutline} from 'antd-mobile-icons';
+import {EditBundle, useEdit} from '@/core/hooks/useEdit';
+import {invoke} from '@/core/network';
 
 type Member = {
   id?: number;
@@ -27,6 +21,21 @@ type MemberList = {
   current: number;
 };
 
+
+type Role = {
+  id?: number;
+  name: string;
+  sortNum: number;
+  status: number;
+};
+
+type RoleList = {
+  records: Role[];
+  total: number;
+  size: number;
+  current: number;
+};
+
 class Service {
   public static async list(current: number, size: number) {
     return invoke<MemberList>('/apis/admin/staff/page', {
@@ -38,6 +47,16 @@ class Service {
     });
   }
 
+  public static async listRole() {
+    return invoke<RoleList>('/apis/admin/role/page', {
+      method: 'POST',
+      data: {
+        current: 1,
+        size: 1000,
+      },
+    });
+  }
+
   public static async remove(id: number) {
     return invoke<void>(`/apis/admin/staff/remove?id=${id}`, {
       method: 'DELETE',
@@ -59,7 +78,7 @@ class Service {
 }
 
 const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) => {
-  const { bundle } = props;
+  const {bundle} = props;
   const [form] = ProForm.useForm<Member>();
   const [loading, setLoading] = React.useState(false);
 
@@ -99,7 +118,7 @@ const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) =
       <ProForm
         className={'mt-5'}
         form={form}
-        labelCol={{ span: 4 }}
+        labelCol={{span: 4}}
         layout={'horizontal'}
         submitter={false}
         request={async () => {
@@ -161,6 +180,25 @@ const Edit: React.FC<{ bundle: EditBundle; onSuccess?: () => void }> = (props) =
             },
           ]}
         />
+        <ProFormSelect
+          fieldProps={{
+            'mode': 'multiple',
+          }}
+          name="roleIds"
+          label="角色"
+          request={async () => {
+            const res = await Service.listRole();
+            if (res.success) {
+              return res.data.records.map(record => ({
+                label: record.name,
+                value: record.id,
+              }))
+            }
+            return Promise.resolve({});
+          }}
+          placeholder="请选择角色"
+          rules={[{required: true, message: '请选择角色'}]}
+        />
       </ProForm>
     </Modal>
   );
@@ -220,7 +258,7 @@ const Staff: React.FC = () => {
           actionRef={ref}
           toolbar={{
             actions: [
-              <Button icon={<AddOutline />} key={'add'} type={'primary'} onClick={bundle.create}>
+              <Button icon={<AddOutline/>} key={'add'} type={'primary'} onClick={bundle.create}>
                 添加
               </Button>,
             ],