副本（test）
This commit is contained in:
Lhk0001
29
package-lock.json
generated
29
package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "react-vite",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
@@ -85,12 +86,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||
"version": "5.2.6",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-svg": "^4.2.1",
|
||||
"@ant-design/icons-svg": "^4.3.0",
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
@@ -104,9 +105,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons-svg": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
||||
},
|
||||
"node_modules/@ant-design/react-slick": {
|
||||
"version": "1.0.2",
|
||||
@@ -4353,21 +4354,21 @@
|
||||
}
|
||||
},
|
||||
"@ant-design/icons": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||
"version": "5.2.6",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
||||
"requires": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-svg": "^4.2.1",
|
||||
"@ant-design/icons-svg": "^4.3.0",
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
}
|
||||
},
|
||||
"@ant-design/icons-svg": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
||||
},
|
||||
"@ant-design/react-slick": {
|
||||
"version": "1.0.2",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
|
||||
@@ -50,7 +50,6 @@ export const getMenuLiseAPI = () => {
|
||||
})
|
||||
}
|
||||
export const addRoleAPI = (data:any) => {
|
||||
// data.menuIds=[]
|
||||
console.log('addAPI',data);
|
||||
return request({
|
||||
url: `/admin/role`,
|
||||
@@ -70,6 +69,7 @@ export const getRoleAPI = (params:paramsType) => {
|
||||
export const setRoleDataAPI = (data:any) => {
|
||||
// data.menuIds=[]
|
||||
// const {roleId}=params
|
||||
console.log('修改',data);
|
||||
|
||||
return request({
|
||||
url: `/admin/role`,
|
||||
|
||||
@@ -10,6 +10,20 @@ const { confirm } = Modal
|
||||
interface getValueType {
|
||||
valueSch: any
|
||||
}
|
||||
interface DataType {
|
||||
createTime: string,
|
||||
dataScope: string,
|
||||
deptIds: any[],
|
||||
menuIds: any[],
|
||||
roleId: number,
|
||||
roleKey: string,
|
||||
roleName: string,
|
||||
roleSort: string,
|
||||
state: string,
|
||||
updateTime: string,
|
||||
key?: number,
|
||||
total?: number
|
||||
}
|
||||
interface Values {
|
||||
title: string;
|
||||
description: string;
|
||||
@@ -34,8 +48,15 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
onCancel,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
console.log('thisrole',thisrole);
|
||||
form.setFieldsValue({...thisrole})
|
||||
|
||||
const [menulist, setMenulist] = useState<any>([])
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
// setCheckedKeys(thisrole.menuIds)
|
||||
const getMenuList = async () => {
|
||||
try {
|
||||
let menul = await getMenuLiseAPI()
|
||||
@@ -47,32 +68,28 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
}
|
||||
|
||||
}
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
// const onExpand = (expandedKeysValue: React.Key[]) => {
|
||||
// console.log('onExpand', expandedKeysValue);
|
||||
// setExpandedKeys(expandedKeysValue);
|
||||
// setAutoExpandParent(false);
|
||||
// };
|
||||
// const onCheck = (checkedKeysValue: any) => {
|
||||
// console.log('onCheck', checkedKeysValue);
|
||||
// form.setFieldsValue({menuIds:checkedKeysValue})
|
||||
// setCheckedKeys(checkedKeysValue);
|
||||
|
||||
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);
|
||||
};
|
||||
// const onSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
// console.log('onSelect', info);
|
||||
// setSelectedKeys(selectedKeysValue);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
getMenuList()
|
||||
// console.log('thisrole.menuIds',thisrole.menuIds);
|
||||
// setCheckedKeys(thisrole.menuIds)
|
||||
form.setFieldsValue({menuIds:thisrole.menuIds})
|
||||
}, [])
|
||||
|
||||
@@ -137,9 +154,10 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item name="menuIds" label="菜单权限" className="collection-create-form_last-form-item" initialValue={thisrole.menuIds}>
|
||||
<Tree
|
||||
{/* <Tree
|
||||
fieldNames={fieldNames}
|
||||
checkable
|
||||
// defaultCheckedKeys={thisrole.menuIds}
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
@@ -148,7 +166,7 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
onSelect={onSelect}
|
||||
selectedKeys={selectedKeys}
|
||||
treeData={treeData}
|
||||
/>
|
||||
/> */}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
@@ -156,21 +174,8 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
};
|
||||
const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
|
||||
const [messageApi,contextHolder]=message.useMessage();
|
||||
console.log('111', valueSch);
|
||||
interface DataType {
|
||||
createTime: string,
|
||||
dataScope: string,
|
||||
deptIds: any[],
|
||||
menuIds: any[],
|
||||
roleId: number,
|
||||
roleKey: string,
|
||||
roleName: string,
|
||||
roleSort: string,
|
||||
state: string,
|
||||
updateTime: string,
|
||||
key?: number,
|
||||
total?: number
|
||||
}
|
||||
console.log('table:', valueSch);
|
||||
|
||||
let [queryParams,setQueryParams]=useState<any>({
|
||||
roleKey: undefined,
|
||||
roleName: undefined,
|
||||
@@ -180,7 +185,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
|
||||
pageNum: undefined,
|
||||
pageSize: undefined
|
||||
})
|
||||
|
||||
// let queryParams: any = {
|
||||
// roleKey: undefined,
|
||||
// roleName: undefined,
|
||||
@@ -190,7 +194,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
|
||||
// pageNum: undefined,
|
||||
// pageSize: undefined
|
||||
// }
|
||||
|
||||
const handleClickDel = (role: DataType) => {
|
||||
console.log(role);
|
||||
let { roleId } = role
|
||||
@@ -376,7 +379,6 @@ const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
|
||||
// console.log(queryParams);
|
||||
}, [valueSch])
|
||||
return (
|
||||
|
||||
<div className='tablebox'>
|
||||
{contextHolder}
|
||||
<Table
|
||||
|
||||
411
src/view/system/role/RoleTable/index备份.tsx
Normal file
411
src/view/system/role/RoleTable/index备份.tsx
Normal file
@@ -0,0 +1,411 @@
|
||||
import React, { useEffect ,useMemo} from 'react'
|
||||
import { useState } from 'react';
|
||||
import { Space, Table, Tag, Button, Pagination ,Modal,message ,Form,Radio,Input,InputNumber,Tree} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import './index.scss'
|
||||
import { getRolesDataAPI, delRoleAPI ,getMenuLiseAPI,getRoleAPI,setRoleDataAPI} from '../../../../api/system/role.ts'
|
||||
import { number } from 'echarts'
|
||||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||||
const { confirm } = Modal
|
||||
interface getValueType {
|
||||
valueSch: any
|
||||
}
|
||||
interface Values {
|
||||
title: string;
|
||||
description: string;
|
||||
modifier: string;
|
||||
}
|
||||
interface CollectionCreateFormProps {
|
||||
open: boolean;
|
||||
onCreate: (values: Values) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
const fieldNames = {
|
||||
key: 'menuId',
|
||||
title: 'menuName',
|
||||
value:'menuId',
|
||||
children: 'children'
|
||||
}
|
||||
let treeData:any=[]
|
||||
let thisrole:any={}
|
||||
const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
open,
|
||||
onCreate,
|
||||
onCancel,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
console.log('thisrole',thisrole);
|
||||
form.setFieldsValue({...thisrole})
|
||||
|
||||
const [menulist, setMenulist] = useState<any>([])
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
// setCheckedKeys(thisrole.menuIds)
|
||||
const getMenuList = async () => {
|
||||
try {
|
||||
let menul = await getMenuLiseAPI()
|
||||
treeData = menul.data
|
||||
setMenulist(menul.data)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
const onExpand = (expandedKeysValue: React.Key[]) => {
|
||||
console.log('onExpand', expandedKeysValue);
|
||||
setExpandedKeys(expandedKeysValue);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
const onCheck = (checkedKeysValue: any) => {
|
||||
console.log('onCheck', checkedKeysValue);
|
||||
form.setFieldsValue({menuIds:checkedKeysValue})
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
|
||||
|
||||
};
|
||||
|
||||
const onSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
console.log('onSelect', info);
|
||||
setSelectedKeys(selectedKeysValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getMenuList()
|
||||
// console.log('thisrole.menuIds',thisrole.menuIds);
|
||||
|
||||
// setCheckedKeys(thisrole.menuIds)
|
||||
form.setFieldsValue({menuIds:thisrole.menuIds})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title="修改角色"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
onCancel={onCancel}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
form.resetFields()
|
||||
onCreate(values);
|
||||
setSelectedKeys([])
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log('Validate Failed:', info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
name="form_in_modal"
|
||||
initialValues={ {dataScope:"1",state:"0"} }
|
||||
>
|
||||
<Form.Item
|
||||
name="roleName"
|
||||
label="角色名称"
|
||||
initialValue={thisrole.roleName}
|
||||
rules={[{ required: true, message: '请输入角色名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入角色名称"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="roleKey"
|
||||
label="角色权限"
|
||||
rules={[{ required: true, message: '请输入角色权限' }]}
|
||||
initialValue={thisrole.roleKey}
|
||||
>
|
||||
<Input placeholder="请输入角色权限"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item required name="roleSort" label="显示顺序" >
|
||||
<InputNumber min={0} max={10} controls={true} />
|
||||
</Form.Item>
|
||||
<Form.Item name="dataScope" label="数据范围" initialValue={thisrole.dataScope}>
|
||||
<Radio.Group>
|
||||
<Radio value="1" defaultChecked={true}>所有数据权限</Radio>
|
||||
<Radio value="2">自定义数据权限</Radio>
|
||||
<Radio value="3">本部门数据权限</Radio>
|
||||
<Radio value="4">本部门及以下数据权限</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item name="state" label="状态" className="collection-create-form_last-form-item" initialValue={thisrole.state}>
|
||||
<Radio.Group>
|
||||
<Radio defaultChecked={true} value="0">正常</Radio>
|
||||
<Radio value="1">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item name="menuIds" label="菜单权限" className="collection-create-form_last-form-item" initialValue={thisrole.menuIds}>
|
||||
<Tree
|
||||
fieldNames={fieldNames}
|
||||
checkable
|
||||
// defaultCheckedKeys={thisrole.menuIds}
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
onCheck={onCheck}
|
||||
checkedKeys={checkedKeys}
|
||||
onSelect={onSelect}
|
||||
selectedKeys={selectedKeys}
|
||||
treeData={treeData}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
const RoleTable: React.FC<getValueType> = ({ valueSch }) => {
|
||||
const [messageApi,contextHolder]=message.useMessage();
|
||||
console.log('table:', valueSch);
|
||||
interface DataType {
|
||||
createTime: string,
|
||||
dataScope: string,
|
||||
deptIds: any[],
|
||||
menuIds: any[],
|
||||
roleId: number,
|
||||
roleKey: string,
|
||||
roleName: string,
|
||||
roleSort: string,
|
||||
state: string,
|
||||
updateTime: string,
|
||||
key?: number,
|
||||
total?: number
|
||||
}
|
||||
let [queryParams,setQueryParams]=useState<any>({
|
||||
roleKey: undefined,
|
||||
roleName: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
startTime: undefined,
|
||||
pageNum: undefined,
|
||||
pageSize: undefined
|
||||
})
|
||||
// let queryParams: any = {
|
||||
// roleKey: undefined,
|
||||
// roleName: undefined,
|
||||
// state: undefined,
|
||||
// endTime: undefined,
|
||||
// startTime: undefined,
|
||||
// pageNum: undefined,
|
||||
// pageSize: undefined
|
||||
// }
|
||||
const handleClickDel = (role: DataType) => {
|
||||
console.log(role);
|
||||
let { roleId } = role
|
||||
del(roleId);
|
||||
}
|
||||
const showDeleteConfirm = (role:any) => {
|
||||
console.log(role);
|
||||
|
||||
confirm({
|
||||
title: '系统提示',
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: `确定删除角色名称为${role.roleName}的数据吗`,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
handleClickDel(role);
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
};
|
||||
const del = async (roleId: number) => {
|
||||
try {
|
||||
let { code } = await delRoleAPI({ roleId })
|
||||
if (code === 1000) {
|
||||
console.log('del',valueSch);
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '操作成功',
|
||||
});
|
||||
getRoleData1({pageNum:count})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const setRoleData=async(role:any)=>{
|
||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
||||
thisrole=role
|
||||
try {
|
||||
let { code ,data} = await getRoleAPI(role)
|
||||
if (code === 1000) {
|
||||
console.log('role:',data);
|
||||
thisrole=data
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setOpen(true);
|
||||
}
|
||||
const columns: ColumnsType<DataType> = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'key',
|
||||
key: 'key',
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'roleName',
|
||||
key: 'roleName',
|
||||
},
|
||||
{
|
||||
title: '角色权限',
|
||||
dataIndex: 'roleKey',
|
||||
key: 'roleKey',
|
||||
},
|
||||
{
|
||||
title: '数据范围',
|
||||
key: 'dataScope',
|
||||
dataIndex: 'dataScope',
|
||||
render:(text)=>{
|
||||
switch(text){
|
||||
case '1':
|
||||
return <>所有数据权限</>
|
||||
case '2':
|
||||
return <>自定义数据权限</>
|
||||
case '3':
|
||||
return <>本部门数据权限</>
|
||||
default:
|
||||
return <>本部门及以下数据权限</>
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '显示顺序',
|
||||
key: 'roleSort',
|
||||
dataIndex: 'roleSort'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'state',
|
||||
dataIndex: 'state',
|
||||
render: (text) => (
|
||||
<>{
|
||||
text === '0'
|
||||
? <Tag color='processing'>
|
||||
正常
|
||||
</Tag>
|
||||
: <Tag color='processing'>
|
||||
停用
|
||||
</Tag>
|
||||
}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: '',
|
||||
dataIndex: '',
|
||||
render: (text) => (
|
||||
<>
|
||||
<Button type='link' onClick={() => setRoleData(text)} >{'修改'}</Button>
|
||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
||||
<Button type='link' danger onClick={()=>showDeleteConfirm(text)}>{'删除'}</Button>
|
||||
<Button type='link' >{'分配用户'}</Button>
|
||||
</>
|
||||
),
|
||||
}
|
||||
];
|
||||
let [data, setData] = useState<DataType[]>([])
|
||||
let [total, setTotal] = useState<number>(0)
|
||||
const getRoleData1 = async (queryParams: any) => {
|
||||
try {
|
||||
const { code, data } = await getRolesDataAPI(queryParams)
|
||||
if (code === 1000) {
|
||||
const sortData=data.rows.sort((a:DataType,b:DataType)=>parseInt(a.roleSort)-parseInt(b.roleSort))
|
||||
sortData.forEach((element: DataType, i: number) => {
|
||||
element.key = i + 1;
|
||||
});
|
||||
setData(sortData)
|
||||
setTotal(data.total)
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
let [count, setCount] = useState(1)
|
||||
const change = (page: number, pageSize: number) => {
|
||||
console.log(page, pageSize);
|
||||
queryParams={...queryParams,pageNum:page,pageSize}
|
||||
// setQueryParams({...queryParams,pageNum:page,pageSize})
|
||||
console.log(queryParams);
|
||||
getRoleData1(queryParams)
|
||||
setCount(page)
|
||||
}
|
||||
const [open, setOpen] = useState(false);
|
||||
const setDataapi=async(values:any)=>{
|
||||
try {
|
||||
console.log('ssssss',values);
|
||||
let {code}=await setRoleDataAPI(values)
|
||||
if(code===1000){
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '操作成功',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
const onCreate = (values: any) => {
|
||||
// values.menuIds=[]
|
||||
values={...thisrole,...values}
|
||||
console.log('Received values of form: ', values);
|
||||
setDataapi(values)
|
||||
getRoleData1({pageNum:count})
|
||||
setOpen(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
// setQueryParams({...queryParams,...valueSch})
|
||||
queryParams={...queryParams,...valueSch,pageNum:count}
|
||||
// setCount(1)
|
||||
getRoleData1(queryParams);
|
||||
// console.log(queryParams);
|
||||
}, [valueSch])
|
||||
return (
|
||||
|
||||
<div className='tablebox'>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
/>
|
||||
<Pagination
|
||||
style={{
|
||||
float: 'right'
|
||||
}}
|
||||
total={total}
|
||||
current={count}
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
onChange={(page, pageSize) => change(page, pageSize)}
|
||||
showTotal={(total) => `共 ${total} 条`}
|
||||
/>
|
||||
<CollectionCreateForm
|
||||
open={open}
|
||||
onCreate={onCreate}
|
||||
onCancel={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default RoleTable
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState ,useContext} from "react";
|
||||
import React, { useState ,useContext,createRef} from "react";
|
||||
import { Button, Input, Select, DatePicker, Space } from "antd";
|
||||
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
|
||||
import './index.scss'
|
||||
@@ -8,8 +8,18 @@ interface getValueType
|
||||
{
|
||||
getValue:(value:any)=>void
|
||||
}
|
||||
interface valueType {
|
||||
roleName: string | undefined,
|
||||
roleKey: string | undefined,
|
||||
state: string | undefined,
|
||||
startTime: string | undefined,
|
||||
endTime: string | undefined
|
||||
}
|
||||
const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
const { RangePicker } = DatePicker
|
||||
//时间值
|
||||
const [selectedDate, setSelectedDate]=useState([null,null])
|
||||
//搜索框内所有内容
|
||||
let [value, setValue] = useState<valueType>({
|
||||
roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
|
||||
})
|
||||
@@ -17,39 +27,27 @@ const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
console.log(value);
|
||||
getValue(value);
|
||||
}
|
||||
const onDateChange = (
|
||||
valueDate: DatePickerProps['value'] | RangePickerProps['value'],
|
||||
dateString: [string, string] | string,
|
||||
) => {
|
||||
|
||||
setValue({...value,startTime:dateString[0]+':00',endTime:dateString[1]+':00'})
|
||||
};
|
||||
const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
|
||||
console.log('onOk: ', value);
|
||||
};
|
||||
const handlClickSerachNew = () => {
|
||||
|
||||
const handleClickSerachNew = () => {
|
||||
value={
|
||||
roleName: undefined, roleKey: undefined, startTime: undefined, state: undefined,endTime:undefined
|
||||
}
|
||||
setValue(value)
|
||||
getValue(value)
|
||||
}
|
||||
// Filter `option.label` match the user type `input`
|
||||
const onDateChange = (
|
||||
valueDate: DatePickerProps['value'] | RangePickerProps['value'],
|
||||
dateString: [string, string] | string,
|
||||
) => {
|
||||
setValue({...value,startTime:dateString[0]+':00',endTime:dateString[1]+':00'})
|
||||
};
|
||||
// const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
|
||||
// console.log('onOk: ', value);
|
||||
// };
|
||||
const filterOption = (input: string, option?: { label: string; value: string }) =>
|
||||
(option?.label ?? '').toLowerCase().includes(input.toLowerCase());
|
||||
|
||||
interface valueType {
|
||||
roleName: string | undefined,
|
||||
roleKey: string | undefined,
|
||||
state: string | undefined,
|
||||
startTime: string | undefined,
|
||||
endTime: string | undefined
|
||||
}
|
||||
const onStateChange = (values: string) => {
|
||||
setValue({ ...value, state: values })
|
||||
// console.log(value);
|
||||
|
||||
};
|
||||
const onSearch = (value: string) => {
|
||||
console.log('search:', value);
|
||||
@@ -59,7 +57,9 @@ const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
<div className="ipt">
|
||||
<span>角色名称</span>
|
||||
<div className="item">
|
||||
<Input placeholder="请输入角色名称" value={value.roleName} onChange={(e) => {
|
||||
<Input placeholder="请输入角色名称"
|
||||
allowClear
|
||||
value={value.roleName} onChange={(e) => {
|
||||
setValue({ ...value, roleName: e.target.value })
|
||||
// console.log(value);
|
||||
|
||||
@@ -69,7 +69,7 @@ const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
<div className="ipt">
|
||||
<span>权限字符</span>
|
||||
<div className="item">
|
||||
<Input placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
|
||||
<Input allowClear placeholder="请输入权限字符" value={value.roleKey} onChange={(e) => {
|
||||
setValue({ ...value, roleKey: e.target.value })
|
||||
}} />
|
||||
</div>
|
||||
@@ -78,6 +78,8 @@ const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
<span>状态</span>
|
||||
<div className="item">
|
||||
<Select
|
||||
style={{flex:1,paddingRight:50+'px'}}
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="请选择角色状态"
|
||||
optionFilterProp="lable"
|
||||
@@ -100,19 +102,20 @@ const Serach:React.FC<getValueType>=({getValue})=>{
|
||||
</div>
|
||||
<div className="ipt">
|
||||
<span>登陆时间</span>
|
||||
<Space direction="vertical" size={12}>
|
||||
<Space direction="vertical" size={12} >
|
||||
<RangePicker
|
||||
|
||||
allowClear
|
||||
// value={[null,null]}
|
||||
showTime={{ format: 'HH:mm' }}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
onChange={onDateChange}
|
||||
onOk={onOk}
|
||||
// onOk={onOk}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<Button type="primary" onClick={() => handlClickSerach()}><SearchOutlined />搜索</Button>
|
||||
<Button onClick={() => handlClickSerachNew()}><SyncOutlined />重置</Button>
|
||||
<Button onClick={() => handleClickSerachNew()}><SyncOutlined />重置</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -3,4 +3,92 @@
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
.SearchBox{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ipt{
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
span{
|
||||
font-weight: 700;
|
||||
// line-height: 32px;
|
||||
padding-right: 12px;
|
||||
// color: #606266;
|
||||
}
|
||||
.item,input{
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
// width: 300px;
|
||||
margin-right: 40px;
|
||||
.ant-space-item{
|
||||
// margin-left: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
button{
|
||||
margin-right: 15px;
|
||||
}
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.tablebox{
|
||||
table{
|
||||
thead{
|
||||
th::before{
|
||||
|
||||
}
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#909399
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#606266
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-cell{
|
||||
button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
button:hover
|
||||
{
|
||||
border: 0px rgb(250, 250, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
.newadd{
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
.myTree{
|
||||
margin-top: 10px;
|
||||
border: 1px solid rgb(173, 131, 131);
|
||||
width: 250px;
|
||||
}
|
||||
.checkBox{
|
||||
margin-top: 5px;
|
||||
width: 250px;
|
||||
display: flex;
|
||||
label{
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,27 +1,737 @@
|
||||
import React ,{useState,createContext} from 'react'
|
||||
import RoleTable from './RoleTable';
|
||||
import Search from './Search'
|
||||
import './index.scss'
|
||||
import Newadd from './newadd'
|
||||
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>
|
||||
)
|
||||
import React, { useState, createContext, useEffect } from "react";
|
||||
import RoleTable from "./RoleTable";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Space,
|
||||
message,
|
||||
Table,
|
||||
Tag,
|
||||
Modal,
|
||||
Pagination,
|
||||
Form,
|
||||
Checkbox,
|
||||
InputNumber,
|
||||
Radio,
|
||||
Tree,
|
||||
ConfigProvider,
|
||||
} from "antd";
|
||||
import type { CheckboxChangeEvent } from "antd/es/checkbox";
|
||||
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import {
|
||||
SyncOutlined,
|
||||
SearchOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
import zh_CN from "antd/es/locale/zh_CN";
|
||||
// import 'moment/locale/zh-cn';
|
||||
import "./index.scss";
|
||||
import {
|
||||
getRolesDataAPI,
|
||||
delRoleAPI,
|
||||
getRoleAPI,
|
||||
addRoleAPI,
|
||||
setRoleDataAPI,
|
||||
getMenuLiseAPI,
|
||||
} from "../../../api/system/role";
|
||||
import { useForm } from "antd/es/form/Form";
|
||||
interface getSearchValueType {
|
||||
getSearchValue: (value: any) => void;
|
||||
}
|
||||
type FieldType = {
|
||||
username?: string;
|
||||
password?: string;
|
||||
remember?: string;
|
||||
};
|
||||
interface Values {
|
||||
title: string;
|
||||
description: string;
|
||||
modifier: string;
|
||||
}
|
||||
interface searchValueType {
|
||||
roleName: string | undefined;
|
||||
roleKey: string | undefined;
|
||||
state: string | undefined;
|
||||
startTime: string | undefined;
|
||||
endTime: string | undefined;
|
||||
}
|
||||
//表格单项数据类型
|
||||
interface TableDataType {
|
||||
createTime: string;
|
||||
dataScope: string;
|
||||
deptIds: any[];
|
||||
menuIds: any[];
|
||||
roleId: number;
|
||||
roleKey: string;
|
||||
roleName: string;
|
||||
roleSort: string;
|
||||
state: string;
|
||||
updateTime: string;
|
||||
key?: number;
|
||||
total?: number;
|
||||
}
|
||||
//当前选择的角色信息
|
||||
const fieldNames = {
|
||||
title: "menuName",
|
||||
key: "menuId",
|
||||
children: "children",
|
||||
};
|
||||
let thisrole: any = {};
|
||||
let treeIds:number[]=[]
|
||||
export default function Role() {
|
||||
const { confirm } = Modal;
|
||||
const { RangePicker } = DatePicker;
|
||||
//时间值
|
||||
const [selectedDate, setSelectedDate] = useState([null, null]);
|
||||
//提示组件
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
//搜索框内所有内容
|
||||
let [searchValue, setSearchValue] = useState<searchValueType>({
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
startTime: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
});
|
||||
//树列表数据
|
||||
const [menuTreeData, setMenuTreeData] = useState([]);
|
||||
//父子联动
|
||||
const [checkStrictly,setCheckStrictly]=useState(false)
|
||||
//树所有节点IDs
|
||||
//树是否自动展开
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
const onExpand = (expandedKeysValue: React.Key[]) => {
|
||||
// console.log("onExpand", expandedKeysValue);
|
||||
setExpandedKeys(expandedKeysValue);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
const onCheckExpand = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
console.log(treeIds);
|
||||
if(e.target.checked) setExpandedKeys(treeIds)
|
||||
else setExpandedKeys([])
|
||||
console.log(expandedKeys);
|
||||
|
||||
};
|
||||
const onCheckAll = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
if(e.target.checked) setCheckedKeys(treeIds)
|
||||
else setCheckedKeys([])
|
||||
};
|
||||
const onCheckFaSon = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
setCheckStrictly(!e.target.checked)
|
||||
};
|
||||
const onCheck = (checkedKeysValue: any) => {
|
||||
console.log("onCheck", checkedKeysValue.checked);
|
||||
console.log("onCheck", checkedKeysValue);
|
||||
if(checkStrictly===false){
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue });
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
}
|
||||
else{
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue.checked });
|
||||
setCheckedKeys(checkedKeysValue.checked);
|
||||
}
|
||||
};
|
||||
const onSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
console.log("onSelect", info);
|
||||
// setExpandedKeys([...expandedKeys,...selectedKeysValue])
|
||||
setSelectedKeys(selectedKeysValue);
|
||||
};
|
||||
//Modal
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalTitle, setModalTitle] = useState("");
|
||||
//表单区域
|
||||
const [form] = Form.useForm();
|
||||
//当前页面页数
|
||||
let [count, setCount] = useState(1);
|
||||
//表格内数据
|
||||
let [tableData, setTableData] = useState<TableDataType[]>([]);
|
||||
//表格数据总条数
|
||||
let [total, setTotal] = useState<number>(0);
|
||||
//表格格式
|
||||
const columns: ColumnsType<TableDataType> = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "key",
|
||||
key: "key",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
dataIndex: "roleName",
|
||||
key: "roleName",
|
||||
},
|
||||
{
|
||||
title: "角色权限",
|
||||
dataIndex: "roleKey",
|
||||
key: "roleKey",
|
||||
},
|
||||
{
|
||||
title: "数据范围",
|
||||
key: "dataScope",
|
||||
dataIndex: "dataScope",
|
||||
render: (text) => {
|
||||
switch (text) {
|
||||
case "1":
|
||||
return <>所有数据权限</>;
|
||||
case "2":
|
||||
return <>自定义数据权限</>;
|
||||
case "3":
|
||||
return <>本部门数据权限</>;
|
||||
default:
|
||||
return <>本部门及以下数据权限</>;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "显示顺序",
|
||||
key: "roleSort",
|
||||
dataIndex: "roleSort",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="success">正常</Tag>
|
||||
) : (
|
||||
<Tag color="error">停用</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "",
|
||||
dataIndex: "",
|
||||
render: (text) => (
|
||||
<>
|
||||
<Button type="link" onClick={() => handleEdit(text)}>
|
||||
{"修改"}
|
||||
</Button>
|
||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
||||
<Button type="link" danger onClick={() => handleClickDelete(text)}>
|
||||
{"删除"}
|
||||
</Button>
|
||||
<Button type="link">{"分配用户"}</Button>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
//请求表格内容参数
|
||||
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
|
||||
roleKey: undefined,
|
||||
roleName: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
startTime: undefined,
|
||||
pageNum: undefined,
|
||||
pageSize: undefined,
|
||||
});
|
||||
//当前角色的数据
|
||||
|
||||
// let thisrole: any = {roleId:'s'};
|
||||
const handleEdit = async (role: any) => {
|
||||
await getRoleData(role);
|
||||
setModalTitle("修改角色");
|
||||
|
||||
// setCheckedKeys(role)
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const handleClickDelete = (role: any) => {
|
||||
console.log(role);
|
||||
confirm({
|
||||
title: "系统提示",
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: `确定删除角色名称为${role.roleName}的数据吗`,
|
||||
okText: "确定",
|
||||
okType: "danger",
|
||||
cancelText: "取消",
|
||||
onOk() {
|
||||
handleClickDel(role);
|
||||
},
|
||||
onCancel() {
|
||||
console.log("Cancel");
|
||||
},
|
||||
});
|
||||
};
|
||||
const handlClickSerach = () => {
|
||||
console.log("搜索框", searchValue);
|
||||
setSearchValue({ ...searchValue });
|
||||
count = 1;
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
};
|
||||
const handleClickSerachNew = () => {
|
||||
searchValue = {
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
startTime: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
};
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
setSearchValue({ ...searchValue });
|
||||
// setCount(1)
|
||||
};
|
||||
const onDateChange = (
|
||||
valueDate: DatePickerProps["value"] | RangePickerProps["value"],
|
||||
dateString: [string, string] | string
|
||||
) => {
|
||||
searchValue.startTime = dateString[0];
|
||||
searchValue.endTime = dateString[1];
|
||||
console.log("time:", searchValue.endTime, searchValue.startTime);
|
||||
// setSearchValue({ ...searchValue })
|
||||
};
|
||||
const onDataChangeOk = (
|
||||
value: DatePickerProps["value"] | RangePickerProps["value"]
|
||||
) => {
|
||||
console.log("onOk: ", value);
|
||||
};
|
||||
const filterOption = (
|
||||
input: string,
|
||||
option?: { label: string; value: string }
|
||||
) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
|
||||
const onStateChange = (value: string) => {
|
||||
searchValue.state = value;
|
||||
// setSearchValue({ ...searchValue, state: value })
|
||||
// searchValue.state = values
|
||||
// console.log(value);
|
||||
};
|
||||
const onSearch = (value: string) => {
|
||||
console.log("search:", value);
|
||||
};
|
||||
//表格函数
|
||||
//从服务器获取数据
|
||||
|
||||
//Modal区域
|
||||
const handleModalOk = () => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
// form.resetFields();
|
||||
console.log("add", values);
|
||||
// onCreate(values);
|
||||
// setSelectedKeys([])
|
||||
// setIsModalOpen(false);
|
||||
if (modalTitle == "新增角色") {
|
||||
console.log(values);
|
||||
|
||||
console.log("add2", { ...values, menuIds: checkedKeys });
|
||||
|
||||
postAdd({ ...values, menuIds: checkedKeys });
|
||||
} else if (modalTitle == "修改角色") {
|
||||
console.log(thisrole);
|
||||
console.log(checkedKeys);
|
||||
console.log("now", { ...thisrole, ...values, menuIds: checkedKeys });
|
||||
// console.log({ ...thisrole, ...values,menuIds:setCheckedKeys });
|
||||
thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
|
||||
editRoleData({ ...thisrole });
|
||||
}
|
||||
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log("Validate Failed:", info);
|
||||
});
|
||||
|
||||
console.log("modal thisrole", thisrole);
|
||||
};
|
||||
const handleModalCanle = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
//新增
|
||||
const handleNewAdd = () => {
|
||||
setModalTitle("新增角色");
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
roleSort: "0",
|
||||
});
|
||||
|
||||
setCheckedKeys([]);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
//页码改变
|
||||
const pageChange = (page: number, pageSize: number) => {
|
||||
console.log(page, pageSize);
|
||||
queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
|
||||
// setQueryParams({...queryParams,pageNum:page,pageSize})
|
||||
console.log(queryTableDataParams);
|
||||
getRolesData(queryTableDataParams);
|
||||
setCount(page);
|
||||
};
|
||||
//删除单项
|
||||
const handleClickDel = (role: TableDataType) => {
|
||||
console.log(role);
|
||||
let { roleId } = role;
|
||||
del(roleId);
|
||||
};
|
||||
//遍历菜单树获取所有节点ID
|
||||
const getTreeIds=function(tree:any){
|
||||
// console.log('Ids:',tree);
|
||||
tree.forEach((item:any) => {
|
||||
// console.log(item);
|
||||
treeIds.push(item.menuId)
|
||||
if(item.children!=null) getTreeIds(item.children)
|
||||
});
|
||||
}
|
||||
//获取单个角色详细信息
|
||||
const getRoleData = async (role: any) => {
|
||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
||||
// thisrole=role
|
||||
try {
|
||||
let { code, data } = await getRoleAPI(role);
|
||||
if (code === 1000) {
|
||||
console.log("role:", data);
|
||||
thisrole = data;
|
||||
console.log("thisrole", thisrole);
|
||||
form.setFieldsValue(thisrole);
|
||||
setCheckedKeys(data.menuIds);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
// setOpen(true);
|
||||
};
|
||||
//获取菜单权限树
|
||||
const getMenuList = async () => {
|
||||
try {
|
||||
let menul = await getMenuLiseAPI();
|
||||
console.log("tree", menul.data);
|
||||
if(treeIds.length==0) getTreeIds(menul.data)
|
||||
console.log(treeIds);
|
||||
setMenuTreeData(menul.data);
|
||||
// treeData = menul.data
|
||||
// setMenulist(menul.data)
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
//新增请求
|
||||
const postAdd = async (value: any) => {
|
||||
try {
|
||||
let { code } = await addRoleAPI(value);
|
||||
console.log(code);
|
||||
|
||||
if (code === 1000) {
|
||||
console.log("success");
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
});
|
||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
||||
setIsModalOpen(false);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "角色名称已存在",
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
const getRolesData = async (queryTableDataParams: any) => {
|
||||
console.log("参数:", queryTableDataParams);
|
||||
try {
|
||||
const { code, data } = await getRolesDataAPI(queryTableDataParams);
|
||||
if (code === 1000) {
|
||||
const sortData = data.rows.sort(
|
||||
(a: TableDataType, b: TableDataType) =>
|
||||
parseInt(a.roleSort) - parseInt(b.roleSort)
|
||||
);
|
||||
sortData.forEach((element: TableDataType, i: number) => {
|
||||
element.key = i + 1;
|
||||
});
|
||||
setTableData(sortData);
|
||||
setTotal(data.total);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.log("555", err);
|
||||
}
|
||||
};
|
||||
//服务器删除角色
|
||||
const del = async (roleId: number) => {
|
||||
try {
|
||||
let { code } = await delRoleAPI({ roleId });
|
||||
if (code === 1000) {
|
||||
console.log("del", roleId);
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
getRolesData({ pageNum: count });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
//修改角色信息
|
||||
const editRoleData = async (role: any) => {
|
||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
||||
// thisrole = role;
|
||||
// console.log(thisrole);
|
||||
console.log(role);
|
||||
try {
|
||||
let { code, data } = await setRoleDataAPI(thisrole);
|
||||
// let a = await setRoleDataAPI(role);
|
||||
if (code === 1000) {
|
||||
thisrole = { ...thisrole, ...data };
|
||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
setIsModalOpen(false);
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "角色名称已存在！",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统未知错误",
|
||||
});
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
// setQueryParams({...queryParams,...valueSch})
|
||||
queryTableDataParams = {
|
||||
...queryTableDataParams,
|
||||
...searchValue,
|
||||
pageNum: count,
|
||||
};
|
||||
// setCount(1)
|
||||
getRolesData(queryTableDataParams);
|
||||
// console.log(queryParams);
|
||||
}, [queryTableDataParams]);
|
||||
useEffect(() => {
|
||||
getMenuList();
|
||||
}, []);
|
||||
return (
|
||||
<ConfigProvider locale={zh_CN}>
|
||||
<div className="roleBox">
|
||||
<div className="SearchBox">
|
||||
<div className="ipt">
|
||||
<span>角色名称</span>
|
||||
<div className="item">
|
||||
<Input
|
||||
placeholder="请输入角色名称"
|
||||
allowClear
|
||||
value={searchValue.roleName}
|
||||
onChange={(e) => {
|
||||
setSearchValue({ ...searchValue, roleName: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ipt">
|
||||
<span>权限字符</span>
|
||||
<div className="item">
|
||||
<Input
|
||||
allowClear
|
||||
placeholder="请输入权限字符"
|
||||
value={searchValue.roleKey}
|
||||
onChange={(e) => {
|
||||
setSearchValue({ ...searchValue, roleKey: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ipt">
|
||||
<span>状态</span>
|
||||
<div className="item">
|
||||
<Select
|
||||
style={{ width: 100 + "%" }}
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="请选择角色状态"
|
||||
optionFilterProp="lable"
|
||||
onChange={onStateChange}
|
||||
onSearch={onSearch}
|
||||
filterOption={filterOption}
|
||||
value={searchValue.state}
|
||||
options={[
|
||||
{
|
||||
value: "0",
|
||||
label: "正常",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "停用",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ipt">
|
||||
<span>登陆时间</span>
|
||||
<div className="item">
|
||||
<Space direction="vertical" size={12}>
|
||||
<RangePicker
|
||||
// allowClear
|
||||
// value={[null,null]}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={onDateChange}
|
||||
onOk={onDataChangeOk}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<Button type="primary" onClick={() => handlClickSerach()}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
<Button onClick={() => handleClickSerachNew()}>
|
||||
<SyncOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 新增 */}
|
||||
<div className="newadd">
|
||||
<Button type="primary" onClick={handleNewAdd}>
|
||||
+新增
|
||||
</Button>
|
||||
</div>
|
||||
{/* 弹出 */}
|
||||
<Modal
|
||||
open={isModalOpen}
|
||||
title={modalTitle}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
onCancel={handleModalCanle}
|
||||
onOk={handleModalOk}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
name="form_in_modal"
|
||||
initialValues={{ dataScope: "1", state: "0" }}
|
||||
>
|
||||
<Form.Item
|
||||
name="roleName"
|
||||
label="角色名称"
|
||||
rules={[{ required: true, message: "请输入角色名称" }]}
|
||||
>
|
||||
<Input placeholder="请输入角色名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="roleKey"
|
||||
label="角色权限"
|
||||
rules={[{ required: true, message: "请输入角色权限" }]}
|
||||
>
|
||||
<Input placeholder="请输入角色权限" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
required
|
||||
name="roleSort"
|
||||
label="显示顺序"
|
||||
rules={[{ required: true, message: "请输入角色显示顺序" }]}
|
||||
>
|
||||
<InputNumber min={0} max={10} controls={true} />
|
||||
</Form.Item>
|
||||
<Form.Item name="dataScope" label="数据范围">
|
||||
<Radio.Group>
|
||||
<Radio value="1" defaultChecked={true}>
|
||||
所有数据权限
|
||||
</Radio>
|
||||
<Radio value="2">自定义数据权限</Radio>
|
||||
<Radio value="3">本部门数据权限</Radio>
|
||||
<Radio value="4">本部门及以下数据权限</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="state"
|
||||
label="状态"
|
||||
className="collection-create-form_last-form-item"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio defaultChecked={true} value="0">
|
||||
正常
|
||||
</Radio>
|
||||
<Radio value="1">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="menuIds"
|
||||
label="菜单权限"
|
||||
className="collection-create-form_last-form-item"
|
||||
>
|
||||
{/* <input type="text" /> */}
|
||||
<div className="checkBox">
|
||||
<Checkbox onChange={onCheckExpand}>展开</Checkbox>
|
||||
<Checkbox onChange={onCheckAll}>全选</Checkbox>
|
||||
<Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
|
||||
</div>
|
||||
<div className="myTree">
|
||||
<Tree
|
||||
fieldNames={fieldNames}
|
||||
checkable
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={true}
|
||||
onCheck={onCheck}
|
||||
checkedKeys={checkedKeys}
|
||||
checkStrictly={checkStrictly}
|
||||
onSelect={onSelect}
|
||||
selectedKeys={selectedKeys}
|
||||
treeData={menuTreeData}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
{/* 表格 */}
|
||||
<div className="tablebox">
|
||||
{contextHolder}
|
||||
<Table columns={columns} dataSource={tableData} pagination={false} />
|
||||
<Pagination
|
||||
style={{
|
||||
float: "right",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
total={total}
|
||||
current={count}
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
onChange={(page, pageSize) => pageChange(page, pageSize)}
|
||||
showTotal={(total) => `共 ${total} 条`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button, Form, Input, Modal, Radio, Tree,InputNumber, message } from 'antd';
|
||||
import { Button, Form, Input, Modal, Radio, Tree, InputNumber, message } from 'antd';
|
||||
import { SyncOutlined } from '@ant-design/icons'
|
||||
import './index.scss'
|
||||
import { getMenuLiseAPI,addRoleAPI } from '../../../../api/system/role'
|
||||
import { getMenuLiseAPI, addRoleAPI } from '../../../../api/system/role'
|
||||
import type { DataNode } from 'antd/es/tree'
|
||||
import { Value } from 'sass';
|
||||
interface Values {
|
||||
@@ -10,7 +10,6 @@ interface Values {
|
||||
description: string;
|
||||
modifier: string;
|
||||
}
|
||||
|
||||
interface CollectionCreateFormProps {
|
||||
open: boolean;
|
||||
onCreate: (values: Values) => void;
|
||||
@@ -19,7 +18,7 @@ interface CollectionCreateFormProps {
|
||||
const fieldNames = {
|
||||
key: 'menuId',
|
||||
title: 'menuName',
|
||||
value:'menuId',
|
||||
value: 'menuId',
|
||||
children: 'children'
|
||||
}
|
||||
let treeData: any = [];
|
||||
@@ -48,14 +47,12 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
|
||||
const onExpand = (expandedKeysValue: React.Key[]) => {
|
||||
console.log('onExpand', expandedKeysValue);
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
setExpandedKeys(expandedKeysValue);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
const onCheck = (checkedKeysValue: any) => {
|
||||
console.log('onCheck', checkedKeysValue);
|
||||
form.setFieldsValue({menuIds:checkedKeysValue})
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue })
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
};
|
||||
|
||||
@@ -69,7 +66,6 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
getMenuList()
|
||||
// setSelectedKeys([])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
@@ -94,21 +90,21 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
name="form_in_modal"
|
||||
initialValues={ {dataScope:"1",state:"0"} }
|
||||
initialValues={{ dataScope: "1", state: "0" }}
|
||||
>
|
||||
<Form.Item
|
||||
name="roleName"
|
||||
label="角色名称"
|
||||
rules={[{ required: true, message: '请输入角色名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入角色名称"/>
|
||||
<Input placeholder="请输入角色名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="roleKey"
|
||||
label="角色权限"
|
||||
rules={[{ required: true, message: '请输入角色权限' }]}
|
||||
>
|
||||
<Input placeholder="请输入角色权限"/>
|
||||
<Input placeholder="请输入角色权限" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item required name="roleSort" label="显示顺序">
|
||||
@@ -148,18 +144,22 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const Newadd: React.FC= () => {
|
||||
const [messageApi,contextHolder]=message.useMessage();
|
||||
const Newadd: React.FC = () => {
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [open, setOpen] = useState(false);
|
||||
const postAdd=async(value:any)=>{
|
||||
const postAdd = async (value: any) => {
|
||||
try {
|
||||
let {code}=await addRoleAPI(value);
|
||||
let { code } = await addRoleAPI(value);
|
||||
console.log(code);
|
||||
|
||||
if(code===1000){
|
||||
if (code === 1000) {
|
||||
console.log('success');
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '操作成功',
|
||||
});
|
||||
}
|
||||
else if(code===2000){
|
||||
else if (code === 2000) {
|
||||
console.log('重名');
|
||||
|
||||
}
|
||||
@@ -170,10 +170,7 @@ const Newadd: React.FC= () => {
|
||||
const onCreate = (values: any) => {
|
||||
// values.menuIds=[]
|
||||
console.log('Received values of form: ', values);
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '操作成功',
|
||||
});
|
||||
|
||||
postAdd(values)
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user