fix: 处理首页重复请求

src/pages/home/components/Centers/ChannelMallCenter.tsx

@@ -31,19 +31,21 @@ const ChannelMallCenter: React.FC<Iprops> = () => {
   const hasAbility = hasAbilityFunc('channelAbility');
   const bindAuth = useMemo(() =>  userAuth.urls?.includes(BIND_MANAGER), [userAuth]);
   const [salerNum, setSalerNum] = useState(0);
+  const [hasFetchData, setHasFetchData] = useState(false)
 
   useEffect(() => {
-    if (!inViewPort || !bindAuth) {
+    if (!inViewPort || !bindAuth || hasFetchData) {
       return;
     }
     async function getManagerData() {
       const { data, code } = await PublicApi.getMemberAbilitySalesPage({current: '1', pageSize: '1'} as any)
+      setHasFetchData(true)
       if (code === 1000) {
         setSalerNum(data.totalCount)
       }
     }
     getManagerData();
-  }, [inViewPort, bindAuth])
+  }, [inViewPort, bindAuth, setHasFetchData])
 
   const tagList = useMemo(() => [
     {

src/pages/home/components/Centers/Contract.tsx

@@ -25,21 +25,24 @@ const Constract: React.FC<Iprops> = (props: Iprops) => {
   const { loading, isError, hasRequest, responseData, ref, inViewPort } = useViewRequest<GetReportMemberHomeGetContractTallyResponse, any>(PublicApi.getReportMemberHomeGetContractTally, {})
   const [hasConstract, setHasConstract] = useState<boolean>(false);
   const { userAuth, hasAbilityFunc, isConsumer } = useGetAuth();
+  const [hasFetchData, setHasFetchData] = useState(false)
+
   const hasAbility = hasAbilityFunc('contract');
   const url = isConsumer ? '/memberCenter/contract/manage/QueryList' : '/memberCenter/contract/coordination/coordinationList'
 
   useEffect(() => {
-    if (!inViewPort) {
+    if (!inViewPort || hasFetchData) {
       return;
     }
     async function findCurrMemberPurchase() {
       const { data, code } = await PublicApi.getContractSignatureAuthGet();
+      setHasFetchData(true)
       if (code === 1000) {
         return setHasConstract(data?.state !== 1)
       }
     }
     findCurrMemberPurchase()
-  }, [inViewPort])
+  }, [inViewPort, hasFetchData])
 
   return (
     <Layout

src/pages/home/components/Centers/LogisticsCenter.tsx

@@ -31,20 +31,22 @@ const LogisticsCenter: React.FC<Iprops> = (props: Iprops) => {
   const { hasAbilityFunc, userAuth } = useGetAuth();
   const hasAbility = hasAbilityFunc('logisticsAbility');
   const [isShow, setIsShow] = useState(false);
+  const [hasFetchData, setHasFetchData] = useState(false)
 
   useEffect(() => {
     const hasCreateInfoManageAuth = userAuth.urls?.includes(CREATE_INFO_MANAGE)
-    if (!inViewPort || !hasCreateInfoManageAuth) {
+    if (!inViewPort || !hasCreateInfoManageAuth || hasFetchData) {
       return;
     }
     async function getManagerData() {
+      setHasFetchData(true)
       const { data, code } = await PublicApi.getTemplateWebMemberLogisticsWebFindCurrMemberLogistics({memberId: userAuth.memberId, roleId: userAuth.memberRoleId } as any)
       if (code === 1000) {
         setIsShow(data === null)
       }
     }
     getManagerData();
-  }, [inViewPort, userAuth])
+  }, [inViewPort, userAuth, hasFetchData])
 
   const tagsList = useMemo(() => {
     const list = [

src/pages/home/components/Centers/MemberCenter.tsx

 import React, { Fragment, useMemo } from 'react';
-import styles from './center.less';
 import { PublicApi } from '@/services/api'
 import { Link } from 'umi'
 import Layout, { IDataListProps } from './layout';
 import Authorize from '../Authorize';
 import useViewRequest from '../../hooks/useViewRequest';
 import { GetReportMemberHomeGetMemberTallyResponse, GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2Api';
-import { BellOutlined } from '@ant-design/icons';
-import {Button} from 'antd';
 import useGetAuth from '../../hooks/uesGetAuth';
 interface Iprops {};
 

src/pages/home/components/Centers/ProcessCenter.tsx

@@ -25,20 +25,22 @@ const ProcessCenter: React.FC<Iprops> = () => {
   const { hasAbilityFunc, userAuth } = useGetAuth();
   const hasAbility = hasAbilityFunc('handling');
   const [isShow, setIsShow] = useState(false);
+  const [hasFetchData, setHasFetchData] = useState(false)
 
   useEffect(() => {
     const hasCreateInfoManageAuth = userAuth.urls?.includes(CREATE_INFO_MANAGE)
-    if (!inViewPort || !hasCreateInfoManageAuth) {
+    if (!inViewPort || !hasCreateInfoManageAuth || hasFetchData) {
       return;
     }
     async function getManagerData() {
       const { data, code } = await PublicApi.getTemplateWebMemberProcessWebFindCurrMemberProcess()
+      setHasFetchData(true);
       if (code === 1000) {
         setIsShow(data === null)
       }
     }
     getManagerData();
-  }, [inViewPort, userAuth])
+  }, [inViewPort, userAuth, hasFetchData])
 
   return (
     <Layout

src/pages/home/components/Centers/ProductCenter.tsx

@@ -5,9 +5,9 @@ import { PublicApi } from '@/services/api';
 import { Link } from 'umi';
 import Authorize from '../Authorize';
 import useViewRequest from '../../hooks/useViewRequest';
-import { GetReportMemberHomeGetCommodityTallyResponse } from '@/services/ReportApi';
 import Layout from './layout';
 import useGetAuth from '../../hooks/uesGetAuth';
+import { GetReportMemberHomeGetCommodityTallyResponse } from '@/services/ReportV2Api';
 
 interface Iprops {};
 
@@ -24,7 +24,6 @@ const ProductCenter: React.FC<Iprops> = () => {
   const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {})
   const { userAuth, hasAbilityFunc } = useGetAuth();
   const hasAbility = hasAbilityFunc('commodityAbility');
-  console.log(hasAbility);
 
   const extraList = useMemo(() => [
     {

src/pages/home/components/Centers/PurchaseCenter.tsx

@@ -41,19 +41,21 @@ const PurchaseCenter: React.FC<Iprops> = () => {
   const hasPurchaseAuth = (isBusiness.includes(userAuth.memberType)) && isConsumer
   /** 是否有采购门户 */
   const [hasPurchase, setHasPurchase] = useState<boolean>(hasPurchaseAuth);
+  const [hasFetchData, setHasFetchData] = useState(false)
 
   useEffect(() => {
-    if (!inViewPort || (!hasPurchaseAuth)) {
+    if (!inViewPort || (!hasPurchaseAuth) || hasFetchData) {
       return;
     }
     async function findCurrMemberPurchase() {
       const { data, code } = await PublicApi.getTemplateWebMemberPurchaseWebFindCurrMemberPurchase();
+      setHasFetchData(true)
       if (code === 1000) {
         return setHasPurchase(data?.id ? true : false)
       }
     }
     findCurrMemberPurchase()
-  }, [inViewPort, hasPurchaseAuth])
+  }, [inViewPort, hasPurchaseAuth, hasFetchData])
 
   const purchaseCenterUrl = useMemo(() => isConsumer ? consumerUrl : providerUrl ,[userAuth])
 

src/pages/home/components/CustomWorkBench/index.tsx

@@ -13,7 +13,8 @@ export type LayoutType = {
   code: number,
   name: string,
   sort: number,
-  isShow: 1 | 2 | number & {}
+  isShow: 1 | 2 | number & {},
+  id: null | number,
 }
 
 interface Iprops {

src/pages/home/hooks/uesGetAuth.tsx

@@ -24,9 +24,16 @@ type isCheckedLayoutsType = {
   isShow?: boolean,
 }
 
-const collection2Obj = <T, P>(list: T[], name: any, isCover?: false) => {
-  const res = list.reduce((prev, current) => {
-    prev[current[name]] = current;
+const collection2Obj = <T, >(list: T[], name: string, isCover?: boolean) => {
+  const res = list.reduce((prev, current: T) => {
+    const value = current[name];
+    if (!isCover) {
+      if ( typeof prev[value] === 'undefined') {
+        prev[value] = current
+      }
+    } else {
+      prev[value] = current;
+    }
     return {...prev};
   }, {})
   return res;
@@ -37,12 +44,8 @@ const useGetAuth = () => {
   const cacheAuth = useMemo(() => userAuth, [userAuth]);
   const urls = useMemo(() => cacheAuth.urls, [])
 
-  /**
-   * 只要当前能力拥有他们其中一个准入路由，那么就代表有权限
-   */
-  const hasAbility = useCallback((abilityName: AbilityNameType) => {
-    /** 这里本来想写正则的， 可是没想到好的方案, 之前直接判断模块前缀的话，没有添加子集菜单同样也没有权限 */
-    const abilityUrls = {
+  const abilityUrls = useMemo(() => {
+    return {
       "orderAbility": [
         "/memberCenter/tranactionAbility/saleOrder/",
         "/memberCenter/tranactionAbility/supplierEvaluation/",
@@ -111,13 +114,21 @@ const useGetAuth = () => {
         "/memberCenter/memberAbility/profile/",
       ],
     }
+  }, [])
+
+  /**
+   * 只要当前能力拥有他们其中一个准入路由，那么就代表有权限,
+   * @review 这里是有问题的，不应该对某个中心做判断，应该在home 进来的时候就
+   */
+  const hasAbility = useCallback((abilityName: AbilityNameType) => {
+    /** 这里本来想写正则的， 可是没想到好的方案, 之前直接判断模块前缀的话，没有添加子集菜单同样也没有权限 */
     if (!abilityUrls[abilityName]) {
       return false
     }
     const value = abilityUrls[abilityName];
     const currentAbilityUrl = !Array.isArray(value) ? [].concat(value) : value;
     return currentAbilityUrl.some((_item) => urls?.some((_row) => _row.includes(_item)));
-  }, [urls])
+  }, [urls, abilityUrls])
 
   const isConsumer = useMemo(() => cacheAuth.memberRoleType === 2, [cacheAuth])
 

src/pages/home/index.tsx

 import React, { useState, useEffect, useCallback } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Row, Col, Button, message, Card } from 'antd';
+import { Card } from 'antd';
 import UseGuaid from './components/UseGuaid';
 import UserCenter from './components/UserCenter';
 import CustomWorkBench, { LayoutType } from './components/CustomWorkBench';
@@ -12,7 +12,6 @@ import { TradeCenter, FundCenter,  ShopCenter, ProductCenter, SettlementCenter,
 import styles from './index.less'
 import { CompassFilled } from '@ant-design/icons';
 import { PublicApi } from '@/services/api';
-import { GetReportMemberHomeGetDataLayoutResponse } from '@/services/ReportV2Api';
 import useGetAuth from './hooks/uesGetAuth';
 
 const ComponentSelect = {
@@ -35,7 +34,7 @@ const ComponentSelect = {
 const Home: React.FC<{}> = () => {
   const [visible, setVisible] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
+  const [layout, setLayout] = useState<LayoutType[]>([]);
   const { getLayoutCentersName, generateLayoutData } = useGetAuth()
 
   useEffect(() => {
@@ -46,7 +45,7 @@ const Home: React.FC<{}> = () => {
         if (code === 1000) {
           const names = getLayoutCentersName()
           const res = generateLayoutData(names, data || []);
-          setLayout(res as unknown as GetReportMemberHomeGetDataLayoutResponse)
+          setLayout(res as unknown as LayoutType[])
         }
       } finally {
         setLoading(false)
@@ -55,7 +54,7 @@ const Home: React.FC<{}> = () => {
     getDataLayout();
   }, [])
 
-  const handleChangeOrder = useCallback( async (list: LayoutType[]) => {
+  const handleChangeOrder = useCallback( async (list: LayoutType []) => {
     /** 将原数据补充进去 */
     const listKeys = list.filter((_item) => _item.isShow).map((_item) => {
       const { code, isShow, ...rest } = _item;
@@ -65,7 +64,7 @@ const Home: React.FC<{}> = () => {
       }
     });
 
-    const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(listKeys as any);
+    const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(listKeys as Omit<LayoutType, "code">[]);
     if(code === 1000) {
       setLayout(list);
     }