hikvision-web 1.0.0

package/src/pages/GroupPage.tsx

@@ -0,0 +1,336 @@
+/**
+ * 车辆群组管理页面
+ * 
+ * 重要概念澄清（2026-05-23）：
+ * - 车辆群组 (car-group)：停车场功能，用于车辆出入控制
+ * - 车辆分类 (category)：系统预置分类（固定车、临时车等）+ 自定义群组
+ * 
+ * 注意：车辆群组仅用于停车场管理，与人员通行无关
+ */
+
+import { useEffect, useState } from 'react';
+import { Table, Button, Input, Space, Modal, message, Form, Select, Tag, Radio } from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  CarOutlined,
+} from '@ant-design/icons';
+import { vehicleGroupApi, vehicleApi } from '../services/api';
+import { SYSTEM_CATEGORY_ID_ARRAY } from '../utils/constants';
+
+interface CarGroup {
+  groupId: string;
+  groupName: string;
+  groupType: '0' | '1';
+  description?: string;
+  regionIndexCode?: string;
+  type?: 'system' | 'custom'; // system=系统分类, custom=自定义群组
+}
+
+interface Vehicle {
+  vehicleId: string;
+  plateNo: string;
+  personName?: string;
+}
+
+export default function CarGroupPage() {
+  const [groups, setGroups] = useState<CarGroup[]>([]);
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchName, setSearchName] = useState('');
+  const [typeFilter, setTypeFilter] = useState<'all' | 'system' | 'custom'>('all');
+  const [addModal, setAddModal] = useState<{ visible: false } | { visible: true; editingGroup?: CarGroup }>({ visible: false });
+  const [form] = Form.useForm();
+  const [selectedGroup, setSelectedGroup] = useState<CarGroup | null>(null);
+  const [assignVehicleModal, setAssignVehicleModal] = useState(false);
+  const [assignForm] = Form.useForm();
+
+  const loadGroups = async () => {
+    setIsLoading(true);
+    try {
+      const res: any = await vehicleGroupApi.list();
+      const list: CarGroup[] = res?.data || res || [];
+      // 添加 type 标识
+      const groupsWithType = list.map(g => ({
+        ...g,
+        type: SYSTEM_CATEGORY_ID_ARRAY.includes(g.groupId) ? 'system' as const : 'custom' as const,
+      }));
+      setGroups(groupsWithType);
+    } catch (error: any) {
+      message.error(`加载群组失败: ${error.message || error}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadVehicles = async () => {
+    try {
+      const res: any = await vehicleApi.list({ pageNo: 1, pageSize: 100 });
+      const list = res?.data?.list || res?.list || [];
+      setVehicles(list);
+    } catch (error) {
+      console.error('加载车辆失败:', error);
+    }
+  };
+
+  useEffect(() => {
+    loadGroups();
+    loadVehicles();
+  }, []);
+
+  const handleAdd = () => {
+    form.resetFields();
+    setAddModal({ visible: true });
+  };
+
+  const handleEdit = (record: CarGroup) => {
+    form.setFieldsValue({ groupName: record.groupName, groupType: record.groupType });
+    setAddModal({ visible: true, editingGroup: record });
+  };
+
+  const handleDelete = (record: CarGroup) => {
+    // 系统分类不允许删除
+    if (SYSTEM_CATEGORY_ID_ARRAY.includes(record.groupId)) {
+      message.warning('系统预置分类不允许删除');
+      return;
+    }
+
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除群组"${record.groupName}"吗？`,
+      okText: '确认删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await vehicleGroupApi.delete(record.groupId);
+          message.success('删除成功');
+          loadGroups();
+        } catch (error: any) {
+          message.error(`删除失败: ${error.message || error}`);
+        }
+      },
+    });
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      if ((addModal as any).editingGroup) {
+        await vehicleGroupApi.update((addModal as any).editingGroup.groupId, values);
+        message.success('更新成功');
+      } else {
+        await vehicleGroupApi.create(values);
+        message.success('创建成功');
+      }
+      setAddModal({ visible: false });
+      loadGroups();
+    } catch (error: any) {
+      if (error.errorFields) return;
+      message.error(`${(addModal as any).editingGroup ? '更新' : '创建'}失败: ${error.message || error}`);
+    }
+  };
+
+  const handleAssignVehicle = (record: CarGroup) => {
+    setSelectedGroup(record);
+    assignForm.resetFields();
+    setAssignVehicleModal(true);
+  };
+
+  const handleAssignSubmit = async () => {
+    try {
+      await assignForm.validateFields();
+      message.success(`已分配车辆到群组"${selectedGroup?.groupName}"`);
+      setAssignVehicleModal(false);
+    } catch (error: any) {
+      if (error.errorFields) return;
+      message.error(`分配失败: ${error.message || error}`);
+    }
+  };
+
+  // 过滤群组
+  const filteredGroups = groups.filter((g) => {
+    const matchName = g.groupName.toLowerCase().includes(searchName.toLowerCase());
+    const matchType = typeFilter === 'all' || g.type === typeFilter;
+    return matchName && matchType;
+  });
+
+  // 系统分类名称映射（中文）
+  const getCategoryName = (groupId: string): string => {
+    const nameMap: Record<string, string> = {
+      '9': '黑名单',
+      '10': '固定车',
+      '11': '临时车',
+      '12': '预约车',
+      '13': '群组车',
+      '14': '特殊车',
+    };
+    return nameMap[groupId] || '';
+  };
+
+  const columns = [
+    {
+      title: '群组编号',
+      dataIndex: 'groupId',
+      key: 'groupId',
+      width: 200,
+      render: (id: string) => <code style={{ fontSize: 12 }}>{id}</code>,
+    },
+    {
+      title: '群组名称',
+      dataIndex: 'groupName',
+      key: 'groupName',
+      width: 150,
+    },
+    {
+      title: '中文名称',
+      key: 'chineseName',
+      width: 100,
+      render: (_: any, record: CarGroup) => {
+        if (record.type === 'system') {
+          return getCategoryName(record.groupId) || '-';
+        }
+        return '-';
+      },
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      width: 100,
+      render: (type: 'system' | 'custom') => (
+        <Tag color={type === 'system' ? 'blue' : 'green'}>
+          {type === 'system' ? '系统分类' : '自定义群组'}
+        </Tag>
+      ),
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      width: 150,
+      render: (desc: string) => desc || '-',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 250,
+      render: (_: any, record: CarGroup) => (
+        <Space size="small">
+          <Button size="small" type="text" icon={<CarOutlined />} onClick={() => handleAssignVehicle(record)}>
+            分配车辆
+          </Button>
+          {record.type === 'custom' && (
+            <>
+              <Button size="small" type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+                编辑
+              </Button>
+              <Button size="small" type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+                删除
+              </Button>
+            </>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
+        <h2>车辆群组管理</h2>
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={loadGroups}>刷新</Button>
+          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加群组</Button>
+        </Space>
+      </div>
+
+      <div style={{ marginBottom: 16, display: 'flex', gap: 16, alignItems: 'center' }}>
+        <Input.Search
+          placeholder="搜索群组名称"
+          value={searchName}
+          onChange={(e) => setSearchName(e.target.value)}
+          style={{ width: 300 }}
+          allowClear
+        />
+        <Radio.Group
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value as 'all' | 'system' | 'custom')}
+          optionType="button"
+          buttonStyle="solid"
+        >
+          <Radio.Button value="all">全部</Radio.Button>
+          <Radio.Button value="system">系统分类</Radio.Button>
+          <Radio.Button value="custom">自定义群组</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={filteredGroups}
+        rowKey="groupId"
+        loading={isLoading}
+        pagination={{ pageSize: 20, showSizeChanger: true, showTotal: (t) => `共 ${t} 条` }}
+      />
+
+      {/* 添加/编辑群组弹窗 */}
+      <Modal
+        title={(addModal as any).editingGroup ? '编辑群组' : '添加群组'}
+        open={(addModal as any).visible}
+        onOk={handleSubmit}
+        onCancel={() => setAddModal({ visible: false })}
+        okText={(addModal as any).editingGroup ? '保存' : '添加'}
+        cancelText="取消"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="groupName"
+            label="群组名称"
+            rules={[{ required: true, message: '请输入群组名称' }]}
+          >
+            <Input placeholder="请输入群组名称" />
+          </Form.Item>
+          <Form.Item
+            name="groupType"
+            label="群组类型"
+            initialValue="0"
+            rules={[{ required: true, message: '请选择群组类型' }]}
+          >
+            <Select>
+              <Select.Option value="0">内部群组</Select.Option>
+              <Select.Option value="1">外部群组</Select.Option>
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 分配车辆弹窗 */}
+      <Modal
+        title={`分配车辆到 "${selectedGroup?.groupName}"`}
+        open={assignVehicleModal}
+        onOk={handleAssignSubmit}
+        onCancel={() => setAssignVehicleModal(false)}
+        okText="确认分配"
+        cancelText="取消"
+      >
+        <Form form={assignForm} layout="vertical">
+          <Form.Item
+            name="vehicleIds"
+            label="选择车辆"
+            rules={[{ required: true, message: '请选择车辆' }]}
+          >
+            <Select mode="multiple" placeholder="请选择车辆" allowClear>
+              {vehicles.map((v) => (
+                <Select.Option key={v.vehicleId} value={v.vehicleId}>
+                  {v.plateNo} {v.personName ? `- ${v.personName}` : ''}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}

package/src/pages/OrgPage.tsx

@@ -0,0 +1,198 @@
+/**
+ * 组织管理页面
+ */
+
+import { useEffect, useState } from 'react';
+import { Table, Button, Input, Space, Modal, message, Select, Tag } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
+import { orgApi } from '../services/api';
+
+interface Organization {
+  orgIndexCode: string;
+  orgName: string;
+  parentOrgIndexCode?: string;
+  level?: number;
+}
+
+export default function OrgPage() {
+  const [orgs, setOrgs] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalType, setModalType] = useState<'add' | 'edit'>('add');
+  const [formData, setFormData] = useState({ orgName: '', parentIndexCode: 'root000000' });
+
+  useEffect(() => {
+    loadOrgs();
+  }, []);
+
+  const loadOrgs = async () => {
+    setLoading(true);
+    try {
+      const result: any = await orgApi.list();
+      const list = result?.data || result || [];
+      setOrgs(Array.isArray(list) ? list : []);
+    } catch (error: any) {
+      message.error(`加载组织失败: ${error.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setModalType('add');
+    setFormData({ orgName: '', parentIndexCode: 'root000000' });
+    setSelectedOrg(null);
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (record: Organization) => {
+    setModalType('edit');
+    setSelectedOrg(record);
+    setFormData({ orgName: record.orgName, parentIndexCode: record.parentOrgIndexCode || 'root000000' });
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = async (record: Organization) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除组织"${record.orgName}"吗？删除后无法恢复。`,
+      okText: '确认删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await orgApi.delete([record.orgIndexCode]);
+          message.success('删除成功');
+          loadOrgs();
+        } catch (error: any) {
+          message.error(`删除失败: ${error.message || error}`);
+        }
+      },
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.orgName.trim()) {
+      message.warning('请输入组织名称');
+      return;
+    }
+
+    try {
+      if (modalType === 'add') {
+        await orgApi.create([{ orgName: formData.orgName, parentIndexCode: formData.parentIndexCode }]);
+        message.success('添加成功');
+      } else if (selectedOrg) {
+        await orgApi.update(selectedOrg.orgIndexCode, { orgName: formData.orgName });
+        message.success('更新成功');
+      }
+      setIsModalVisible(false);
+      loadOrgs();
+    } catch (error: any) {
+      message.error(`${modalType === 'add' ? '添加' : '更新'}失败: ${error.message || error}`);
+    }
+  };
+
+  const columns = [
+    {
+      title: '组织名称',
+      dataIndex: 'orgName',
+      key: 'orgName',
+      render: (text: string, record: Organization) => (
+        <Space>
+          <span>{text}</span>
+          {record.level === 0 && <Tag color="blue">根组织</Tag>}
+        </Space>
+      ),
+    },
+    {
+      title: '组织编号',
+      dataIndex: 'orgIndexCode',
+      key: 'orgIndexCode',
+      width: 300,
+      ellipsis: true,
+    },
+    {
+      title: '层级',
+      dataIndex: 'level',
+      key: 'level',
+      width: 80,
+      render: (level?: number) => level ?? '-',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      render: (_: any, record: Organization) => (
+        <Space>
+          <Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          <Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+            删除
+          </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>
+
+      <Table
+        columns={columns}
+        dataSource={orgs}
+        rowKey="orgIndexCode"
+        loading={loading}
+        pagination={{ pageSize: 20, showSizeChanger: true }}
+        scroll={{ x: 800 }}
+      />
+
+      <Modal
+        title={modalType === 'add' ? '添加组织' : '编辑组织'}
+        open={isModalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setIsModalVisible(false)}
+        okText={modalType === 'add' ? '添加' : '保存'}
+        cancelText="取消"
+      >
+        <div style={{ padding: 16 }}>
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8 }}>组织名称</label>
+            <Input
+              value={formData.orgName}
+              onChange={(e) => setFormData({ ...formData, orgName: e.target.value })}
+              placeholder="请输入组织名称"
+            />
+          </div>
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8 }}>父组织</label>
+            <Select
+              value={formData.parentIndexCode}
+              onChange={(value) => setFormData({ ...formData, parentIndexCode: value })}
+              style={{ width: '100%' }}
+            >
+              <Select.Option value="root000000">根组织</Select.Option>
+              {orgs.map((org) => (
+                <Select.Option key={org.orgIndexCode} value={org.orgIndexCode}>
+                  {org.orgName}
+                </Select.Option>
+              ))}
+            </Select>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}