供应商退出申请弹窗/黑名单申请与供应商名称弹出

src/pages/supplier/supplierBlacklist/blacklistManage/components/CreateBlacklistModal.tsx

@@ -1,19 +1,25 @@
 import React, { useEffect , useState } from "react";
 import { Modal, Button, Select, Input, Table, message, Form, Tooltip } from "antd";
-import SupplierSelectModal from "./SupplierSelectModal";
-import { blacklist, getAllList } from "../services";
 import type { ColumnsType } from 'antd/es/table';
+//组件
+import SupplierSelectModal from "./SupplierSelectModal";
+import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
+//接口
+import { blacklist, getAllList } from "../services";
+
+
 const { Option } = Select;
 interface Supplier {
-  id: number; // 作为 rowKey 用于唯一标识
+  id: string; // 作为 rowKey 用于唯一标识
   supplierName: string; // 供应商名称
   unit: string;         // 准入部门
   accessTime: string;   // 准入时间
   categoryName: string; // 准入品类
-  lastEval: string;     // 最近一次评价
-  lastEvalDate: string; // 评价时间
   supplierId: string;
   categoryId: string;
+  supplierType: string;
+  nameEn: string;
+  name: string;
 }
 
 interface CreateBlacklistModalProps {
@@ -27,12 +33,13 @@ const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
   onOk,
   onCancel,
 }) => {
+  const [form] = Form.useForm();
   const [selectVisible, setSelectVisible] = useState(false);
   const [suppliers, setSuppliers] = useState<Supplier[]>([]);
   const [timelimitOption, setTimelimitOption] = useState<any[]>([]);
-  const [form] = Form.useForm();
+  const supplierDetailModal = useSupplierDetailModal();
 
-  const removeSupplier = (id: number) => {
+  const removeSupplier = (id: string) => {
     setSuppliers(suppliers.filter((s) => s.id !== id));
   };
 
@@ -79,25 +86,21 @@ const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
           setTimelimitOption(data)
         }
       })
-
-
       setSuppliers([]);
       form.resetFields();
     }
   }, [visible]);
   const columns: ColumnsType<Supplier> = [
-    { title: '供应商名称', dataIndex: 'name',  ellipsis: true,  width: 160,  render: (_: any, record: any) => {
+    { title: '供应商名称', dataIndex: 'name',  ellipsis: true,  width: 160,  render: (_: any, record: Supplier) => {
       const name = record.supplierType === "ovs"? record.nameEn : record.name;
       return( 
       <Tooltip placement="topLeft" title={name}>
-        {name}
+        <a onClick={() => supplierDetailModal?.(record.id)}>{name}</a>
       </Tooltip>)
     } },
     { title: "准入部门", dataIndex: "unit", align: "center" },
-    { title: "准入时间", dataIndex: "accessTime", align: "center", render: () => "2023-04-20 13:00" },
+    { title: "准入时间", dataIndex: "accessTime", align: "center" },
     { title: "准入品类", dataIndex: "categoryName", align: "center" },
-    { title: "最近一次评价", dataIndex: "lastEval", align: "center" },
-    { title: "评价时间", dataIndex: "lastEvalDate", align: "center" },
     {
       title: "操作",
       dataIndex: "option",

src/pages/supplier/supplierBlacklist/blacklistManage/components/SupplierSelectModal.tsx

@@ -1,23 +1,24 @@
 import React, { useEffect, useState } from "react";
 import {
-  Modal, Table, Button, Checkbox, Row, Col, Input, Select, Form, Space, message,  Tooltip
+  Modal, Table, Button, Checkbox, Row, Col, Input, Form, Space, message,  Tooltip
 } from "antd";
+//接口
 import { getSupplierCategoryPage } from '../services';
+//组件
 import CategorySelector from '@/components/CategorySelector';
-const { Option } = Select;
+import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
 
 interface Supplier {
-  id: number;
+  id: string;
   supplierId: string;
   categoryId: string;
   supplierName: string;
-
   unit: string;         // 准入部门
   accessTime: string;   // 准入时间
   categoryName: string; // 准入品类
-  lastEval: string;     // 最近一次评价
-  lastEvalDate: string; // 评价时间
-  
+  supplierType: string;
+  nameEn: string;
+  name: string;
 }
 
 interface SupplierSelectModalProps {
@@ -35,12 +36,13 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
-  const [leftSelected, setLeftSelected] = useState<number[]>([]);
-  const [rightSelected, setRightSelected] = useState<number[]>([]);
+  const [leftSelected, setLeftSelected] = useState<string[]>([]);
+  const [rightSelected, setRightSelected] = useState<string[]>([]);
   const [rightData, setRightData] = useState<Supplier[]>([]);
   const [data, setData] = useState<Supplier[]>([]);
   const [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 0 });
   const [loading, setLoading] = useState(false);
+  const supplierDetailModal = useSupplierDetailModal();
 
   useEffect(() => {
     if (visible) {
@@ -114,11 +116,11 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
         ></Checkbox>
       )
     },
-    { title: '供应商名称', dataIndex: 'name',  ellipsis: true,  width: 160,  render: (_: any, record: any) => {
+    { title: '供应商名称', dataIndex: 'name',  ellipsis: true,  width: 160,  render: (_: any, record: Supplier) => {
           const name = record.supplierType === "ovs"? record.nameEn : record.name;
           return( 
           <Tooltip placement="topLeft" title={name}>
-            {name}
+            <a onClick={() => supplierDetailModal?.(record.id)}>{name}</a>
           </Tooltip>)
         } },
         { title: "准入品类", dataIndex: "categoryName",  ellipsis: true,  width: 100,  render: (_: any, record: any) => {
@@ -179,22 +181,12 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
       bodyStyle={{ padding: 24 }}
     >
       <Form layout="inline" form={form} style={{ marginBottom: 16 }}>
-
-
         <Form.Item name="name" label="供应商名称">
           <Input style={{ width: 140 }} allowClear maxLength={50} placeholder="请输入供应商名称"  />
         </Form.Item>
-        <Form.Item name="levelName" label="最近一次评价等级">
-          <Select style={{ width: 140 }} allowClear  placeholder="请选择最近一次评价等级" >
-            {['A', 'B', 'C', 'D'].map(level => (
-              <Option key={level} value={level}>{level}</Option>
-            ))}
-          </Select>
-        </Form.Item>
         <Form.Item name="categoryId" label="准入品类">
           <CategorySelector multiple={false} style={{ width: 140 }} />
         </Form.Item>
-        
         <Form.Item>
           <Space>
             <Button type="primary" onClick={handleSearch}>查询</Button>
@@ -205,7 +197,7 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
 
       <Row gutter={32}>
         <Col span={11}>
-          <div style={{ marginBottom: 8 }}>备选供应商</div>
+          <div>备选供应商</div>
           <Table
             rowKey="id"
             dataSource={data}
@@ -224,7 +216,7 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
           <Button disabled={!rightSelected.length} onClick={handleRemove}>{"<"}</Button>
         </Col>
         <Col span={11}>
-          <div style={{ marginBottom: 8 }}>已选供应商</div>
+          <div>已选供应商</div>
           <Table
             rowKey="id"
             dataSource={rightData}

src/pages/supplier/supplierBlacklist/blacklistManage/index.tsx

@@ -135,12 +135,10 @@ const blacklistManage: React.FC = () => {
                 ))}
               </Select>
             </Form.Item>
-
             <Form.Item name="time" label="发起时间">
               <DatePicker.RangePicker style={{ width: 220 }} allowClear />
             </Form.Item>
 
-
             <Form.Item>
               <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
                 搜索