供应商弹出 地市

src/components/GlobalModal/components/SupplierRegisterInfo.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import { Descriptions, Table } from 'antd';
+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.currency' }), dataIndex: 'currency', key: 'currency',  render: (code: string) => currencyMap[code] || code  },
-    { title: intl.formatMessage({ id: 'component.globalModal.country' }), dataIndex: 'nationName', key: 'nation' },
+    { title: intl.formatMessage({ id: 'component.globalModal.country' }), dataIndex: 'nation', key: 'nation', render: renderRegionName },
-    { title: intl.formatMessage({ id: 'component.globalModal.province' }), dataIndex: 'provinceName', key: 'province' },
+    { title: intl.formatMessage({ id: 'component.globalModal.province' }), dataIndex: 'province', key: 'province', render: renderRegionName },
-    { title: intl.formatMessage({ id: 'component.globalModal.city' }), dataIndex: 'cityName', key: 'city' },
+    { 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.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.question' }), dataIndex: 'questionName', key: 'questionName' },
-            { title: intl.formatMessage({id: 'component.globalModal.answer'}), dataIndex: 'replyValue', key: 'replyValue', width: 120 },
+            { 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) => {
+          {registerInfo.coscoSupplierSurveyAttachments.map((item: any) => {
-            const { attachmentsType, fileUrl , fileName } = item;
+            const { attachmentsType, fileUrl, fileName } = item;
-              return attachmentsType === 'commitment'? (
+            return attachmentsType === 'commitment' ? (
-                 <a href={fileUrl} target="_blank" rel="noreferrer">{fileName}</a>
+              <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) => {
+          {registerInfo.coscoSupplierSurveyAttachments.map((item: any) => {
-              const { attachmentsType, fileUrl , fileName } = item;
+            const { attachmentsType, fileUrl, fileName } = item;
-              return attachmentsType === 'accessory'? (
+            return attachmentsType === 'accessory' ? (
-                 <a href={fileUrl} target="_blank" rel="noreferrer">{fileName}</a>
+              <a href={fileUrl} target="_blank" rel="noreferrer">{fileName}</a>
-              ) :null
+            ) : null
           })}
         </Descriptions.Item>
       </Descriptions>