liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

供应商名称点击弹出问题

Browse Source
This commit is contained in:
孙景学
2025-07-18 11:32:41 +08:00
parent 6960d402b2
commit e637f62d86
16 changed files with 123 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/SupplierDetailModalContext/SupplierDetail.tsx
View File

@ -4,6 +4,7 @@ import SupplierRegisterInfo from '@/components/GlobalModal/components/SupplierRe
import AccessCategoryTable from '@/components/GlobalModal/components/AccessCategoryTable';
import TianyanchaInfo from '@/components/GlobalModal/components/TianyanchaInfo';
import RiskList from '@/components/GlobalModal/components/RiskList';
import ContactsInfo from '@/components/GlobalModal/components/ContactsInfo';
import { coscoSupplierBase } from '@/components/GlobalModal/services';
import { useIntl } from 'umi';
@ -13,7 +14,7 @@ interface SupplierDetailProps {
const SupplierDetail: React.FC<SupplierDetailProps> = ({ supplierId }) => {
const intl = useIntl();
const [modalType, setModalType] = useState<'register' | 'category' | 'tianyancha' | 'risk'>('register');
const [modalType, setModalType] = useState<'register' | 'category' | 'tianyancha' | 'risk' | 'contactsInfo'>('register');
const [registerInfo, setRegisterInfo] = useState<any>(null);
// 获取供应商信息
@ -46,6 +47,9 @@ const SupplierDetail: React.FC<SupplierDetailProps> = ({ supplierId }) => {
if (modalType === 'risk') {
return supplierId ? <RiskList id={supplierId} /> : null;
}
if (modalType === 'contactsInfo') {
return supplierId ? <ContactsInfo id={supplierId} /> : null;
}
return null;
};
@ -69,6 +73,7 @@ const SupplierDetail: React.FC<SupplierDetailProps> = ({ supplierId }) => {
<Button type={modalType === 'category' ? 'primary' : 'default'} onClick={() => handleSwitch('category')}>{intl.formatMessage({ id: 'component.globalModal.category' })}</Button>
<Button type={modalType === 'tianyancha' ? 'primary' : 'default'} onClick={() => handleSwitch('tianyancha')}>{intl.formatMessage({ id: 'component.globalModal.tianyancha' })}</Button>
<Button type={modalType === 'risk' ? 'primary' : 'default'} onClick={() => handleSwitch('risk')}>{intl.formatMessage({ id: 'component.globalModal.ComplianceRisk' })}</Button>
<Button type={modalType === 'contactsInfo' ? 'primary' : 'default'} onClick={() => handleSwitch('contactsInfo')}>{ '联系人' }</Button>
</Space>
<div style={{ height: '600px', overflowY: 'auto' }}>
{renderContent()}

5
src/pages/supplier/admission/SupplierCategoryEntry/components/ViewModal.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import { coscoAccessWorkCategory } from '../services'
@ -32,6 +33,8 @@ const ViewModal: React.FC<{
}> = ({ visible, record = {}, onCancel }) => {
//渲染数据
const [data, setData] = useState<Data | null>(null);
const supplierDetailModal = useSupplierDetailModal();
//初始化
useEffect(() => {
if (record.id) {
@ -52,7 +55,7 @@ const ViewModal: React.FC<{
<Descriptions.Item label="准入供应商">
{data.coscoAccessSupplierList.map((item) => {
return (
<div style={{ margin: '5px' }}>{item.supplierName}</div>
<div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
)
})}
</Descriptions.Item>

5
src/pages/supplier/admission/SupplierCategoryEntryReview/components/ViewModal.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import { coscoAccessWorkCategory } from '../services'
@ -32,6 +33,8 @@ const ViewModal: React.FC<{
}> = ({ visible, record = {}, onCancel }) => {
//渲染数据
const [data, setData] = useState<Data | null>(null);
const supplierDetailModal = useSupplierDetailModal();
//初始化
useEffect(() => {
if (record.id) {
@ -52,7 +55,7 @@ const ViewModal: React.FC<{
<Descriptions.Item label="准入供应商">
{data.coscoAccessSupplierList.map((item) => {
return (
<div style={{ margin: '5px' }}>{item.supplierName}</div>
<div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
)
})}
</Descriptions.Item>

4
src/pages/supplier/admission/SupplierEntryReview/components/ViewModal.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import { coscoAccessWork } from '../services'
@ -47,6 +48,7 @@ const ViewModal: React.FC<{
}> = ({ visible, record = {}, onCancel }) => {
//渲染数据
const [data, setData] = useState<Data | null>(null);
const supplierDetailModal = useSupplierDetailModal();
//初始化
useEffect(() => {
if (record) {
@ -67,7 +69,7 @@ const ViewModal: React.FC<{
<Descriptions.Item label="准入供应商">
{data.coscoAccessSupplierList.map((item) => {
return (
<div style={{ margin: '5px' }}>{item.supplierName}</div>
<div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
)
})}
</Descriptions.Item>

23
src/pages/supplier/admission/SupplierEntryReview/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Table, Form, Select, Button, message, Space } from 'antd';
import { Table, Form, Select, Button, message, Space, Tooltip } from 'antd';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
//接口
@ -146,14 +146,21 @@ const SupplierEntryReview: React.FC = () => {
dataIndex: 'categoryNameList',
width: 120,
align: 'center',
render: (_: any, record: any) => {
render: (value: { item: string }[] = []) => {
if (!value || value.length === 0) return '-';
if (value.length === 1) {
return <span>{value[0].item}</span>;
}
// 多于1条
const allNames = value.map(item => item).join('、');
return (
<>
{record.categoryNameList && record.categoryNameList.map((item: string) => {
return <div>{`${item}`}</div>
})}
</>
)
<Tooltip title={allNames} overlayStyle={{ zIndex: 1200 }}>
<span>
{value[0]}
<span>等</span>
</span>
</Tooltip>
);
},
},
{

6
src/pages/supplier/admission/admissionManagement/components/ViewModal.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import { coscoAccessWork } from '../services'
@ -47,6 +48,8 @@ const ViewModal: React.FC<{
}> = ({ visible, record = {}, onCancel }) => {
//渲染数据
const [data, setData] = useState<Data | null>(null);
const supplierDetailModal = useSupplierDetailModal();
//初始化
useEffect(() => {
if (record.id) {
@ -67,7 +70,8 @@ const ViewModal: React.FC<{
<Descriptions.Item label="准入供应商">
{data.coscoAccessSupplierList.map((item) => {
return (
<div style={{ margin: '5px' }}>{item.supplierName}</div>
<div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
)
})}
</Descriptions.Item>

6
src/pages/supplier/admission/admissionReviewManagement/components/ViewModal.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';
import { coscoAccessWork } from '../services'
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
//数据接口
interface Data {
@ -47,6 +48,7 @@ const ViewModal: React.FC<{
}> = ({ visible, record = {}, onCancel }) => {
//渲染数据
const [data, setData] = useState<Data | null>(null);
const supplierDetailModal = useSupplierDetailModal();
//初始化
useEffect(() => {
if (record.id) {
@ -65,11 +67,13 @@ const ViewModal: React.FC<{
<Descriptions bordered column={1} labelStyle={{ width: 160 }}>
<Descriptions.Item label="准入部门" >{data.coscoAccessWork.deptName}</Descriptions.Item>
<Descriptions.Item label="准入供应商">
{data.coscoAccessSupplierList.map((item) => {
return (
<div style={{ margin: '5px' }}>{item.supplierName}</div>
<div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
)
})}
</Descriptions.Item>
{data.coscoAccessWork.accessType === 'scattered' && (

23
src/pages/supplier/admission/admissionReviewManagement/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { useIntl } from 'umi';
import { Form, Button, Table, Space, Input } from 'antd';
import { Form, Button, Table, Space, Input, Tooltip } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
//接口
@ -117,14 +117,21 @@ const CooperateEnterprise: React.FC = () => {
dataIndex: 'categoryNameList',
align: 'center',
width: 160,
render: (_: any, record: Data) => {
render: (value: { item: string }[] = []) => {
if (!value || value.length === 0) return '-';
if (value.length === 1) {
return <span>{value[0].item}</span>;
}
// 多于1条
const allNames = value.map(item => item).join('、');
return (
<>
{record.categoryNameList && record.categoryNameList.map((item: string) => {
return <div>{`${item}`}</div>
})}
</>
)
<Tooltip title={allNames} overlayStyle={{ zIndex: 1200 }}>
<span>
{value[0]}
<span>等</span>
</span>
</Tooltip>
);
},
},
{

19
src/pages/supplier/category/CategoryLibraryManage/components/SupplierListModal.tsx
View File

@ -1,7 +1,9 @@
import React, { useEffect, useState } from 'react';
import { Modal, Table, Button, Descriptions, Spin } from 'antd';
import { Modal, Table, Button, Descriptions, Spin, Tooltip } from 'antd';
import { getSupplierPage, detail } from "../services";
import type { ColumnsType } from 'antd/es/table';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
// 供应商类型
interface Supplier {
id: string;
@ -41,6 +43,8 @@ const SupplierListModal: React.FC<{
pageSize: 10,
total: 0,
});
const supplierDetailModal = useSupplierDetailModal();
// 拉数据
const fetchSuppliers = async (page = 1, pageSize = 10) => {
@ -85,7 +89,18 @@ const SupplierListModal: React.FC<{
// 列表列
const columns: ColumnsType<Supplier> = [
{ title: '序号', dataIndex: 'id', align: 'center', width: 60, render: (t: any, r: any, i: number) => (pagination.current - 1) * pagination.pageSize + i + 1 },
{ title: '供应商名称', dataIndex: 'name', align: 'center' },
{
title: "供应商名称", dataIndex: "name", align: "left",
width: 360,
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip title={record.name} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.id)}>{record.name || ''}</a>
</Tooltip>
)
}
},
{ title: '境内/境外', dataIndex: 'supplierCategory', align: 'center', render: (r: any,) => (<span>{`${r.supplierCategory === 'dvs'? '境内企业':'境外企业'}`}</span>) },
{ title: '统一社会信用代码', dataIndex: 'unifiedSocialCreditCode', align: 'center' },
];

1
src/pages/supplier/category/CategoryLibraryManage/index.tsx
View File

@ -139,6 +139,7 @@ const CategoryLibraryManage: React.FC = () => {
title: '库内供应商数量',
dataIndex: 'snumber',
key: 'snumber',
width: 200,
align: 'center',
render: (val: number, record: any) => (
<a

2
src/pages/supplier/category/SupplierEntryManage/components/SupplierAddModal.tsx
View File

@ -191,7 +191,7 @@ const SupplierAddModal: React.FC<{
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip>
<Tooltip title={record.name} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.id)}>{record.name || ''}</a>
</Tooltip>
)

23
src/pages/supplier/category/SupplierEntryReview/components/ViewModal.tsx
View File

@ -1,8 +1,9 @@
import React, { useEffect, useState } from 'react';
import { Modal, Button, Descriptions, Tree, Table } from 'antd';
import { Modal, Button, Descriptions, Tooltip, Table } from 'antd';
import { detail, treeList } from "../services";
import type { DataNode } from 'antd/es/tree';
import type { ColumnsType } from 'antd/es/table';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
// 基本信息类型
interface CategoryInfo {
@ -36,6 +37,7 @@ interface LockNode extends DataNode {
}
interface columns {
id: string;
name: string;
supplierCategory: string;
}
@ -51,6 +53,8 @@ const ViewModal: React.FC<{
const [treeData, setTreeData] = useState<LockNode[]>([]);
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState(true);
const supplierDetailModal = useSupplierDetailModal();
// 拉取基本信息
const fetchCategoryInfo = async () => {
if (!storeId) return;
@ -82,17 +86,28 @@ const ViewModal: React.FC<{
}
}, [visible, storeId]);
const columns: ColumnsType<columns> = [
{ title: '供应商名称', dataIndex: 'name', align: 'center' },
{
title: "供应商名称", dataIndex: "name", align: "left",
width: 360,
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip title={record.name} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.id)}>{record.name || ''}</a>
</Tooltip>
)
}
},
{
title: '境内/境外', dataIndex: 'supplierCategory', align: 'center',
render: (record: any) => {
const supplierCategoryType = record.supplierCategory === 'dvs' ? '境内企业' : record.supplierCategory === 'pe' ? '个人':'境外企业'
const supplierCategoryType = record.supplierCategory === 'dvs' ? '境内企业' : record.supplierCategory === 'pe' ? '个人' : '境外企业'
return (
<span>{supplierCategoryType}</span>
)
}
},
{ title: '供应商类型', dataIndex: '', align: 'center' },
{ title: '企业类型', dataIndex: '', align: 'center' },
]
return (
<Modal

30
src/pages/supplier/supplierBlacklist/blacklistManage/components/ViewBlacklistModal.tsx
View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
import { Modal, Button, Table, Descriptions, Spin, message } from "antd";
import { Modal, Button, Table, Descriptions, Spin, message, Tooltip } from "antd";
import {viewBlacklist } from "../services"; // 假设的接口
import type { ColumnsType } from 'antd/es/table';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
interface Supplier {
id: number; // 作为 rowKey 用于唯一标识
@ -34,6 +35,7 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
const [loading, setLoading] = useState(false);
const [detail, setDetail] = useState<DetailData | null>(null);
const [suppliers, setSuppliers] = useState<Supplier[]>([]);
const supplierDetailModal = useSupplierDetailModal();
const fetchData = async () => {
setLoading(true);
@ -64,12 +66,30 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
}, [visible, recordId]);
const columns:ColumnsType<Supplier> = [
{ title: "供应商名称", dataIndex: "supplierName", align: "center" },
{
title: "供应商名称", dataIndex: "supplierName", align: "left",
width: 200,
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip title={record.supplierName} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.supplierId)}>{record.supplierName || ''}</a>
</Tooltip>
)
}
},
{ title: "准入部门", dataIndex: "deptName", align: "center" },
{ title: "准入时间", dataIndex: "evaluateTime", align: "center" },
{ title: "准入品类", dataIndex: "categoryName", align: "center" },
// { title: "最近一次评价", dataIndex: "lastEval", align: "center" },
// { title: "评价时间", dataIndex: "lastEvalDate", align: "center" },
{ title: "准入品类", dataIndex: "categoryName", align: "center", width: 180,
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip title={record.categoryName} overlayStyle={{ zIndex: 1200 }}>
{record.categoryName}
</Tooltip>
)
} },
];
return (

2
src/pages/supplier/supplierExit/supplierExitAudit/components/ViewBlacklistModal.tsx
View File

@ -85,7 +85,7 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip>
<Tooltip title={record.supplierName} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.supplierId)}>{record.supplierName || ''}</a>
</Tooltip>
)

2
src/pages/supplier/supplierExit/supplierExitManage/components/SupplierSelectModal.tsx
View File

@ -124,7 +124,7 @@ const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
ellipsis: true,
render: (_: any, record: Supplier) => {
return (
<Tooltip>
<Tooltip title={record.supplierName} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.supplierId)}>{record.supplierName || ''}</a>
</Tooltip>
)

2
src/pages/supplier/supplierExit/supplierExitManage/components/ViewBlacklistModal.tsx
View File

@ -85,7 +85,7 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
ellipsis: true,
render: (dom, record) => {
return (
<Tooltip>
<Tooltip title={record.supplierName} overlayStyle={{ zIndex: 1200 }}>
<a onClick={() => supplierDetailModal?.(record.supplierId)}>{record.supplierName || ''}</a>
</Tooltip>
)