odjbin/fateverse-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug基本修复，还有一个日期重置暂时没有解决

Browse Source
This commit is contained in:
Lhk0001
2023-10-27 19:47:56 +08:00
parent d1b1b2b225
commit c8f4f5e21a
11 changed files with 98 additions and 1303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"antd": "^5.7.3", "antd": "^5.7.3",
"axios": "^1.4.0", "axios": "^1.4.0",
"babel-plugin-import": "^1.13.8", "babel-plugin-import": "^1.13.8",
"dayjs": "^1.11.10",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
@@ -1804,9 +1805,9 @@
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
}, },
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.9", "version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz", "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==" "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
}, },
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
@@ -5472,9 +5473,9 @@
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
}, },
"dayjs": { "dayjs": {
"version": "1.11.9", "version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz", "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==" "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
}, },
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",

1
package.json
View File

@@ -15,6 +15,7 @@
"antd": "^5.7.3", "antd": "^5.7.3",
"axios": "^1.4.0", "axios": "^1.4.0",
"babel-plugin-import": "^1.13.8", "babel-plugin-import": "^1.13.8",
"dayjs": "^1.11.10",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",

4
src/api/system/role.ts
View File

@@ -34,7 +34,7 @@ export const getRolesDataAPI = (params: paramsType) => {
} }
export const delRoleAPI = (params: paramsType) => { export const delRoleAPI = (params: paramsType) => {
let { roleId } = params let { roleId } = params
console.log(roleId); // console.log(roleId);
return request({ return request({
url: `/admin/role/${roleId}`, url: `/admin/role/${roleId}`,
@@ -50,7 +50,7 @@ export const getMenuLiseAPI = () => {
}) })
} }
export const addRoleAPI = (data:any) => { export const addRoleAPI = (data:any) => {
console.log('addAPI',data); // console.log('addAPI',data);
return request({ return request({
url: `/admin/role`, url: `/admin/role`,
method: 'post', method: 'post',

35
src/view/system/role/RoleTable/index.scss
View File

@@ -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);
}
}
}

410
src/view/system/role/RoleTable/index.tsx
View File

@@ -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

411
src/view/system/role/RoleTable/index备份.tsx
View File

@@ -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

28
src/view/system/role/Search/index.scss
View File

@@ -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;
}
}

124
src/view/system/role/Search/index.tsx
View File

@@ -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

170
src/view/system/role/index.tsx
View File

@@ -1,5 +1,4 @@
import React, { useState, createContext, useEffect } from "react"; import React, { useState, createContext, useEffect } from "react";
import RoleTable from "./RoleTable";
import { import {
Button, Button,
Input, Input,
@@ -27,6 +26,9 @@ import {
ExclamationCircleFilled, ExclamationCircleFilled,
} from "@ant-design/icons"; } from "@ant-design/icons";
import zh_CN from "antd/es/locale/zh_CN"; 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 'moment/locale/zh-cn';
import "./index.scss"; import "./index.scss";
import { import {
@@ -81,11 +83,12 @@ const fieldNames = {
}; };
let thisrole: any = {}; let thisrole: any = {};
let treeIds:number[]=[] let treeIds:number[]=[]
// const Dayjs=dayjs.Dayjs
export default function Role() { export default function Role() {
const { confirm } = Modal; const { confirm } = Modal;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
//时间值 //时间值
const [selectedDate, setSelectedDate] = useState([null, null]); const [selectedDate, setSelectedDate] = useState<[Date:null,Date:null]>([null,null]);
//提示组件 //提示组件
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
//搜索框内所有内容 //搜索框内所有内容
@@ -106,45 +109,6 @@ export default function Role() {
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]); const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]); const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); 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 //Modal
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [modalTitle, setModalTitle] = useState(""); const [modalTitle, setModalTitle] = useState("");
@@ -224,7 +188,7 @@ export default function Role() {
{"修改"} {"修改"}
</Button> </Button>
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</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>
<Button type="link">{"分配用户"}</Button> <Button type="link">{"分配用户"}</Button>
@@ -242,17 +206,55 @@ export default function Role() {
pageNum: undefined, pageNum: undefined,
pageSize: 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'}; // let thisrole: any = {roleId:'s'};
const handleEdit = async (role: any) => { const handleEdit = async (role: any) => {
await getRoleData(role); await getRoleData(role);
setModalTitle("修改角色"); setModalTitle("修改角色");
// setCheckedKeys(role) // setCheckedKeys(role)
setIsModalOpen(true); setIsModalOpen(true);
}; };
const handleClickDelete = (role: any) => { const handleDelete = (role: any) => {
console.log(role); console.log(role);
confirm({ confirm({
title: "系统提示", title: "系统提示",
@@ -269,13 +271,13 @@ export default function Role() {
}, },
}); });
}; };
const handlClickSerach = () => { const handleSerach = () => {
console.log("搜索框", searchValue); console.log("搜索框", searchValue);
setSearchValue({ ...searchValue }); setSearchValue({ ...searchValue });
count = 1; count = 1;
setQueryTableDataParams({ ...searchValue }); setQueryTableDataParams({ ...searchValue });
}; };
const handleClickSerachNew = () => { const handleSerachNew = () => {
searchValue = { searchValue = {
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
@@ -287,36 +289,6 @@ export default function Role() {
setSearchValue({ ...searchValue }); setSearchValue({ ...searchValue });
// setCount(1) // 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区域 //Modal区域
const handleModalOk = () => { const handleModalOk = () => {
form form
@@ -366,6 +338,39 @@ export default function Role() {
setCheckedKeys([]); setCheckedKeys([]);
setIsModalOpen(true); 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) => { const pageChange = (page: number, pageSize: number) => {
console.log(page, pageSize); console.log(page, pageSize);
@@ -571,7 +576,7 @@ export default function Role() {
<span>状态</span> <span>状态</span>
<div className="item"> <div className="item">
<Select <Select
style={{ width: 100 + "%" }} style={{ width:300+'px' }}
allowClear allowClear
showSearch showSearch
placeholder="请选择角色状态" placeholder="请选择角色状态"
@@ -598,6 +603,7 @@ export default function Role() {
<div className="item"> <div className="item">
<Space direction="vertical" size={12}> <Space direction="vertical" size={12}>
<RangePicker <RangePicker
locale={dataLocale}
// allowClear // allowClear
// value={[null,null]} // value={[null,null]}
showTime showTime
@@ -609,11 +615,11 @@ export default function Role() {
</div> </div>
</div> </div>
<div className="btn"> <div className="btn">
<Button type="primary" onClick={() => handlClickSerach()}> <Button type="primary" onClick={() => handleSerach()}>
<SearchOutlined /> <SearchOutlined />
搜索 搜索
</Button> </Button>
<Button onClick={() => handleClickSerachNew()}> <Button onClick={() => handleSerachNew()}>
<SyncOutlined /> <SyncOutlined />
重置 重置
</Button> </Button>
@@ -700,13 +706,13 @@ export default function Role() {
<Tree <Tree
fieldNames={fieldNames} fieldNames={fieldNames}
checkable checkable
onExpand={onExpand} onExpand={onTreeExpand}
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
autoExpandParent={true} autoExpandParent={true}
onCheck={onCheck} onCheck={onTreeCheck}
checkedKeys={checkedKeys} checkedKeys={checkedKeys}
checkStrictly={checkStrictly} checkStrictly={checkStrictly}
onSelect={onSelect} onSelect={onTreeSelect}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
treeData={menuTreeData} treeData={menuTreeData}
/> />

5
src/view/system/role/newadd/index.scss
View File

@@ -1,5 +0,0 @@
.newadd{
width: 60px;
height: 40px;
margin-top: 15px;
}

200
src/view/system/role/newadd/index.tsx
View File

@@ -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;