feat: add attendee and device management tabs, and implement outdoor fair statistics

src/pages/Jobfair/Outdoorfair/Detail/components/DeviceTab.tsx

@@ -0,0 +1,249 @@
+import React, { useRef, useState } from 'react';
+import { useAccess } from '@umijs/max';
+import { Button, Modal, message, Typography } from 'antd';
+import {
+  ActionType,
+  ProColumns,
+  ProTable,
+  ModalForm,
+  ProFormDigit,
+  ProFormSelect,
+} from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, LinkOutlined, DisconnectOutlined } from '@ant-design/icons';
+import {
+  getOutdoorFairDeviceList,
+  batchGenerateOutdoorFairDevice,
+  bindOutdoorFairDevice,
+  deleteOutdoorFairDevice,
+  getOutdoorFairCompanyOptions,
+} from '@/services/jobportal/outdoorFairDevice';
+import type { OutdoorFairDeviceItem } from '@/services/jobportal/outdoorFairDevice';
+
+interface Props {
+  fairId: number;
+}
+
+const DeviceTab: React.FC<Props> = ({ fairId }) => {
+  const access = useAccess();
+  const actionRef = useRef<ActionType>();
+  const [batchVisible, setBatchVisible] = useState(false);
+  const [bindVisible, setBindVisible] = useState(false);
+  const [currentRow, setCurrentRow] = useState<OutdoorFairDeviceItem>();
+
+  const handleDelete = (id: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除该设备码吗？',
+      onOk: async () => {
+        const res = await deleteOutdoorFairDevice(id);
+        if (res.code === 200) {
+          message.success('删除成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '删除失败');
+        }
+      },
+    });
+  };
+
+  const handleUnbind = (record: OutdoorFairDeviceItem) => {
+    Modal.confirm({
+      title: '确认解绑',
+      content: `确定要解除设备码与「${record.companyName}」的绑定吗？`,
+      onOk: async () => {
+        const res = await bindOutdoorFairDevice(record.id, undefined);
+        if (res.code === 200) {
+          message.success('解绑成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '解绑失败');
+        }
+      },
+    });
+  };
+
+  const columns: ProColumns<OutdoorFairDeviceItem>[] = [
+    {
+      title: '设备码',
+      dataIndex: 'deviceCode',
+      ellipsis: true,
+      render: (_, record) => (
+        <Typography.Text copyable code>
+          {record.deviceCode}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: '绑定企业',
+      dataIndex: 'companyName',
+      ellipsis: true,
+      hideInSearch: true,
+      render: (_, record) => (record.companyName ? record.companyName : '— 未绑定 —'),
+    },
+    {
+      title: '绑定时间',
+      dataIndex: 'bindTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 200,
+      fixed: 'right',
+      render: (_, record) => [
+        record.companyId ? (
+          <Button
+            key="unbind"
+            type="link"
+            size="small"
+            icon={<DisconnectOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:edit')}
+            onClick={() => handleUnbind(record)}
+          >
+            解绑
+          </Button>
+        ) : (
+          <Button
+            key="bind"
+            type="link"
+            size="small"
+            icon={<LinkOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:edit')}
+            onClick={() => {
+              setCurrentRow(record);
+              setBindVisible(true);
+            }}
+          >
+            绑定企业
+          </Button>
+        ),
+        <Button
+          key="delete"
+          type="link"
+          size="small"
+          danger
+          icon={<DeleteOutlined />}
+          hidden={!access.hasPerms('cms:outdoorFair:remove')}
+          onClick={() => handleDelete(record.id)}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<OutdoorFairDeviceItem>
+        actionRef={actionRef}
+        rowKey="id"
+        headerTitle="设备管理"
+        search={{ labelWidth: 'auto' }}
+        options={false}
+        pagination={{ pageSize: 10 }}
+        scroll={{ x: 'max-content' }}
+        toolBarRender={() => [
+          <Button
+            key="batch"
+            type="primary"
+            icon={<PlusOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:add')}
+            onClick={() => setBatchVisible(true)}
+          >
+            批量生成设备码
+          </Button>,
+        ]}
+        request={async (params) => {
+          const res = await getOutdoorFairDeviceList({
+            fairId,
+            current: params.current,
+            pageSize: params.pageSize,
+            deviceCode: params.deviceCode,
+            companyName: params.companyName,
+          });
+          return { data: res.rows || [], total: res.total || 0, success: res.code === 200 };
+        }}
+        columns={columns}
+      />
+
+      <ModalForm<{ quantity: number }>
+        title="批量生成设备码"
+        open={batchVisible}
+        modalProps={{ destroyOnClose: true, onCancel: () => setBatchVisible(false) }}
+        initialValues={{ quantity: 10 }}
+        onFinish={async (values) => {
+          const res = await batchGenerateOutdoorFairDevice({
+            fairId,
+            quantity: Number(values.quantity),
+          });
+          if (res.code === 200) {
+            message.success(`成功生成 ${res.data?.length || values.quantity} 个设备码`);
+            setBatchVisible(false);
+            actionRef.current?.reload();
+            return true;
+          }
+          message.error(res.msg || '生成失败');
+          return false;
+        }}
+      >
+        <ProFormDigit
+          name="quantity"
+          label="生成数量"
+          placeholder="请输入需要生成的设备码数量"
+          min={1}
+          max={1000}
+          fieldProps={{ precision: 0 }}
+          rules={[{ required: true, message: '请输入生成数量' }]}
+        />
+      </ModalForm>
+
+      <ModalForm<{ companyId: number }>
+        title="绑定参会企业"
+        open={bindVisible}
+        modalProps={{ destroyOnClose: true, onCancel: () => setBindVisible(false) }}
+        onFinish={async (values) => {
+          if (!currentRow) return false;
+          const res = await bindOutdoorFairDevice(currentRow.id, values.companyId);
+          if (res.code === 200) {
+            message.success('绑定成功');
+            setBindVisible(false);
+            setCurrentRow(undefined);
+            actionRef.current?.reload();
+            return true;
+          }
+          message.error(res.msg || '绑定失败');
+          return false;
+        }}
+      >
+        <ProFormSelect
+          name="companyId"
+          label="参会企业"
+          placeholder="请选择参会企业"
+          showSearch
+          request={async () => {
+            const [companies, devicesRes] = await Promise.all([
+              getOutdoorFairCompanyOptions(fairId),
+              getOutdoorFairDeviceList({ fairId, current: 1, pageSize: 1000 }),
+            ]);
+            // 排除已绑定到其他设备的企业
+            const boundIds = new Set(
+              (devicesRes.rows || [])
+                .map((d) => d.companyId)
+                .filter((cid): cid is number => cid != null),
+            );
+            return companies
+              .filter((item) => !boundIds.has(item.companyId))
+              .map((item) => ({
+                label: item.companyName,
+                value: item.companyId,
+              }));
+          }}
+          rules={[{ required: true, message: '请选择参会企业' }]}
+        />
+      </ModalForm>
+    </>
+  );
+};
+
+export default DeviceTab;