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

src/pages/supplier/admission/SupplierEntryReview/components/ViewModal.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Descriptions } from 'antd';
+
+import { coscoAccessWork } from '../services'
+
+//数据接口
+interface Data {
+  coscoAccessWork: coscoAccessWorks;
+  coscoAccessSupplierList: coscoAccessSupplierLists[];
+  coscoAccessCategoryList: coscoAccessCategoryLists[];
+  coscoAccessUserls: coscoAccessUserl[];
+}
+interface coscoAccessUserl {
+  deptId: string;
+  userId: string;
+}
+interface coscoAccessCategoryLists {
+  categoryName: string;
+  [property: string]: any;
+}
+interface coscoAccessSupplierLists {
+  supplierName: string;
+  [property: string]: any;
+}
+interface coscoAccessWorks {
+  deptId: string;
+  startTime: string;
+  endTime: string;
+  reviewStatusText: string;
+}
+
+const ViewModal: React.FC<{
+  visible: boolean;
+  record?: string | null;
+  onCancel: () => void;
+}> = ({ visible, record, onCancel }) => {
+  //渲染数据
+  const [data, setData] = useState<Data | null>(null);
+  //初始化
+  useEffect(() => {
+    console.log(record,'record2');
+    
+    if (record) {
+      coscoAccessWork(record).then((res) => {
+        const { code, data } = res;
+        if (code == 200) {
+          setData(data)
+        }
+      })
+    }
+  }, [record])
+
+  return (
+    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel}>
+      {data && (
+        <Descriptions bordered column={1}>
+          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptId}</Descriptions.Item>
+          <Descriptions.Item label="准入供应商">
+            {data.coscoAccessSupplierList.map((item) => {
+              return (
+                <div style={{ margin: '5px' }}>{item.supplierName}</div>
+              )
+            })}
+          </Descriptions.Item>
+          <Descriptions.Item label="申请准入品类">
+            {data.coscoAccessCategoryList.map((item) => {
+              return (
+                <div style={{ margin: '5px' }}>{item.categoryName}</div>
+              )
+            })}
+          </Descriptions.Item>
+          <Descriptions.Item label="评审开始时间">{data.coscoAccessWork.startTime}</Descriptions.Item>
+          <Descriptions.Item label="评审结束时间">{data.coscoAccessWork.endTime}</Descriptions.Item>
+          <Descriptions.Item label="评审专家">
+            {data.coscoAccessUserls.map((item) => {
+              return (
+                <div style={{ margin: '5px' }}>{item.deptId} - {item.userId}</div>
+              )
+            })}
+          </Descriptions.Item>
+          <Descriptions.Item label="审批结果">{data.coscoAccessWork.reviewStatusText}</Descriptions.Item>
+        </Descriptions>
+      )}
+    </Modal>
+  );
+};
+
+export default ViewModal;

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>
   );
 };

src/pages/supplier/admission/SupplierEntryReview/services.ts

@@ -14,4 +14,8 @@ interface getPageData {
   [property: string]: any;
 }
 export const getApprovePage = (data: getPageData) => request.post('/coscoAccessWork/getApprovePage', { data});
-  
+  
+/**
+ * 供应商准入管理详情
+ */
+export const coscoAccessWork = (id: string) => request.get(`/coscoAccessWork/${id}`);