zt-admin-template 1.0.0

package/template/src/pages/system/role/Role.tsx

@@ -0,0 +1,458 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Switch,
+  Space,
+  Popconfirm,
+  message,
+  Card,
+  Row,
+  Col,
+  Tooltip,
+  Tree,
+  Divider,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
+import type { TableColumnsType, TreeProps } from 'antd';
+import dayjs from 'dayjs';
+
+interface RoleRecord {
+  id: string;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  status: number;
+  delFlag: number;
+  createTime: string;
+  remark?: string;
+  permissions?: string[];
+}
+
+const menuTreeData: TreeProps['treeData'] = [
+  {
+    title: '系统管理',
+    key: 'system',
+    children: [
+      {
+        title: '用户管理',
+        key: 'system:user:list',
+        children: [
+          { title: '查看', key: 'system:user:query' },
+          { title: '新增', key: 'system:user:add' },
+          { title: '修改', key: 'system:user:edit' },
+          { title: '删除', key: 'system:user:remove' },
+        ],
+      },
+      {
+        title: '角色管理',
+        key: 'system:role:list',
+        children: [
+          { title: '查看', key: 'system:role:query' },
+          { title: '新增', key: 'system:role:add' },
+          { title: '修改', key: 'system:role:edit' },
+          { title: '删除', key: 'system:role:remove' },
+        ],
+      },
+      {
+        title: '菜单管理',
+        key: 'system:menu:list',
+        children: [
+          { title: '查看', key: 'system:menu:query' },
+          { title: '新增', key: 'system:menu:add' },
+          { title: '修改', key: 'system:menu:edit' },
+          { title: '删除', key: 'system:menu:remove' },
+        ],
+      },
+    ],
+  },
+  {
+    title: '业务管理',
+    key: 'business',
+    children: [
+      {
+        title: '订单管理',
+        key: 'business:order:list',
+        children: [
+          { title: '查看', key: 'business:order:query' },
+          { title: '新增', key: 'business:order:add' },
+        ],
+      },
+    ],
+  },
+];
+
+const Role = () => {
+  const [form] = Form.useForm();
+  const [searchForm] = Form.useForm();
+  const [roles, setRoles] = useState<RoleRecord[]>([]);
+  const [originalRoles, setOriginalRoles] = useState<RoleRecord[]>([]);
+  const [filteredRoles, setFilteredRoles] = useState<RoleRecord[]>([]);
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingRole, setEditingRole] = useState<RoleRecord | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+
+  const defaultRoles: RoleRecord[] = [
+    {
+      id: '1',
+      roleName: '超级管理员',
+      roleKey: 'admin',
+      roleSort: 1,
+      status: 0,
+      delFlag: 0,
+      createTime: '2026-01-18 10:58:15',
+      remark: '超级管理员',
+      permissions: ['*:*:*'],
+    },
+    {
+      id: '2',
+      roleName: '普通角色',
+      roleKey: 'common',
+      roleSort: 2,
+      status: 0,
+      delFlag: 0,
+      createTime: '2026-01-18 10:58:15',
+      remark: '普通角色',
+      permissions: ['system:user:query', 'system:role:query'],
+    },
+    {
+      id: '3',
+      roleName: '测试角色',
+      roleKey: 'test',
+      roleSort: 3,
+      status: 0,
+      delFlag: 0,
+      createTime: '2026-01-17 09:30:00',
+      remark: '测试人员角色',
+      permissions: ['system:user:query', 'system:menu:query'],
+    },
+  ];
+
+  React.useEffect(() => {
+    setRoles(defaultRoles);
+    setOriginalRoles(defaultRoles);
+    setFilteredRoles(defaultRoles);
+  }, []);
+
+  const columns: TableColumnsType<RoleRecord> = [
+    {
+      title: '角色编号',
+      dataIndex: 'id',
+      key: 'id',
+      width: 100,
+    },
+    {
+      title: '角色名称',
+      dataIndex: 'roleName',
+      key: 'roleName',
+      width: 150,
+    },
+    {
+      title: '权限字符',
+      dataIndex: 'roleKey',
+      key: 'roleKey',
+      width: 150,
+    },
+    {
+      title: '显示顺序',
+      dataIndex: 'roleSort',
+      key: 'roleSort',
+      width: 100,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (status: number) => (
+        <Switch checked={status === 0} disabled />
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 180,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Tooltip title="编辑">
+            <Button
+              type="primary"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => handleEdit(record)}
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <Popconfirm
+              title="删除角色"
+              description="确定删除该角色吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button danger size="small" icon={<DeleteOutlined />} />
+            </Popconfirm>
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  const handleAdd = () => {
+    setEditingRole(null);
+    form.resetFields();
+    setCheckedKeys([]);
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (record: RoleRecord) => {
+    setEditingRole(record);
+    form.setFieldsValue({
+      roleName: record.roleName,
+      roleKey: record.roleKey,
+      roleSort: record.roleSort,
+      status: record.status === 0,
+      remark: record.remark,
+    });
+    setCheckedKeys(record.permissions || []);
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = (id: string) => {
+    setRoles(roles.filter(role => role.id !== id));
+    message.success('删除成功');
+  };
+
+  const handleModalOk = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+
+      if (editingRole) {
+        setRoles(
+          roles.map(role =>
+            role.id === editingRole.id
+              ? {
+                  ...role,
+                  ...values,
+                  status: values.status ? 0 : 1,
+                  permissions: checkedKeys as string[],
+                }
+              : role
+          )
+        );
+        message.success('编辑成功');
+      } else {
+        const newRole: RoleRecord = {
+          id: String(roles.length + 1),
+          ...values,
+          status: values.status ? 0 : 1,
+          delFlag: 0,
+          createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+          permissions: checkedKeys as string[],
+        };
+        setRoles([...roles, newRole]);
+        message.success('添加成功');
+      }
+
+      setIsModalVisible(false);
+      form.resetFields();
+      setCheckedKeys([]);
+    } catch (error) {
+      console.error('Validation failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (values: any) => {
+    const { roleName, roleKey, status } = values;
+    let filtered = [...originalRoles];
+    
+    if (roleName) {
+      filtered = filtered.filter(role => 
+        role.roleName.toLowerCase().includes(roleName.toLowerCase())
+      );
+    }
+    
+    if (roleKey) {
+      filtered = filtered.filter(role => 
+        role.roleKey.toLowerCase().includes(roleKey.toLowerCase())
+      );
+    }
+    
+    if (status !== undefined && status !== null) {
+      filtered = filtered.filter(role => role.status === status);
+    }
+    
+    setFilteredRoles(filtered);
+  };
+
+  const handleReset = () => {
+    searchForm.resetFields();
+    setFilteredRoles(originalRoles);
+  };
+
+  const handleRefresh = () => {
+    searchForm.resetFields();
+    setFilteredRoles(originalRoles);
+  };
+
+  const handleExport = () => {
+    message.success('导出成功');
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <Card style={{ marginBottom: '24px' }}>
+        <Form
+          form={searchForm}
+          layout="inline"
+          onFinish={handleSearch}
+          style={{ marginBottom: '16px' }}
+        >
+          <Form.Item name="roleName" label="角色名称">
+            <Input placeholder="请输入角色名称" />
+          </Form.Item>
+          <Form.Item name="roleKey" label="权限字符">
+            <Input placeholder="请输入权限字符" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select placeholder="请选择状态" style={{ width: 120 }} allowClear>
+              <Select.Option value={0}>正常</Select.Option>
+              <Select.Option value={1}>停用</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item>
+            <Button onClick={handleReset}>重置</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card>
+        <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
+          <Col>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+              新增
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<ReloadOutlined />} onClick={handleRefresh}>
+              刷新
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<DownloadOutlined />} onClick={handleExport}>
+              导出
+            </Button>
+          </Col>
+        </Row>
+
+        <Table
+          columns={columns}
+          dataSource={filteredRoles}
+          rowKey="id"
+          pagination={{
+            pageSize: 10,
+            total: filteredRoles.length,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total: number) => `共 ${total} 条`,
+          }}
+          scroll={{ x: 1200 }}
+        />
+      </Card>
+
+      <Modal
+        title={editingRole ? '编辑角色' : '新增角色'}
+        open={isModalVisible}
+        onOk={handleModalOk}
+        onCancel={() => {
+          setIsModalVisible(false);
+          form.resetFields();
+          setCheckedKeys([]);
+        }}
+        width={700}
+        confirmLoading={loading}
+      >
+        <Form form={form} layout="vertical" autoComplete="off">
+          <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>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                name="roleSort"
+                label="显示顺序"
+                rules={[{ required: true, message: '请输入显示顺序' }]}
+              >
+                <Input type="number" placeholder="请输入显示顺序" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="status" label="状态" valuePropName="checked">
+                <Switch checkedChildren="正常" unCheckedChildren="停用" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Divider>权限分配</Divider>
+
+          <div style={{ border: '1px solid #d9d9d9', borderRadius: '4px', padding: '12px', maxHeight: '300px', overflow: 'auto' }}>
+            <Tree
+              checkable
+              defaultExpandAll
+              treeData={menuTreeData}
+              checkedKeys={checkedKeys}
+              onCheck={(keys: any) => setCheckedKeys(keys)}
+            />
+          </div>
+
+          <Form.Item name="remark" label="备注" style={{ marginTop: '16px' }}>
+            <Input.TextArea placeholder="请输入备注" rows={3} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default Role;