node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/app/(admin)/system/roles/page.tsx

@@ -0,0 +1,433 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import {
+  App,
+  Button,
+  Drawer,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Select,
+  Space,
+  Switch,
+  Tag,
+  Tree,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ApartmentOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
+import { graphHref } from '@/lib/graph-link';
+import DataTable from '@/components/DataTable';
+import { useAuth } from '@/components/AuthContext';
+import { fs } from '@/lib/theme';
+
+type RoleRow = {
+  id: string;
+  code: string;
+  name: string;
+  description: string | null;
+  sort: number;
+  status: number;
+  /** 1 全部 2 本部门及下级 3 本部门 4 仅本人 */
+  dataScope: number;
+  userCount: number;
+  menuIds: string[];
+};
+
+type MenuNode = {
+  id: string;
+  name: string;
+  type: string;
+  path: string | null;
+  permCode: string | null;
+  children?: MenuNode[];
+};
+
+type TreeNode = { key: string; title: React.ReactNode; children?: TreeNode[] };
+
+type FormValues = {
+  code: string;
+  name: string;
+  description?: string;
+  sort: number;
+  status: number;
+};
+
+async function request<T>(
+  method: 'get' | 'post' | 'put' | 'delete',
+  url: string,
+  body?: unknown,
+  params?: unknown
+): Promise<T> {
+  const { data } = await axios.request({ method, url, data: body, params });
+  if (!data || data.code !== 0) throw new Error(data?.message || '请求失败');
+  return data.data as T;
+}
+
+function errMsg(e: unknown): string {
+  if (axios.isAxiosError(e)) {
+    const d = e.response?.data as { message?: string } | undefined;
+    return d?.message || e.message;
+  }
+  return e instanceof Error ? e.message : String(e);
+}
+
+/** 数据范围四档：数值越小范围越宽（多角色取最宽的一档） */
+const DATA_SCOPE_OPTIONS = [
+  { value: 1, label: '全部数据', color: 'red' },
+  { value: 2, label: '本部门及下级', color: 'orange' },
+  { value: 3, label: '本部门', color: 'blue' },
+  { value: 4, label: '仅本人', color: 'default' },
+] as const;
+
+function dataScopeMeta(v: number) {
+  return DATA_SCOPE_OPTIONS.find((o) => o.value === v) ?? DATA_SCOPE_OPTIONS[1];
+}
+
+/** 菜单树 → Tree 组件数据；按钮类菜单用不同颜色标注，方便一眼分辨权限粒度 */
+function toTreeData(nodes: MenuNode[]): TreeNode[] {
+  return nodes.map((n) => ({
+    key: n.id,
+    title: (
+      <Space size={6}>
+        <span>{n.name}</span>
+        {n.type === 'button' ? <Tag color="warning">按钮</Tag> : null}
+        {n.permCode ? <Tag>{n.permCode}</Tag> : null}
+      </Space>
+    ),
+    children: n.children?.length ? toTreeData(n.children) : undefined,
+  }));
+}
+
+export default function RolesPage() {
+  const { message } = App.useApp();
+  const { hasPerm } = useAuth();
+
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<RoleRow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm<FormValues>();
+
+  const [permTarget, setPermTarget] = useState<RoleRow | null>(null);
+  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+  const [halfCheckedKeys, setHalfCheckedKeys] = useState<React.Key[]>([]);
+  const [permScope, setPermScope] = useState<number>(2);
+  const [savingPerm, setSavingPerm] = useState(false);
+
+  const menuQuery = useQuery({
+    queryKey: ['menus-all'],
+    queryFn: () => request<MenuNode[]>('get', '/api/menus'),
+    // 权限抽屉只有管理员会用到；拿不到菜单时也不该让整个页面崩掉
+    enabled: hasPerm('system:role:perm'),
+    retry: false,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const refresh = () => setRefreshKey((k) => k + 1);
+
+  const openCreate = () => {
+    setEditing(null);
+    form.resetFields();
+    form.setFieldsValue({ sort: 0, status: 1 });
+    setOpen(true);
+  };
+
+  const openEdit = (row: RoleRow) => {
+    setEditing(row);
+    form.setFieldsValue({
+      code: row.code,
+      name: row.name,
+      description: row.description ?? undefined,
+      sort: row.sort,
+      status: row.status,
+    });
+    setOpen(true);
+  };
+
+  const submit = async () => {
+    let values: FormValues;
+    try {
+      values = await form.validateFields();
+    } catch {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      if (editing) {
+        await request('put', `/api/roles/${editing.id}`, values);
+        message.success('保存成功');
+      } else {
+        await request('post', '/api/roles', values);
+        message.success('新增成功');
+      }
+      setOpen(false);
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const toggleStatus = async (row: RoleRow, checked: boolean) => {
+    try {
+      await request('put', `/api/roles/${row.id}`, {
+        code: row.code,
+        name: row.name,
+        description: row.description ?? undefined,
+        sort: row.sort,
+        status: checked ? 1 : 0,
+      });
+      message.success(checked ? '已启用' : '已停用');
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const remove = async (row: RoleRow) => {
+    try {
+      await request('delete', `/api/roles/${row.id}`);
+      message.success('删除成功');
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const openPerm = (row: RoleRow) => {
+    setPermTarget(row);
+    setCheckedKeys(row.menuIds);
+    setHalfCheckedKeys([]);
+    setPermScope(row.dataScope ?? 2);
+  };
+
+  const savePerm = async () => {
+    if (!permTarget) return;
+    setSavingPerm(true);
+    try {
+      // 半选中的父目录也要一并保存，否则菜单树会因为「只有子节点」而结构断裂
+      const menuIds = [...checkedKeys, ...halfCheckedKeys].map(String);
+      const unique = [...new Set(menuIds)];
+      await request('put', `/api/roles/${permTarget.id}/menus`, {
+        menuIds: unique,
+        dataScope: permScope,
+      });
+      message.success('权限已保存（重新登录后生效）');
+      setPermTarget(null);
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setSavingPerm(false);
+    }
+  };
+
+  const columns: ColumnsType<RoleRow> = [
+    { title: '角色编码', dataIndex: 'code', width: 150 },
+    { title: '角色名称', dataIndex: 'name', width: 160 },
+    { title: '描述', dataIndex: 'description', ellipsis: true, render: (v: string | null) => v || '-' },
+    { title: '排序', dataIndex: 'sort', width: 80, sorter: true },
+    {
+      title: '用户数',
+      dataIndex: 'userCount',
+      width: 100,
+      render: (v: number) => <Tag color={v > 0 ? 'blue' : 'default'}>{v}</Tag>,
+    },
+    {
+      // 行级权限：进得去页面，还得看得见数据 —— 这两件事是分开配的
+      title: '数据范围',
+      dataIndex: 'dataScope',
+      width: 140,
+      render: (v: number) => {
+        const m = dataScopeMeta(v);
+        return <Tag color={m.color}>{m.label}</Tag>;
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      render: (v: number, row) => (
+        <Switch
+          checked={v === 1}
+          checkedChildren="启用"
+          unCheckedChildren="停用"
+          disabled={!hasPerm('system:role:edit')}
+          onChange={(checked) => toggleStatus(row, checked)}
+        />
+      ),
+    },
+    {
+      // ★ 单实体关联：角色没有上游实体（是图谱里的"叶子"），
+      //   所以点「关联」会直接定位到该节点并打开详情，而不是高亮一片连线。
+      title: '操作',
+      key: 'action',
+      width: 290,
+      fixed: 'right',
+      render: (_v, row) => (
+        <Space size={4}>
+          <Button type="link" size="small" icon={<ApartmentOutlined />} href={graphHref('Role', row.id)}>
+            关联
+          </Button>
+          {hasPerm('system:role:edit') ? (
+            <Button type="link" size="small" onClick={() => openEdit(row)}>
+              编辑
+            </Button>
+          ) : null}
+          {hasPerm('system:role:perm') ? (
+            <Button
+              type="link"
+              size="small"
+              icon={<SafetyCertificateOutlined />}
+              onClick={() => openPerm(row)}
+            >
+              分配权限
+            </Button>
+          ) : null}
+          {hasPerm('system:role:del') ? (
+            <Popconfirm
+              title="确认删除该角色？"
+              description="角色下若仍有用户绑定，将无法删除。"
+              okText="删除"
+              cancelText="取消"
+              okButtonProps={{ danger: true }}
+              onConfirm={() => remove(row)}
+            >
+              <Button type="link" size="small" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          ) : null}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <DataTable<RoleRow>
+        api="/api/roles"
+        rowKey="id"
+        columns={columns}
+        refreshKey={refreshKey}
+        scrollX={1290}
+        searchFields={[
+          {
+            name: 'status',
+            label: '状态',
+            type: 'select',
+            options: [
+              { label: '启用', value: 1 },
+              { label: '停用', value: 0 },
+            ],
+          },
+        ]}
+        canAdd={hasPerm('system:role:add')}
+        onAdd={openCreate}
+        addText="新增角色"
+      />
+
+      <Modal
+        title={editing ? '编辑角色' : '新增角色'}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={submit}
+        confirmLoading={submitting}
+        destroyOnHidden
+        mask={{ closable: false }}
+        width={520}
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: 8 }}>
+          <Form.Item
+            name="code"
+            label="角色编码"
+            rules={[
+              { required: true, message: '请输入角色编码' },
+              { pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/, message: '以字母开头，仅含字母/数字/下划线/短横线' },
+            ]}
+          >
+            <Input placeholder="如 admin、staff" />
+          </Form.Item>
+          <Form.Item name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名称' }]}>
+            <Input placeholder="如 系统管理员" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={3} placeholder="选填" maxLength={200} showCount />
+          </Form.Item>
+          <Space size={16} style={{ display: 'flex' }}>
+            <Form.Item name="sort" label="排序" style={{ flex: 1 }}>
+              <InputNumber min={0} max={9999} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="status" label="状态" style={{ flex: 1 }}>
+              <Select
+                options={[
+                  { label: '启用', value: 1 },
+                  { label: '停用', value: 0 },
+                ]}
+              />
+            </Form.Item>
+          </Space>
+        </Form>
+      </Modal>
+
+      <Drawer
+        title={`分配权限${permTarget ? ` — ${permTarget.name}` : ''}`}
+        size={480}
+        open={Boolean(permTarget)}
+        onClose={() => setPermTarget(null)}
+        extra={
+          <Space>
+            <Button onClick={() => setPermTarget(null)}>取消</Button>
+            <Button type="primary" loading={savingPerm} onClick={savePerm}>
+              保存
+            </Button>
+          </Space>
+        }
+      >
+        <div style={{ marginBottom: 18 }}>
+          <div style={{ fontWeight: 600, marginBottom: 6 }}>数据范围</div>
+          <Select
+            value={permScope}
+            onChange={setPermScope}
+            style={{ width: '100%' }}
+            options={DATA_SCOPE_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
+          />
+          <div style={{ color: '#8c8c8c', fontSize: fs(12), marginTop: 6, lineHeight: 1.6 }}>
+            决定该角色进入页面后能看见哪些<b>行</b>：全部 / 本部门及下级 / 本部门 / 仅本人。
+            一个用户挂多个角色时取最宽的一档，改完需重新登录生效。
+          </div>
+        </div>
+        <div style={{ fontWeight: 600, marginBottom: 6 }}>功能权限（菜单与按钮）</div>
+        {menuQuery.isLoading ? (
+          <div style={{ color: '#999' }}>菜单加载中…</div>
+        ) : menuQuery.isError ? (
+          <div style={{ color: '#cf1322' }}>菜单加载失败，请确认当前账号有「菜单列表」权限。</div>
+        ) : (
+          <Tree
+            checkable
+            defaultExpandAll
+            selectable={false}
+            checkedKeys={checkedKeys}
+            treeData={toTreeData(menuQuery.data ?? [])}
+            onCheck={(checked, info) => {
+              if (Array.isArray(checked)) {
+                setCheckedKeys(checked);
+                setHalfCheckedKeys([]);
+              } else {
+                setCheckedKeys(checked.checked);
+                setHalfCheckedKeys(checked.halfChecked);
+              }
+              void info;
+            }}
+          />
+        )}
+      </Drawer>
+    </>
+  );
+}