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-24 14:36:12 +08:00
parent b2109fdd90
commit 0df80041a1
1 changed files with 77 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/GlobalModal/components/SupplierRegisterInfo.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import { Descriptions, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import { Descriptions, Table, Spin } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useIntl } from 'umi';
import { getDictList } from '@/servers/api/dicts';
import { dictRegion } from '@/servers/api/user'
interface qualifications {
id: string; // 主键ID（如后续用于 rowKey）
certificateType: string; // 资质证书类型
@ -23,8 +25,62 @@ interface BankInfo {
province: string;
city: string;
}
const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
const codeNameCache = new Map<string, string>();
const fetchRegionNames = async (codes: string[]) => {
const waitCodes = codes.filter(code => code && !codeNameCache.has(code));
if (waitCodes.length === 0) return;
// 批量接口推荐你后端支持，单个请求也兼容如下
await Promise.all(waitCodes.map(async (code) => {
try {
const { code: status, data } = await dictRegion(code);
if (status === 200 && data && data.name) {
codeNameCache.set(code, data.name);
}
} catch { /* ignore */ }
}));
};
const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
//币种
const [currencyMap, setCurrencyMap] = useState<{ [code: string]: string }>({});
const [regionLoading, setRegionLoading] = useState(false);
const [, forceUpdate] = useState({}); // 用于触发重新渲染
useEffect(() => {
getDictList('currency').then((res) => {
if (res.code === 200) {
const map: { [code: string]: string } = {};
res.data.forEach((item: { code: string, dicName: string }) => {
map[item.code] = item.dicName;
});
setCurrencyMap(map);
}
});
}, []);
useEffect(() => {
if (!Array.isArray(registerInfo?.coscoSupplierBank)) return;
// 收集所有 code
const codes: string[] = [];
registerInfo.coscoSupplierBank.forEach((item: BankInfo) => {
if (item.nation) codes.push(item.nation);
if (item.province) codes.push(item.province);
if (item.city) codes.push(item.city);
});
setRegionLoading(true);
fetchRegionNames(codes).then(() => {
setRegionLoading(false);
forceUpdate({});
});
}, [registerInfo?.coscoSupplierBank]);
// 通用渲染
const renderRegionName = (code: string) => {
if (!code) return '';
if (codeNameCache.has(code)) {
return codeNameCache.get(code);
}
return <Spin size="small" />;
};
const intl = useIntl();
const qualificationsColumns: ColumnsType<qualifications> = [
@ -44,10 +100,10 @@ const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
{ title: intl.formatMessage({ id: 'component.globalModal.openingBank' }), dataIndex: 'bank', key: 'bank' },
{ title: intl.formatMessage({ id: 'component.globalModal.accountName' }), dataIndex: 'accountName', key: 'accountName' },
{ title: intl.formatMessage({ id: 'component.globalModal.accountNumber' }), dataIndex: 'account', key: 'account' },
{ title: intl.formatMessage({ id: 'component.globalModal.currency' }), dataIndex: 'currencyName', key: 'currency' },
{ title: intl.formatMessage({ id: 'component.globalModal.country' }), dataIndex: 'nationName', key: 'nation' },
{ title: intl.formatMessage({ id: 'component.globalModal.province' }), dataIndex: 'provinceName', key: 'province' },
{ title: intl.formatMessage({ id: 'component.globalModal.city' }), dataIndex: 'cityName', key: 'city' },
{ title: intl.formatMessage({ id: 'component.globalModal.currency' }), dataIndex: 'currency', key: 'currency', render: (code: string) => currencyMap[code] || code },
{ title: intl.formatMessage({ id: 'component.globalModal.country' }), dataIndex: 'nation', key: 'nation', render: renderRegionName },
{ title: intl.formatMessage({ id: 'component.globalModal.province' }), dataIndex: 'province', key: 'province', render: renderRegionName },
{ title: intl.formatMessage({ id: 'component.globalModal.city' }), dataIndex: 'city', key: 'city', render: renderRegionName},
];
if (!registerInfo) return <div>{intl.formatMessage({ id: 'component.globalModal.loading' })}...</div>;
@ -241,12 +297,12 @@ const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
<Table
dataSource={registerInfo.coscoSupplierSurveyQuestionReply}
columns={[
{ title: intl.formatMessage({id: 'component.globalModal.index'}), dataIndex: 'index', key: 'index', width: 60, align: 'center', render: (_: any, __: any, index: number) => index + 1 },
{ title: intl.formatMessage({id: 'component.globalModal.question'}), dataIndex: 'questionName', key: 'questionName' },
{ title: intl.formatMessage({id: 'component.globalModal.answer'}), dataIndex: 'replyValue', key: 'replyValue', width: 120 },
{ title: intl.formatMessage({ id: 'component.globalModal.index' }), dataIndex: 'index', key: 'index', width: 60, align: 'center', render: (_: any, __: any, index: number) => index + 1 },
{ title: intl.formatMessage({ id: 'component.globalModal.question' }), dataIndex: 'questionName', key: 'questionName' },
{ title: intl.formatMessage({ id: 'component.globalModal.answer' }), dataIndex: 'replyValue', key: 'replyValue', width: 120 },
]}
pagination={false}
title={() => <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px' }}>{intl.formatMessage({id: 'component.globalModal.questionnaire'})}</div>}
title={() => <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px' }}>{intl.formatMessage({ id: 'component.globalModal.questionnaire' })}</div>}
/>
</div>
@ -261,11 +317,11 @@ const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
label={intl.formatMessage({ id: 'component.globalModal.antiBriberyLabel' })}
labelStyle={{ width: '200px' }}
>
{ registerInfo.coscoSupplierSurveyAttachments.map((item:any) => {
const { attachmentsType, fileUrl , fileName } = item;
return attachmentsType === 'commitment'? (
{registerInfo.coscoSupplierSurveyAttachments.map((item: any) => {
const { attachmentsType, fileUrl, fileName } = item;
return attachmentsType === 'commitment' ? (
<a href={fileUrl} target="_blank" rel="noreferrer">{fileName}</a>
) :null
) : null
})}
</Descriptions.Item>
</Descriptions>
@ -281,11 +337,11 @@ const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
label={intl.formatMessage({ id: 'component.globalModal.otherAttachmentLabel' })}
labelStyle={{ width: '200px' }}
>
{ registerInfo.coscoSupplierSurveyAttachments.map((item:any) => {
const { attachmentsType, fileUrl , fileName } = item;
return attachmentsType === 'accessory'? (
{registerInfo.coscoSupplierSurveyAttachments.map((item: any) => {
const { attachmentsType, fileUrl, fileName } = item;
return attachmentsType === 'accessory' ? (
<a href={fileUrl} target="_blank" rel="noreferrer">{fileName}</a>
) :null
) : null
})}
</Descriptions.Item>
</Descriptions>