refactor : 重构岗位入库监测详情

src/pages/RecruitmentDataCollection/JobMonitor/detail.tsx

@@ -0,0 +1,106 @@
+import { Modal,  Table } from 'antd';
+import type { ProColumns } from '@ant-design/pro-components';
+import  { ProDescriptions } from '@ant-design/pro-components';
+import React, { useEffect } from 'react';
+
+export type StorageFormProps = {
+  onCancel: (flag?: boolean, formVals?: unknown) => void;
+  open: boolean;
+  values?: Partial<API.StorageDetection.StorageItem>;
+};
+
+const ViewStorageDetail: React.FC<StorageFormProps> = (props) => {
+  const detailColumns: ProColumns<API.StorageDetection.StorageDetailItem>[] = [
+    // {
+    //   title: '详情ID',
+    //   dataIndex: 'detailId',
+    //   key: 'detailId',
+    //   width: 80,
+    //   ellipsis: true,
+    // },
+    {
+      title: '入库来源网站名称',
+      dataIndex: 'websiteName',
+      key: 'websiteName',
+      width: 150,
+    },
+    {
+      title: '入库成功数量',
+      dataIndex: 'successNumber',
+      key: 'successNumber',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '入库失败数量',
+      dataIndex: 'failedNumber',
+      key: 'failedNumber',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '入库数据详情',
+      dataIndex: 'storageDetail',
+      key: 'storageDetail',
+      width: 200,
+      ellipsis: true,
+    },
+    {
+      title: '入库具体时间',
+      dataIndex: 'storageTime',
+      key: 'storageTime',
+      width: 180,
+    },
+  ];
+
+  const handleCancel = () => {
+    props.onCancel();
+  };
+
+  return (
+    <Modal
+      title="入库监测详情"
+      open={props.open}
+      width={1200}
+      onCancel={handleCancel}
+      footer={null}
+      destroyOnClose
+    >
+      {/* 基本信息 */}
+      <div style={{ marginBottom: 24 }}>
+        <h3 style={{ marginBottom: 16 }}>基本信息</h3>
+        <ProDescriptions<API.StorageDetection.StorageItem>
+          column={2}
+          dataSource={props.values || {}}
+          bordered
+        >
+          {/* <ProDescriptions.Item dataIndex="detectionId" label="监测ID" /> */}
+          <ProDescriptions.Item dataIndex="storageDate" label="采集入库日期" />
+          <ProDescriptions.Item dataIndex="storageNumber" label="采集入库数量" />
+          <ProDescriptions.Item dataIndex="storageResult" label="采集入库结果" />
+          <ProDescriptions.Item 
+            dataIndex="storageDetail" 
+            label="入库数据详情" 
+            span={2}
+          />
+        </ProDescriptions>
+      </div>
+
+      {/* 入库数据来源详情列表 */}
+      <div>
+        <h3 style={{ marginBottom: 16 }}>入库数据来源详情</h3>
+        <Table<API.StorageDetection.StorageDetailItem>
+          columns={detailColumns}
+          dataSource={props.values?.details || []}
+          rowKey="detailId"
+          pagination={false}
+          bordered
+          size="middle"
+          scroll={{ x: 800 }}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default ViewStorageDetail;