供应商退出、准入、 工作台

src/pages/supplier/admission/SupplierEntryReview/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Table, Form, Select, Button, Tag, message } from 'antd';
+import { Table, Form, Select, Button, Tag, message, Space } from 'antd';
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
 import { getApprovePage } from './services';
 import type { ColumnsType } from 'antd/es/table';
-
+import ViewModal from './components/ViewModal';
 
 interface SupplierEntryReviewRecord {
   id: string;
@@ -18,7 +18,11 @@ interface SupplierEntryReviewRecord {
   updateTime: string;        // 更新时间
   [key: string]: any;        // 允许有其它字段
 }
-
+ 
+interface ModalInfo {
+  visible: boolean;
+  record: string | null;
+}
 const statusColorMap: Record<string, string> = {
   '未开始': 'default',
   '进行中': 'processing',
@@ -44,61 +48,13 @@ const deptOptions = [
   { label: '业务部', value: 'DEPT002' },
 ];
 
-const columns:ColumnsType<SupplierEntryReviewRecord> = [
-  {
-    title: '序号',
-    dataIndex: 'index',
-    width: 48,
-    align: 'center',
-    render: (_: any, __: any, idx: number) => idx + 1,
-  },
-  {
-    title: '准入工作',
-    dataIndex: 'accessWorkName',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '准入部门',
-    dataIndex: 'deptId',
-    align: 'center',
-    render: (deptId: string) => deptId === 'DEPT001' ? '采购部' : deptId === 'DEPT002' ? '业务部' : deptId,
-  },
-  {
-    title: '准入方式',
-    dataIndex: 'accessTypeText',
-    align: 'center',
-  },
-  {
-    title: '准入品类',
-    dataIndex: 'categoryName',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '开始时间',
-    dataIndex: 'startTime',
-    align: 'center',
-  },
-  {
-    title: '结束时间',
-    dataIndex: 'endTime',
-    align: 'center',
-  },
-  {
-    title: '流程状态',
-    dataIndex: 'reviewStatusText',
-    align: 'center',
-    render: (text: string) => <Tag color={statusColorMap[text] || 'default'}>{text}</Tag>,
-  },
-];
 
 const SupplierEntryReview: React.FC = () => {
   const [form] = Form.useForm();
   const [data, setData] = useState<any[]>([]);
   const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
   const [loading, setLoading] = useState(false);
-
+   const [modalInfo, setModalInfo] = useState<ModalInfo>({  visible: false, record: null  });
   // 查询数据
   const fetchData = async (params = {}) => {
     setLoading(true);
@@ -158,7 +114,72 @@ const SupplierEntryReview: React.FC = () => {
     setPagination({ ...pagination, current: 1 });
     fetchData({ pageNo: 1 });
   };
-
+  const openModal = (record: string) => {
+    setModalInfo({visible: true, record});
+  };
+  const closeModal = () => {
+    setModalInfo({ visible: false, record: null   });
+  };
+  const columns:ColumnsType<SupplierEntryReviewRecord> = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width: 48,
+      align: 'center',
+      render: (_: any, __: any, idx: number) => idx + 1,
+    },
+    {
+      title: '准入工作',
+      dataIndex: 'accessWorkName',
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '准入部门',
+      dataIndex: 'deptId',
+      align: 'center',
+      render: (deptId: string) => deptId === 'DEPT001' ? '采购部' : deptId === 'DEPT002' ? '业务部' : deptId,
+    },
+    {
+      title: '准入方式',
+      dataIndex: 'accessTypeText',
+      align: 'center',
+    },
+    {
+      title: '准入品类',
+      dataIndex: 'categoryName',
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      align: 'center',
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      align: 'center',
+    },
+    {
+      title: '流程状态',
+      dataIndex: 'reviewStatusText',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      width: 120,
+      render: (_: any, record: any) => {
+        console.log(record,'record');
+       return (
+        <Space>
+           <a onClick={() => openModal(record.id)}>查看</a>
+        </Space>
+       )
+        
+      },
+    },
+  ];
   return (
     <div>
       <Form
@@ -201,6 +222,11 @@ const SupplierEntryReview: React.FC = () => {
         onChange={handleTableChange}
         bordered
       />
+       <ViewModal
+          visible={modalInfo.visible} 
+          record={modalInfo.record} 
+          onCancel={closeModal} 
+        />
     </div>
   );
 };