refactor: 重构配置模块
This commit is contained in:
@@ -1,194 +1,171 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {
|
||||
Card,
|
||||
Table,
|
||||
Typography,
|
||||
TableColumnProps,
|
||||
PaginationProps,
|
||||
Button,
|
||||
Popconfirm,
|
||||
Divider,
|
||||
Space,
|
||||
Message, Badge
|
||||
Button,
|
||||
Card,
|
||||
Message,
|
||||
PaginationProps,
|
||||
Table,
|
||||
TableColumnProps,
|
||||
Typography
|
||||
} from '@arco-design/web-react';
|
||||
import { useQuery } from 'react-query';
|
||||
import {useHistory} from "react-router";
|
||||
import {useQuery} from 'react-query';
|
||||
import Form from './form';
|
||||
import { deleteRole, getRole } from '@/api/role';
|
||||
import GrantPerm from './grantPerm';
|
||||
import {IconPlus} from '@arco-design/web-react/icon';
|
||||
import {getColumns, TableOptions} from './constants';
|
||||
import {getRole,deleteRole} from "@/api/role";
|
||||
import GrantRolesForm from "./grantPerm";
|
||||
import SearchForm from "./searchForm";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
function ConfigManage() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [record, setRecord] = useState(null);
|
||||
const [visibleGrantPerm, setVisibleGrantPerm] = useState(null);
|
||||
const {Title} = Typography;
|
||||
|
||||
const columns: TableColumnProps[] = [
|
||||
{
|
||||
title: '角色id',
|
||||
dataIndex: 'id',
|
||||
render: (value) => <Text copyable>{value}</Text>,
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
render: (value) => <Text copyable>{value}</Text>,
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
render: (x) => {
|
||||
if (x === 0) {
|
||||
return <Badge status="error" text="禁用中"></Badge>;
|
||||
}
|
||||
return <Badge status="success" text="启用中"></Badge>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
width: '20%',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<Button onClick={() => showModal(record)} type="text" status="default">更新</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button onClick={() => showGrantPerm(record)} type="text" status="default">分配权限</Button>
|
||||
<Divider type="vertical" />
|
||||
<Popconfirm
|
||||
focusLock
|
||||
title="删除数据"
|
||||
content="确认删除该条数据吗?"
|
||||
onOk={() => onDelete(record)}
|
||||
>
|
||||
<Button type="text" status="danger">删除</Button>
|
||||
</Popconfirm>
|
||||
function UserManage() {
|
||||
const reactQueryKey = useHistory().location.pathname
|
||||
|
||||
</>
|
||||
),
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [visibleAssignRoles, setVisibleAssignRoles] = useState(false);
|
||||
const [record, setRecord] = useState(null);
|
||||
const [pagination, setPagination] = useState<PaginationProps>({
|
||||
sizeCanChange: true,
|
||||
showTotal: true,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
pageSizeChangeResetCurrent: true,
|
||||
total: 0
|
||||
});
|
||||
|
||||
const [pagination, setPagination] = useState<PaginationProps>({
|
||||
sizeCanChange: true,
|
||||
showTotal: true,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
pageSizeChangeResetCurrent: true,
|
||||
total: 0
|
||||
});
|
||||
const [searchQuery, setSearchQuery] = useState<Record<string, any>>({
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
});
|
||||
|
||||
const onDelete = async ({ id }) => {
|
||||
await deleteRole(id);
|
||||
Message.success('删除成功！');
|
||||
await refetch();
|
||||
};
|
||||
const showAssignRolesModal = (payload) => {
|
||||
setRecord(payload);
|
||||
setVisibleAssignRoles(true);
|
||||
};
|
||||
|
||||
const onChangeTable = async ({ current, pageSize }) => {
|
||||
setPagination({
|
||||
...pagination,
|
||||
current,
|
||||
pageSize
|
||||
});
|
||||
};
|
||||
const showModal = (payload?) => {
|
||||
payload && setRecord(payload);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const fetchData = async ({ queryKey }) => {
|
||||
const [, { page, pageSize }] = queryKey;
|
||||
const { data } = await getRole({ page, pageSize });
|
||||
setPagination(prevState => {
|
||||
prevState.total = data.count;
|
||||
return prevState;
|
||||
});
|
||||
if (page > 1 && data.list.length === 0) {
|
||||
setPagination({
|
||||
...pagination,
|
||||
current: page - 1
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const onDelete = async ({id}) => {
|
||||
await deleteRole(id);
|
||||
Message.success('删除成功！');
|
||||
await refetch();
|
||||
};
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
isFetching,
|
||||
refetch
|
||||
} = useQuery(
|
||||
['role', { page: pagination.current, pageSize: pagination.pageSize }],
|
||||
fetchData,
|
||||
{
|
||||
refetchOnWindowFocus: false,
|
||||
keepPreviousData: true
|
||||
});
|
||||
const tableCallback = async (type: TableOptions, record: any) => {
|
||||
switch (type) {
|
||||
case TableOptions.EDIT:
|
||||
showModal(record)
|
||||
break;
|
||||
case TableOptions.DELETE:
|
||||
await onDelete(record);
|
||||
break
|
||||
case TableOptions.ASSIGN_PERMISSION:
|
||||
showAssignRolesModal(record);
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const showModal = (payload?) => {
|
||||
payload && setRecord(payload);
|
||||
setVisible(true);
|
||||
};
|
||||
const columns: TableColumnProps[] = getColumns(tableCallback)
|
||||
|
||||
const showGrantPerm = (payload) => {
|
||||
setRecord(payload);
|
||||
setVisibleGrantPerm(true);
|
||||
};
|
||||
const handleSearch = async (params) => {
|
||||
setSearchQuery(prev => ({...prev, page: 1, ...params}))
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
handleCancel()
|
||||
await refetch();
|
||||
};
|
||||
const onChangeTable = async ({current, pageSize}) => {
|
||||
setSearchQuery(prev => ({...prev, page: current, pageSize}));
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setRecord(null);
|
||||
setVisible(false);
|
||||
setVisibleGrantPerm(false)
|
||||
};
|
||||
const fetchData = async ({queryKey}) => {
|
||||
const [, params] = queryKey;
|
||||
const {data} = await getRole(params);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
total: data.count
|
||||
}))
|
||||
// 当前列表不存在数据回退1页
|
||||
if (params.page > 1 && data.list.length === 0) {
|
||||
setSearchQuery({
|
||||
...searchQuery,
|
||||
page: params.page - 1
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<Form
|
||||
handleConfirm={handleConfirm}
|
||||
handleCancel={handleCancel}
|
||||
visible={visible}
|
||||
record={record}
|
||||
/>
|
||||
const {data, isLoading, isFetching, refetch} = useQuery(
|
||||
[reactQueryKey, {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
...searchQuery
|
||||
}],
|
||||
fetchData);
|
||||
|
||||
<GrantPerm
|
||||
handleConfirm={handleConfirm}
|
||||
handleCancel={handleCancel}
|
||||
visible={visibleGrantPerm}
|
||||
record={record}
|
||||
/>
|
||||
const handleConfirm = async () => {
|
||||
setRecord(null);
|
||||
setVisible(false);
|
||||
setVisibleAssignRoles(false);
|
||||
await refetch();
|
||||
};
|
||||
|
||||
<Title heading={6}>角色管理</Title>
|
||||
const handleCancel = () => {
|
||||
setRecord(null);
|
||||
setVisible(false);
|
||||
setVisibleAssignRoles(false);
|
||||
};
|
||||
|
||||
<Space style={{ marginBottom: 12 }}>
|
||||
<Button type="primary" onClick={() => showModal()}>创建角色</Button>
|
||||
</Space>
|
||||
useEffect(() => {
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
current: searchQuery.page,
|
||||
pageSize: pagination.pageSize,
|
||||
}))
|
||||
}, [searchQuery])
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={isLoading || isFetching}
|
||||
columns={columns}
|
||||
onChange={onChangeTable}
|
||||
pagination={pagination}
|
||||
data={data?.list}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<Form
|
||||
handleConfirm={handleConfirm}
|
||||
handleCancel={handleCancel}
|
||||
visible={visible}
|
||||
record={record}
|
||||
/>
|
||||
<GrantRolesForm
|
||||
handleConfirm={handleConfirm}
|
||||
handleCancel={handleCancel}
|
||||
visible={visibleAssignRoles}
|
||||
record={record}
|
||||
/>
|
||||
<Title heading={6}>角色管理</Title>
|
||||
|
||||
<SearchForm onSearch={handleSearch}/>
|
||||
|
||||
<Button
|
||||
style={{marginBottom: 12}}
|
||||
type="primary"
|
||||
icon={<IconPlus/>}
|
||||
onClick={() => showModal()}
|
||||
>
|
||||
新建
|
||||
</Button>
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={isLoading || isFetching}
|
||||
columns={columns}
|
||||
onChange={onChangeTable}
|
||||
pagination={pagination}
|
||||
data={data?.list}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default ConfigManage;
|
||||
export default UserManage;
|
||||
|
||||
Reference in New Issue
Block a user