fix: 首页权限

src/constants/index.ts

@@ -84,7 +84,9 @@ export enum LAYOUT_TYPE {
 
 // 本地环境跳过权限校验
 
-export const isDev = process.env.NODE_ENV === "development"
+export const isDev = false;
+// export const isDev = process.env.NODE_ENV === "development"
+
 
 
 

src/layouts/components/OuterSide.tsx

@@ -49,11 +49,13 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
   return <>
     <Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}>
       <div className={styles.userPic}>
+        <Link to="/memberCenter/home">
         {
           props.UserStore.avatar
           ? <img src={props.UserStore.avatar} className={styles.avatar} />
           : <Icon component={() => <DefaultAvatar className={styles.logo} />} />
         }
+        </Link>
       </div>
       <ul className={styles.menuBox}>
         {

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

@@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react';
 import styles from './center.less';
 import { PublicApi } from '@/services/api'
 import { Link } from 'umi'
-import Layout from './layout';
+import Layout, { IDataListProps } from './layout';
 import Authorize from '../Authorize';
 import useViewRequest from '../../hooks/useViewRequest';
 import { GetReportMemberHomeGetMemberTallyResponse, GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2Api';

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

@@ -5,8 +5,8 @@ import { Link } from 'umi'
 import Layout from './layout';
 import Authorize from '../Authorize';
 import useViewRequest from '../../hooks/useViewRequest';
-import { GetReportMemberHomeGetEnhanceTallyResponse } from '@/services/ReportApi';
 import useGetAuth from '../../hooks/uesGetAuth';
+import { GetReportMemberHomeGetEnhanceTallyResponse } from '@/services/ReportV2Api';
 interface Iprops {};
 
 const url = '/memberCenter/handling/assign/query'

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

@@ -24,6 +24,7 @@ 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/hooks/uesGetAuth.tsx

 import { getAuth } from "@/utils/auth"
 import { useCallback, useMemo } from "react";
+import _groupBy from 'lodash/groupBy'
 
 type AbilityNameType =  "orderAbility"
-                      | 'shopAbility'
-                      | 'tranactionAbility'
-                      | "procurementAbility"
-                      | "contract"
-                      | "commodityAbility"
-                      | "channelAbility"
-                      | "payandSettle"
-                      | "balance"
-                      | "afterService"
-                      | "logisticsAbility"
-                      | "handling"
-                      | "memberAbility"
+  | 'shopAbility'
+  | 'tranactionAbility'
+  | "procurementAbility"
+  | "contract"
+  | "commodityAbility"
+  | "channelAbility"
+  | "payandSettle"
+  | "balance"
+  | "afterService"
+  | "logisticsAbility"
+  | "handling"
+  | "memberAbility"
+
+type isCheckedLayoutsType = {
+  id: number | null,
+  code: number,
+  name: string,
+  sort: number,
+  isShow?: boolean,
+}
+
+const collection2Obj = <T, P>(list: T[], name: any, isCover?: false) => {
+  const res = list.reduce((prev, current) => {
+    prev[current[name]] = current;
+    return {...prev};
+  }, {})
+  return res;
+}
 
 const useGetAuth = () => {
   const userAuth = getAuth();
   const cacheAuth = useMemo(() => userAuth, [userAuth]);
+  const urls = useMemo(() => cacheAuth.urls, [])
 
+  /**
+   * 只要当前能力拥有他们其中一个准入路由，那么就代表有权限
+   */
   const hasAbility = useCallback((abilityName: AbilityNameType) => {
+    /** 这里本来想写正则的， 可是没想到好的方案, 之前直接判断模块前缀的话，没有添加子集菜单同样也没有权限 */
     const abilityUrls = {
       "orderAbility": [
-        '/memberCenter/tranactionAbility/purchaseOrder',
-        '/memberCenter/tranactionAbility/saleOrder',
+        "/memberCenter/tranactionAbility/saleOrder/",
+        "/memberCenter/tranactionAbility/supplierEvaluation/",
+        "/memberCenter/tranactionAbility/purchaseOrder/",
+        "/memberCenter/tranactionAbility/purchaserEvaluation/",
+      ],
+      "shopAbility": [
+        '/memberCenter/commodityAbility/commodity/products',
+        '/memberCenter/commodityAbility/trademark'
       ],
-      "shopAbility": '/memberCenter/shopAbility',
       "tranactionAbility": [
         '/memberCenter/tranactionAbility/productInquiry',
         "/memberCenter/tranactionAbility/inquiryOffer",
         "/memberCenter/tranactionAbility/confirmOffer",
       ],
       // 采购中心
-      "procurementAbility": "/memberCenter/procurementAbility",
+      "procurementAbility": [
+        "/memberCenter/procurementAbility/purchaseInquiry/",
+        "/memberCenter/procurementAbility/offter/",
+        "/memberCenter/procurementAbility/confirmOffer/",
+        "/memberCenter/procurementAbility/callForBids/",
+        "/memberCenter/procurementAbility/tender/",
+      ],
       // 合同中心
-      "contract": "/memberCenter/contract",
+      "contract": [
+        "/memberCenter/contract/",
+      ],
       // 商品能力
-      "commodityAbility": "/memberCenter/commodityAbility",
+      "commodityAbility": [
+        "/memberCenter/commodityAbility/commodity/products",
+        "/memberCenter/commodityAbility/trademark",
+      ],
       // 渠道商城能力
       "channelAbility": "/memberCenter/channelAbility",
       // 资金账户管理中心
-      "payandSettle": '/memberCenter/payandSettle',
+      "payandSettle": [
+        "/memberCenter/payandSettle/creditManage/"
+      ],
       // 结算
-      "balance": "/memberCenter/balance",
+      "balance": [
+        "/memberCenter/balance/platformSettlement/",
+        "/memberCenter/balance/accountsPayable/",
+        "/memberCenter/balance/accountsReceivable/",
+      ],
       // 售后
-      "afterService": "/memberCenter/afterService",
+      "afterService": [
+        "/memberCenter/afterService/repairApplication/",
+        "/memberCenter/afterService/repairManage/",
+        "/memberCenter/afterService/returnApplication/",
+        "/memberCenter/afterService/returnManage/",
+        "/memberCenter/afterService/exchangeApplication/",
+        "/memberCenter/afterService/exchangeManage/",
+      ],
       // 物流中心
-      "logisticsAbility": "/memberCenter/logisticsAbility",
+      "logisticsAbility": "/memberCenter/logisticsAbility/",
       // 加工
-      "handling": '/memberCenter/handling',
+      "handling": [
+        '/memberCenter/handling/confirm/',
+        '/memberCenter/handling/assign/'
+      ],
       // 会员
-      "memberAbility": "/memberCenter/memberAbility",
+      "memberAbility": [
+        "/memberCenter/memberAbility/manage/",
+        "/memberCenter/memberAbility/memberEvaluate/",
+        "/memberCenter/memberAbility/memberRectification/",
+        "/memberCenter/memberAbility/profile/",
+      ],
     }
     if (!abilityUrls[abilityName]) {
       return false
     }
     const value = abilityUrls[abilityName];
     const currentAbilityUrl = !Array.isArray(value) ? [].concat(value) : value;
-    return currentAbilityUrl.some((_item) => cacheAuth.urls?.includes(_item));
-    // return cacheAuth.urls?.some((_item) => _item.includes(abilityUrls[abilityName]))
-  }, [cacheAuth])
+    return currentAbilityUrl.some((_item) => urls?.some((_row) => _row.includes(_item)));
+  }, [urls])
 
   const isConsumer = useMemo(() => cacheAuth.memberRoleType === 2, [cacheAuth])
 
+  /**
+   * 直接判断有没有大模块如果有，那么表示应该显示此模块，
+   */
   const getLayoutCenters = useCallback(() => {
     const name2link = {
       '/memberCenter/tranactionAbility': "订单中心",
@@ -94,11 +155,33 @@ const useGetAuth = () => {
     return uniqueName
   }, [cacheAuth])
 
+  /**
+   *
+   * @param authLayouts  根据pass 平台勾选的大模块, 生成的names 即从getLayoutCenters 得到的值
+   * @param isCheckedLayouts 后台返回的已勾选的的大模块项
+   */
+  const generateLayoutData = useCallback((authLayouts: string[], isCheckedLayouts: isCheckedLayoutsType[]) => {
+    const filterNameIsNull = isCheckedLayouts.filter((_item) => _item.name !== null);
+    const res = collection2Obj(filterNameIsNull, "name");
+    const newLayoutData = authLayouts.map((_item, index) => {
+      const target: isCheckedLayoutsType = res[_item] || ({});
+      return {
+        name: _item,
+        id: null,
+        code: index,
+        ...target,
+        isShow: target?.id ? true : false,
+      }
+    })
+    return newLayoutData
+  }, [])
+
   return {
     userAuth: cacheAuth,
     hasAbilityFunc: hasAbility,
     isConsumer,
-    getLayoutCentersName: getLayoutCenters
+    getLayoutCentersName: getLayoutCenters,
+    generateLayoutData: generateLayoutData,
   } as const
 }
 

src/pages/home/index.tsx

@@ -36,9 +36,7 @@ const Home: React.FC<{}> = () => {
   const [visible, setVisible] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
-  // 记录所有layout
-  const [allLayout, setAllLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
-  const { getLayoutCentersName, } = useGetAuth()
+  const { getLayoutCentersName, generateLayoutData } = useGetAuth()
 
   useEffect(() => {
     async function getDataLayout() {
@@ -47,9 +45,8 @@ const Home: React.FC<{}> = () => {
         const { data, code, message } = await PublicApi.getReportMemberHomeGetDataLayout();
         if (code === 1000) {
           const names = getLayoutCentersName()
-          const centers = data.filter((_item) => names.includes(_item.name))
-          setLayout(centers)
-          setAllLayout(data)
+          const res = generateLayoutData(names, data || []);
+          setLayout(res as unknown as GetReportMemberHomeGetDataLayoutResponse)
         }
       } finally {
         setLoading(false)
@@ -60,20 +57,20 @@ const Home: React.FC<{}> = () => {
 
   const handleChangeOrder = useCallback( async (list: LayoutType[]) => {
     /** 将原数据补充进去 */
-    const listKeys = list.map((_item) => _item.code);
-    // 获取无权限的 数据
-    const noAuthList = allLayout.filter((_item) => !listKeys.includes(_item.code));
-    const postList = list.concat(noAuthList).map((_item, index) => ({
-      ..._item,
-      sort: index + 1,
-    }));
+    const listKeys = list.filter((_item) => _item.isShow).map((_item) => {
+      const { code, isShow, ...rest } = _item;
+      return {
+        ...rest,
+        isShow: isShow ? 1 : 0,
+      }
+    });
 
-    const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(postList)
+    const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(listKeys as any);
     if(code === 1000) {
       setLayout(list);
     }
 
-  }, [allLayout])
+  }, [])
 
   const renderCenters = useCallback(() => {
     if (loading) {
@@ -83,7 +80,7 @@ const Home: React.FC<{}> = () => {
       <>
         {
           (layout).map((item) => {
-            const RenderComponent = ComponentSelect[item.name]
+            const RenderComponent = ComponentSelect[item.name];
             return (
               <div
                 className={styles.ability}