bug基本修复，还有一个日期重置暂时没有解决
This commit is contained in:
Lhk0001
13
package-lock.json
generated
13
package-lock.json
generated
@@ -13,6 +13,7 @@
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.4.3",
|
||||
"js-cookie": "^3.0.5",
|
||||
"nprogress": "^0.2.0",
|
||||
@@ -1804,9 +1805,9 @@
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
@@ -5472,9 +5473,9 @@
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.4",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.4.3",
|
||||
"js-cookie": "^3.0.5",
|
||||
"nprogress": "^0.2.0",
|
||||
|
||||
@@ -34,7 +34,7 @@ export const getRolesDataAPI = (params: paramsType) => {
|
||||
}
|
||||
export const delRoleAPI = (params: paramsType) => {
|
||||
let { roleId } = params
|
||||
console.log(roleId);
|
||||
// console.log(roleId);
|
||||
|
||||
return request({
|
||||
url: `/admin/role/${roleId}`,
|
||||
@@ -50,7 +50,7 @@ export const getMenuLiseAPI = () => {
|
||||
})
|
||||
}
|
||||
export const addRoleAPI = (data:any) => {
|
||||
console.log('addAPI',data);
|
||||
// console.log('addAPI',data);
|
||||
return request({
|
||||
url: `/admin/role`,
|
||||
method: 'post',
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,410 +0,0 @@
|
||||
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 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;
|
||||
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);
|
||||
|
||||
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
|
||||
@@ -1,411 +0,0 @@
|
||||
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
|
||||
@@ -1,28 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
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'
|
||||
// import { valueType } from "antd/es/statistic/utils";
|
||||
import { SyncOutlined,SearchOutlined } from '@ant-design/icons';
|
||||
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
|
||||
})
|
||||
const handlClickSerach = () => {
|
||||
console.log(value);
|
||||
getValue(value);
|
||||
}
|
||||
const handleClickSerachNew = () => {
|
||||
value={
|
||||
roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
|
||||
}
|
||||
setValue(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 filterOption = (input: string, option?: { label: string; value: string }) =>
|
||||
(option?.label ?? '').toLowerCase().includes(input.toLowerCase());
|
||||
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="请输入角色名称"
|
||||
allowClear
|
||||
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 allowClear placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
|
||||
setValue({ ...value, roleKey: e.target.value })
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="ipt">
|
||||
<span>状态</span>
|
||||
<div className="item">
|
||||
<Select
|
||||
style={{flex:1,paddingRight:50+'px'}}
|
||||
allowClear
|
||||
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
|
||||
allowClear
|
||||
// value={[null,null]}
|
||||
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={() => handleClickSerachNew()}><SyncOutlined />重置</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Serach
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useState, createContext, useEffect } from "react";
|
||||
import RoleTable from "./RoleTable";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
@@ -27,6 +26,9 @@ import {
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
import zh_CN from "antd/es/locale/zh_CN";
|
||||
import dataLocale from 'antd/es/date-picker/locale/zh_CN'
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import dayjs,{Dayjs} from "dayjs";
|
||||
// import 'moment/locale/zh-cn';
|
||||
import "./index.scss";
|
||||
import {
|
||||
@@ -81,11 +83,12 @@ const fieldNames = {
|
||||
};
|
||||
let thisrole: any = {};
|
||||
let treeIds:number[]=[]
|
||||
// const Dayjs=dayjs.Dayjs
|
||||
export default function Role() {
|
||||
const { confirm } = Modal;
|
||||
const { RangePicker } = DatePicker;
|
||||
//时间值
|
||||
const [selectedDate, setSelectedDate] = useState([null, null]);
|
||||
const [selectedDate, setSelectedDate] = useState<[Date:null,Date:null]>([null,null]);
|
||||
//提示组件
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
//搜索框内所有内容
|
||||
@@ -106,45 +109,6 @@ export default function Role() {
|
||||
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);
|
||||
}
|
||||
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("");
|
||||
@@ -224,7 +188,7 @@ export default function Role() {
|
||||
{"修改"}
|
||||
</Button>
|
||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
||||
<Button type="link" danger onClick={() => handleClickDelete(text)}>
|
||||
<Button type="link" danger onClick={() => handleDelete(text)}>
|
||||
{"删除"}
|
||||
</Button>
|
||||
<Button type="link">{"分配用户"}</Button>
|
||||
@@ -242,17 +206,55 @@ export default function Role() {
|
||||
pageNum: undefined,
|
||||
pageSize: undefined,
|
||||
});
|
||||
const onTreeExpand = (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 onTreeCheck = (checkedKeysValue: any) => {
|
||||
console.log("onCheck", checkedKeysValue.checked);
|
||||
console.log("onCheck", checkedKeysValue);
|
||||
if(checkStrictly===false){
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue });
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
}
|
||||
else{
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue.checked });
|
||||
setCheckedKeys(checkedKeysValue.checked);
|
||||
}
|
||||
};
|
||||
const onTreeSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
console.log("onSelect", info);
|
||||
// setExpandedKeys([...expandedKeys,...selectedKeysValue])
|
||||
setSelectedKeys(selectedKeysValue);
|
||||
};
|
||||
//当前角色的数据
|
||||
|
||||
// let thisrole: any = {roleId:'s'};
|
||||
const handleEdit = async (role: any) => {
|
||||
await getRoleData(role);
|
||||
setModalTitle("修改角色");
|
||||
|
||||
// setCheckedKeys(role)
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const handleClickDelete = (role: any) => {
|
||||
const handleDelete = (role: any) => {
|
||||
console.log(role);
|
||||
confirm({
|
||||
title: "系统提示",
|
||||
@@ -269,13 +271,13 @@ export default function Role() {
|
||||
},
|
||||
});
|
||||
};
|
||||
const handlClickSerach = () => {
|
||||
const handleSerach = () => {
|
||||
console.log("搜索框", searchValue);
|
||||
setSearchValue({ ...searchValue });
|
||||
count = 1;
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
};
|
||||
const handleClickSerachNew = () => {
|
||||
const handleSerachNew = () => {
|
||||
searchValue = {
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
@@ -287,36 +289,6 @@ export default function Role() {
|
||||
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
|
||||
@@ -366,6 +338,39 @@ export default function Role() {
|
||||
setCheckedKeys([]);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const onDateChange = (
|
||||
valueDate: DatePickerProps["value"] | RangePickerProps["value"],
|
||||
dateString: [string, string] | string
|
||||
) => {
|
||||
// setSelectedDate(valueDate)
|
||||
console.log(valueDate);
|
||||
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);
|
||||
};
|
||||
//表格函数
|
||||
//从服务器获取数据
|
||||
|
||||
|
||||
//页码改变
|
||||
const pageChange = (page: number, pageSize: number) => {
|
||||
console.log(page, pageSize);
|
||||
@@ -571,7 +576,7 @@ export default function Role() {
|
||||
<span>状态</span>
|
||||
<div className="item">
|
||||
<Select
|
||||
style={{ width: 100 + "%" }}
|
||||
style={{ width:300+'px' }}
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="请选择角色状态"
|
||||
@@ -598,6 +603,7 @@ export default function Role() {
|
||||
<div className="item">
|
||||
<Space direction="vertical" size={12}>
|
||||
<RangePicker
|
||||
locale={dataLocale}
|
||||
// allowClear
|
||||
// value={[null,null]}
|
||||
showTime
|
||||
@@ -609,11 +615,11 @@ export default function Role() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<Button type="primary" onClick={() => handlClickSerach()}>
|
||||
<Button type="primary" onClick={() => handleSerach()}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
<Button onClick={() => handleClickSerachNew()}>
|
||||
<Button onClick={() => handleSerachNew()}>
|
||||
<SyncOutlined />
|
||||
重置
|
||||
</Button>
|
||||
@@ -700,13 +706,13 @@ export default function Role() {
|
||||
<Tree
|
||||
fieldNames={fieldNames}
|
||||
checkable
|
||||
onExpand={onExpand}
|
||||
onExpand={onTreeExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={true}
|
||||
onCheck={onCheck}
|
||||
onCheck={onTreeCheck}
|
||||
checkedKeys={checkedKeys}
|
||||
checkStrictly={checkStrictly}
|
||||
onSelect={onSelect}
|
||||
onSelect={onTreeSelect}
|
||||
selectedKeys={selectedKeys}
|
||||
treeData={menuTreeData}
|
||||
/>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.newadd{
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
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);
|
||||
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');
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '操作成功',
|
||||
});
|
||||
}
|
||||
else if (code === 2000) {
|
||||
console.log('重名');
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
const onCreate = (values: any) => {
|
||||
// values.menuIds=[]
|
||||
console.log('Received values of form: ', values);
|
||||
|
||||
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