供应商弹出 地市

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>;