副本（test）

2023-10-27 16:55:28 +08:00
parent 96ce9246ee
commit d1b1b2b225
9 changed files with 1360 additions and 147 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "react-vite",
      "version": "0.0.0",
      "dependencies": {
+        "@ant-design/icons": "^5.2.6",
        "@reduxjs/toolkit": "^1.9.5",
        "antd": "^5.7.3",
        "axios": "^1.4.0",
@@ -85,12 +86,12 @@
      }
    },
    "node_modules/@ant-design/icons": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
-      "integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
+      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
      "dependencies": {
        "@ant-design/colors": "^7.0.0",
-        "@ant-design/icons-svg": "^4.2.1",
+        "@ant-design/icons-svg": "^4.3.0",
        "@babel/runtime": "^7.11.2",
        "classnames": "^2.2.6",
        "rc-util": "^5.31.1"
@@ -104,9 +105,9 @@
      }
    },
    "node_modules/@ant-design/icons-svg": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
-      "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
+      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
    },
    "node_modules/@ant-design/react-slick": {
      "version": "1.0.2",
@@ -4353,21 +4354,21 @@
      }
    },
    "@ant-design/icons": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
-      "integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
+      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
      "requires": {
        "@ant-design/colors": "^7.0.0",
-        "@ant-design/icons-svg": "^4.2.1",
+        "@ant-design/icons-svg": "^4.3.0",
        "@babel/runtime": "^7.11.2",
        "classnames": "^2.2.6",
        "rc-util": "^5.31.1"
      }
    },
    "@ant-design/icons-svg": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
-      "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
+      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
    },
    "@ant-design/react-slick": {
      "version": "1.0.2",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
    "@reduxjs/toolkit": "^1.9.5",
    "antd": "^5.7.3",
    "axios": "^1.4.0",
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -50,7 +50,6 @@ export const getMenuLiseAPI = () => {
  })
 }
 export const addRoleAPI = (data:any) => {
-  // data.menuIds=[]
  console.log('addAPI',data);
  return request({
    url: `/admin/role`,
@@ -70,6 +69,7 @@ export const getRoleAPI = (params:paramsType) => {
 export const setRoleDataAPI = (data:any) => {
  // data.menuIds=[]
  // const {roleId}=params
+  console.log('修改',data);
  
  return request({
    url: `/admin/role`,
--- a/src/view/system/role/RoleTable/index.tsx
+++ b/src/view/system/role/RoleTable/index.tsx
@@ -10,6 +10,20 @@ const { confirm } = Modal
 interface getValueType {
    valueSch: any
 }
+interface DataType {
+        createTime: string,
+        dataScope: string,
+        deptIds: any[],
+        menuIds: any[],
+        roleId: number,
+        roleKey: string,
+        roleName: string,
+        roleSort: string,
+        state: string,
+        updateTime: string,
+        key?: number,
+        total?: number
+}
 interface Values {
    title: string;
    description: string;
@@ -34,8 +48,15 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
    onCancel,
 }) => {
    const [form] = Form.useForm();
+    console.log('thisrole',thisrole);
    form.setFieldsValue({...thisrole})
+    
    const [menulist, setMenulist] = useState<any>([])
+    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
+    // setCheckedKeys(thisrole.menuIds)
    const getMenuList = async () => {
        try {
            let menul = await getMenuLiseAPI()
@@ -47,32 +68,28 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
        }

    }
-    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
-    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
-    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
-    
-    const onExpand = (expandedKeysValue: React.Key[]) => {
-        console.log('onExpand', expandedKeysValue);
-        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
-        // or, you can remove all expanded children keys.
-        setExpandedKeys(expandedKeysValue);
-        setAutoExpandParent(false);
-    };
-    const onCheck = (checkedKeysValue: any) => {
-        console.log('onCheck', checkedKeysValue);
-        form.setFieldsValue({menuIds:checkedKeysValue})
-        setCheckedKeys(checkedKeysValue);
-    };
-
-    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
-        console.log('onSelect', info);
+    // const onExpand = (expandedKeysValue: React.Key[]) => {
+    //     console.log('onExpand', expandedKeysValue);
+    //     setExpandedKeys(expandedKeysValue);
+    //     setAutoExpandParent(false);
+    // };
+    // const onCheck = (checkedKeysValue: any) => {
+    //     console.log('onCheck', checkedKeysValue);
+    //     form.setFieldsValue({menuIds:checkedKeysValue})
+    //     setCheckedKeys(checkedKeysValue);
        
-        setSelectedKeys(selectedKeysValue);
-    };
+        
+    // };
+
+    // const onSelect = (selectedKeysValue: React.Key[], info: any) => {
+    //     console.log('onSelect', info);
+    //     setSelectedKeys(selectedKeysValue);
+    // };

    useEffect(() => {
        getMenuList()
+        // console.log('thisrole.menuIds',thisrole.menuIds);
+        // setCheckedKeys(thisrole.menuIds)
        form.setFieldsValue({menuIds:thisrole.menuIds})
    }, [])

@@ -137,9 +154,10 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
                    </Radio.Group>
                </Form.Item>
                <Form.Item name="menuIds" label="菜单权限" className="collection-create-form_last-form-item" initialValue={thisrole.menuIds}>
-                        <Tree
+                        {/* <Tree
                            fieldNames={fieldNames}
                            checkable
+                            // defaultCheckedKeys={thisrole.menuIds}
                            onExpand={onExpand}
                            expandedKeys={expandedKeys}
                            autoExpandParent={autoExpandParent}
@@ -148,7 +166,7 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
                            onSelect={onSelect}
                            selectedKeys={selectedKeys}
                            treeData={treeData}
-                        />
+                        /> */}
                </Form.Item>
            </Form>
        </Modal>
@@ -156,21 +174,8 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
 };
 const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
    const [messageApi,contextHolder]=message.useMessage();
-    console.log('111', valueSch);
-    interface DataType {
-        createTime: string,
-        dataScope: string,
-        deptIds: any[],
-        menuIds: any[],
-        roleId: number,
-        roleKey: string,
-        roleName: string,
-        roleSort: string,
-        state: string,
-        updateTime: string,
-        key?: number,
-        total?: number
-    }
+    console.log('table:', valueSch);
+    
    let [queryParams,setQueryParams]=useState<any>({
        roleKey: undefined,
        roleName: undefined,
@@ -180,7 +185,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
        pageNum: undefined,
        pageSize: undefined
    })
-    
    // let queryParams: any = {
    //     roleKey: undefined,
    //     roleName: undefined,
@@ -190,7 +194,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
    //     pageNum: undefined,
    //     pageSize: undefined
    // }
-    
    const handleClickDel = (role: DataType) => {
        console.log(role);
        let { roleId } = role
@@ -376,7 +379,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
        // console.log(queryParams);
    }, [valueSch])
    return (
-
        <div className='tablebox'>
            {contextHolder}
            <Table
--- a/src/view/system/role/RoleTable/index备份.tsx
+++ b/src/view/system/role/RoleTable/index备份.tsx
@@ -0,0 +1,411 @@
+import React, { useEffect ,useMemo} from 'react'
+import { useState } from 'react';
+import { Space, Table, Tag, Button, Pagination ,Modal,message ,Form,Radio,Input,InputNumber,Tree} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import './index.scss'
+import { getRolesDataAPI, delRoleAPI ,getMenuLiseAPI,getRoleAPI,setRoleDataAPI} from '../../../../api/system/role.ts'
+import { number } from 'echarts'
+import { ExclamationCircleFilled } from '@ant-design/icons';
+const { confirm } = Modal
+interface getValueType {
+    valueSch: any
+}
+interface Values {
+    title: string;
+    description: string;
+    modifier: string;
+}
+interface CollectionCreateFormProps {
+    open: boolean;
+    onCreate: (values: Values) => void;
+    onCancel: () => void;
+}
+const fieldNames = {
+    key: 'menuId',
+    title: 'menuName',
+    value:'menuId',
+    children: 'children'
+}
+let treeData:any=[]
+let thisrole:any={}
+const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
+    open,
+    onCreate,
+    onCancel,
+}) => {
+    const [form] = Form.useForm();
+    console.log('thisrole',thisrole);
+    form.setFieldsValue({...thisrole})
+    
+    const [menulist, setMenulist] = useState<any>([])
+    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
+    // setCheckedKeys(thisrole.menuIds)
+    const getMenuList = async () => {
+        try {
+            let menul = await getMenuLiseAPI()
+            treeData = menul.data
+            setMenulist(menul.data)
+        } catch (error) {
+            console.log(error);
+            
+        }
+
+    }
+    const onExpand = (expandedKeysValue: React.Key[]) => {
+        console.log('onExpand', expandedKeysValue);
+        setExpandedKeys(expandedKeysValue);
+        setAutoExpandParent(false);
+    };
+    const onCheck = (checkedKeysValue: any) => {
+        console.log('onCheck', checkedKeysValue);
+        form.setFieldsValue({menuIds:checkedKeysValue})
+        setCheckedKeys(checkedKeysValue);
+        
+        
+    };
+
+    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
+        console.log('onSelect', info);
+        setSelectedKeys(selectedKeysValue);
+    };
+
+    useEffect(() => {
+        getMenuList()
+        // console.log('thisrole.menuIds',thisrole.menuIds);
+        
+        // setCheckedKeys(thisrole.menuIds)
+        form.setFieldsValue({menuIds:thisrole.menuIds})
+    }, [])
+
+    return (
+        <Modal
+            open={open}
+            title="修改角色"
+            okText="确定"
+            cancelText="取消"
+            onCancel={onCancel}
+            onOk={() => {
+                form
+                    .validateFields()
+                    .then((values) => {
+                        form.resetFields()
+                        onCreate(values);
+                        setSelectedKeys([])
+                    })
+                    .catch((info) => {
+                        console.log('Validate Failed:', info);
+                    });
+            }}
+        >
+            <Form
+                form={form}
+                layout="horizontal"
+                name="form_in_modal"
+                initialValues={ {dataScope:"1",state:"0"} }
+            >
+                <Form.Item
+                    name="roleName"
+                    label="角色名称"
+                    initialValue={thisrole.roleName}
+                    rules={[{ required: true, message: '请输入角色名称' }]}
+                >
+                    <Input placeholder="请输入角色名称"/>
+                </Form.Item>
+                <Form.Item
+                    name="roleKey"
+                    label="角色权限"
+                    rules={[{ required: true, message: '请输入角色权限' }]}
+                    initialValue={thisrole.roleKey}
+                >
+                    <Input placeholder="请输入角色权限"/>
+                </Form.Item>
+
+                <Form.Item required name="roleSort" label="显示顺序" >
+                    <InputNumber min={0} max={10} controls={true} />
+                </Form.Item>
+                <Form.Item name="dataScope" label="数据范围" initialValue={thisrole.dataScope}>
+                    <Radio.Group>
+                        <Radio value="1" defaultChecked={true}>所有数据权限</Radio>
+                        <Radio value="2">自定义数据权限</Radio>
+                        <Radio value="3">本部门数据权限</Radio>
+                        <Radio value="4">本部门及以下数据权限</Radio>
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item name="state" label="状态" className="collection-create-form_last-form-item" initialValue={thisrole.state}>
+                    <Radio.Group>
+                        <Radio defaultChecked={true} value="0">正常</Radio>
+                        <Radio value="1">停用</Radio>
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item name="menuIds" label="菜单权限" className="collection-create-form_last-form-item" initialValue={thisrole.menuIds}>
+                        <Tree
+                            fieldNames={fieldNames}
+                            checkable
+                            // defaultCheckedKeys={thisrole.menuIds}
+                            onExpand={onExpand}
+                            expandedKeys={expandedKeys}
+                            autoExpandParent={autoExpandParent}
+                            onCheck={onCheck}
+                            checkedKeys={checkedKeys}
+                            onSelect={onSelect}
+                            selectedKeys={selectedKeys}
+                            treeData={treeData}
+                        />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
+    const [messageApi,contextHolder]=message.useMessage();
+    console.log('table:', valueSch);
+    interface DataType {
+        createTime: string,
+        dataScope: string,
+        deptIds: any[],
+        menuIds: any[],
+        roleId: number,
+        roleKey: string,
+        roleName: string,
+        roleSort: string,
+        state: string,
+        updateTime: string,
+        key?: number,
+        total?: number
+    }
+    let [queryParams,setQueryParams]=useState<any>({
+        roleKey: undefined,
+        roleName: undefined,
+        state: undefined,
+        endTime: undefined,
+        startTime: undefined,
+        pageNum: undefined,
+        pageSize: undefined
+    })
+    // let queryParams: any = {
+    //     roleKey: undefined,
+    //     roleName: undefined,
+    //     state: undefined,
+    //     endTime: undefined,
+    //     startTime: undefined,
+    //     pageNum: undefined,
+    //     pageSize: undefined
+    // }
+    const handleClickDel = (role: DataType) => {
+        console.log(role);
+        let { roleId } = role
+        del(roleId);
+    }
+    const showDeleteConfirm = (role:any) => {
+        console.log(role);
+        
+        confirm({
+          title: '系统提示',
+          icon: <ExclamationCircleFilled />,
+          content: `确定删除角色名称为${role.roleName}的数据吗`,
+          okText: '确定',
+          okType: 'danger',
+          cancelText: '取消',
+          onOk() {
+            handleClickDel(role);
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      };
+    const del = async (roleId: number) => {
+        try {
+            let { code } = await delRoleAPI({ roleId })
+            if (code === 1000) {
+                console.log('del',valueSch);
+                messageApi.open({
+                    type: 'success',
+                    content: '操作成功',
+                  });
+                getRoleData1({pageNum:count})
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    }
+    
+    const setRoleData=async(role:any)=>{
+        // const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
+        thisrole=role
+        try {
+            let { code ,data} = await getRoleAPI(role)
+            if (code === 1000) {
+                console.log('role:',data);
+                thisrole=data
+                }
+        } catch (error) {
+            console.log(error);
+        }
+        setOpen(true);
+    }
+    const columns: ColumnsType<DataType> = [
+        {
+            title: '序号',
+            dataIndex: 'key',
+            key: 'key',
+        },
+        {
+            title: '角色名称',
+            dataIndex: 'roleName',
+            key: 'roleName',
+        },
+        {
+            title: '角色权限',
+            dataIndex: 'roleKey',
+            key: 'roleKey',
+        },
+        {
+            title: '数据范围',
+            key: 'dataScope',
+            dataIndex: 'dataScope',
+            render:(text)=>{
+                switch(text){
+                    case '1':
+                        return <>所有数据权限</>
+                    case '2':
+                        return <>自定义数据权限</>
+                    case '3':
+                        return <>本部门数据权限</>
+                    default:
+                        return <>本部门及以下数据权限</>
+                }
+            }
+        },
+        {
+            title: '显示顺序',
+            key: 'roleSort',
+            dataIndex: 'roleSort'
+        },
+        {
+            title: '状态',
+            key: 'state',
+            dataIndex: 'state',
+            render: (text) => (
+                <>{
+                    text === '0'
+                        ? <Tag color='processing'>
+                            正常
+                        </Tag>
+                        : <Tag color='processing'>
+                            停用
+                        </Tag>
+                }
+                </>
+            )
+        },
+        {
+            title: '创建时间',
+            key: 'createTime',
+            dataIndex: 'createTime',
+        },
+        {
+            title: '操作',
+            key: '',
+            dataIndex: '',
+            render: (text) => (
+                <>
+                    <Button type='link' onClick={() => setRoleData(text)} >{'修改'}</Button>
+                    {/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
+                    <Button type='link' danger onClick={()=>showDeleteConfirm(text)}>{'删除'}</Button>
+                    <Button type='link' >{'分配用户'}</Button>
+                </>
+            ),
+        }
+    ];
+    let [data, setData] = useState<DataType[]>([])
+    let [total, setTotal] = useState<number>(0)
+    const getRoleData1 = async (queryParams: any) => {
+        try {
+            const { code, data } = await getRolesDataAPI(queryParams)
+            if (code === 1000) {
+                const sortData=data.rows.sort((a:DataType,b:DataType)=>parseInt(a.roleSort)-parseInt(b.roleSort))
+                sortData.forEach((element: DataType, i: number) => {
+                    element.key = i + 1;
+                });
+                setData(sortData)
+                setTotal(data.total)
+            }
+        } catch (err: any) {
+            console.log(err);
+        }
+    }
+    let [count, setCount] = useState(1)
+    const change = (page: number, pageSize: number) => {
+        console.log(page, pageSize);
+        queryParams={...queryParams,pageNum:page,pageSize}
+        // setQueryParams({...queryParams,pageNum:page,pageSize})
+        console.log(queryParams);
+        getRoleData1(queryParams)
+        setCount(page)
+    }
+    const [open, setOpen] = useState(false);
+    const setDataapi=async(values:any)=>{
+        try {
+            console.log('ssssss',values);
+            let {code}=await setRoleDataAPI(values)
+            if(code===1000){
+                messageApi.open({
+                    type: 'success',
+                    content: '操作成功',
+                });
+            }
+        } catch (error) {
+            console.log(error);
+            
+        }
+    }
+    const onCreate = (values: any) => {
+        // values.menuIds=[]
+        values={...thisrole,...values}
+        console.log('Received values of form: ', values);
+        setDataapi(values)
+        getRoleData1({pageNum:count})
+        setOpen(false);
+    };
+    useEffect(() => {
+        // setQueryParams({...queryParams,...valueSch})
+        queryParams={...queryParams,...valueSch,pageNum:count}
+        // setCount(1)
+        getRoleData1(queryParams);
+        // console.log(queryParams);
+    }, [valueSch])
+    return (
+
+        <div className='tablebox'>
+            {contextHolder}
+            <Table
+                columns={columns}
+                dataSource={data}
+                pagination={false}
+            />
+            <Pagination
+                style={{
+                    float: 'right'
+                }}
+                total={total}
+                current={count}
+                showSizeChanger
+                showQuickJumper
+                onChange={(page, pageSize) => change(page, pageSize)}
+                showTotal={(total) => `共 ${total} 条`}
+            />
+            <CollectionCreateForm
+                open={open}
+                onCreate={onCreate}
+                onCancel={() => {
+                    setOpen(false);
+                }}
+            />
+        </div>
+    )
+}
+export default RoleTable
--- a/src/view/system/role/Search/index.tsx
+++ b/src/view/system/role/Search/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState ,useContext} from "react";
+import React, { useState ,useContext,createRef} from "react";
 import { Button, Input, Select, DatePicker, Space } from "antd";
 import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
 import './index.scss'
@@ -8,8 +8,18 @@ interface getValueType
 {
    getValue:(value:any)=>void
 }
+interface valueType {
+    roleName: string | undefined,
+    roleKey: string | undefined,
+    state: string | undefined,
+    startTime: string | undefined,
+    endTime: string | undefined
+}
 const Serach:React.FC<getValueType>=({getValue})=>{
    const { RangePicker } = DatePicker
+    //时间值
+    const [selectedDate, setSelectedDate]=useState([null,null])
+    //搜索框内所有内容
    let [value, setValue] = useState<valueType>({
        roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
    })
@@ -17,39 +27,27 @@ const Serach:React.FC<getValueType>=({getValue})=>{
        console.log(value);
        getValue(value);
    }
-    const onDateChange = (
-        valueDate: DatePickerProps['value'] | RangePickerProps['value'],
-        dateString: [string, string] | string,
-    ) => {
-        
-        setValue({...value,startTime:dateString[0]+':00',endTime:dateString[1]+':00'})
-    };
-    const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
-        console.log('onOk: ', value);
-    };
-    const handlClickSerachNew = () => {
-        
+    const handleClickSerachNew = () => {
        value={
            roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
        }
        setValue(value)
        getValue(value)
    }
-    // Filter `option.label` match the user type `input`
+    const onDateChange = (
+        valueDate: DatePickerProps['value'] | RangePickerProps['value'],
+        dateString: [string, string] | string,
+    ) => {
+        setValue({...value,startTime:dateString[0]+':00',endTime:dateString[1]+':00'})
+    };
+    // const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
+    //     console.log('onOk: ', value);
+    // };
    const filterOption = (input: string, option?: { label: string; value: string }) =>
        (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
-
-    interface valueType {
-        roleName: string | undefined,
-        roleKey: string | undefined,
-        state: string | undefined,
-        startTime: string | undefined,
-        endTime: string | undefined
-    }
    const onStateChange = (values: string) => {
        setValue({ ...value, state: values })
        // console.log(value);
-
    };
    const onSearch = (value: string) => {
        console.log('search:', value);
@@ -59,7 +57,9 @@ const Serach:React.FC<getValueType>=({getValue})=>{
            <div className="ipt">
                <span>角色名称</span>
                <div className="item">
-                    <Input placeholder="请输入角色名称" value={value.roleName} onChange={(e) => {
+                    <Input placeholder="请输入角色名称"
+                        allowClear
+                        value={value.roleName} onChange={(e) => {
                        setValue({ ...value, roleName: e.target.value })
                        // console.log(value);

@@ -69,7 +69,7 @@ const Serach:React.FC<getValueType>=({getValue})=>{
            <div className="ipt">
                <span>权限字符</span>
                <div className="item">
-                    <Input placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
+                    <Input allowClear placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
                        setValue({ ...value, roleKey: e.target.value })
                    }} />
                </div>
@@ -78,6 +78,8 @@ const Serach:React.FC<getValueType>=({getValue})=>{
                <span>状态</span>
                <div className="item">
                    <Select
+                        style={{flex:1,paddingRight:50+'px'}}
+                        allowClear
                        showSearch
                        placeholder="请选择角色状态"
                        optionFilterProp="lable"
@@ -100,19 +102,20 @@ const Serach:React.FC<getValueType>=({getValue})=>{
            </div>
            <div className="ipt">
                <span>登陆时间</span>
-                <Space direction="vertical" size={12}>
+                <Space direction="vertical" size={12} >
                    <RangePicker
-                        
+                        allowClear
+                        // value={[null,null]}
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onDateChange}
-                        onOk={onOk}
+                        // onOk={onOk}
                    />
                </Space>
            </div>
            <div className="btn">
                <Button type="primary" onClick={() => handlClickSerach()}><SearchOutlined />搜索</Button>
-                <Button onClick={() => handlClickSerachNew()}><SyncOutlined />重置</Button>
+                <Button onClick={() => handleClickSerachNew()}><SyncOutlined />重置</Button>
            </div>

        </div>
--- a/src/view/system/role/index.scss
+++ b/src/view/system/role/index.scss
@@ -3,4 +3,92 @@
    height: 100%;
    background-color: white;
    padding: 15px;
+    .SearchBox{
+        display: flex;
+        flex-wrap: wrap;
+        .ipt{
+            margin-top: 10px;
+            margin-right: 10px;
+            height: 32px;
+            line-height: 32px;
+            display: flex;
+            span{
+                font-weight: 700;
+                // line-height: 32px;
+                padding-right: 12px;
+                // color: #606266;
+            }
+            .item,input{
+                flex: 1;
+                font-weight: 400;
+                // width: 300px;
+                margin-right: 40px;
+                .ant-space-item{
+                    // margin-left: 500px;
+                    width: 500px;
+                }
+            }
+        }
+        .btn{
+            button{
+                margin-right: 15px;
+            }
+            margin-top: 10px;
+        }
+    }
+    .tablebox{
+        table{
+            thead{
+                th::before{
+                    
+                }
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#909399
+                    }
+    
+                }
+            }
+            tbody{
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#606266
+                    }
+    
+                }
+            }
+        }
+        .ant-table-cell{
+            button:focus
+            {
+                outline: none;
+            }
+            button:hover
+            {
+                border: 0px rgb(250, 250, 250);
+            }
+        }
+    }
+    .newadd{
+        width: 60px;
+        height: 40px;
+        margin-top: 15px;
+    }
+    
+}
+.myTree{
+    margin-top: 10px;
+    border: 1px solid rgb(173, 131, 131);
+    width: 250px;
+}
+.checkBox{
+    margin-top: 5px;
+    width: 250px;
+    display: flex;
+    label{
+        height: 20px;
+        margin-right: 10px;
+    }
 }
--- a/src/view/system/role/index.tsx
+++ b/src/view/system/role/index.tsx
@@ -1,27 +1,737 @@
-import React ,{useState,createContext} from 'react'
-import RoleTable from './RoleTable';
-import Search from './Search'
-import './index.scss'
-import Newadd from './newadd'
+import React, { useState, createContext, useEffect } from "react";
+import RoleTable from "./RoleTable";
+import {
+  Button,
+  Input,
+  Select,
+  DatePicker,
+  Space,
+  message,
+  Table,
+  Tag,
+  Modal,
+  Pagination,
+  Form,
+  Checkbox,
+  InputNumber,
+  Radio,
+  Tree,
+  ConfigProvider,
+} from "antd";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
+import type { ColumnsType } from "antd/es/table";
+import {
+  SyncOutlined,
+  SearchOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+import zh_CN from "antd/es/locale/zh_CN";
+// import 'moment/locale/zh-cn';
+import "./index.scss";
+import {
+  getRolesDataAPI,
+  delRoleAPI,
+  getRoleAPI,
+  addRoleAPI,
+  setRoleDataAPI,
+  getMenuLiseAPI,
+} from "../../../api/system/role";
+import { useForm } from "antd/es/form/Form";
+interface getSearchValueType {
+  getSearchValue: (value: any) => void;
+}
+type FieldType = {
+  username?: string;
+  password?: string;
+  remember?: string;
+};
+interface Values {
+  title: string;
+  description: string;
+  modifier: string;
+}
+interface searchValueType {
+  roleName: string | undefined;
+  roleKey: string | undefined;
+  state: string | undefined;
+  startTime: string | undefined;
+  endTime: string | undefined;
+}
+//表格单项数据类型
+interface TableDataType {
+  createTime: string;
+  dataScope: string;
+  deptIds: any[];
+  menuIds: any[];
+  roleId: number;
+  roleKey: string;
+  roleName: string;
+  roleSort: string;
+  state: string;
+  updateTime: string;
+  key?: number;
+  total?: number;
+}
+//当前选择的角色信息
+const fieldNames = {
+  title: "menuName",
+  key: "menuId",
+  children: "children",
+};
+let thisrole: any = {};
+let treeIds:number[]=[]
 export default function Role() {
-    // let valueSch={}
-    let [valueSch,setValueSch]=useState<any>({})
-    const getValue=(value:any)=>{
-        console.log(value);
-        // console.log(...value);
-        // valueSch={...value}
-        setValueSch(value)
-        console.log({...valueSch});
-        
+  const { confirm } = Modal;
+  const { RangePicker } = DatePicker;
+  //时间值
+  const [selectedDate, setSelectedDate] = useState([null, null]);
+  //提示组件
+  const [messageApi, contextHolder] = message.useMessage();
+  //搜索框内所有内容
+  let [searchValue, setSearchValue] = useState<searchValueType>({
+    roleName: undefined,
+    roleKey: undefined,
+    startTime: undefined,
+    state: undefined,
+    endTime: undefined,
+  });
+  //树列表数据
+  const [menuTreeData, setMenuTreeData] = useState([]);
+  //父子联动
+  const [checkStrictly,setCheckStrictly]=useState(false)
+  //树所有节点IDs
+  //树是否自动展开
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
+  const onExpand = (expandedKeysValue: React.Key[]) => {
+    // console.log("onExpand", expandedKeysValue);
+    setExpandedKeys(expandedKeysValue);
+    setAutoExpandParent(false);
+  };
+  const onCheckExpand = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    console.log(treeIds);
+    if(e.target.checked) setExpandedKeys(treeIds)
+    else setExpandedKeys([])
+    console.log(expandedKeys);
+    
+  };
+  const onCheckAll = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    if(e.target.checked) setCheckedKeys(treeIds)
+    else setCheckedKeys([])
+  };
+  const onCheckFaSon = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    setCheckStrictly(!e.target.checked)
+  };
+  const onCheck = (checkedKeysValue: any) => {
+    console.log("onCheck", checkedKeysValue.checked);
+    console.log("onCheck", checkedKeysValue);
+    if(checkStrictly===false){
+      form.setFieldsValue({ menuIds: checkedKeysValue });
+      setCheckedKeys(checkedKeysValue);
    }
-    const tableData=(setdata:any)=>{
+    else{
+      form.setFieldsValue({ menuIds: checkedKeysValue.checked });
+      setCheckedKeys(checkedKeysValue.checked);
+    }
+  };
+  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
+    console.log("onSelect", info);
+    // setExpandedKeys([...expandedKeys,...selectedKeysValue])
+    setSelectedKeys(selectedKeysValue);
+  };
+  //Modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalTitle, setModalTitle] = useState("");
+  //表单区域
+  const [form] = Form.useForm();
+  //当前页面页数
+  let [count, setCount] = useState(1);
+  //表格内数据
+  let [tableData, setTableData] = useState<TableDataType[]>([]);
+  //表格数据总条数
+  let [total, setTotal] = useState<number>(0);
+  //表格格式
+  const columns: ColumnsType<TableDataType> = [
+    {
+      title: "序号",
+      dataIndex: "key",
+      key: "key",
+    },
+    {
+      title: "角色名称",
+      dataIndex: "roleName",
+      key: "roleName",
+    },
+    {
+      title: "角色权限",
+      dataIndex: "roleKey",
+      key: "roleKey",
+    },
+    {
+      title: "数据范围",
+      key: "dataScope",
+      dataIndex: "dataScope",
+      render: (text) => {
+        switch (text) {
+          case "1":
+            return <>所有数据权限</>;
+          case "2":
+            return <>自定义数据权限</>;
+          case "3":
+            return <>本部门数据权限</>;
+          default:
+            return <>本部门及以下数据权限</>;
+        }
+      },
+    },
+    {
+      title: "显示顺序",
+      key: "roleSort",
+      dataIndex: "roleSort",
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text) => (
+        <>
+          {text === "0" ? (
+            <Tag color="success">正常</Tag>
+          ) : (
+            <Tag color="error">停用</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+    },
+    {
+      title: "操作",
+      key: "",
+      dataIndex: "",
+      render: (text) => (
+        <>
+          <Button type="link" onClick={() => handleEdit(text)}>
+            {"修改"}
+          </Button>
+          {/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
+          <Button type="link" danger onClick={() => handleClickDelete(text)}>
+            {"删除"}
+          </Button>
+          <Button type="link">{"分配用户"}</Button>
+        </>
+      ),
+    },
+  ];
+  //请求表格内容参数
+  let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
+    roleKey: undefined,
+    roleName: undefined,
+    state: undefined,
+    endTime: undefined,
+    startTime: undefined,
+    pageNum: undefined,
+    pageSize: undefined,
+  });
+  //当前角色的数据

+  //   let thisrole: any = {roleId:'s'};
+  const handleEdit = async (role: any) => {
+    await getRoleData(role);
+    setModalTitle("修改角色");
+
+    // setCheckedKeys(role)
+    setIsModalOpen(true);
+  };
+  const handleClickDelete = (role: any) => {
+    console.log(role);
+    confirm({
+      title: "系统提示",
+      icon: <ExclamationCircleFilled />,
+      content: `确定删除角色名称为${role.roleName}的数据吗`,
+      okText: "确定",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        handleClickDel(role);
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+  const handlClickSerach = () => {
+    console.log("搜索框", searchValue);
+    setSearchValue({ ...searchValue });
+    count = 1;
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleClickSerachNew = () => {
+    searchValue = {
+      roleName: undefined,
+      roleKey: undefined,
+      startTime: undefined,
+      state: undefined,
+      endTime: undefined,
+    };
+    setQueryTableDataParams({ ...searchValue });
+    setSearchValue({ ...searchValue });
+    // setCount(1)
+  };
+  const onDateChange = (
+    valueDate: DatePickerProps["value"] | RangePickerProps["value"],
+    dateString: [string, string] | string
+  ) => {
+    searchValue.startTime = dateString[0];
+    searchValue.endTime = dateString[1];
+    console.log("time:", searchValue.endTime, searchValue.startTime);
+    // setSearchValue({ ...searchValue })
+  };
+  const onDataChangeOk = (
+    value: DatePickerProps["value"] | RangePickerProps["value"]
+  ) => {
+    console.log("onOk: ", value);
+  };
+  const filterOption = (
+    input: string,
+    option?: { label: string; value: string }
+  ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  const onStateChange = (value: string) => {
+    searchValue.state = value;
+    // setSearchValue({ ...searchValue, state: value })
+    // searchValue.state = values
+    // console.log(value);
+  };
+  const onSearch = (value: string) => {
+    console.log("search:", value);
+  };
+  //表格函数
+  //从服务器获取数据
+
+  //Modal区域
+  const handleModalOk = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        // form.resetFields();
+        console.log("add", values);
+        // onCreate(values);
+        // setSelectedKeys([])
+        // setIsModalOpen(false);
+        if (modalTitle == "新增角色") {
+          console.log(values);
+
+          console.log("add2", { ...values, menuIds: checkedKeys });
+
+          postAdd({ ...values, menuIds: checkedKeys });
+        } else if (modalTitle == "修改角色") {
+          console.log(thisrole);
+          console.log(checkedKeys);
+          console.log("now", { ...thisrole, ...values, menuIds: checkedKeys });
+          // console.log({ ...thisrole, ...values,menuIds:setCheckedKeys });
+          thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
+          editRoleData({ ...thisrole });
+        }
+        
+      })
+      .catch((info) => {
+        console.log("Validate Failed:", info);
+      });
+
+    console.log("modal thisrole", thisrole);
+  };
+  const handleModalCanle = () => {
+    setIsModalOpen(false);
+  };
+  //新增
+  const handleNewAdd = () => {
+    setModalTitle("新增角色");
+    form.setFieldsValue({
+      roleName: "",
+      roleKey: "",
+      state: "0",
+      dataScope: "1",
+      roleSort: "0",
+    });
+    
+    setCheckedKeys([]);
+    setIsModalOpen(true);
+  };
+  //页码改变
+  const pageChange = (page: number, pageSize: number) => {
+    console.log(page, pageSize);
+    queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
+    // setQueryParams({...queryParams,pageNum:page,pageSize})
+    console.log(queryTableDataParams);
+    getRolesData(queryTableDataParams);
+    setCount(page);
+  };
+  //删除单项
+  const handleClickDel = (role: TableDataType) => {
+    console.log(role);
+    let { roleId } = role;
+    del(roleId);
+  };
+  //遍历菜单树获取所有节点ID
+  const getTreeIds=function(tree:any){
+    // console.log('Ids:',tree);
+    tree.forEach((item:any) => {
+      // console.log(item);
+      treeIds.push(item.menuId)
+      if(item.children!=null) getTreeIds(item.children)
+    });
+  }
+  //获取单个角色详细信息
+  const getRoleData = async (role: any) => {
+    // const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
+    // thisrole=role
+    try {
+      let { code, data } = await getRoleAPI(role);
+      if (code === 1000) {
+        console.log("role:", data);
+        thisrole = data;
+        console.log("thisrole", thisrole);
+        form.setFieldsValue(thisrole);
+        setCheckedKeys(data.menuIds);
+      }
+    } catch (error) {
+      console.log(error);
    }
-    return (
-            <div className='roleBox'>
-                <Search getValue={getValue}/>
-                <Newadd/>
-                <RoleTable valueSch={valueSch}/>
+    // setOpen(true);
+  };
+  //获取菜单权限树
+  const getMenuList = async () => {
+    try {
+      let menul = await getMenuLiseAPI();
+      console.log("tree", menul.data);
+      if(treeIds.length==0) getTreeIds(menul.data)
+      console.log(treeIds);
+      setMenuTreeData(menul.data);
+      // treeData = menul.data
+      // setMenulist(menul.data)
+
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //新增请求
+  const postAdd = async (value: any) => {
+    try {
+      let { code } = await addRoleAPI(value);
+      console.log(code);
+
+      if (code === 1000) {
+        console.log("success");
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        form.setFieldsValue({
+          roleName: "",
+          roleKey: "",
+          state: "0",
+          dataScope: "1",
+        });
+        getRolesData({ ...queryTableDataParams, pageNum: count });
+        setIsModalOpen(false);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "角色名称已存在",
+        });
+      }
+    } catch (error) {}
+  };
+  const getRolesData = async (queryTableDataParams: any) => {
+    console.log("参数:", queryTableDataParams);
+    try {
+      const { code, data } = await getRolesDataAPI(queryTableDataParams);
+      if (code === 1000) {
+        const sortData = data.rows.sort(
+          (a: TableDataType, b: TableDataType) =>
+            parseInt(a.roleSort) - parseInt(b.roleSort)
+        );
+        sortData.forEach((element: TableDataType, i: number) => {
+          element.key = i + 1;
+        });
+        setTableData(sortData);
+        setTotal(data.total);
+      }
+    } catch (err: any) {
+      console.log("555", err);
+    }
+  };
+  //服务器删除角色
+  const del = async (roleId: number) => {
+    try {
+      let { code } = await delRoleAPI({ roleId });
+      if (code === 1000) {
+        console.log("del", roleId);
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        getRolesData({ pageNum: count });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //修改角色信息
+  const editRoleData = async (role: any) => {
+    // const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
+    // thisrole = role;
+    // console.log(thisrole);
+    console.log(role);
+    try {
+      let { code, data } = await setRoleDataAPI(thisrole);
+      // let a = await setRoleDataAPI(role);
+      if (code === 1000) {
+        thisrole = { ...thisrole, ...data };
+        getRolesData({ ...queryTableDataParams, pageNum: count });
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        setIsModalOpen(false);
+        form.setFieldsValue({
+          roleName: "",
+          roleKey: "",
+          state: "0",
+          dataScope: "1",
+        });
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "角色名称已存在！",
+        });
+      }
+    } catch (error) {
+      messageApi.open({
+        type: "error",
+        content: "系统未知错误",
+      });
+      console.log(error);
+    }
+  };
+  useEffect(() => {
+    // setQueryParams({...queryParams,...valueSch})
+    queryTableDataParams = {
+      ...queryTableDataParams,
+      ...searchValue,
+      pageNum: count,
+    };
+    // setCount(1)
+    getRolesData(queryTableDataParams);
+    // console.log(queryParams);
+  }, [queryTableDataParams]);
+  useEffect(() => {
+    getMenuList();
+  }, []);
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <div className="roleBox">
+        <div className="SearchBox">
+          <div className="ipt">
+            <span>角色名称</span>
+            <div className="item">
+              <Input
+                placeholder="请输入角色名称"
+                allowClear
+                value={searchValue.roleName}
+                onChange={(e) => {
+                  setSearchValue({ ...searchValue, roleName: e.target.value });
+                }}
+              />
            </div>
-    )
-}
+          </div>
+          <div className="ipt">
+            <span>权限字符</span>
+            <div className="item">
+              <Input
+                allowClear
+                placeholder="请输入权限字符"
+                value={searchValue.roleKey}
+                onChange={(e) => {
+                  setSearchValue({ ...searchValue, roleKey: e.target.value });
+                }}
+              />
+            </div>
+          </div>
+          <div className="ipt">
+            <span>状态</span>
+            <div className="item">
+              <Select
+                style={{ width: 100 + "%" }}
+                allowClear
+                showSearch
+                placeholder="请选择角色状态"
+                optionFilterProp="lable"
+                onChange={onStateChange}
+                onSearch={onSearch}
+                filterOption={filterOption}
+                value={searchValue.state}
+                options={[
+                  {
+                    value: "0",
+                    label: "正常",
+                  },
+                  {
+                    value: "1",
+                    label: "停用",
+                  },
+                ]}
+              />
+            </div>
+          </div>
+          <div className="ipt">
+            <span>登陆时间</span>
+            <div className="item">
+              <Space direction="vertical" size={12}>
+                <RangePicker
+                  // allowClear
+                  // value={[null,null]}
+                  showTime
+                  format="YYYY-MM-DD HH:mm:ss"
+                  onChange={onDateChange}
+                  onOk={onDataChangeOk}
+                />
+              </Space>
+            </div>
+          </div>
+          <div className="btn">
+            <Button type="primary" onClick={() => handlClickSerach()}>
+              <SearchOutlined />
+              搜索
+            </Button>
+            <Button onClick={() => handleClickSerachNew()}>
+              <SyncOutlined />
+              重置
+            </Button>
+          </div>
+        </div>
+        {/* 新增 */}
+        <div className="newadd">
+          <Button type="primary" onClick={handleNewAdd}>
+            +新增
+          </Button>
+        </div>
+        {/* 弹出 */}
+        <Modal
+          open={isModalOpen}
+          title={modalTitle}
+          okText="确定"
+          cancelText="取消"
+          onCancel={handleModalCanle}
+          onOk={handleModalOk}
+        >
+          <Form
+            form={form}
+            layout="horizontal"
+            name="form_in_modal"
+            initialValues={{ dataScope: "1", state: "0" }}
+          >
+            <Form.Item
+              name="roleName"
+              label="角色名称"
+              rules={[{ required: true, message: "请输入角色名称" }]}
+            >
+              <Input placeholder="请输入角色名称" />
+            </Form.Item>
+            <Form.Item
+              name="roleKey"
+              label="角色权限"
+              rules={[{ required: true, message: "请输入角色权限" }]}
+            >
+              <Input placeholder="请输入角色权限" />
+            </Form.Item>
+
+            <Form.Item
+              required
+              name="roleSort"
+              label="显示顺序"
+              rules={[{ required: true, message: "请输入角色显示顺序" }]}
+            >
+              <InputNumber min={0} max={10} controls={true} />
+            </Form.Item>
+            <Form.Item name="dataScope" label="数据范围">
+              <Radio.Group>
+                <Radio value="1" defaultChecked={true}>
+                  所有数据权限
+                </Radio>
+                <Radio value="2">自定义数据权限</Radio>
+                <Radio value="3">本部门数据权限</Radio>
+                <Radio value="4">本部门及以下数据权限</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="state"
+              label="状态"
+              className="collection-create-form_last-form-item"
+            >
+              <Radio.Group>
+                <Radio defaultChecked={true} value="0">
+                  正常
+                </Radio>
+                <Radio value="1">停用</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="menuIds"
+              label="菜单权限"
+              className="collection-create-form_last-form-item"
+            >
+              {/* <input type="text" /> */}
+              <div className="checkBox">
+                <Checkbox onChange={onCheckExpand}>展开</Checkbox>
+                <Checkbox onChange={onCheckAll}>全选</Checkbox>
+                <Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
+              </div>
+              <div className="myTree">
+                <Tree
+                  fieldNames={fieldNames}
+                  checkable
+                  onExpand={onExpand}
+                  expandedKeys={expandedKeys}
+                  autoExpandParent={true}
+                  onCheck={onCheck}
+                  checkedKeys={checkedKeys}
+                  checkStrictly={checkStrictly}
+                  onSelect={onSelect}
+                  selectedKeys={selectedKeys}
+                  treeData={menuTreeData}
+                />
+              </div>
+            </Form.Item>
+          </Form>
+        </Modal>
+        {/* 表格 */}
+        <div className="tablebox">
+          {contextHolder}
+          <Table columns={columns} dataSource={tableData} pagination={false} />
+          <Pagination
+            style={{
+              float: "right",
+              marginTop: "10px",
+            }}
+            total={total}
+            current={count}
+            showSizeChanger
+            showQuickJumper
+            onChange={(page, pageSize) => pageChange(page, pageSize)}
+            showTotal={(total) => `共 ${total} 条`}
+          />
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}
--- a/src/view/system/role/newadd/index.tsx
+++ b/src/view/system/role/newadd/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Form, Input, Modal, Radio, Tree,InputNumber, message } from 'antd';
+import { Button, Form, Input, Modal, Radio, Tree, InputNumber, message } from 'antd';
 import { SyncOutlined } from '@ant-design/icons'
 import './index.scss'
-import { getMenuLiseAPI,addRoleAPI } from '../../../../api/system/role'
+import { getMenuLiseAPI, addRoleAPI } from '../../../../api/system/role'
 import type { DataNode } from 'antd/es/tree'
 import { Value } from 'sass';
 interface Values {
@@ -10,7 +10,6 @@ interface Values {
    description: string;
    modifier: string;
 }
-
 interface CollectionCreateFormProps {
    open: boolean;
    onCreate: (values: Values) => void;
@@ -19,7 +18,7 @@ interface CollectionCreateFormProps {
 const fieldNames = {
    key: 'menuId',
    title: 'menuName',
-    value:'menuId',
+    value: 'menuId',
    children: 'children'
 }
 let treeData: any = [];
@@ -38,7 +37,7 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
            setMenulist(menul.data)
        } catch (error) {
            console.log(error);
-            
+
        }
    }
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
@@ -48,20 +47,18 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({

    const onExpand = (expandedKeysValue: React.Key[]) => {
        console.log('onExpand', expandedKeysValue);
-        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
-        // or, you can remove all expanded children keys.
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    const onCheck = (checkedKeysValue: any) => {
        console.log('onCheck', checkedKeysValue);
-        form.setFieldsValue({menuIds:checkedKeysValue})
+        form.setFieldsValue({ menuIds: checkedKeysValue })
        setCheckedKeys(checkedKeysValue);
    };

    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
        console.log('onSelect', info);
-        
+
        setSelectedKeys(selectedKeysValue);
    };

@@ -69,7 +66,6 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
        getMenuList()
        // setSelectedKeys([])
    }, [])
-
    return (
        <Modal
            open={open}
@@ -94,21 +90,21 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
                form={form}
                layout="horizontal"
                name="form_in_modal"
-                initialValues={ {dataScope:"1",state:"0"} }
+                initialValues={{ dataScope: "1", state: "0" }}
            >
                <Form.Item
                    name="roleName"
                    label="角色名称"
                    rules={[{ required: true, message: '请输入角色名称' }]}
                >
-                    <Input placeholder="请输入角色名称"/>
+                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item
                    name="roleKey"
                    label="角色权限"
                    rules={[{ required: true, message: '请输入角色权限' }]}
                >
-                    <Input placeholder="请输入角色权限"/>
+                    <Input placeholder="请输入角色权限" />
                </Form.Item>

                <Form.Item required name="roleSort" label="显示顺序">
@@ -129,51 +125,52 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
                    </Radio.Group>
                </Form.Item>
                <Form.Item name="menuIds" label="菜单权限" className="collection-create-form_last-form-item">
-                        {/* <input type="text" /> */}
-                        <Tree
-                            fieldNames={fieldNames}
-                            checkable
-                            onExpand={onExpand}
-                            expandedKeys={expandedKeys}
-                            autoExpandParent={autoExpandParent}
-                            onCheck={onCheck}
-                            checkedKeys={checkedKeys}
-                            onSelect={onSelect}
-                            selectedKeys={selectedKeys}
-                            treeData={treeData}
-                        />
+                    {/* <input type="text" /> */}
+                    <Tree
+                        fieldNames={fieldNames}
+                        checkable
+                        onExpand={onExpand}
+                        expandedKeys={expandedKeys}
+                        autoExpandParent={autoExpandParent}
+                        onCheck={onCheck}
+                        checkedKeys={checkedKeys}
+                        onSelect={onSelect}
+                        selectedKeys={selectedKeys}
+                        treeData={treeData}
+                    />
                </Form.Item>
            </Form>
        </Modal>
    );
 };

-const Newadd: React.FC= () => {
-    const [messageApi,contextHolder]=message.useMessage();
+const Newadd: React.FC = () => {
+    const [messageApi, contextHolder] = message.useMessage();
    const [open, setOpen] = useState(false);
-    const postAdd=async(value:any)=>{
+    const postAdd = async (value: any) => {
        try {
-            let {code}=await addRoleAPI(value);
+            let { code } = await addRoleAPI(value);
            console.log(code);
-            
-            if(code===1000){
+
+            if (code === 1000) {
                console.log('success');
+                messageApi.open({
+                    type: 'success',
+                    content: '操作成功',
+                });
            }
-            else if(code===2000){
+            else if (code === 2000) {
                console.log('重名');
-                
+
            }
        } catch (error) {
-            
+
        }
    }
    const onCreate = (values: any) => {
        // values.menuIds=[]
        console.log('Received values of form: ', values);
-        messageApi.open({
-            type: 'success',
-            content: '操作成功',
-          });
+
        postAdd(values)
        setOpen(false);
    };