封装供应商弹框详情组件

src/components/EvaluateTemplateTable/EvaluateTemplateTable.tsx

@@ -340,7 +340,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
   const updateDataSource = (newData: TableRowItem[]) => {
     // 确保每行都有唯一稳定的key
     const finalData = ensureUniqueKeys(newData);
-    console.log('finalData', finalData);
     setDataSource(finalData);
     if (onChange) {
       // 转换回API格式再传递给父组件
@@ -369,7 +368,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
 
   // 处理输入变化
   const handleInputChange = (val: any, record: TableRowItem, field: string) => {
-    console.log('handleInputChange', val, record, field);
     const newData = [...dataSource];
     const index = newData.findIndex((item) => item.key === record.key);
     if (index > -1) {

src/components/SupplierDetailModalContext/SupplierDetail.tsx

@@ -0,0 +1,12 @@
+import React, { useState, useEffect } from 'react';
+
+const SupplierDetail = ({ supplierId }: { supplierId: string | null }) => {
+  const [supplierDetail, setSupplierDetail] = useState(null);
+
+  useEffect(() => {
+    console.log(supplierId);
+  }, [supplierId]);
+  return <div>SupplierDetail</div>;
+};
+
+export default SupplierDetail;

src/components/SupplierDetailModalContext/SupplierDetailModalContext.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Modal } from 'antd';
+import SupplierDetail from './SupplierDetail';
+
+const SupplierDetailModalContext = React.createContext<((id: string) => void) | null>(null);
+export const useSupplierDetailModal = () => React.useContext(SupplierDetailModalContext);
+
+export const SupplierDetailModalProvider = ({ children }: { children: React.ReactNode }) => {
+  const [visible, setVisible] = useState(false);
+  const [supplierId, setSupplierId] = useState<string | null>(null);
+
+  const showSupplierDetail = (id: string) => {
+    setSupplierId(id);
+    setVisible(true);
+  };
+
+  return (
+    <SupplierDetailModalContext.Provider value={showSupplierDetail}>
+      {children}
+      <Modal visible={visible} onCancel={() => setVisible(false)} footer={null}>
+        <SupplierDetail supplierId={supplierId} />
+      </Modal>
+    </SupplierDetailModalContext.Provider>
+  );
+};

src/components/SupplierDetailModalContext/readme.md

@@ -0,0 +1,3 @@
+// 任何页面/组件
+const showSupplierDetail = useSupplierDetailModal();
+<span onClick={() => showSupplierDetail(supplier.id)}>{supplier.name}</span>

src/components/SupplierSelector/SupplierSelector.tsx

@@ -233,6 +233,11 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
     }));
   };
 
+  // 显示供应商详情
+  const showSupplierDetail = (record: SupplierItem) => {
+    console.log(record);
+  };
+
   // 表格列定义
   const columns = [
     {
@@ -240,9 +245,9 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
       dataIndex: 'supplierName',
       width: 120,
       ellipsis: true,
-      render: (supplierName: string) => (
+      render: (supplierName: string, record: SupplierItem) => (
         <Tooltip placement="topLeft" title={supplierName}>
-          {supplierName}
+          <span onClick={()=>showSupplierDetail(record)}>{supplierName}</span>
         </Tooltip>
       ),
     },

src/layouts/BasicLayout.tsx

@@ -8,8 +8,8 @@ import routes from '../../config/router.config'; // 引入你的自定义路由
 import { ConfigProvider, Breadcrumb } from 'antd';
 import HeaderComponent from './Header';
 import IconFont from '@/components/IconFont/IconFont';
-import { BreadcrumbState } from '@/models/breadcrumb';
-
+import type { BreadcrumbState } from '@/models/breadcrumb';
+import { SupplierDetailModalProvider } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
 
 const MenuRender = (item: any, isSubMenu: boolean) => {
   const intl = useIntl();
@@ -35,10 +35,10 @@ const MenuRender = (item: any, isSubMenu: boolean) => {
 };
 
 // 递归交集过滤函数
-function filterMenuByRouter(routes:any, menuRoutes:any) {
-  return routes.reduce((result:any, route:any) => {
+function filterMenuByRouter(routes: any, menuRoutes: any) {
+  return routes.reduce((result: any, route: any) => {
     // 只看有 name 的节点
-    const menu = menuRoutes.find(m => m.name === route.name);
+    const menu = menuRoutes.find((m) => m.name === route.name);
     if (menu) {
       // 匹配到后，递归处理 children
       let children = [];
@@ -56,7 +56,12 @@ function filterMenuByRouter(routes:any, menuRoutes:any) {
   }, []);
 }
 
-const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamicBreadcrumbName: string | null) => {
+const BreadcrumbRender = (
+  routeBreadcrumb: any,
+  intl: any,
+  history: any,
+  dynamicBreadcrumbName: string | null,
+) => {
   const breadcrumbRoutes = routeBreadcrumb?.routes;
   return (
     <Breadcrumb>
@@ -65,22 +70,17 @@ const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamic
           history.push('/');
         }}
       >
-        <span style={{ cursor: 'pointer' }}>
-          {intl.formatMessage({ id: 'menu.首页' })}
-        </span>
+        <span style={{ cursor: 'pointer' }}>{intl.formatMessage({ id: 'menu.首页' })}</span>
       </Breadcrumb.Item>
       {breadcrumbRoutes?.map((item: any, index: number) => {
         // 判断是否是最后一个面包屑项且存在动态名称
-        const isLastItem = index === (breadcrumbRoutes.length - 1);
-        const displayName = (isLastItem && dynamicBreadcrumbName)
-          ? dynamicBreadcrumbName
-          : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
+        const isLastItem = index === breadcrumbRoutes.length - 1;
+        const displayName =
+          isLastItem && dynamicBreadcrumbName
+            ? dynamicBreadcrumbName
+            : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
 
-        return (
-          <Breadcrumb.Item key={item.path}>
-            {displayName}
-          </Breadcrumb.Item>
-        );
+        return <Breadcrumb.Item key={item.path}>{displayName}</Breadcrumb.Item>;
       })}
     </Breadcrumb>
   );
@@ -106,47 +106,47 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       // routes是本地静态路由，menusFromApi是接口菜单
       const finalMenus = filterMenuByRouter(routes, menusFromApi);
       console.log(finalMenus);
-      
+
       setMenuRoutes(finalMenus);
     }
   }, []);
 
-
   return (
     <ConfigProvider>
-      <ProLayout
-        {...defaultSettings}
-        route={{ routes }}
-        // route={{ routes: menuRoutes }}
-        subMenuItemRender={(menuItemProps, defaultDom) => {
-          return MenuRender(menuItemProps, true);
-        }}
-        menuItemRender={(item, dom) => {
-          return MenuRender(item, false);
-        }}
-        location={location}
-        fixSiderbar
-        layout="mix"
-        headerRender={() => {
-          return <HeaderComponent />;
-        }}
-      >
-        <PageContainer
-          ghost={true}
-          header={{
-            title: false,
-            breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
-              BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
+      <SupplierDetailModalProvider>
+        <ProLayout
+          {...defaultSettings}
+          route={{ routes }}
+          // route={{ routes: menuRoutes }}
+          subMenuItemRender={(menuItemProps, defaultDom) => {
+            return MenuRender(menuItemProps, true);
+          }}
+          menuItemRender={(item, dom) => {
+            return MenuRender(item, false);
+          }}
+          location={location}
+          fixSiderbar
+          layout="mix"
+          headerRender={() => {
+            return <HeaderComponent />;
           }}
         >
-          {children}
-        </PageContainer>
-      </ProLayout>
+          <PageContainer
+            ghost={true}
+            header={{
+              title: false,
+              breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
+                BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
+            }}
+          >
+            {children}
+          </PageContainer>
+        </ProLayout>
+      </SupplierDetailModalProvider>
     </ConfigProvider>
   );
 };
 
 export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
-  breadcrumb
+  breadcrumb,
 }))(BasicLayout);
-

src/models/supplierAnnualTaskManage.ts

@@ -203,7 +203,6 @@ const supplierAnnualTaskManage: SupplierTaskModelType = {
       }
       // 处理评价人员更新 - 更新后要保留原有对象中的indicatorIds
 
-      console.log(updatedFormData)
 
       // 保存更新后的表单数据
       yield put({ type: 'saveTaskFormData', payload: updatedFormData });

src/models/supplierTaskManage.ts

@@ -263,7 +263,6 @@ const SupplierTaskModel: SupplierTaskModelType = {
       if (payload.taskDeptWeightList) {
         updatedFormData.taskDeptWeightList = payload.taskDeptWeightList;
       }
-      console.log(updatedFormData)
 
       // 保存更新后的表单数据
       yield put({ type: 'saveTaskFormData', payload: updatedFormData });

src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx

@@ -310,7 +310,6 @@ const SupplierTemplateManageAdd: React.FC<PageProps> = ({ breadcrumb, dispatch }
 
   // 处理指标数据变更
   const handleTemplateDataChange = (data: SupplierTemplateManage.IndicatorSt[]) => {
-    console.log('handleTemplateDataChange', data);
     setTemplateData(data);
   };