diff --git a/src/api/system/role.ts b/src/api/system/role.ts
new file mode 100644
index 0000000..506c65f
--- /dev/null
+++ b/src/api/system/role.ts
@@ -0,0 +1,79 @@
+import { number } from "echarts";
+import request from "../../utils/request";
+interface paramsType {
+  createTime?: string,
+  dataScope?: string,
+  deptIds?: any[],
+  menuIds?: any[],
+  roleId?: number,
+  roleKey?: string,
+  roleName?: string,
+  state?: string,
+  endTime?: string,
+  startTime?: string,
+  pageNum?: number,
+  pageSize?: number
+}
+export const getRolesDataAPI = (params: paramsType) => {
+  const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } = params
+  // console.log('API',params);
+  
+  return request({
+    url: '/admin/role',
+    method: 'get',
+    params: {
+      endTime,
+      roleKey,
+      roleName,
+      startTime,
+      state,
+      pageNum,
+      pageSize
+    }
+  })
+}
+export const delRoleAPI = (params: paramsType) => {
+  let { roleId } = params
+  console.log(roleId);
+
+  return request({
+    url: `/admin/role/${roleId}`,
+    method: 'delete',
+  })
+}
+export const getMenuLiseAPI = () => {
+  
+  return request({
+    url: '/admin/menu',
+    method: 'get',
+    
+  })
+}
+export const addRoleAPI = (data:any) => {
+  // data.menuIds=[]
+  console.log('addAPI',data);
+  return request({
+    url: `/admin/role`,
+    method: 'post',
+    data
+  })
+}
+export const getRoleAPI = (params:paramsType) => {
+  // data.menuIds=[]
+  const {roleId}=params
+  
+  return request({
+    url: `/admin/role/${roleId}`,
+    method: 'get',
+  })
+}
+export const setRoleDataAPI = (data:any) => {
+  // data.menuIds=[]
+  // const {roleId}=params
+  
+  return request({
+    url: `/admin/role`,
+    method: 'put',
+    data:data
+  })
+}
\ No newline at end of file
diff --git a/src/view/system/role/RoleTable/index.scss b/src/view/system/role/RoleTable/index.scss
new file mode 100644
index 0000000..7de746e
--- /dev/null
+++ b/src/view/system/role/RoleTable/index.scss
@@ -0,0 +1,35 @@
+.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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/view/system/role/RoleTable/index.tsx b/src/view/system/role/RoleTable/index.tsx
new file mode 100644
index 0000000..c9b6b7e
--- /dev/null
+++ b/src/view/system/role/RoleTable/index.tsx
@@ -0,0 +1,408 @@
+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();
+    form.setFieldsValue({...thisrole})
+    const [menulist, setMenulist] = useState<any>([])
+    const getMenuList = async () => {
+        try {
+            let menul = await getMenuLiseAPI()
+            treeData = menul.data
+            setMenulist(menul.data)
+        } catch (error) {
+            console.log(error);
+            
+        }
+
+    }
+    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);
+        
+        setSelectedKeys(selectedKeysValue);
+    };
+
+    useEffect(() => {
+        getMenuList()
+        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
+                            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('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
+    }
+    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
\ No newline at end of file
diff --git a/src/view/system/role/Search/index.scss b/src/view/system/role/Search/index.scss
new file mode 100644
index 0000000..2802d22
--- /dev/null
+++ b/src/view/system/role/Search/index.scss
@@ -0,0 +1,28 @@
+.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: 300;
+            margin-right: 40px;
+        }
+    }
+    .btn{
+        button{
+            margin-right: 15px;
+        }
+        margin-top: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/view/system/role/Search/index.tsx b/src/view/system/role/Search/index.tsx
new file mode 100644
index 0000000..baac513
--- /dev/null
+++ b/src/view/system/role/Search/index.tsx
@@ -0,0 +1,121 @@
+import React, { useState ,useContext} from "react";
+import { Button, Input, Select, DatePicker, Space } from "antd";
+import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
+import './index.scss'
+// import { valueType } from "antd/es/statistic/utils";
+import { SyncOutlined,SearchOutlined  } from '@ant-design/icons';
+interface getValueType
+{
+    getValue:(value:any)=>void
+}
+const Serach:React.FC<getValueType>=({getValue})=>{
+    const { RangePicker } = DatePicker
+    let [value, setValue] = useState<valueType>({
+        roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
+    })
+    const handlClickSerach = () => {
+        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 = () => {
+        
+        value={
+            roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
+        }
+        setValue(value)
+        getValue(value)
+    }
+    // Filter `option.label` match the user type `input`
+    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);
+    };
+    return (
+        <div className="SearchBox">
+            <div className="ipt">
+                <span>角色名称</span>
+                <div className="item">
+                    <Input placeholder="请输入角色名称" value={value.roleName} onChange={(e) => {
+                        setValue({ ...value, roleName: e.target.value })
+                        // console.log(value);
+
+                    }} />
+                </div>
+            </div>
+            <div className="ipt">
+                <span>权限字符</span>
+                <div className="item">
+                    <Input placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
+                        setValue({ ...value, roleKey: e.target.value })
+                    }} />
+                </div>
+            </div>
+            <div className="ipt">
+                <span>状态</span>
+                <div className="item">
+                    <Select
+                        showSearch
+                        placeholder="请选择角色状态"
+                        optionFilterProp="lable"
+                        onChange={onStateChange}
+                        onSearch={onSearch}
+                        filterOption={filterOption}
+                        value={value.state}
+                        options={[
+                            {
+                                value: '0',
+                                label: '正常',
+                            },
+                            {
+                                value: '1',
+                                label: '停用',
+                            }
+                        ]}
+                    />
+                </div>
+            </div>
+            <div className="ipt">
+                <span>登陆时间</span>
+                <Space direction="vertical" size={12}>
+                    <RangePicker
+                        
+                        showTime={{ format: 'HH:mm' }}
+                        format="YYYY-MM-DD HH:mm"
+                        onChange={onDateChange}
+                        onOk={onOk}
+                    />
+                </Space>
+            </div>
+            <div className="btn">
+                <Button type="primary" onClick={() => handlClickSerach()}><SearchOutlined />搜索</Button>
+                <Button onClick={() => handlClickSerachNew()}><SyncOutlined />重置</Button>
+            </div>
+
+        </div>
+    )
+}
+export default Serach
\ No newline at end of file
diff --git a/src/view/system/role/index.scss b/src/view/system/role/index.scss
new file mode 100644
index 0000000..cf7c440
--- /dev/null
+++ b/src/view/system/role/index.scss
@@ -0,0 +1,6 @@
+.roleBox{
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 15px;
+}
\ No newline at end of file
diff --git a/src/view/system/role/index.tsx b/src/view/system/role/index.tsx
index e69de29..6de0607 100644
--- a/src/view/system/role/index.tsx
+++ b/src/view/system/role/index.tsx
@@ -0,0 +1,27 @@
+import React ,{useState,createContext} from 'react'
+import RoleTable from './RoleTable';
+import Search from './Search'
+import './index.scss'
+import Newadd from './newadd'
+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 tableData=(setdata:any)=>{
+
+    }
+    return (
+            <div className='roleBox'>
+                <Search getValue={getValue}/>
+                <Newadd/>
+                <RoleTable valueSch={valueSch}/>
+            </div>
+    )
+}
\ No newline at end of file
diff --git a/src/view/system/role/newadd/index.scss b/src/view/system/role/newadd/index.scss
new file mode 100644
index 0000000..837da52
--- /dev/null
+++ b/src/view/system/role/newadd/index.scss
@@ -0,0 +1,5 @@
+.newadd{
+    width: 60px;
+    height: 40px;
+    margin-top: 15px;
+}
\ No newline at end of file
diff --git a/src/view/system/role/newadd/index.tsx b/src/view/system/role/newadd/index.tsx
new file mode 100644
index 0000000..5790e43
--- /dev/null
+++ b/src/view/system/role/newadd/index.tsx
@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+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 type { DataNode } from 'antd/es/tree'
+import { Value } from 'sass';
+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 = [];
+const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
+    open,
+    onCreate,
+    onCancel,
+}) => {
+    const [form] = Form.useForm();
+    const [menulist, setMenulist] = useState<any>([])
+    const getMenuList = async () => {
+        try {
+            let menul = await getMenuLiseAPI()
+            console.log('tree', menul.data);
+            treeData = menul.data
+            setMenulist(menul.data)
+        } catch (error) {
+            console.log(error);
+            
+        }
+    }
+    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);
+        
+        setSelectedKeys(selectedKeysValue);
+    };
+
+    useEffect(() => {
+        getMenuList()
+        // setSelectedKeys([])
+    }, [])
+
+    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="角色名称"
+                    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="显示顺序">
+                    <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" /> */}
+                        <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 [open, setOpen] = useState(false);
+    const postAdd=async(value:any)=>{
+        try {
+            let {code}=await addRoleAPI(value);
+            console.log(code);
+            
+            if(code===1000){
+                console.log('success');
+            }
+            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);
+    };
+
+    return (
+        <div className='newadd'>
+            {contextHolder}
+            <Button
+                type="primary"
+                onClick={() => {
+                    setOpen(true);
+                }}
+            >
+                +新增
+            </Button>
+            <CollectionCreateForm
+                open={open}
+                onCreate={onCreate}
+                onCancel={() => {
+                    setOpen(false);
+                }}
+            />
+        </div>
+    );
+};
+
+export default Newadd;
\ No newline at end of file