hikvision-web 1.0.0

package/src/pages/PersonTreePage.tsx

@@ -0,0 +1,563 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { Table, Button, Input, Space, Modal, message, Tree, Spin, Card, Form, Popconfirm } from 'antd';
+import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, TeamOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useAppStore } from '../store/appStore';
+import { personApi, orgApi } from '../services/api';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import type { DataNode } from 'antd/es/tree';
+
+const { Search } = Input;
+
+interface OrgNode {
+  orgIndexCode: string;
+  orgName: string;
+  parentOrgIndexCode?: string;
+  children: OrgNode[];
+  personCount?: number;
+}
+
+export default function PersonTreePage() {
+  const {
+    loadOrganizations,
+    organizations,
+  } = useAppStore();
+
+  const [searchName, setSearchName] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [deleteModal, setDeleteModal] = useState<{ visible: boolean; personId?: string; personName?: string }>({ visible: false });
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [batchDeleteModal, setBatchDeleteModal] = useState<{ visible: boolean; count: number }>({ visible: false, count: 0 });
+
+  // 左侧组织树相关
+  const [treeData, setTreeData] = useState<DataNode[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const [selectedOrgName, setSelectedOrgName] = useState<string>('全部');
+  const [treeLoading, setTreeLoading] = useState(false);
+
+  // 按需加载：只保存当前选中组织的人员数据
+  const [currentPersons, setCurrentPersons] = useState<any[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [orgPersonCounts, setOrgPersonCounts] = useState<Record<string, number>>({});
+
+  // 使用 useRef 存储已加载的组织计数，避免重复请求
+  const countsLoadedRef = useRef<Set<string>>(new Set());
+  // 使用 ref 存储取消标志
+  const cancelRef = useRef(false);
+
+  // 组织管理相关
+  const [orgModalVisible, setOrgModalVisible] = useState(false);
+  const [orgModalType, setOrgModalType] = useState<'add' | 'edit'>('add');
+  const [editingOrg, setEditingOrg] = useState<any>(null);
+  const [orgForm] = Form.useForm();
+  const [selectedParentOrg, setSelectedParentOrg] = useState<string>('root00000000');
+  const [searchParams] = useSearchParams();
+  const initialOrgCode = searchParams.get('orgCode');
+
+  useEffect(() => {
+    loadOrganizations();
+  }, [loadOrganizations]);
+
+  // 初始化时恢复之前的组织选择
+  useEffect(() => {
+    if (organizations.length > 0 && initialOrgCode) {
+      const org = organizations.find((o: any) => o.orgIndexCode === initialOrgCode);
+      if (org) {
+        setSelectedOrg(initialOrgCode);
+        setSelectedOrgName(org.orgName);
+      }
+    }
+  }, [organizations, initialOrgCode]);
+
+  /**
+   * 按需加载指定组织的人员数量（用于统计）
+   * 只在首次访问时加载，后续使用缓存
+   */
+  const loadOrgPersonCount = useCallback(async (orgCode: string) => {
+    if (countsLoadedRef.current.has(orgCode)) {
+      return;
+    }
+
+    try {
+      const res: any = await personApi.list({ pageNo: 1, pageSize: 1, orgIndexCode: orgCode });
+      const total = res?.data?.total || res?.total || 0;
+      setOrgPersonCounts(prev => ({ ...prev, [orgCode]: total }));
+      countsLoadedRef.current.add(orgCode);
+    } catch {
+      setOrgPersonCounts(prev => ({ ...prev, [orgCode]: 0 }));
+    }
+  }, []);
+
+  /**
+   * 加载当前选中组织的人员列表（分页）
+   */
+  const loadCurrentOrgPersons = useCallback(async (orgCode: string | null, pageNum: number, pageSz: number, name?: string) => {
+    setTreeLoading(true);
+    cancelRef.current = false;
+
+    try {
+      const res: any = await personApi.list({
+        pageNo: pageNum,
+        pageSize: pageSz,
+        personName: name || undefined,
+        orgIndexCode: orgCode || undefined,
+      });
+
+      if (cancelRef.current) return;
+
+      const list = res?.data?.list || res?.list || [];
+      const total = res?.data?.total || res?.total || 0;
+      setCurrentPersons(list);
+      setTotalCount(total);
+    } catch (error: any) {
+      if (!cancelRef.current) {
+        message.error(`加载人员数据失败: ${error.message}`);
+        setCurrentPersons([]);
+      }
+    } finally {
+      if (!cancelRef.current) {
+        setTreeLoading(false);
+      }
+    }
+  }, []);
+
+  // 初始化时加载所有组织的人员数量
+  useEffect(() => {
+    if (organizations.length > 0) {
+      // 加载所有组织的人员数量（用于树节点显示）
+      organizations.forEach((org: any) => {
+        if (!countsLoadedRef.current.has(org.orgIndexCode)) {
+          loadOrgPersonCount(org.orgIndexCode);
+        }
+      });
+    }
+  }, [organizations, loadOrgPersonCount]);
+
+  // 当选中组织变化时，加载该组织的人员列表
+  useEffect(() => {
+    // 延迟执行，避免与树节点统计冲突
+    const timer = setTimeout(() => {
+      loadCurrentOrgPersons(selectedOrg, page, pageSize, searchName);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [selectedOrg, page, pageSize, searchName, loadCurrentOrgPersons]);
+
+  /**
+   * 构建组织树（添加人员统计）
+   */
+  const buildTreeData = useCallback(() => {
+    if (!organizations || organizations.length === 0) {
+      setTreeData([]);
+      return;
+    }
+
+    const calcPersonCount = (node: OrgNode): number => {
+      const directCount = node.personCount || 0;
+      const childrenCount = node.children.reduce((sum, child) => sum + calcPersonCount(child), 0);
+      return directCount + childrenCount;
+    };
+
+    const convertToTreeData = (nodes: OrgNode[]): DataNode[] => {
+      return nodes.map((node) => {
+        // 计算该组织的人员数量（包含子组织）
+        const calcTotalCount = (n: OrgNode): number => {
+          const directCount = orgPersonCounts[n.orgIndexCode] || 0;
+          const childrenCount = n.children.reduce((sum, child) => sum + calcTotalCount(child), 0);
+          return directCount + childrenCount;
+        };
+        const totalCount = calcTotalCount(node);
+        
+        return {
+          title: (
+            <span>
+              <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+              {node.orgName}
+              <span style={{ color: '#999', marginLeft: 8, fontSize: 12 }}>
+                ({totalCount} 人)
+              </span>
+            </span>
+          ),
+          key: node.orgIndexCode,
+          children: node.children.length > 0 ? convertToTreeData(node.children) : undefined,
+          // isLeaf 表示是否为叶子节点（没有子组织），但允许展开加载子组织人员
+          isLeaf: node.children.length === 0,
+        };
+      });
+    };
+
+    // 构建组织节点
+    const orgMap = new Map<string, OrgNode>();
+
+    organizations.forEach((org: any) => {
+      orgMap.set(org.orgIndexCode, {
+        orgIndexCode: org.orgIndexCode,
+        orgName: org.orgName,
+        parentOrgIndexCode: org.parentOrgIndexCode,
+        children: [],
+        personCount: orgPersonCounts[org.orgIndexCode] || 0,
+      });
+    });
+
+    const roots: OrgNode[] = [];
+    orgMap.forEach((node) => {
+      if (node.parentOrgIndexCode && node.parentOrgIndexCode !== '-1' && orgMap.has(node.parentOrgIndexCode)) {
+        orgMap.get(node.parentOrgIndexCode)!.children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+
+    if (roots.length === 0) {
+      setTreeData([]);
+    } else {
+      setTreeData(convertToTreeData(roots));
+      // 不再这里设置 expandedKeys，避免选中节点时树收缩
+    }
+  }, [organizations, orgPersonCounts]);
+
+  useEffect(() => {
+    buildTreeData();
+  }, [buildTreeData]);
+
+  // 初始化时设置展开的键（只执行一次）
+  const [initialExpandSet, setInitialExpandSet] = useState(false);
+
+  // 初始化时设置展开状态
+  useEffect(() => {
+    if (treeData.length > 0 && !initialExpandSet) {
+      setExpandedKeys(treeData.map(n => n.key as string));
+      setInitialExpandSet(true);
+    }
+  }, [treeData, initialExpandSet]);
+
+  // 点击树节点
+  const handleTreeSelect = (selectedKeys: React.Key[]) => {
+    if (selectedKeys.length === 0) {
+      setSelectedOrg(null);
+      setSelectedOrgName('全部');
+    } else {
+      const orgCode = selectedKeys[0] as string;
+      setSelectedOrg(orgCode);
+      setPage(1); // 重置到第一页
+      const org = organizations.find((o: any) => o.orgIndexCode === orgCode);
+      setSelectedOrgName(org?.orgName || '全部');
+    }
+    // loadCurrentOrgPersons 会在 useEffect 中被调用
+  };
+
+  const handleSearch = () => {
+    setPage(1); // 搜索时重置到第一页
+    loadCurrentOrgPersons(selectedOrg, 1, pageSize, searchName);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteModal.personId) return;
+    try {
+      await personApi.delete(deleteModal.personId);
+      message.success('删除成功');
+      setDeleteModal({ visible: false });
+      // 刷新当前列表
+      loadCurrentOrgPersons(selectedOrg, page, pageSize, searchName);
+    } catch (error: any) {
+      message.error(`删除失败: ${error.message || error}`);
+    }
+  };
+
+  // 批量删除人员
+  const handleBatchDelete = async () => {
+    if (selectedRowKeys.length === 0) {
+      message.warning('请先选择要删除的人员');
+      return;
+    }
+    try {
+      await personApi.batchDelete(selectedRowKeys as string[]);
+      message.success(`成功删除 ${selectedRowKeys.length} 名人员`);
+      setBatchDeleteModal({ visible: false, count: 0 });
+      setSelectedRowKeys([]);
+      // 刷新当前列表
+      loadCurrentOrgPersons(selectedOrg, page, pageSize, searchName);
+    } catch (error: any) {
+      message.error(`批量删除失败: ${error.message || error}`);
+    }
+  };
+
+  // 当前显示的人员数据
+  const displayPersons = currentPersons;
+
+  // ========== 组织管理功能 ==========
+  
+  const handleAddOrg = () => {
+    setOrgModalType('add');
+    setEditingOrg(null);
+    setSelectedParentOrg(selectedOrg || 'root00000000');
+    orgForm.resetFields();
+    setOrgModalVisible(true);
+  };
+
+  const handleEditOrg = () => {
+    if (!selectedOrg) {
+      message.warning('请先选择一个组织');
+      return;
+    }
+    const org = organizations.find((o: any) => o.orgIndexCode === selectedOrg);
+    if (!org) return;
+    
+    setOrgModalType('edit');
+    setEditingOrg(org);
+    orgForm.setFieldsValue({ orgName: org.orgName });
+    setOrgModalVisible(true);
+  };
+
+  const handleDeleteOrg = async () => {
+    if (!selectedOrg) {
+      message.warning('请先选择一个组织');
+      return;
+    }
+    try {
+      await orgApi.delete([selectedOrg]);
+      message.success('删除成功');
+      loadOrganizations();
+      setSelectedOrg(null);
+      setSelectedOrgName('全部');
+    } catch (error: any) {
+      message.error(`删除失败: ${error.message || error}`);
+    }
+  };
+
+  const handleOrgSubmit = async () => {
+    try {
+      const values = await orgForm.validateFields();
+      if (orgModalType === 'add') {
+        await orgApi.create([{ orgName: values.orgName, parentIndexCode: selectedParentOrg }]);
+        message.success('添加成功');
+      } else if (editingOrg) {
+        await orgApi.update(editingOrg.orgIndexCode, { orgName: values.orgName });
+        message.success('更新成功');
+      }
+      setOrgModalVisible(false);
+      loadOrganizations();
+    } catch (error: any) {
+      if (error.errorFields) return;
+      message.error(`操作失败: ${error.message || error}`);
+    }
+  };
+
+  // 处理刷新
+  const handleRefresh = () => {
+    cancelRef.current = true;
+    loadCurrentOrgPersons(selectedOrg, page, pageSize, searchName);
+  };
+
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'personName',
+      key: 'personName',
+      width: 100,
+    },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      key: 'gender',
+      width: 60,
+      render: (g: string | number) => {
+        const map: Record<string, string> = { '1': '男', '2': '女' };
+        return map[String(g)] || '未知';
+      },
+    },
+    {
+      title: '组织',
+      dataIndex: 'orgName',
+      key: 'orgName',
+      width: 150,
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phoneNo',
+      key: 'phoneNo',
+      width: 120,
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 120,
+      render: (_: any, record: any) => (
+        <Space size="small">
+          <Link to={`/person/edit/${record.personId}`}>
+            <Button type="link" icon={<EditOutlined />} size="small">编辑</Button>
+          </Link>
+          <Link to={`/person/detail/${record.personId}`}>
+            <Button type="link" icon={<EyeOutlined />} size="small">详情</Button>
+          </Link>
+          <Button
+            type="link"
+            danger
+            icon={<DeleteOutlined />}
+            size="small"
+            onClick={() => setDeleteModal({ visible: true, personId: record.personId, personName: record.personName })}
+          >
+            删除
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      {/* 左侧：组织树 + 组织管理 */}
+      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {/* 组织架构 */}
+        <Card 
+          title="📁 组织架构" 
+          extra={
+            <Space>
+              <Button size="small" icon={<ReloadOutlined />} onClick={handleRefresh} />
+              {selectedOrg && (
+                <>
+                  <Button size="small" icon={<EditOutlined />} onClick={handleEditOrg}>编辑</Button>
+                  <Popconfirm
+                    title="确认删除"
+                    description={`确定要删除组织"${selectedOrgName}"吗？`}
+                    onConfirm={handleDeleteOrg}
+                    okText="确认"
+                    cancelText="取消"
+                  >
+                    <Button size="small" danger icon={<DeleteOutlined />}>删除</Button>
+                  </Popconfirm>
+                </>
+              )}
+              <Button size="small" type="primary" icon={<PlusOutlined />} onClick={handleAddOrg}>新增</Button>
+            </Space>
+          }
+          bodyStyle={{ padding: 12 }}
+        >
+          {treeLoading ? (
+            <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>
+          ) : (
+            <Tree
+              showLine
+              checkStrictly
+              expandedKeys={expandedKeys}
+              onExpand={(keys) => setExpandedKeys(keys as string[])}
+              onSelect={handleTreeSelect}
+              selectedKeys={selectedOrg ? [selectedOrg] : []}
+              treeData={treeData}
+            />
+          )}
+        </Card>
+      </div>
+
+      {/* 右侧：人员列表 */}
+      <div style={{ flex: 1 }}>
+        <Card
+          title={`👥 ${selectedOrgName} （${totalCount} 人）`}
+          extra={
+            <Space>
+              {selectedRowKeys.length > 0 && (
+                <Button danger size="small" onClick={() => setBatchDeleteModal({ visible: true, count: selectedRowKeys.length })}>
+                  批量删除 ({selectedRowKeys.length})
+                </Button>
+              )}
+              <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate(`/person/add${selectedOrg ? `?orgCode=${selectedOrg}` : ''}`)}>添加人员</Button>
+            </Space>
+          }
+        >
+          <div style={{ marginBottom: 16, display: 'flex', gap: 8 }}>
+            <Search
+              placeholder="搜索姓名"
+              value={searchName}
+              onChange={(e) => setSearchName(e.target.value)}
+              onPressEnter={handleSearch}
+              style={{ width: 200 }}
+            />
+            <Button icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
+          </div>
+
+          {displayPersons.length === 0 && !treeLoading ? (
+            <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
+              {selectedOrg ? '该组织下暂无人员' : '暂无人员数据'}
+            </div>
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={displayPersons}
+              rowKey="personId"
+              loading={treeLoading}
+              rowSelection={{
+                selectedRowKeys,
+                onChange: (keys) => setSelectedRowKeys(keys),
+              }}
+              pagination={{
+                total: totalCount,
+                current: page,
+                pageSize,
+                showSizeChanger: true,
+                showTotal: (t) => `共 ${t} 条`,
+                onChange: (p, ps) => { setPage(p); setPageSize(ps); },
+              }}
+              size="small"
+            />
+          )}
+        </Card>
+      </div>
+
+      {/* 组织管理弹窗 */}
+      <Modal
+        title={orgModalType === 'add' ? '新增组织' : '编辑组织'}
+        open={orgModalVisible}
+        onOk={handleOrgSubmit}
+        onCancel={() => setOrgModalVisible(false)}
+        okText="保存"
+        cancelText="取消"
+      >
+        <Form form={orgForm} layout="vertical">
+          <Form.Item
+            name="orgName"
+            label="组织名称"
+            rules={[{ required: true, message: '请输入组织名称' }]}
+          >
+            <Input placeholder="请输入组织名称" />
+          </Form.Item>
+          {orgModalType === 'add' && (
+            <Form.Item label="父组织">
+              <Tree
+                showLine
+                treeData={treeData}
+                selectedKeys={[selectedParentOrg]}
+                onSelect={(keys) => setSelectedParentOrg(keys[0] as string)}
+              />
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+
+      <Modal
+        title="确认删除"
+        open={deleteModal.visible}
+        onOk={handleDelete}
+        onCancel={() => setDeleteModal({ visible: false })}
+        okText="确认删除"
+        okButtonProps={{ danger: true }}
+      >
+        <p>确定要删除人员 <strong>{deleteModal.personName}</strong> 吗？</p>
+        <p style={{ color: '#ff4d4f' }}>此操作不可撤销！</p>
+      </Modal>
+
+      {/* 批量删除确认弹窗 */}
+      <Modal
+        title="确认批量删除"
+        open={batchDeleteModal.visible}
+        onOk={handleBatchDelete}
+        onCancel={() => setBatchDeleteModal({ visible: false, count: 0 })}
+        okText="确认删除"
+        okButtonProps={{ danger: true }}
+      >
+        <p>确定要删除选中的 <strong>{batchDeleteModal.count}</strong> 名人员吗？</p>
+        <p style={{ color: '#ff4d4f' }}>此操作不可撤销！</p>
+      </Modal>
+    </div>
+  );
+}

package/src/pages/SyncPage.tsx

@@ -0,0 +1,29 @@
+import { Card, Descriptions } from 'antd';
+
+export default function SyncPage() {
+  return (
+    <div>
+      <h2 className="page-title" style={{ marginBottom: 24 }}>数据同步</h2>
+
+      <Card title="当前同步状态" style={{ marginBottom: 24 }}>
+        <Descriptions bordered column={3}>
+          <Descriptions.Item label="上次同步时间">—</Descriptions.Item>
+          <Descriptions.Item label="同步类型">—</Descriptions.Item>
+          <Descriptions.Item label="状态">—</Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <Card title="同步操作" style={{ marginBottom: 24 }}>
+        <div style={{ color: '#999' }}>
+          同步功能开发中，请稍候...
+        </div>
+      </Card>
+
+      <Card title="同步记录">
+        <div style={{ color: '#999', textAlign: 'center', padding: 40 }}>
+          暂无同步记录
+        </div>
+      </Card>
+    </div>
+  );
+}