139 lines
5.0 KiB
TypeScript
139 lines
5.0 KiB
TypeScript
import React from 'react';
|
|
import { Card, Typography, Button, Table, Tag, Space, Modal, Form, Input, Checkbox, message, Tree } from 'antd';
|
|
import { PlusOutlined, SafetyOutlined } from '@ant-design/icons';
|
|
|
|
const { Title, Paragraph } = Typography;
|
|
|
|
const RolesPage: React.FC = () => {
|
|
const [loading] = React.useState(false);
|
|
const [modalVisible, setModalVisible] = React.useState(false);
|
|
const [form] = Form.useForm();
|
|
|
|
const permissionTree = [
|
|
{
|
|
title: '项目管理',
|
|
key: 'project',
|
|
children: [
|
|
{ title: '查看项目', key: 'project:view' },
|
|
{ title: '创建项目', key: 'project:create' },
|
|
{ title: '编辑项目', key: 'project:edit' },
|
|
{ title: '删除项目', key: 'project:delete' },
|
|
],
|
|
},
|
|
{
|
|
title: '财务管理',
|
|
key: 'finance',
|
|
children: [
|
|
{ title: '查看财务', key: 'finance:view' },
|
|
{ title: '预支审批', key: 'finance:advance' },
|
|
{ title: '报销审批', key: 'finance:reimburse' },
|
|
{ title: '付款审批', key: 'finance:payment' },
|
|
],
|
|
},
|
|
{
|
|
title: '采购管理',
|
|
key: 'procurement',
|
|
children: [
|
|
{ title: '查看采购', key: 'procurement:view' },
|
|
{ title: '创建采购', key: 'procurement:create' },
|
|
{ title: '审批采购', key: 'procurement:approve' },
|
|
],
|
|
},
|
|
{
|
|
title: '系统设置',
|
|
key: 'system',
|
|
children: [
|
|
{ title: '用户管理', key: 'system:users' },
|
|
{ title: '角色管理', key: 'system:roles' },
|
|
{ title: '系统配置', key: 'system:config' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const columns = [
|
|
{ title: '角色ID', dataIndex: 'id', key: 'id', width: 100 },
|
|
{ title: '角色名称', dataIndex: 'name', key: 'name', width: 150 },
|
|
{ title: '角色描述', dataIndex: 'description', key: 'description' },
|
|
{
|
|
title: '权限数量',
|
|
dataIndex: 'permissionCount',
|
|
key: 'permissionCount',
|
|
width: 100,
|
|
render: (v: number) => <Tag color="blue">{v} 项</Tag>
|
|
},
|
|
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 150 },
|
|
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 120 },
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 180,
|
|
render: () => (
|
|
<Space>
|
|
<Button size="small" type="link">查看权限</Button>
|
|
<Button size="small" type="link">编辑</Button>
|
|
<Button size="small" type="link" danger>删除</Button>
|
|
</Space>
|
|
)
|
|
}
|
|
];
|
|
|
|
const data = [
|
|
{ key: '1', id: 'R001', name: '超级管理员', description: '拥有系统所有权限', permissionCount: 50, createdAt: '2026-01-01', creator: '系统' },
|
|
{ key: '2', id: 'R002', name: '项目经理', description: '项目管理、施工管理权限', permissionCount: 25, createdAt: '2026-01-15', creator: 'admin' },
|
|
{ key: '3', id: 'R003', name: '财务经理', description: '财务管理、审批权限', permissionCount: 18, createdAt: '2026-02-01', creator: 'admin' },
|
|
{ key: '4', id: 'R004', name: '普通员工', description: '查看和申请权限', permissionCount: 10, createdAt: '2026-02-15', creator: 'admin' },
|
|
];
|
|
|
|
const handleSubmit = () => {
|
|
message.success('角色已创建');
|
|
setModalVisible(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: 24 }}>
|
|
<div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div>
|
|
<Title level={3} style={{ marginBottom: 0 }}>角色权限</Title>
|
|
<Paragraph type="secondary">管理系统角色和权限分配</Paragraph>
|
|
</div>
|
|
<Space>
|
|
<Input.Search placeholder="搜索角色" style={{ width: 200 }} />
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
|
|
新增角色
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
|
|
<Card>
|
|
<Table columns={columns} dataSource={data} loading={loading} pagination={{ pageSize: 10 }} />
|
|
</Card>
|
|
|
|
<Modal
|
|
title="新增角色"
|
|
open={modalVisible}
|
|
onCancel={() => setModalVisible(false)}
|
|
onOk={handleSubmit}
|
|
width={600}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item label="角色名称" name="name" rules={[{ required: true }]}>
|
|
<Input placeholder="请输入角色名称" prefix={<SafetyOutlined />} />
|
|
</Form.Item>
|
|
<Form.Item label="角色描述" name="description">
|
|
<Input placeholder="请输入角色描述" />
|
|
</Form.Item>
|
|
<Form.Item label="权限配置" name="permissions">
|
|
<Tree
|
|
checkable
|
|
defaultExpandedKeys={['project', 'finance']}
|
|
treeData={permissionTree}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RolesPage;
|