hik/hklh/volunteer-pc.git

import React, { useState } from 'react';
import { Table, Card, Button, Modal, Form, Input, Select, Space, message, Popconfirm, Tag, Tree } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 
const { Option } = Select;
 
const PermissionManagement = () => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [loading, setLoading] = useState(false);
  const [roles] = useState([
    {
      id: 1,
      roleName: '超级管理员',
      roleCode: 'SUPER_ADMIN',
      description: '拥有系统所有权限',
      permissions: ['积分管理', '活动管理', '志愿者管理', '统计分析', '系统设置'],
      status: '启用',
      createTime: '2024-01-01 00:00:00',
    },
    {
      id: 2,
      roleName: '活动管理员',
      roleCode: 'ACTIVITY_ADMIN',
      description: '负责活动管理和志愿者管理',
      permissions: ['活动管理', '志愿者管理', '统计分析'],
      status: '启用',
      createTime: '2024-01-05 10:00:00',
    },
    {
      id: 3,
      roleName: '普通操作员',
      roleCode: 'OPERATOR',
      description: '基础操作权限',
      permissions: ['志愿者管理', '统计分析'],
      status: '启用',
      createTime: '2024-01-10 14:30:00',
    },
  ]);
 
  // 权限树数据
  const permissionTreeData = [
    {
      title: '积分管理',
      key: 'points',
      children: [
        { title: '积分类型设置', key: 'points:types' },
        { title: '项目分值配置', key: 'points:projects' },
        { title: '申报规则管理', key: 'points:rules' },
      ],
    },
    {
      title: '活动管理',
      key: 'activity',
      children: [
        { title: '活动发布', key: 'activity:create' },
        { title: '活动列表', key: 'activity:list' },
        { title: '报名管理', key: 'activity:registration' },
      ],
    },
    {
      title: '志愿者管理',
      key: 'volunteer',
      children: [
        { title: '志愿者列表', key: 'volunteer:list' },
        { title: '积分查询', key: 'volunteer:points' },
        { title: '志愿者详情', key: 'volunteer:detail' },
      ],
    },
    {
      title: '统计分析',
      key: 'statistics',
      children: [
        { title: '数据概览', key: 'statistics:overview' },
        { title: '趋势分析', key: 'statistics:trends' },
        { title: '报表中心', key: 'statistics:reports' },
      ],
    },
    {
      title: '系统设置',
      key: 'system',
      children: [
        { title: '用户管理', key: 'system:users' },
        { title: '权限配置', key: 'system:permissions' },
        { title: '系统参数', key: 'system:settings' },
      ],
    },
  ];
 
  const columns = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '角色代码',
      dataIndex: 'roleCode',
      key: 'roleCode',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: '权限',
      dataIndex: 'permissions',
      key: 'permissions',
      render: (permissions) => (
        <div>
          {permissions.map((permission, index) => (
            <Tag key={index} color="blue" style={{ marginBottom: 4 }}>
              {permission}
            </Tag>
          ))}
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Tag color={status === '启用' ? 'success' : 'default'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个角色吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
 
  const handleAdd = () => {
    setEditingRecord(null);
    form.resetFields();
    setModalVisible(true);
  };
 
  const handleEdit = (record) => {
    setEditingRecord(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };
 
  const handleDelete = (id) => {
    message.success('删除成功');
  };
 
  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
 
      if (editingRecord) {
        message.success('更新成功');
      } else {
        message.success('添加成功');
      }
 
      setModalVisible(false);
      setLoading(false);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };
 
  const handleModalCancel = () => {
    setModalVisible(false);
    form.resetFields();
  };
 
  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">权限管理</h1>
        <p className="page-description">管理系统角色和权限配置</p>
      </div>
 
      <Card>
        <div className="table-actions">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleAdd}
          >
            新增角色
          </Button>
        </div>
 
        <Table
          columns={columns}
          dataSource={roles}
          rowKey="id"
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
        />
      </Card>
 
      <Modal
        title={editingRecord ? '编辑角色' : '新增角色'}
        open={modalVisible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        confirmLoading={loading}
        width={800}
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            status: '启用',
          }}
        >
          <Form.Item
            name="roleName"
            label="角色名称"
            rules={[{ required: true, message: '请输入角色名称' }]}
          >
            <Input placeholder="请输入角色名称" />
          </Form.Item>
 
          <Form.Item
            name="roleCode"
            label="角色代码"
            rules={[{ required: true, message: '请输入角色代码' }]}
          >
            <Input placeholder="请输入角色代码" />
          </Form.Item>
 
          <Form.Item
            name="description"
            label="角色描述"
            rules={[{ required: true, message: '请输入角色描述' }]}
          >
            <Input.TextArea rows={3} placeholder="请输入角色描述" />
          </Form.Item>
 
          <Form.Item
            name="permissions"
            label="权限配置"
            rules={[{ required: true, message: '请选择权限' }]}
          >
            <Tree
              checkable
              treeData={permissionTreeData}
              defaultExpandAll
            />
          </Form.Item>
 
          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select placeholder="请选择状态">
              <Option value="启用">启用</Option>
              <Option value="禁用">禁用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
 
export default PermissionManagement;