-
菜单管理
-
} onClick={handleAdd}>新增菜单
+
+
+
菜单权限管理
+
+
+ }
+ onClick={handlePermOpen}
+ >
+ 配置权限
+
+ }
+ onClick={() => {
+ setEditMenu(null);
+ menuForm.resetFields();
+ setMenuModal(true);
+ }}
+ >
+ 新增菜单
+
+
+ {/* 菜单 新增/编辑 弹窗 */}
setModalVisible(false)}
- onOk={handleSubmit}
- maskClosable={false}
+ title={editMenu ? '编辑菜单' : '新增菜单'}
+ open={menuModal}
+ onCancel={() => setMenuModal(false)}
+ onOk={handleSaveMenu}
+ width={500}
>
-
-
- );
-};
-export default MenuList;
+ {/* 权限配置弹窗 */}
+
setPermModal(false)}
+ onOk={handlePermSave}
+ >
+
+
+
+ );
+}
diff --git a/src/pages/Organization.tsx b/src/pages/Organization.tsx
new file mode 100644
index 0000000..22e140b
--- /dev/null
+++ b/src/pages/Organization.tsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import {
+ Card, Table, Button, Typography, Space, Modal, Form, Tree, message,
+ Input, Popconfirm, Select, TreeSelect
+} from 'antd';
+import {
+ PlusOutlined, EditOutlined, DeleteOutlined, BuildOutlined
+} from '@ant-design/icons';
+
+const { Title } = Typography;
+const { Option } = Select;
+
+// 模拟组织数据
+const orgData = [
+ {
+ id: 1,
+ name: '华东区域总部',
+ code: 'EAST_REGION',
+ parentId: 0,
+ status: '0',
+
+ },
+ {
+ id: 2,
+ name: '华北区域总部',
+ code: 'NORTH_REGION',
+ parentId: 0,
+ status: '0',
+ },
+];
+
+// 转平数组用于表格
+const flatten = (list) => {
+ let arr = [];
+ const loop = (data) => {
+ data.forEach(item => {
+ arr.push(item);
+ if (item.children) loop(item.children);
+ });
+ };
+ loop(list);
+ return arr;
+};
+
+export default function Organization() {
+ const [orgList, setOrgList] = useState(flatten(orgData));
+ const [treeData] = useState(orgData);
+
+ const [modalVisible, setModalVisible] = useState(false);
+ const [form] = Form.useForm();
+ const [editRecord, setEditRecord] = useState(null);
+
+ // 打开新增
+ const handleAdd = () => {
+ form.resetFields();
+ setEditRecord(null);
+ setModalVisible(true);
+ };
+
+ // 打开编辑
+ const handleEdit = (record) => {
+ form.setFieldsValue(record);
+ setEditRecord(record);
+ setModalVisible(true);
+ };
+
+ // 删除
+ const handleDelete = (id) => {
+ setOrgList(orgList.filter(i => i.id !== id));
+ message.success('删除成功');
+ };
+
+ // 保存
+ const handleSave = () => {
+ form.validateFields().then(values => {
+ if (editRecord) {
+ setOrgList(orgList.map(i => i.id === editRecord.id ? { ...i, ...values } : i));
+ message.success('编辑成功');
+ } else {
+ setOrgList([...orgList, { ...values, id: Date.now() }]);
+ message.success('新增成功');
+ }
+ setModalVisible(false);
+ });
+ };
+
+ const columns = [
+ { title: '组织名称', dataIndex: 'name' },
+ { title: '组织编码', dataIndex: 'code' },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ render: s => s === '0' ?
+
:
+
+ },
+ {
+ title: '操作',
+ render: (_, r) => (
+
+ } onClick={() => handleEdit(r)}>编辑
+ handleDelete(r.id)}>
+
+
+
+ )
+ }
+ ];
+
+ return (
+
+
+
组织管理
+ } onClick={handleAdd}>
+ 新增组织
+
+
+
+
+
+
+
+
setModalVisible(false)}
+ onOk={handleSave}
+ width={500}
+ >
+
+
+
+ );
+}
diff --git a/src/pages/Roles.tsx b/src/pages/Roles.tsx
index 2b178d0..e90672f 100644
--- a/src/pages/Roles.tsx
+++ b/src/pages/Roles.tsx
@@ -1,103 +1,220 @@
-import React from 'react';
-import {
- Card,
- Row,
- Col,
- Button,
- Typography,
- Tag,
- Space,
- Divider,
- List
+import React, { useState, useEffect } from 'react';
+import {
+ Card, Row, Col, Button, Typography, Space, Modal, Form, Tree, message,
+ Input, Popconfirm, Divider
} from 'antd';
-import {
- SafetyCertificateOutlined,
- LockOutlined,
- CheckCircleOutlined,
- PlusOutlined,
- TeamOutlined
+import {
+ PlusOutlined, LockOutlined, SettingOutlined, EditOutlined, DeleteOutlined
} from '@ant-design/icons';
const { Text, Title } = Typography;
+// 默认角色
+const defaultRoles = [
+ { name: '超级管理员', key: 'admin', desc: '系统全权限', level: 'Level 1' },
+ { name: '机构管理员', key: 'operator', desc: '设备/警报/视频管理', level: 'Level 2' },
+ { name: '场站管理员', key: 'site_admin', desc: '场站管理权限', level: 'Level 2' },
+ { name: '场站操作员', key: 'viewer', desc: '只读查看', level: 'Level 3' },
+];
+
+// 模拟菜单树
+const defaultMenuTree = [
+ { title: '控制台', value: 'dashboard', key: '1' },
+ {
+ title: '设备管理', value: 'device', key: '2',
+ children: [
+ { title: '机器人管理', value: 'robot', key: '2-1' },
+ { title: '视频监控', value: 'video', key: '2-2' },
+ ]
+ },
+ { title: '告警管理', value: 'alarm', key: '3' },
+ { title: '用户管理', value: 'user', key: '4' },
+ { title: '角色管理', value: 'role', key: '5' },
+ { title: '菜单管理', value: 'menu', key: '6' },
+];
+
export default function Roles() {
- const roles = [
- { name: '超级管理员', key: 'admin', desc: '系统全权限，支持资源分配与权限审计', level: 'Level 1' },
- { name: '系统操作员', key: 'operator', desc: '设备策略下发，实时指令干预及警报处理', level: 'Level 2' },
- { name: '访客观察员', key: 'viewer', desc: '只读权限，支持实时视频预览与报表查阅', level: 'Level 3' },
- ];
+ const [roles, setRoles] = useState(defaultRoles);
+ const [menuTree, setMenuTree] = useState(defaultMenuTree);
+ const [checkedKeys, setCheckedKeys] = useState([]);
+ const [permVisible, setPermVisible] = useState(false);
+ const [currentRole, setCurrentRole] = useState(null);
- const permissions = [
- { name: '设备控制权限', sectors: ['远程重启', '策略部署', '紧急停机'] },
- { name: '视频管理权限', sectors: ['实时监控', '云台控制', '录像下载'] },
- { name: '核心准入权限', sectors: ['审计日志', '成本报表', '用户配置'] },
- ];
+ // 新增/编辑角色弹窗
+ const [roleModalVisible, setRoleModalVisible] = useState(false);
+ const [roleForm] = Form.useForm();
+ const [editRole, setEditRole] = useState(null);
- return (
-
-
-
系统角色权限矩阵
- } style={{ borderRadius: 2 }}>
- 新增角色组
-
-
+ // 打开权限配置
+ const handleOpenPerm = async (role) => {
+ setCurrentRole(role);
+ setCheckedKeys([]);
+ setPermVisible(true);
+ };
-
- {roles.map((role) => (
-
- }>管理成员
- ]}
- >
-
-
-
- }
- title={
{role.name}}
- description={
-
- {role.level}
- {role.desc}
-
- }
- />
-
-
- ))}
-
+ // 保存权限
+ const handleSavePerm = () => {
+ message.success(`【${currentRole.name}】菜单权限配置成功！`);
+ setPermVisible(false);
+ };
-
功能模块权限分配 (细分原子操作)}
- style={{ borderRadius: 2 }}
- >
-
- {permissions.map((p) => (
-
-
-
{p.name}
-
(
-
-
- {item}
-
-
-
- )}
- />
-
-
-