hikvision-web 1.0.0

package/src/pages/OrgTreePage.tsx

@@ -0,0 +1,203 @@
+/**
+ * 组织架构 - 树形多级显示
+ */
+
+import { useEffect, useState } from 'react';
+import { Tree, Button, Space, Modal, message, Input, Form, Spin } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
+import { orgApi } from '../services/api';
+import type { DataNode } from 'antd/es/tree';
+
+interface Organization {
+  orgIndexCode: string;
+  orgName: string;
+  parentOrgIndexCode?: string;
+}
+
+export default function OrgTreePage() {
+  const [treeData, setTreeData] = useState<DataNode[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalType, setModalType] = useState<'add' | 'edit'>('add');
+  const [editingOrg, setEditingOrg] = useState<Organization | null>(null);
+  const [form] = Form.useForm();
+  const [orgList, setOrgList] = useState<Organization[]>([]);
+  const [selectedParent, setSelectedParent] = useState<string>('root00000000');
+
+  useEffect(() => {
+    loadOrgs();
+  }, []);
+
+  const loadOrgs = async () => {
+    setLoading(true);
+    try {
+      const res: any = await orgApi.list();
+      const list: Organization[] = res?.data || res || [];
+      setOrgList(list);
+      
+      // 构建树形数据
+      const map = new Map<string, DataNode>();
+      list.forEach((org) => {
+        map.set(org.orgIndexCode, {
+          title: org.orgName,
+          key: org.orgIndexCode,
+          children: [],
+        });
+      });
+
+      const roots: DataNode[] = [];
+      list.forEach((org) => {
+        const node = map.get(org.orgIndexCode)!;
+        if (org.parentOrgIndexCode && org.parentOrgIndexCode !== '-1' && map.has(org.parentOrgIndexCode)) {
+          const parent = map.get(org.parentOrgIndexCode)!;
+          parent.children = parent.children || [];
+          parent.children.push(node);
+        } else {
+          roots.push(node);
+        }
+      });
+
+      setTreeData(roots);
+      setExpandedKeys(roots.map((r) => r.key as string));
+    } catch (error: any) {
+      message.error(`加载组织失败: ${error.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setModalType('add');
+    setEditingOrg(null);
+    setSelectedParent('root00000000');
+    form.resetFields();
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (org: Organization) => {
+    setModalType('edit');
+    setEditingOrg(org);
+    form.setFieldsValue({ orgName: org.orgName });
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = async (org: Organization) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除组织"${org.orgName}"吗？删除后无法恢复。`,
+      okText: '确认删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await orgApi.delete([org.orgIndexCode]);
+          message.success('删除成功');
+          loadOrgs();
+        } catch (error: any) {
+          message.error(`删除失败: ${error.message || error}`);
+        }
+      },
+    });
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      if (modalType === 'add') {
+        await orgApi.create([{ 
+          orgName: values.orgName, 
+          parentIndexCode: selectedParent 
+        }]);
+        message.success('添加成功');
+      } else if (editingOrg) {
+        await orgApi.update(editingOrg.orgIndexCode, { orgName: values.orgName });
+        message.success('更新成功');
+      }
+      setIsModalVisible(false);
+      loadOrgs();
+    } catch (error: any) {
+      if (error.errorFields) return;
+      message.error(`${modalType === 'add' ? '添加' : '更新'}失败: ${error.message || error}`);
+    }
+  };
+
+  const renderTreeActions = (org: Organization): React.ReactNode => (
+    <Space size="small">
+      <Button size="small" type="text" icon={<PlusOutlined />} onClick={() => {
+        setModalType('add');
+        setEditingOrg(null);
+        setSelectedParent(org.orgIndexCode);
+        form.resetFields();
+        setIsModalVisible(true);
+      }}>
+        添加
+      </Button>
+      <Button size="small" type="text" icon={<EditOutlined />} onClick={() => handleEdit(org)}>
+        编辑
+      </Button>
+      <Button size="small" type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(org)}>
+        删除
+      </Button>
+    </Space>
+  );
+
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
+        <h2>组织架构（树形）</h2>
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={loadOrgs}>刷新</Button>
+          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加组织</Button>
+        </Space>
+      </div>
+
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: 40 }}><Spin size="large" /></div>
+      ) : (
+        <Tree
+          showLine
+          defaultExpandAll
+          expandedKeys={expandedKeys}
+          onExpand={(keys) => setExpandedKeys(keys as string[])}
+          treeData={treeData}
+          titleRender={(node) => (
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 12 }}>
+              <span>{node.title as string}</span>
+              <span style={{ opacity: 0.6 }}>{renderTreeActions(orgList.find((o) => o.orgIndexCode === node.key) || { orgIndexCode: node.key as string, orgName: node.title as string } as Organization)}</span>
+            </div>
+          )}
+        />
+      )}
+
+      <Modal
+        title={modalType === 'add' ? '添加组织' : '编辑组织'}
+        open={isModalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setIsModalVisible(false)}
+        okText={modalType === 'add' ? '添加' : '保存'}
+        cancelText="取消"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="orgName"
+            label="组织名称"
+            rules={[{ required: true, message: '请输入组织名称' }]}
+          >
+            <Input placeholder="请输入组织名称" />
+          </Form.Item>
+          {modalType === 'add' && (
+            <Form.Item label="父组织">
+              <Tree
+                showLine
+                treeData={treeData}
+                selectedKeys={[selectedParent]}
+                onSelect={(keys) => setSelectedParent(keys[0] as string)}
+              />
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+    </div>
+  );
+}

package/src/pages/PersonDetail.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Card, Descriptions, Button, message, Spin, Table, Tag } from 'antd';
+import { EditOutlined, DeleteOutlined, ArrowLeftOutlined, ReloadOutlined } from '@ant-design/icons';
+import { personApi, bindingApi, vehicleGroupApi, vehicleApi } from '../services/api';
+
+export default function PersonDetail() {
+  const { personId } = useParams();
+  const navigate = useNavigate();
+  const [person, setPerson] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [relatedCards, setRelatedCards] = useState<any[]>([]);
+  const [relatedVehicles, setRelatedVehicles] = useState<any[]>([]);
+  const [vehicleGroups, setVehicleGroups] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!personId) return;
+    loadPerson();
+    loadRelatedBindings(personId);
+    loadVehicleGroups();
+  }, [personId]);
+
+  const loadVehicleGroups = async () => {
+    try {
+      const res: any = await vehicleGroupApi.list();
+      setVehicleGroups(res.data || []);
+    } catch (e) { /* ignore */ }
+  };
+
+  const getGroupName = (groupId: string) => {
+    if (!groupId) return '—';
+    const g = vehicleGroups.find((g: any) => g.groupId === groupId);
+    return g?.groupName || groupId;
+  };
+
+  const loadPerson = async () => {
+    if (!personId) return;
+    setLoading(true);
+    try {
+      const data = await personApi.getById(personId);
+      setPerson(data.data);
+    } catch (error: any) {
+      message.error(`加载失败: ${error.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadRelatedBindings = async (pid: string) => {
+    if (!pid) return;
+    try {
+      const res: any = await bindingApi.getPersonBindings(pid);
+      if (res.success !== false) {
+        setRelatedCards(res.data?.cards || []);
+
+        // Fetch vehicle details to get groupId/groupName for each vehicle
+        const vehicles = res.data?.vehicles || [];
+        const vehiclesWithGroup = await Promise.all(
+          vehicles.map(async (v: any) => {
+            try {
+              const detail: any = await vehicleApi.getById(v.vehicleId);
+              const full = detail.data || {};
+              return {
+                ...v,
+                // 保留原始 personId，不被 getById 返回值覆盖
+                personId: v.personId,
+                groupId: full.vehicleGroup || full.groupId || v.groupId || '',
+                groupName: full.groupName || '',
+              };
+            } catch {
+              return { ...v, personId: v.personId, groupId: v.groupId || '', groupName: '' };
+            }
+          })
+        );
+        setRelatedVehicles(vehiclesWithGroup);
+      }
+    } catch (e) { /* ignore */ }
+  };
+
+  const handleDelete = async () => {
+    if (!personId || !person) return;
+    if (!confirm(`确定要删除人员 ${person.personName} 吗？`)) return;
+    try {
+      await personApi.delete(personId);
+      message.success('删除成功');
+      navigate('/person');
+    } catch (error: any) {
+      message.error(`删除失败: ${error.message || error}`);
+    }
+  };
+
+  if (loading) {
+    return <div style={{ padding: 40, textAlign: 'center' }}><Spin size="large" /></div>;
+  }
+
+  if (!person) {
+    return <div style={{ padding: 40, textAlign: 'center' }}>人员不存在</div>;
+  }
+
+  const genderMap: Record<string, string> = { '1': '男', '2': '女' };
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/person')}>返回</Button>
+        <Button icon={<EditOutlined />} style={{ marginLeft: 8 }} onClick={() => navigate(`/person/edit/${personId}`)}>编辑</Button>
+        <Button icon={<DeleteOutlined />} danger style={{ marginLeft: 8 }} onClick={handleDelete}>删除</Button>
+      </div>
+
+      <Card title="基本信息" style={{ marginBottom: 16 }}>
+        <Descriptions bordered column={2}>
+          <Descriptions.Item label="姓名">{person.personName}</Descriptions.Item>
+          <Descriptions.Item label="工号">{person.jobNo || '—'}</Descriptions.Item>
+          <Descriptions.Item label="性别">{genderMap[person.gender] || '—'}</Descriptions.Item>
+          <Descriptions.Item label="所属组织">{person.orgName || '—'}</Descriptions.Item>
+          <Descriptions.Item label="手机号">{person.phoneNo || '—'}</Descriptions.Item>
+          <Descriptions.Item label="证件号">{person.certificateNo || '—'}</Descriptions.Item>
+          <Descriptions.Item label="邮箱">{person.email || '—'}</Descriptions.Item>
+          <Descriptions.Item label="更新时间">{person.updateTime ? new Date(person.updateTime).toLocaleString('zh-CN') : '—'}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <Card title="绑定信息" extra={<Button icon={<ReloadOutlined />} size="small" onClick={() => personId && loadRelatedBindings(personId)}>刷新</Button>}>
+        <div style={{ marginBottom: 24 }}>
+          <h4 style={{ marginBottom: 12 }}>绑定卡片（{relatedCards.length}张）</h4>
+          <Table size="small" dataSource={relatedCards} rowKey="cardNo" pagination={false} style={{ background: '#fff' }}>
+            <Table.Column title="卡号" dataIndex="cardNo" />
+            <Table.Column title="卡片类型" dataIndex="cardType" render={(t: number) => ({ 1: '普通卡', 2: '来宾卡', 3: '巡逻卡', 4: '管理员卡' }[t] || t)} />
+            <Table.Column title="状态" dataIndex="useStatus" render={(t: number) => <Tag color={t === 1 ? 'green' : 'red'}>{t === 1 ? '正常' : '禁用'}</Tag>} />
+          </Table>
+          {relatedCards.length === 0 && <div style={{ color: '#999', textAlign: 'center', padding: 16 }}>暂未绑定卡片</div>}
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: 12 }}>绑定车辆（{relatedVehicles.length}辆）</h4>
+          <Table size="small" dataSource={relatedVehicles} rowKey="vehicleId" pagination={false} style={{ background: '#fff' }}>
+            <Table.Column title="车牌号" dataIndex="plateNo" />
+            <Table.Column title="车辆类型" dataIndex="vehicleType" render={(t: number) => t === 1 ? '小型车' : t === 2 ? '大型车' : t} />
+            <Table.Column title="车辆群组" dataIndex="groupId" render={(g: string) => getGroupName(g)} />
+          </Table>
+          {relatedVehicles.length === 0 && <div style={{ color: '#999', textAlign: 'center', padding: 16 }}>暂未绑定车辆</div>}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/pages/PersonForm.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { Form, Input, Select, TreeSelect, Button, message, Card, Spin, Space } from 'antd';
+const { Option } = Select;
+import { ArrowLeftOutlined, SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+import { personApi } from '../services/api';
+import { useAppStore } from '../store/appStore';
+
+export default function PersonForm() {
+  const { personId } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const defaultOrgCode = searchParams.get('orgCode');
+  const isEdit = !!personId;
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const { organizations, loadOrganizations, refreshPerson } = useAppStore();
+
+  useEffect(() => {
+    loadOrganizations();
+    if (isEdit && personId) {
+      loadPerson();
+    }
+  }, [personId]);
+
+  const loadPerson = async () => {
+    if (!personId) return;
+    setLoading(true);
+    try {
+      const data = await personApi.getById(personId);
+      form.setFieldsValue({
+        personName: data.data.personName,
+        gender: data.data.gender,
+        jobNo: data.data.jobNo,
+        orgIndexCode: data.data.orgIndexCode,
+        phoneNo: data.data.phoneNo,
+        email: data.data.email,
+        certificateNo: data.data.certificateNo,
+        personEnableStartTime: data.data.personEnableStartTime,
+        personEnableEndTime: data.data.personEnableEndTime,
+      });
+    } catch (error: any) {
+      message.error(`加载失败: ${error.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 将组织列表转换为 TreeSelect 格式
+  const treeData = useMemo(() => {
+    if (!organizations.length) return [];
+
+    // Build a map of indexCode -> node
+    const nodeMap = new Map<string, any>();
+    organizations.forEach(org => {
+      nodeMap.set(org.orgIndexCode, {
+        label: org.orgName,
+        value: org.orgIndexCode,
+        children: [],
+      });
+    });
+
+    // Build tree by linking children to parents
+    const roots: any[] = [];
+    organizations.forEach(org => {
+      const node = nodeMap.get(org.orgIndexCode);
+      if (!node) return;
+
+      const parentCode = org.parentOrgIndexCode || '-1';
+      if (parentCode === '-1' || parentCode === 'root00000000') {
+        roots.push(node);
+      } else {
+        const parent = nodeMap.get(parentCode);
+        if (parent) {
+          parent.children.push(node);
+        } else {
+          roots.push(node);
+        }
+      }
+    });
+
+    return roots;
+  }, [organizations]);
+
+  const handleSubmit = async (values: any) => {
+    setSubmitting(true);
+    try {
+      const dto = {
+        personName: values.personName,
+        gender: values.gender as '1' | '2',
+        jobNo: values.jobNo,
+        orgIndexCode: values.orgIndexCode,
+        phoneNo: values.phoneNo,
+        email: values.email,
+        certificateNo: values.certificateNo,
+        personEnableStartTime: values.personEnableStartTime,
+        personEnableEndTime: values.personEnableEndTime,
+      };
+
+      if (isEdit && personId) {
+        await personApi.update(personId, dto);
+        await refreshPerson(personId);
+        message.success('更新成功');
+      } else {
+        await personApi.create(dto);
+        message.success('添加成功');
+      }
+      // 返回树状视图，并保留之前的组织选择
+      const backUrl = defaultOrgCode ? `/person-tree?orgCode=${defaultOrgCode}` : '/person-tree';
+      navigate(backUrl);
+    } catch (error: any) {
+      message.error(`保存失败: ${error.message || error}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return <div style={{ padding: 40, textAlign: 'center' }}><Spin size="large" /></div>;
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Button icon={<ArrowLeftOutlined />} onClick={() => {
+          const backUrl = defaultOrgCode ? `/person-tree?orgCode=${defaultOrgCode}` : '/person-tree';
+          navigate(backUrl);
+        }}>返回</Button>
+        <h2>{isEdit ? '编辑人员' : '添加人员'}</h2>
+      </div>
+
+      <Card>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          initialValues={{ gender: '1', orgIndexCode: defaultOrgCode || undefined }}
+        >
+          <Form.Item name="personName" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
+            <Input placeholder="请输入姓名" />
+          </Form.Item>
+
+          <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
+            <Select placeholder="请选择性别">
+              <Option value="1">男</Option>
+              <Option value="2">女</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="jobNo" label="工号">
+            <Input placeholder="请输入工号" />
+          </Form.Item>
+
+          <Form.Item
+            name="orgIndexCode"
+            label="所属组织"
+            rules={[{ required: true, message: '请选择组织' }]}
+          >
+            <TreeSelect
+              placeholder="请选择组织"
+              showSearch
+              allowClear
+              treeDefaultExpandAll
+              treeData={treeData}
+              treeNodeFilterProp="label"
+              style={{ width: '100%' }}
+            />
+          </Form.Item>
+
+          <Form.Item name="phoneNo" label="手机号">
+            <Input placeholder="请输入手机号" />
+          </Form.Item>
+
+          <Form.Item name="email" label="邮箱">
+            <Input placeholder="请输入邮箱" />
+          </Form.Item>
+
+          <Form.Item name="certificateNo" label="证件号">
+            <Input placeholder="请输入证件号" />
+          </Form.Item>
+
+          <Form.Item style={{ marginTop: 24 }}>
+            <Space>
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={submitting}>
+                {isEdit ? '保存修改' : '添加人员'}
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={() => form.resetFields()}>重置</Button>
+              <Button onClick={() => {
+                const backUrl = defaultOrgCode ? `/person-tree?orgCode=${defaultOrgCode}` : '/person-tree';
+                navigate(backUrl);
+              }}>取消</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
+}