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;

src/pages/RecruitmentDataCollection/JobMonitor/edit.tsx

@@ -1,134 +0,0 @@
-import {
-  ModalForm,
-  ProForm,
-  ProFormDatePicker,
-  ProFormDigit,
-  ProFormText,
-  ProFormTextArea,
-  ProDescriptions,
-} from '@ant-design/pro-components';
-import { Form } from 'antd';
-import React, { useEffect } from 'react';
-
-export type StorageFormProps = {
-  onCancel: (flag?: boolean, formVals?: unknown) => void;
-  onSubmit: (values: API.StorageDetection.StorageItem) => Promise<void>;
-  open: boolean;
-  values?: Partial<API.StorageDetection.StorageItem>;
-  mode?: 'view' | 'edit' | 'create';
-};
-
-const StorageEdit: React.FC<StorageFormProps> = (props) => {
-  const [form] = Form.useForm<API.StorageDetection.StorageItem>();
-  const { mode = props.values ? 'edit' : 'create' } = props;
-
-  useEffect(() => {
-    if (props.open) {
-      form.resetFields();
-      if (props.values) {
-        form.setFieldsValue(props.values);
-      }
-    }
-  }, [form, props.values?.detectionId, props.open]);
-
-  const handleCancel = () => {
-    props.onCancel();
-    form.resetFields();
-  };
-
-  const handleFinish = async (values: Record<string, any>) => {
-    props.onSubmit(values as API.StorageDetection.StorageItem);
-  };
-
-  if (mode === 'view') {
-    return (
-      <ModalForm
-        title="入库监测详情"
-        open={props.open}
-        width={800}
-        modalProps={{
-          destroyOnClose: true,
-          onCancel: () => handleCancel(),
-          footer: null,
-        }}
-        submitter={false}
-      >
-        <ProDescriptions<API.StorageDetection.StorageItem>
-          column={2}
-          dataSource={props.values || {}}
-        >
-          {/* <ProDescriptions.Item dataIndex="detectionId" label="监测ID" /> */}
-          <ProDescriptions.Item dataIndex="storageDate" label="采集入库日期" />
-          <ProDescriptions.Item dataIndex="storageNumber" label="采集入库数量" />
-          <ProDescriptions.Item dataIndex="storageResult" label="采集入库结果" />
-          <ProDescriptions.Item dataIndex="websiteName" label="入库数据来源名称" />
-          <ProDescriptions.Item dataIndex="storageDetail" label="入库数据详情" span={2} />
-        </ProDescriptions>
-      </ModalForm>
-    );
-  }
-
-  return (
-    <ModalForm<API.StorageDetection.StorageItem>
-      title={mode === 'edit' ? '编辑入库监测' : '新建入库监测'}
-      form={form}
-      autoFocusFirstInput
-      open={props.open}
-      modalProps={{
-        destroyOnClose: true,
-        onCancel: () => handleCancel(),
-      }}
-      submitTimeout={2000}
-      onFinish={handleFinish}
-    >
-      <ProForm.Group>
-        <ProFormText width="md" hidden name="detectionId" />
-        <ProFormDatePicker
-          width="md"
-          name="storageDate"
-          label="采集入库日期"
-          placeholder="请选择采集入库日期"
-          rules={[{ required: true, message: '请选择采集入库日期!' }]}
-          fieldProps={{
-            format: 'YYYY-MM-DD',
-          }}
-        />
-        <ProFormDigit
-          name="storageNumber"
-          width="md"
-          min={0}
-          label="采集入库数量"
-          placeholder="请输入采集入库数量"
-          rules={[{ required: true, message: '请输入采集入库数量!' }]}
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="storageResult"
-          label="采集入库结果"
-          placeholder="请输入采集入库结果"
-          rules={[{ required: true, message: '请输入采集入库结果!' }]}
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="websiteName"
-          label="入库数据来源名称"
-          placeholder="请输入入库数据来源名称"
-          rules={[{ required: true, message: '请输入入库数据来源名称!' }]}
-        />
-        <ProFormTextArea
-          width="lg"
-          name="storageDetail"
-          label="入库数据详情"
-          placeholder="请输入入库数据详情"
-          rules={[{ required: true, message: '请输入入库数据详情!' }]}
-        />
-      </ProForm.Group>
-    </ModalForm>
-  );
-};
-
-export default StorageEdit;

src/pages/RecruitmentDataCollection/JobMonitor/index.tsx

@@ -3,12 +3,11 @@ import { useAccess } from '@umijs/max';
 import {
   getStorageDetectionList,
   getStorageDetectionSingle,
-  saveStorageDetection,
 } from '@/services/recruitmentDataCollection/jobMonitor';
 import { Button, FormInstance, message } from 'antd';
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
-import { FormOutlined, EyeOutlined } from '@ant-design/icons';
-import EditStorageRow from './edit';
+import { EyeOutlined } from '@ant-design/icons';
+import ViewStorageDetail from './detail';
 
 function StorageDetectionList() {
   const access = useAccess();
@@ -18,7 +17,6 @@ function StorageDetectionList() {
 
   const [currentRow, setCurrentRow] = useState<API.StorageDetection.StorageItem>();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
-  const [mode, setMode] = useState<'view' | 'edit'>('view');
   const [loading, setLoading] = useState<boolean>(false);
 
   // 查看详情
@@ -29,7 +27,6 @@ function StorageDetectionList() {
       if (res.code === 200) {
         setCurrentRow(res.data);
         setModalVisible(true);
-        setMode('view');
       } else {
         message.error(res.msg);
       }
@@ -40,33 +37,7 @@ function StorageDetectionList() {
     }
   };
 
-  // 编辑
-  const handleEdit = async (detectionId: any) => {
-    setLoading(true);
-    try {
-      const res = await getStorageDetectionSingle(detectionId);
-      if (res.code === 200) {
-        setCurrentRow(res.data);
-        setModalVisible(true);
-        setMode('edit');
-      } else {
-        message.error(res.msg);
-      }
-    } catch (error) {
-      message.error('获取编辑数据失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const columns: ProColumns<API.StorageDetection.StorageItem>[] = [
-    // {
-    //   title: '监测ID',
-    //   dataIndex: 'detectionId',
-    //   valueType: 'text',
-    //   align: 'center',
-    //   hideInSearch: true,
-    // },
     {
       title: '采集入库日期',
       dataIndex: 'storageDate',
@@ -103,13 +74,12 @@ function StorageDetectionList() {
       hideInSearch: true,
       ellipsis: true,
     },
-
     {
       title: '操作',
       hideInSearch: true,
       align: 'center',
       dataIndex: 'detectionId',
-      width: 200,
+      width: 120,
       render: (detectionId, record) => (
         <div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
           <Button
@@ -123,17 +93,6 @@ function StorageDetectionList() {
           >
             查看详情
           </Button>
-          {/* <Button
-            type="link"
-            size="small"
-            key="edit"
-            icon={<FormOutlined />}
-            loading={loading}
-            hidden={!access.hasPerms('recruitmentDataCollection:jobMonitor:edit')}
-            onClick={() => handleEdit(detectionId)}
-          >
-            编辑
-          </Button> */}
         </div>
       ),
     },
@@ -166,26 +125,8 @@ function StorageDetectionList() {
           }}
         />
       </div>
-      <EditStorageRow
+      <ViewStorageDetail
         open={modalVisible}
-        mode={mode}
-        onSubmit={async (values: API.StorageDetection.StorageItem) => {
-          try {
-            const resData = await saveStorageDetection(values);
-            if (resData.code === 200) {
-              setModalVisible(false);
-              setCurrentRow(undefined);
-              message.success('保存成功');
-              if (actionRef.current) {
-                actionRef.current.reload();
-              }
-            } else {
-              message.error(resData.msg || '保存失败');
-            }
-          } catch (error) {
-            message.error('保存失败');
-          }
-        }}
         values={currentRow}
         onCancel={() => {
           setModalVisible(false);

src/types/RecruitmentDataCollection/jobMonitor.d.ts

@@ -1,4 +1,14 @@
 declare namespace API.StorageDetection {
+  export interface StorageDetailItem {
+    detailId?: string;
+    websiteId?: string;
+    websiteName?: string;
+    successNumber?: string;
+    failedNumber?: string;
+    storageDetail?: string;
+    storageTime?: string;
+  }
+
   export interface StorageItem {
     detectionId?: string;
     storageDate?: string;
@@ -7,6 +17,7 @@ declare namespace API.StorageDetection {
     storageDetail?: string;
     websiteId?: string;
     websiteName?: string;
+    details?: StorageDetailItem[];
   }
 
   export interface AddParams {