hikvision-web 1.0.0

package/src/pages/PersonList.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import { Table, Button, Input, Space, Modal, message, Select } from 'antd';
+import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import { useAppStore } from '../store/appStore';
+import { personApi } from '../services/api';
+import { Link } from 'react-router-dom';
+
+const { Search } = Input;
+
+export default function PersonList() {
+  const {
+    persons,
+    personsTotal,
+    isPersonLoading,
+    loadPersons,
+  } = 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 });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadPersons({ pageNo: page, pageSize, personName: searchName });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [page, pageSize, searchName]);
+
+  const handleSearch = () => {
+    setPage(1);
+    loadPersons({ pageNo: 1, pageSize, personName: searchName });
+  };
+
+  const handleDelete = async () => {
+    if (!deleteModal.personId) return;
+    try {
+      await personApi.delete(deleteModal.personId);
+      message.success('删除成功');
+      setDeleteModal({ visible: false });
+      loadPersons({ pageNo: page, pageSize, personName: searchName });
+    } catch (error: any) {
+      message.error(`删除失败: ${error.message || error}`);
+    }
+  };
+
+  const columns = [
+    {
+      title: '人员 ID',
+      dataIndex: 'personId',
+      key: 'personId',
+      width: 200,
+      render: (text: string) => <code style={{ fontSize: 12 }}>{text}</code>,
+    },
+    {
+      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: '工号',
+      dataIndex: 'jobNo',
+      key: 'jobNo',
+      width: 100,
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      width: 150,
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 150,
+      render: (_: any, record: any) => (
+        <Space size="small">
+          <Link to={`/person/detail/${record.personId}`}>
+            <Button type="link" icon={<EyeOutlined />} size="small">详情</Button>
+          </Link>
+          <Link to={`/person/edit/${record.personId}`}>
+            <Button type="link" icon={<EditOutlined />} 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>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 className="page-title" style={{ marginBottom: 0 }}>人员管理</h2>
+        <Link to="/person/add">
+          <Button type="primary" icon={<PlusOutlined />}>添加人员</Button>
+        </Link>
+      </div>
+
+      <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>
+        <Select
+          value={pageSize}
+          onChange={(v) => { setPageSize(v); setPage(1); }}
+          style={{ width: 100 }}
+          options={[{ value: 10, label: '10/页' }, { value: 20, label: '20/页' }, { value: 50, label: '50/页' }]}
+        />
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={persons}
+        rowKey="personId"
+        loading={isPersonLoading}
+        pagination={{ total: personsTotal,
+          current: page,
+          pageSize,
+          showSizeChanger: true,
+          showTotal: (t) => `共 ${t} 条`,
+          onChange: (p, ps) => { setPage(p); setPageSize(ps); },
+        }}
+      />
+
+      <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>
+    </div>
+  );
+}