hikvision-web 1.0.0

package/src/pages/BindingPage.tsx

@@ -0,0 +1,351 @@
+import { useEffect, useState } from 'react';
+import { Table, Button, Modal, message, Form, Select, Tabs, Input } from 'antd';
+import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
+import { bindingApi, cardApi, vehicleApi } from '../services/api';
+import { useAppStore } from '../store/appStore';
+
+interface PersonCardBinding {
+  personId: string;
+  cardNo: string;
+  bindTime?: string;
+}
+
+interface PersonVehicleBinding {
+  personId: string;
+  vehicleId: string;
+  bindTime?: string;
+}
+
+interface Card {
+  cardNo: string;
+  personId?: string;
+  personName?: string;
+}
+
+interface Vehicle {
+  vehicleId: string;
+  plateNo: string;
+  personId?: string;
+  personName?: string;
+}
+
+export default function BindingPage() {
+  const { persons, loadPersons } = useAppStore();
+  const [activeTab, setActiveTab] = useState('person-card');
+  const [modalVisible, setModalVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [personCardBindings, setPersonCardBindings] = useState<PersonCardBinding[]>([]);
+  const [personVehicleBindings, setPersonVehicleBindings] = useState<PersonVehicleBinding[]>([]);
+  const [cards, setCards] = useState<Card[]>([]);
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [personCardSearch, setPersonCardSearch] = useState('');
+  const [personVehicleSearch, setPersonVehicleSearch] = useState('');
+
+  useEffect(() => {
+    loadPersons();
+    loadCards();
+    loadVehicles();
+  }, []);
+
+  const loadCards = async () => {
+    try {
+      const result: any = await cardApi.list({ pageNo: 1, pageSize: 100 });
+      setCards(result?.data?.list || result?.list || []);
+    } catch (error) {
+      console.error('加载卡片失败:', error);
+    }
+  };
+
+  const loadVehicles = async () => {
+    try {
+      const result: any = await vehicleApi.list({ pageNo: 1, pageSize: 100 });
+      setVehicles(result?.data?.list || result?.list || []);
+    } catch (error) {
+      console.error('加载车辆失败:', error);
+    }
+  };
+
+  const loadBindings = async () => {
+    if (activeTab === 'person-card') {
+      try {
+        const result: any = await bindingApi.listPersonCardBindings();
+        setPersonCardBindings(result?.data?.list || result?.list || []);
+      } catch (error) {
+        console.error('加载人员卡片绑定失败:', error);
+      }
+    } else {
+      try {
+        const result: any = await bindingApi.listPersonVehicleBindings();
+        setPersonVehicleBindings(result?.data?.list || result?.list || []);
+      } catch (error) {
+        console.error('加载人员车辆绑定失败:', error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    loadBindings();
+  }, [activeTab]);
+
+  const handleAdd = () => {
+    form.resetFields();
+    setModalVisible(true);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      if (activeTab === 'person-card') {
+        await bindingApi.bindPersonCard(values.personId, values.cardNo!);
+        message.success('人员-卡片绑定成功');
+      } else {
+        await bindingApi.bindPersonVehicle(values.personId, values.vehicleId!);
+        message.success('人员-车辆绑定成功');
+      }
+      setModalVisible(false);
+      loadBindings();
+    } catch (error: any) {
+      message.error(`绑定失败: ${error.message || error}`);
+    }
+  };
+
+  const handleUnbind = async (personId: string, cardNo?: string, vehicleId?: string) => {
+    try {
+      if (activeTab === 'person-card') {
+        await bindingApi.unbindPersonCard(personId, cardNo!);
+        message.success('解绑成功');
+      } else {
+        await bindingApi.unbindPersonVehicle(personId, vehicleId!);
+        message.success('解绑成功');
+      }
+      loadBindings();
+    } catch (error: any) {
+      message.error(`解绑失败: ${error.message || error}`);
+    }
+  };
+
+  const getPersonName = (personId: string, personName?: string) => {
+    // 优先用传入的 personName（服务端返回的绑定数据已有），其次查 store
+    if (personName) return personName;
+    const person = persons.find(p => p.personId === personId);
+    return person?.personName || personId;
+  };
+
+
+  const getVehiclePlate = (vehicleId: string) => {
+    const vehicle = vehicles.find(v => v.vehicleId === vehicleId);
+    return vehicle?.plateNo || vehicleId;
+  };
+
+  // 过滤后的绑定数据
+  const filteredPersonCardBindings = personCardBindings.filter(b => {
+    if (!personCardSearch) return true;
+    const s = personCardSearch.toLowerCase();
+    const personName = b.personId ? (b as any).personName || '' : '';
+    return personName.toLowerCase().includes(s) || b.cardNo?.includes(s) || b.personId?.toLowerCase().includes(s);
+  });
+
+  const filteredPersonVehicleBindings = personVehicleBindings.filter(b => {
+    if (!personVehicleSearch) return true;
+    const s = personVehicleSearch.toLowerCase();
+    const personName = b.personId ? (b as any).personName || '' : '';
+    const vehicle = vehicles.find(v => v.vehicleId === b.vehicleId);
+    return personName.toLowerCase().includes(s) || vehicle?.plateNo?.toLowerCase().includes(s) || b.personId?.toLowerCase().includes(s);
+  });
+
+  const personCardColumns = [
+    {
+      title: '人员',
+      dataIndex: 'personId',
+      key: 'person',
+      width: 150,
+      render: (personId: string, record: any) => getPersonName(personId, record.personName),
+    },
+    {
+      title: '卡片号',
+      dataIndex: 'cardNo',
+      key: 'cardNo',
+      width: 150,
+    },
+    {
+      title: '绑定时间',
+      dataIndex: 'bindTime',
+      key: 'bindTime',
+      width: 180,
+      render: (time: string) => time ? new Date(time).toLocaleString('zh-CN') : '-',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 100,
+      render: (_: any, record: PersonCardBinding) => (
+        <Button
+          type="link"
+          danger
+          icon={<LinkOutlined />}
+          size="small"
+          onClick={() => handleUnbind(record.personId, record.cardNo)}
+        >
+          解绑
+        </Button>
+      ),
+    },
+  ];
+
+  const personVehicleColumns = [
+    {
+      title: '人员',
+      dataIndex: 'personId',
+      key: 'person',
+      width: 150,
+      render: (personId: string, record: any) => getPersonName(personId, record.personName),
+    },
+    {
+      title: '车牌号',
+      key: 'plateNo',
+      width: 150,
+      render: (_: any, record: PersonVehicleBinding) => getVehiclePlate(record.vehicleId),
+    },
+    {
+      title: '绑定时间',
+      dataIndex: 'bindTime',
+      key: 'bindTime',
+      width: 180,
+      render: (time: string) => time ? new Date(time).toLocaleString('zh-CN') : '-',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 100,
+      render: (_: any, record: PersonVehicleBinding) => (
+        <Button
+          type="link"
+          danger
+          icon={<LinkOutlined />}
+          size="small"
+          onClick={() => handleUnbind(record.personId, undefined, record.vehicleId)}
+        >
+          解绑
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 className="page-title" style={{ marginBottom: 0 }}>绑定关系管理</h2>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加绑定</Button>
+      </div>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => { setActiveTab(key); loadBindings(); }}
+        items={[
+          {
+            key: 'person-card',
+            label: '人员-卡片绑定',
+            children: (
+              <>
+              <div style={{ marginBottom: 12 }}>
+                <Input.Search
+                  placeholder="搜索人员姓名 / 卡号 / ID"
+                  value={personCardSearch}
+                  onChange={e => setPersonCardSearch(e.target.value)}
+                  style={{ width: 300 }}
+                  allowClear
+                />
+              </div>
+              <Table
+                columns={personCardColumns}
+                dataSource={filteredPersonCardBindings}
+                rowKey={(record: PersonCardBinding) => `${record.personId}-${record.cardNo}`}
+                pagination={{ pageSize: 20, showTotal: (t) => `共 ${t} 条` }}
+              />
+              </>
+            ),
+          },
+          {
+            key: 'person-vehicle',
+            label: '人员-车辆绑定',
+            children: (
+              <>
+              <div style={{ marginBottom: 12 }}>
+                <Input.Search
+                  placeholder="搜索人员姓名 / 车牌 / ID"
+                  value={personVehicleSearch}
+                  onChange={e => setPersonVehicleSearch(e.target.value)}
+                  style={{ width: 300 }}
+                  allowClear
+                />
+              </div>
+              <Table
+                columns={personVehicleColumns}
+                dataSource={filteredPersonVehicleBindings}
+                rowKey={(record: PersonVehicleBinding) => `${record.personId}-${record.vehicleId}`}
+                pagination={{ pageSize: 20, showTotal: (t) => `共 ${t} 条` }}
+              />
+              </>
+            ),
+          },
+        ]}
+      />
+
+      <Modal
+        title={activeTab === 'person-card' ? '人员-卡片绑定' : '人员-车辆绑定'}
+        open={modalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setModalVisible(false)}
+        okText="绑定"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="personId"
+            label="人员"
+            rules={[{ required: true, message: '请选择人员' }]}
+          >
+            <Select
+              placeholder="选择人员"
+              showSearch
+              filterOption={(input, option) =>
+                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+              }
+              options={persons.map(p => ({ value: p.personId, label: `${p.personName} (${p.phoneNo || '无手机号'})` }))}
+            />
+          </Form.Item>
+          {activeTab === 'person-card' ? (
+            <Form.Item
+              name="cardNo"
+              label="卡片号"
+              rules={[{ required: true, message: '请选择卡片' }]}
+            >
+              <Select
+                placeholder="选择卡片"
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                options={cards.map(c => ({ value: c.cardNo, label: `${c.cardNo} (${c.personName || '未分配'})` }))}
+              />
+            </Form.Item>
+          ) : (
+            <Form.Item
+              name="vehicleId"
+              label="车辆"
+              rules={[{ required: true, message: '请选择车辆' }]}
+            >
+              <Select
+                placeholder="选择车辆"
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                options={vehicles.map(v => ({ value: v.vehicleId, label: `${v.plateNo} (${v.personName || '无车主'})` }))}
+              />
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+    </div>
+  );
+}

package/src/pages/CardForm.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Form, Input, Select, Button, message, Card, Spin, Space, Table } from 'antd';
+import { ArrowLeftOutlined, SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+import { cardApi, personApi } from '../services/api';
+import { useAppStore } from '../store/appStore';
+
+const { Option } = Select;
+
+interface PersonItem {
+  personId: string;
+  personName: string;
+  orgName?: string;
+  jobNo?: string;
+}
+
+export default function CardForm() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const refCardNo = searchParams.get('ref');
+  const [form] = Form.useForm();
+  const [loading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [persons, setPersons] = useState<PersonItem[]>([]);
+  const [personSearch, setPersonSearch] = useState('');
+  const { loadOrganizations } = useAppStore();
+
+  useEffect(() => {
+    loadOrganizations();
+    loadPersons();
+    if (refCardNo) {
+      loadRefCard();
+    }
+  }, [refCardNo]);
+
+  const loadPersons = async (name?: string) => {
+    try {
+      const result: any = await personApi.list({ pageNo: 1, pageSize: 100, personName: name });
+      setPersons((result?.data?.list || result?.list || []).map((p: any) => ({
+        personId: p.personId,
+        personName: p.personName,
+        orgName: p.orgName,
+        jobNo: p.jobNo,
+      })));
+    } catch (error: any) {
+      console.error('加载人员失败:', error);
+    }
+  };
+
+  const loadRefCard = async () => {
+    if (!refCardNo) return;
+    try {
+      const result: any = await cardApi.getByCardNo(refCardNo);
+      const card = result.card || {};
+      form.setFieldsValue({
+        cardNo: card.cardNo,
+        cardType: card.cardType,
+        personId: card.personId,
+      });
+    } catch (error: any) {
+      console.error('加载参考卡片失败:', error);
+    }
+  };
+
+  const handleSubmit = async (values: any) => {
+    setSubmitting(true);
+    try {
+      const dto = {
+        cards: [{
+          cardNo: values.cardNo,
+          personId: values.personId,
+          cardType: values.cardType as '0' | '1' | '2',
+        }]
+      };
+
+      await cardApi.batchIssue(dto as any);
+      message.success('开卡成功！');
+      navigate('/card');
+    } 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={() => navigate('/card')}>返回</Button>
+        <h2>开卡</h2>
+      </div>
+
+      <Card style={{ maxWidth: 600 }}>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          initialValues={{ cardType: '0' }}
+        >
+          <Form.Item
+            name="cardNo"
+            label="卡号"
+            rules={[{ required: true, message: '请输入卡号' }]}
+          >
+            <Input placeholder="请输入卡号" addonBefore="卡号" />
+          </Form.Item>
+
+          <Form.Item
+            name="cardType"
+            label="卡片类型"
+            rules={[{ required: true, message: '请选择卡片类型' }]}
+          >
+            <Select placeholder="请选择卡片类型">
+              <Option value="0">普通卡</Option>
+              <Option value="1">临时卡</Option>
+              <Option value="2">特殊卡</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            name="personId"
+            label="持卡人"
+            rules={[{ required: true, message: '请选择持卡人' }]}
+          >
+            <Select
+              placeholder="搜索并选择持卡人"
+              showSearch
+              filterOption={false}
+              onSearch={(v) => { setPersonSearch(v); loadPersons(v); }}
+              notFoundContent={personSearch ? '未找到匹配人员' : null}
+            >
+              {persons.map((p) => (
+                <Option key={p.personId} value={p.personId}>
+                  {p.personName} - {p.orgName || '-'} {p.jobNo ? `(${p.jobNo})` : ''}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item style={{ marginTop: 24 }}>
+            <Space>
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={submitting}>
+                确认开卡
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={() => form.resetFields()}>重置</Button>
+              <Button onClick={() => navigate('/card')}>取消</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      {persons.length > 0 && (
+        <Card title="选择的人员" style={{ marginTop: 16 }}>
+          <Table
+            dataSource={persons}
+            rowKey="personId"
+            pagination={false}
+            size="small"
+            columns={[
+              { title: '姓名', dataIndex: 'personName' },
+              { title: '组织', dataIndex: 'orgName' },
+              { title: '工号', dataIndex: 'jobNo' },
+            ]}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}