node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/app/(admin)/demo/employees/page.tsx

@@ -0,0 +1,508 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import dayjs, { type Dayjs } from 'dayjs';
+import {
+  App,
+  Alert,
+  Button,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+  Tag,
+  TreeSelect,
+  Upload,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ApartmentOutlined, UploadOutlined } from '@ant-design/icons';
+import DataTable from '@/components/DataTable';
+import { useAuth } from '@/components/AuthContext';
+import { fmtDate, fmtMoney } from '@/lib/format';
+import { graphHref } from '@/lib/graph-link';
+import { formRules } from '@/lib/formRules';
+import { MILITARY } from '@/lib/theme';
+
+type EmpRow = {
+  id: string;
+  code: string;
+  name: string;
+  idCard: string | null;
+  gender: string;
+  deptId: string | null;
+  dept: { id: string; name: string } | null;
+  position: string | null;
+  phone: string | null;
+  email: string | null;
+  hireDate: string | null;
+  salary: number | null;
+  status: number;
+  remark: string | null;
+};
+
+type DeptNode = { id: string; name: string; parentId: string | null; children?: DeptNode[] };
+type TreeNode = { value: string; title: string; children?: TreeNode[] };
+
+type FormValues = {
+  code: string;
+  name: string;
+  idCard?: string;
+  gender: 'male' | 'female';
+  deptId?: string;
+  position?: string;
+  phone?: string;
+  email?: string;
+  hireDate?: Dayjs | null;
+  salary?: number | null;
+  status: number;
+  remark?: string;
+};
+
+type ImportResult = { inserted: number; updated: number; failed: { row: number; reason: string }[] };
+
+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);
+}
+
+function toTreeData(nodes: DeptNode[]): TreeNode[] {
+  return nodes.map((n) => ({
+    value: n.id,
+    title: n.name,
+    children: n.children?.length ? toTreeData(n.children) : undefined,
+  }));
+}
+
+function flattenDepts(nodes: DeptNode[], depth = 0): { label: string; value: string }[] {
+  const out: { label: string; value: string }[] = [];
+  for (const n of nodes) {
+    out.push({ label: `${'　'.repeat(depth)}${n.name}`, value: n.id });
+    if (n.children?.length) out.push(...flattenDepts(n.children, depth + 1));
+  }
+  return out;
+}
+
+/** 列表里不展示完整身份证号：只保留前 6 位和后 4 位，够核对、不泄露 */
+function maskIdCard(v: string | null): string {
+  if (!v) return '-';
+  if (v.length === 18) return `${v.slice(0, 6)}********${v.slice(-4)}`;
+  if (v.length === 15) return `${v.slice(0, 6)}*******${v.slice(-2)}`;
+  return '******';
+}
+
+export default function EmployeesPage() {
+  const { message, modal } = App.useApp();
+  const { hasPerm } = useAuth();
+
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<EmpRow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [form] = Form.useForm<FormValues>();
+
+  const deptQuery = useQuery({
+    queryKey: ['depts'],
+    queryFn: () => request<DeptNode[]>('get', '/api/depts'),
+    staleTime: 5 * 60 * 1000,
+  });
+  const deptTree = deptQuery.data ?? [];
+
+  const refresh = () => setRefreshKey((k) => k + 1);
+
+  const openCreate = () => {
+    setEditing(null);
+    setOpen(true);
+  };
+
+  const openEdit = (row: EmpRow) => {
+    setEditing(row);
+    setOpen(true);
+  };
+
+  /**
+   * 打开弹窗后才回填表单。
+   *
+   * ★ 为什么不在 openEdit 里直接 setFieldsValue：
+   *   弹窗没打开时 Form 还没挂载，setFieldsValue 会报
+   *   "Instance created by useForm is not connected to any Form element"，
+   *   反向链接（?id=）在首屏就触发，正好踩在这个时序上。
+   *   放到 open 变 true 的下一轮 effect 里，Form 一定已经挂好了。
+   */
+  useEffect(() => {
+    if (!open) return;
+    if (!editing) {
+      form.resetFields();
+      form.setFieldsValue({ gender: 'male', status: 1 });
+      return;
+    }
+    form.setFieldsValue({
+      code: editing.code,
+      name: editing.name,
+      idCard: editing.idCard ?? undefined,
+      gender: editing.gender === 'female' ? 'female' : 'male',
+      deptId: editing.deptId ?? undefined,
+      position: editing.position ?? undefined,
+      phone: editing.phone ?? undefined,
+      email: editing.email ?? undefined,
+      hireDate: editing.hireDate ? dayjs(editing.hireDate) : null,
+      salary: editing.salary ?? null,
+      status: editing.status,
+      remark: editing.remark ?? undefined,
+    });
+  }, [open, editing, form]);
+
+  /**
+   * 反向链接：从知识图谱点「去业务记录」会带 `?id=<记录id>` 回到这里。
+   * 用 window.location 读参数而不是 useSearchParams —— 页面已 'use client'，
+   * 但 useSearchParams 会让整页在构建期要求 Suspense 边界，没必要。
+   */
+  const linkedOnce = useRef(false);
+  useEffect(() => {
+    if (linkedOnce.current) return;
+    const id = new URLSearchParams(window.location.search).get('id');
+    if (!id) return;
+    linkedOnce.current = true;
+    axios
+      .get(`/api/employees/${encodeURIComponent(id)}`)
+      .then(({ data }) => {
+        if (data?.code === 0 && data.data) openEdit(data.data as EmpRow);
+      })
+      .catch(() => {
+        /* 记录可能已删除，静默即可 */
+      });
+  }, [openEdit]);
+
+  const submit = async () => {
+    let values: FormValues;
+    try {
+      values = await form.validateFields();
+    } catch {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      // DatePicker 给的是 Dayjs，接口要的是字符串，转换放在提交这一层比在表单里更直观
+      const body = {
+        ...values,
+        hireDate: values.hireDate ? dayjs(values.hireDate).format('YYYY-MM-DD') : null,
+      };
+      if (editing) {
+        await request('put', `/api/employees/${editing.id}`, body);
+        message.success('保存成功');
+      } else {
+        await request('post', '/api/employees', body);
+        message.success('新增成功');
+      }
+      setOpen(false);
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const remove = async (row: EmpRow) => {
+    try {
+      await request('delete', `/api/employees/${row.id}`);
+      message.success('删除成功');
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  /** 走 multipart 手动上传：Upload 的自动上传拿不到后端统一响应体，也没法做失败行提示 */
+  const doImport = async (file: File) => {
+    const fd = new FormData();
+    fd.append('file', file);
+    setImporting(true);
+    try {
+      const { data } = await axios.post('/api/employees/import', fd);
+      if (!data || data.code !== 0) throw new Error(data?.message || '导入失败');
+      const res = data.data as ImportResult;
+      message.success(`导入完成：新增 ${res.inserted} 条，更新 ${res.updated} 条`);
+      if (res.failed.length) {
+        modal.warning({
+          title: `有 ${res.failed.length} 行未能导入`,
+          width: 520,
+          content: (
+            <div style={{ maxHeight: 320, overflow: 'auto' }}>
+              {res.failed.map((f) => (
+                <div key={f.row}>
+                  第 {f.row} 行：{f.reason}
+                </div>
+              ))}
+            </div>
+          ),
+        });
+      }
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const columns: ColumnsType<EmpRow> = [
+    { title: '工号', dataIndex: 'code', width: 110 },
+    { title: '姓名', dataIndex: 'name', width: 110 },
+    {
+      title: '身份证号',
+      dataIndex: 'idCard',
+      width: 190,
+      render: (v: string | null) => maskIdCard(v),
+    },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      width: 80,
+      render: (v: string) =>
+        v === 'female' ? (
+          <Tag style={{ background: '#F4EEDF', color: '#8A6D3B', border: '1px solid #E7DCC2' }}>女</Tag>
+        ) : (
+          <Tag style={{ background: MILITARY.soft, color: MILITARY.primary, border: `1px solid ${MILITARY.softStrong}` }}>男</Tag>
+        ),
+    },
+    { title: '部门', dataIndex: 'dept', width: 140, render: (_v, row) => row.dept?.name ?? '-' },
+    { title: '职位', dataIndex: 'position', width: 130, render: (v: string | null) => v || '-' },
+    { title: '手机号', dataIndex: 'phone', width: 140, render: (v: string | null) => v || '-' },
+    { title: '邮箱', dataIndex: 'email', width: 200, ellipsis: true, render: (v: string | null) => v || '-' },
+    { title: '入职日期', dataIndex: 'hireDate', width: 130, render: (v: string | null) => fmtDate(v) },
+    { title: '月薪', dataIndex: 'salary', width: 130, render: (v: number | null) => fmtMoney(v) },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 90,
+      render: (v: number) => (v === 1 ? <Tag color="success">在职</Tag> : <Tag color="default">离职</Tag>),
+    },
+    {
+      // ★ 通用能力：每行一个「关联」，跳法由 ontology.ts 推导，不在这里写死。
+      //   放在固定的操作列里，避免宽表横向滚动后按钮被挤出视口。
+      title: '操作',
+      key: 'action',
+      width: 210,
+      fixed: 'right',
+      render: (_v, row) => (
+        <Space size={4}>
+          <Button type="link" size="small" icon={<ApartmentOutlined />} href={graphHref('Employee', row.id)}>
+            关联
+          </Button>
+          {hasPerm('demo:employee:edit') ? (
+            <Button type="link" size="small" onClick={() => openEdit(row)}>
+              编辑
+            </Button>
+          ) : null}
+          {hasPerm('demo:employee:del') ? (
+            <Popconfirm
+              title="确认删除该员工？"
+              okText="删除"
+              cancelText="取消"
+              okButtonProps={{ danger: true }}
+              onConfirm={() => remove(row)}
+            >
+              <Button type="link" size="small" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          ) : null}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert
+        type="info"
+        showIcon
+        title="员工管理是「一个完整业务模块」的样板"
+        description="包含列表筛选、增删改查、Excel 批量导入与按筛选条件导出，开发新模块时照这套结构复制即可。导入模板表头：工号 / 姓名 / 身份证号 / 性别 / 部门 / 职位 / 手机号 / 邮箱 / 入职日期 / 月薪 / 状态 / 备注。姓名、身份证号、手机号、邮箱会逐行校验，不合格的行会提示具体原因。"
+      />
+
+      <DataTable<EmpRow>
+        api="/api/employees"
+        rowKey="id"
+        columns={columns}
+        refreshKey={refreshKey}
+        scrollX={1790}
+        selectable={hasPerm('demo:employee:del')}
+        onBatchDelete={async (keys) => {
+          try {
+            await Promise.all(keys.map((k) => request('delete', `/api/employees/${String(k)}`)));
+            message.success('批量删除完成');
+            refresh();
+          } catch (e) {
+            message.error(errMsg(e));
+          }
+        }}
+        searchFields={[
+          {
+            name: 'status',
+            label: '状态',
+            type: 'select',
+            options: [
+              { label: '在职', value: 1 },
+              { label: '离职', value: 0 },
+            ],
+          },
+          {
+            name: 'gender',
+            label: '性别',
+            type: 'select',
+            options: [
+              { label: '男', value: 'male' },
+              { label: '女', value: 'female' },
+            ],
+          },
+          { name: 'deptId', label: '部门', type: 'select', options: flattenDepts(deptTree) },
+        ]}
+        exportable={{ filename: '员工信息.xlsx', module: 'employees' }}
+        canAdd={hasPerm('demo:employee:add')}
+        onAdd={openCreate}
+        addText="新增员工"
+        toolbar={
+          hasPerm('demo:employee:import') ? (
+            <Upload
+              accept=".xlsx,.xls"
+              showUploadList={false}
+              beforeUpload={(file) => {
+                void doImport(file as unknown as File);
+                return false; // 阻止 antd 自己发请求，由我们接管
+              }}
+            >
+              <Button icon={<UploadOutlined />} loading={importing}>
+                导入 Excel
+              </Button>
+            </Upload>
+          ) : null
+        }
+      />
+
+      <Modal
+        title={editing ? '编辑员工' : '新增员工'}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={submit}
+        confirmLoading={submitting}
+        destroyOnHidden
+        mask={{ closable: false }}
+        width={640}
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: 8 }}>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="code" label="工号" rules={formRules('code', { label: '工号', required: true })}>
+                <Input maxLength={32} placeholder="如 E1001" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="name" label="姓名" rules={formRules('name', { label: '姓名', required: true })}>
+                <Input maxLength={32} placeholder="真实姓名，2-32 个汉字" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item
+            name="idCard"
+            label="身份证号"
+            rules={formRules('idCard', { label: '身份证号' })}
+            extra="选填；需为 15 位或 18 位身份证号（18 位最后一位可为 X），列表展示时自动脱敏。"
+          >
+            <Input placeholder="如 11010519491231002X" />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
+                <Select
+                  options={[
+                    { label: '男', value: 'male' },
+                    { label: '女', value: 'female' },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="deptId" label="部门">
+                <TreeSelect allowClear treeDefaultExpandAll placeholder="请选择部门" treeData={toTreeData(deptTree)} />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="position" label="职位">
+                <Input placeholder="如 高级工程师" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="hireDate" label="入职日期">
+                <DatePicker style={{ width: '100%' }} placeholder="选择日期" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="phone" label="手机号" rules={formRules('phone', { label: '手机号' })}>
+                <Input maxLength={20} placeholder="选填，11 位手机号" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="email" label="邮箱" rules={formRules('email', { label: '邮箱' })}>
+                <Input maxLength={254} placeholder="选填，如 name@example.com" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="salary" label="月薪（元）">
+                <InputNumber min={0} max={10000000} step={500} style={{ width: '100%' }} placeholder="选填" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="status" label="状态">
+                <Select
+                  options={[
+                    { label: '在职', value: 1 },
+                    { label: '离职', value: 0 },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item name="remark" label="备注">
+            <Input.TextArea rows={2} maxLength={200} showCount placeholder="选填" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}