Commit c5b27191 authored by Bill's avatar Bill

fix: 首页权限

parent fde18d4f
...@@ -84,7 +84,9 @@ export enum LAYOUT_TYPE { ...@@ -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"
......
...@@ -49,11 +49,13 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => { ...@@ -49,11 +49,13 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
return <> return <>
<Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}> <Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}>
<div className={styles.userPic}> <div className={styles.userPic}>
<Link to="/memberCenter/home">
{ {
props.UserStore.avatar props.UserStore.avatar
? <img src={props.UserStore.avatar} className={styles.avatar} /> ? <img src={props.UserStore.avatar} className={styles.avatar} />
: <Icon component={() => <DefaultAvatar className={styles.logo} />} /> : <Icon component={() => <DefaultAvatar className={styles.logo} />} />
} }
</Link>
</div> </div>
<ul className={styles.menuBox}> <ul className={styles.menuBox}>
{ {
......
...@@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react';
import styles from './center.less'; import styles from './center.less';
import { PublicApi } from '@/services/api' import { PublicApi } from '@/services/api'
import { Link } from 'umi' import { Link } from 'umi'
import Layout from './layout'; import Layout, { IDataListProps } from './layout';
import Authorize from '../Authorize'; import Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest'; import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetMemberTallyResponse, GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2Api'; import { GetReportMemberHomeGetMemberTallyResponse, GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2Api';
......
...@@ -5,8 +5,8 @@ import { Link } from 'umi' ...@@ -5,8 +5,8 @@ import { Link } from 'umi'
import Layout from './layout'; import Layout from './layout';
import Authorize from '../Authorize'; import Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest'; import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetEnhanceTallyResponse } from '@/services/ReportApi';
import useGetAuth from '../../hooks/uesGetAuth'; import useGetAuth from '../../hooks/uesGetAuth';
import { GetReportMemberHomeGetEnhanceTallyResponse } from '@/services/ReportV2Api';
interface Iprops {}; interface Iprops {};
const url = '/memberCenter/handling/assign/query' const url = '/memberCenter/handling/assign/query'
......
...@@ -24,6 +24,7 @@ const ProductCenter: React.FC<Iprops> = () => { ...@@ -24,6 +24,7 @@ const ProductCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {}) const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {})
const { userAuth, hasAbilityFunc } = useGetAuth(); const { userAuth, hasAbilityFunc } = useGetAuth();
const hasAbility = hasAbilityFunc('commodityAbility'); const hasAbility = hasAbilityFunc('commodityAbility');
console.log(hasAbility);
const extraList = useMemo(() => [ const extraList = useMemo(() => [
{ {
......
import { getAuth } from "@/utils/auth" import { getAuth } from "@/utils/auth"
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import _groupBy from 'lodash/groupBy'
type AbilityNameType = "orderAbility" type AbilityNameType = "orderAbility"
| 'shopAbility' | 'shopAbility'
...@@ -15,54 +16,114 @@ type AbilityNameType = "orderAbility" ...@@ -15,54 +16,114 @@ type AbilityNameType = "orderAbility"
| "handling" | "handling"
| "memberAbility" | "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 useGetAuth = () => {
const userAuth = getAuth(); const userAuth = getAuth();
const cacheAuth = useMemo(() => userAuth, [userAuth]); const cacheAuth = useMemo(() => userAuth, [userAuth]);
const urls = useMemo(() => cacheAuth.urls, [])
/**
* 只要当前能力拥有他们其中一个准入路由,那么就代表有权限
*/
const hasAbility = useCallback((abilityName: AbilityNameType) => { const hasAbility = useCallback((abilityName: AbilityNameType) => {
/** 这里本来想写正则的, 可是没想到好的方案, 之前直接判断模块前缀的话,没有添加子集菜单同样也没有权限 */
const abilityUrls = { const abilityUrls = {
"orderAbility": [ "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": [ "tranactionAbility": [
'/memberCenter/tranactionAbility/productInquiry', '/memberCenter/tranactionAbility/productInquiry',
"/memberCenter/tranactionAbility/inquiryOffer", "/memberCenter/tranactionAbility/inquiryOffer",
"/memberCenter/tranactionAbility/confirmOffer", "/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", "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]) { if (!abilityUrls[abilityName]) {
return false return false
} }
const value = abilityUrls[abilityName]; const value = abilityUrls[abilityName];
const currentAbilityUrl = !Array.isArray(value) ? [].concat(value) : value; const currentAbilityUrl = !Array.isArray(value) ? [].concat(value) : value;
return currentAbilityUrl.some((_item) => cacheAuth.urls?.includes(_item)); return currentAbilityUrl.some((_item) => urls?.some((_row) => _row.includes(_item)));
// return cacheAuth.urls?.some((_item) => _item.includes(abilityUrls[abilityName])) }, [urls])
}, [cacheAuth])
const isConsumer = useMemo(() => cacheAuth.memberRoleType === 2, [cacheAuth]) const isConsumer = useMemo(() => cacheAuth.memberRoleType === 2, [cacheAuth])
/**
* 直接判断有没有大模块如果有,那么表示应该显示此模块,
*/
const getLayoutCenters = useCallback(() => { const getLayoutCenters = useCallback(() => {
const name2link = { const name2link = {
'/memberCenter/tranactionAbility': "订单中心", '/memberCenter/tranactionAbility': "订单中心",
...@@ -94,11 +155,33 @@ const useGetAuth = () => { ...@@ -94,11 +155,33 @@ const useGetAuth = () => {
return uniqueName return uniqueName
}, [cacheAuth]) }, [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 { return {
userAuth: cacheAuth, userAuth: cacheAuth,
hasAbilityFunc: hasAbility, hasAbilityFunc: hasAbility,
isConsumer, isConsumer,
getLayoutCentersName: getLayoutCenters getLayoutCentersName: getLayoutCenters,
generateLayoutData: generateLayoutData,
} as const } as const
} }
......
...@@ -36,9 +36,7 @@ const Home: React.FC<{}> = () => { ...@@ -36,9 +36,7 @@ const Home: React.FC<{}> = () => {
const [visible, setVisible] = useState<boolean>(false); const [visible, setVisible] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]); const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
// 记录所有layout const { getLayoutCentersName, generateLayoutData } = useGetAuth()
const [allLayout, setAllLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
const { getLayoutCentersName, } = useGetAuth()
useEffect(() => { useEffect(() => {
async function getDataLayout() { async function getDataLayout() {
...@@ -47,9 +45,8 @@ const Home: React.FC<{}> = () => { ...@@ -47,9 +45,8 @@ const Home: React.FC<{}> = () => {
const { data, code, message } = await PublicApi.getReportMemberHomeGetDataLayout(); const { data, code, message } = await PublicApi.getReportMemberHomeGetDataLayout();
if (code === 1000) { if (code === 1000) {
const names = getLayoutCentersName() const names = getLayoutCentersName()
const centers = data.filter((_item) => names.includes(_item.name)) const res = generateLayoutData(names, data || []);
setLayout(centers) setLayout(res as unknown as GetReportMemberHomeGetDataLayoutResponse)
setAllLayout(data)
} }
} finally { } finally {
setLoading(false) setLoading(false)
...@@ -60,20 +57,20 @@ const Home: React.FC<{}> = () => { ...@@ -60,20 +57,20 @@ const Home: React.FC<{}> = () => {
const handleChangeOrder = useCallback( async (list: LayoutType[]) => { const handleChangeOrder = useCallback( async (list: LayoutType[]) => {
/** 将原数据补充进去 */ /** 将原数据补充进去 */
const listKeys = list.map((_item) => _item.code); const listKeys = list.filter((_item) => _item.isShow).map((_item) => {
// 获取无权限的 数据 const { code, isShow, ...rest } = _item;
const noAuthList = allLayout.filter((_item) => !listKeys.includes(_item.code)); return {
const postList = list.concat(noAuthList).map((_item, index) => ({ ...rest,
..._item, isShow: isShow ? 1 : 0,
sort: index + 1, }
})); });
const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(postList) const { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(listKeys as any);
if(code === 1000) { if(code === 1000) {
setLayout(list); setLayout(list);
} }
}, [allLayout]) }, [])
const renderCenters = useCallback(() => { const renderCenters = useCallback(() => {
if (loading) { if (loading) {
...@@ -83,7 +80,7 @@ const Home: React.FC<{}> = () => { ...@@ -83,7 +80,7 @@ const Home: React.FC<{}> = () => {
<> <>
{ {
(layout).map((item) => { (layout).map((item) => {
const RenderComponent = ComponentSelect[item.name] const RenderComponent = ComponentSelect[item.name];
return ( return (
<div <div
className={styles.ability} className={styles.ability}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment