新增，修改，查询,删除功能，有一点bug
This commit is contained in:
Lhk0001
79
src/api/system/role.ts
Normal file
79
src/api/system/role.ts
Normal file
@@ -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
|
||||
})
|
||||
}
|
||||
35
src/view/system/role/RoleTable/index.scss
Normal file
35
src/view/system/role/RoleTable/index.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
408
src/view/system/role/RoleTable/index.tsx
Normal file
408
src/view/system/role/RoleTable/index.tsx
Normal file
@@ -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
|
||||
28
src/view/system/role/Search/index.scss
Normal file
28
src/view/system/role/Search/index.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
121
src/view/system/role/Search/index.tsx
Normal file
121
src/view/system/role/Search/index.tsx
Normal file
@@ -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
|
||||
6
src/view/system/role/index.scss
Normal file
6
src/view/system/role/index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.roleBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
5
src/view/system/role/newadd/index.scss
Normal file
5
src/view/system/role/newadd/index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.newadd{
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
203
src/view/system/role/newadd/index.tsx
Normal file
203
src/view/system/role/newadd/index.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user