Skip to content

J
jinfa-platform
Commit 574d33a0 authored by Bill's avatar Bill
Browse files
Options

fix: 首页权限

parent f19a91f5
Hide whitespace changes
Inline Side-by-side
Showing with 595 additions and 264 deletions
src/pages/handling/assign/create/index.tsx
View file @ 574d33a0
......@@ -454,16 +454,27 @@ const Create = () => {
}, [])
/** @tofix 有bug */
const handleBeforeOrderChecked = (record: GetOrderProcessingOrderListResponseDetail, checked: boolean, selectedRows: GetOrderProcessingOrderListResponseDetail[]) => {
let productRow = selectedRows.reduce((prev, current) => {
const { productDateilss, orderNo } = current;
const withOrderNo = productDateilss.map((_row) => ({..._row, orderNo}))
const result = prev.concat(withOrderNo)
return result
}, [])
const orderProductKeys = productRow.map((_item) => `${_item.orderId}_${_item.id}`);
setOrderProductSelectRowKeys(orderProductKeys);
setOrderProductSelectRowRecord(productRow)
if (checked) {
let productRow = selectedRows.reduce((prev, current) => {
const { productDateilss, orderNo } = current;
const withOrderNo = productDateilss.map((_row) => ({..._row, orderNo}))
const result = prev.concat(withOrderNo)
return result
}, [])
/** 处理重复值 */
const orderProductKeys = productRow.map((_item) => `${_item.orderId}_${_item.id}`);
const keys = Array.from(new Set(orderProductSelectRowKeys.concat(orderProductKeys)));
const filterSameKeys = productRow.filter((_row) => !keys.includes(`${_row.orderId}_${_row.id}`));
setOrderProductSelectRowKeys(orderProductKeys);
setOrderProductSelectRowRecord((prev) => prev.concat(filterSameKeys))
} else {
const { productDateilss, orderNo } = record;
const removeKeys = productDateilss.map((_item) => `${_item.orderId}_${_item.id}`);
setOrderProductSelectRowKeys((prev) => prev.filter((_row) => !removeKeys.includes(_row)));
setOrderProductSelectRowRecord((prev) => prev.filter((_row) => !removeKeys.includes(`${_row.orderId}_${_row.id}`)))
}
return true;
}
......@@ -514,7 +525,7 @@ const Create = () => {
const onSubmit = (value) => {
console.log(value)
}
return (
......
src/pages/home/components/Centers/AfterSoldCenter.tsx
View file @ 574d33a0
import React, { useCallback } from 'react';
import AbilityContainer from './Container';
import { Row, Col, Skeleton } from 'antd';
import styles from './center.less'
import { PublicApi } from '@/services/api';
import { Link } from 'umi'
import Authorize from '../Authorize';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetAfterSaleTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
......@@ -23,21 +20,27 @@ const KEY_TITLE = {
const EXCHANGE_APPLICATION = `/memberCenter/afterService/exchangeApplication/exchangeQuery`
const EXCHANGE_HANDLE = '/memberCenter/afterService/exchangeManage/exchangeQuery';
// 售后中心：根据当前用户+当前角色是否有此售后能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 进入售后中心：当前会员角色类型为服务消费则点击进入售后能力-售后换货申请--换货申请单查询页，如果当前会员角色类型为服务提供则点击进入售后能力-售后换货处理--换货申请单查询页
const AfterSoldCenter: React.FC<Iprops> = () => {
const { loading, responseData, ref, filterEmptyList, isError } = useViewRequest<GetReportMemberHomeGetAfterSaleTallyResponse, any>(PublicApi.getReportMemberHomeGetAfterSaleTally, {})
const auth = getAuth();
const roleType = auth.memberRoleType;
const { hasAbilityFunc, isConsumer } = useGetAuth();
const hasAbility = hasAbilityFunc('afterService');
const url = isConsumer ? EXCHANGE_APPLICATION : EXCHANGE_HANDLE
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="售后中心"
tips={"轻松完成订单售后在线换货、退货、维修环节"}
extra={
<Authorize
url={roleType == 1 ? EXCHANGE_HANDLE : EXCHANGE_APPLICATION}
url={url}
>
<div>
<Link to={roleType == 1 ? EXCHANGE_HANDLE : EXCHANGE_APPLICATION}>进入售后中心</Link>
<Link to={url}>进入售后中心</Link>
</div>
</Authorize>
}
......
src/pages/home/components/Centers/ChannelMallCenter.tsx
View file @ 574d33a0
import React, { Fragment, useMemo } from 'react';
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
import { BellOutlined, RightOutlined } from '@ant-design/icons'
......@@ -8,48 +8,80 @@ import Authorize from '../Authorize';
import { PublicApi } from '@/services/api';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetTemplateWebMemberShopWebFindCurrMemberShopResponse } from '@/services/TemplateV2Api';
import { GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse } from '@/services/TemplateV2Api';
import Layout from './layout';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {}
const SHOP_CENTER = '/memberCenter/channelAbility/infoManage'
const CREATE_TEMPLATE = '/memberCenter/channelAbility/template';
const BIND_MANAGER = '/memberCenter/channelAbility/memberList'
// 渠道商城中心：根据当前用户+当前角色是否有渠道能力此菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 1、创建渠道商城：判断当前用户是否有创建渠道商城权限，有则显示创建渠道商城按钮与图标，点击跳转能力中心-渠道能力-渠道商城管理-创建渠道商城页
// 2、渠道商城模板：判断当前用户是否有渠道商城模板权限，有则显示渠道商城模板按钮与图标，点击跳转能力中心-渠道能力-渠道商城管理--渠道商城模板管理
// 3、渠道商城装修：判断当前用户是否有渠道商城模板权限，有则显示渠道商城装修按钮与图标，点击跳转能力中心-渠道能力-渠道商城管理--渠道商城模板管理
// 4、业务员管理：判断当前用户是否有业务员管理--绑定渠道权限，有则显示业务员绑定渠道按钮与图标，点击跳转能力中心-渠道能力--业务员管理--绑定渠道，角标显示待绑定的渠道会员数量
// 5、进入渠道商城中心：判断当前用户是否有渠道商城管理权限，有则显示进入渠道商城中心按钮，点击跳转能力中心-渠道能力-渠道商城管理--渠道商城模板管理
// 6、如果当前用户有创建渠道商城权限，但还未创建渠道商城，则显示：您还没有创建渠道商城，请先创建渠道商城，点击创建渠道商城，跳转能力中心-渠道能力-渠道商城管理-创建渠道商城铺页
const ChannelMallCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetTemplateWebMemberShopWebFindCurrMemberShopResponse, any>(PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop, {})
const userAuth = getAuth();
const { loading, responseData, isError, ref, inViewPort } = useViewRequest<GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse, any>(PublicApi.getTemplateWebMemberChannelWebFindCurrMemberChannel, {})
const { userAuth, hasAbilityFunc } = useGetAuth();
const hasAbility = hasAbilityFunc('channelAbility');
const bindAuth = useMemo(() => userAuth.urls?.includes(BIND_MANAGER), [userAuth]);
const [salerNum, setSalerNum] = useState(0);
useEffect(() => {
if (!inViewPort || !bindAuth) {
return;
}
async function getManagerData() {
const { data, code } = await PublicApi.getMemberAbilitySalesPage({current: '1', pageSize: '1'} as any)
if (code === 1000) {
setSalerNum(data.totalCount)
}
}
getManagerData();
}, [inViewPort, bindAuth])
const tagList = useMemo(() => [
{
icon: create_shop,
url: SHOP_CENTER,
title: "创建渠道商城"
title: "创建渠道商城",
hasAuth: userAuth.urls.includes(SHOP_CENTER),
},
{
icon: create_shop,
url: CREATE_TEMPLATE,
title: "渠道商城模板"
title: "渠道商城模板",
hasAuth: userAuth.urls.includes(CREATE_TEMPLATE),
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "渠道商城装修"
url: CREATE_TEMPLATE,
title: "渠道商城装修",
hasAuth: userAuth.urls.includes(CREATE_TEMPLATE),
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "业务员绑定渠道"
url: BIND_MANAGER,
title: "业务员绑定渠道",
hasAuth: bindAuth,
count: salerNum,
}
], [])
], [userAuth, bindAuth, salerNum])
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="渠道商城中心"
tips="轻松完成渠道商城的创建、渠道商城风格选择、个性化装修"
extra={
<Authorize url={SHOP_CENTER}>
<Authorize url={CREATE_TEMPLATE}>
<div>
<Link to={SHOP_CENTER}>进入渠道商城中心</Link>
<Link to={CREATE_TEMPLATE}>进入渠道商城中心</Link>
</div>
</Authorize>
}
......@@ -57,10 +89,10 @@ const ChannelMallCenter: React.FC<Iprops> = () => {
>
<Fragment>
{
responseData && responseData.id && (
(responseData || !responseData?.id) && (
<Layout.AlertTip
content="您还没有创建渠道商城，请先创建渠道商城"
url="/memberCenter/channelAbility/infoManage"
url={SHOP_CENTER}
/>
)
}
......
src/pages/home/components/Centers/Contract.tsx
View file @ 574d33a0
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import { Button } from 'antd';
import Layout, { IDataListProps } from './layout';
import useViewRequest from '../../hooks/useViewRequest';
import { PublicApi } from '@/services/api';
import { BellOutlined } from '@ant-design/icons';
import theme from '@/../config/lingxi.theme.config';
import { GetReportMemberHomeGetContractTallyResponse } from '@/services/ReportApi';
import styles from './center.less'
import { Link } from 'umi';
import useGetAuth from '../../hooks/uesGetAuth';
import Authorize from '../Authorize';
const { StaticsDataList, AlertTip } = Layout
interface Iprops {}
......@@ -18,9 +17,16 @@ const KEY_TITLE = {
"applyAmountOrderList": '合同请款'
}
// 合同中心：根据当前用户+当前角色是否有合同能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 进入合同中心：当前会员角色类型为服务消费则点击进入合同能力--合同管理--合同查询页，如果当前会员角色类型为服务提供则点击进入合同能力-合同协同--合同查询页
// 如果当前用户有电子签章申请菜单权限，但还未申请电子签章，则显示：您还没有申请电子签章，请先申请电子签章，点击申请电子签章按钮，跳转合同能力--电子签章-电子签章申请页
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 hasAbility = hasAbilityFunc('contract');
const url = isConsumer ? '/memberCenter/contract/manage/QueryList' : '/memberCenter/contract/coordination/coordinationList'
useEffect(() => {
if (!inViewPort) {
......@@ -37,10 +43,20 @@ const Constract: React.FC<Iprops> = (props: Iprops) => {
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="合同中心"
tips="提供在电子签章申请，合同管理、电子合同签订、合同请款、合同协同等功能"
loading={loading}
extra={
<Authorize
url={url}
>
<div>
<Link to={url}>进入合同中心</Link>
</div>
</Authorize>
}
>
<Fragment>
{
......
src/pages/home/components/Centers/FundCenter.tsx
View file @ 574d33a0
......@@ -11,18 +11,23 @@ import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import Layout, { IDataListProps } from './layout';
import { GetReportMemberHomeGetAccountTallyResponse } from '@/services/ReportApi';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const KEY_TO_TITLE = {
creditList: '授信处理',
accountList: '资金账户管理'
}
// 资金账户管理中心：根据当前用户+当前角色是否有此支付能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 1、资金账户：判断当前用户是否有账户管理权限，有则显示资金账户按钮与图标，点击跳转能力中心-支付能力-资金账户-账户管理
// 2、授信账户：判断当前用户是否有授信额度管理权限，有则显示授信账户按钮与图标，点击跳转能力中心-支付能力-授信申请-授信额度管理
// 3、资金账户管理：判断当前用户是否有资金账户管理权限，有则显示资金账户管理按钮与图标，点击跳转能力中心-支付能力-资金账户管理-会员账户管理
// 4、授信管理：判断当前用户是否有授信额度管理权限，有则显示授信管理按钮与图标，点击跳转能力中心-支付能力-授信处理-授信额度管理
const FundCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetAccountTally, {})
const userAuth = getAuth();
const urls = (userAuth as any)?.urls || [];
const { hasAbilityFunc, userAuth } = useGetAuth();
const hasAbility = hasAbilityFunc('payandSettle');
// 在tagList 做修改过滤
const tagsList = useMemo(() => {
const list = [
......@@ -34,24 +39,25 @@ const FundCenter: React.FC<Iprops> = () => {
{
icon: settlement_integrate,
title: '授信账户',
url: '/memberCenter/payandSettle/creditManage/quotaMenage'
url: '/memberCenter/payandSettle/creditApplication/quotaMenage'
},
{
icon: settlement_accountReceive,
title: '资金账户管理',
url: '/memberCenter/payandSettle/capitalAccounts/accountLists'
url: '/memberCenter/payandSettle/amountAccountManage/memberAccountManage'
},
{
icon: settlement_accountPayable,
title: '授信管理',
url: '/memberCenter/payandSettle/creditManage/quotaMenage'
},
].filter((_item) => urls.includes(_item.url))
].filter((_item) => userAuth.urls?.includes(_item.url))
return list
}, [userAuth])
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="资金账户管理"
tips="提供资金账户管理、授信额度管理等功能。"
......
src/pages/home/components/Centers/LogisticsCenter.tsx
View file @ 574d33a0
import React, { useCallback } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Skeleton, Badge } from 'antd';
import { Link } from 'umi';
import AbilityContainer from './Container';
import styles from './center.less'
import logistics from '@/assets/imgs/logistics.png';
import logistics_form from '@/assets/imgs/logistics_form.png';
......@@ -13,46 +12,76 @@ import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import Layout from './layout';
import { GetReportMemberHomeGetLogisticsTallyResponse } from '@/services/ReportApi/id3280';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const url = '/memberCenter/logisticsAbility/logisticsResult/orderResultSearchList';
const CREATE_INFO_MANAGE = "/memberCenter/logisticsAbility/infoManage";
// 物流中心：根据当前用户+当前角色是否有此物流能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 如果当前用户有创建物流公司门户权限，但还未创建物流公司门户，则显示：您还没有创建物流公司门户，请先创建物流公司门户，点击创建物流公司门户按钮，跳转物流能力-物流公司门户管理-创建物流公司门户页
// 1、物流派单：判断当前用户是否有待提交物流单权限，有则显示物流派单按钮与图标，点击跳转物流能力-物流单提交-待提交物流单，角标显示待提交状态的物流单单数
// 2、接单报价：判断当前用户是否有待确认物流单权限，有则显示待确认物流单按钮与图标，点击跳转物流能力-物流单处理-待确认物流单，角标显示待确认状态的物流单单数
// 3、发货地址管理：判断当前用户是否有发货地址管理权限，有则显示发货地址管理按钮与图标，点击跳转物流能力-物流管理-发货地址管理
// 4、收货地址管理：判断当前用户是否有收货地址管理权限，有则显示收货地址管理按钮与图标，点击跳转物流能力-物流管理-收货地址管理
// 5、运费模板管理：判断当前用户是否有运费模板管理权限，有则显示运费模板管理按钮与图标，点击跳转物流能力-物流管理-运费模板管理
const LogisticsCenter: React.FC<Iprops> = (props: Iprops) => {
const { loading, responseData, ref } = useViewRequest<GetReportMemberHomeGetLogisticsTallyResponse, any>(PublicApi.getReportMemberHomeGetLogisticsTally, {})
const userAuth = getAuth();
const urls = userAuth.urls;
const data = [
{
icon: logistics,
text: '物流派单',
url: '/memberCenter/logisticsAbility/logisticsSubmit/toOrderSumitList',
key: 'toBeCommitCount'
},
{
icon: logistics_form,
text: '接单报价',
url: '/memberCenter/logisticsAbility/logisticsResult/toOrderComfirmList',
key: 'toBeConfirmCount'
},
{
icon: logistics_address,
text: '收货地址管理',
url: "/memberCenter/logisticsAbility/logistics/receivingAddress"
},
{
icon: logistics_address,
text: '发货地址管理',
url: "/memberCenter/logisticsAbility/logistics/deliveryAddress",
},
{
icon: logistics_cost,
text: '运费模板',
url: "/memberCenter/logisticsAbility/logistics/template"
const { loading, responseData, ref, inViewPort } = useViewRequest<GetReportMemberHomeGetLogisticsTallyResponse, any>(PublicApi.getReportMemberHomeGetLogisticsTally, {})
const { hasAbilityFunc, userAuth } = useGetAuth();
const hasAbility = hasAbilityFunc('logisticsAbility');
const [isShow, setIsShow] = useState(false);
useEffect(() => {
const hasCreateInfoManageAuth = userAuth.urls?.includes(CREATE_INFO_MANAGE)
if (!inViewPort || !hasCreateInfoManageAuth) {
return;
}
async function getManagerData() {
const { data, code } = await PublicApi.getTemplateWebMemberLogisticsWebFindCurrMemberLogistics({memberId: userAuth.memberId, roleId: userAuth.memberRoleId } as any)
if (code === 1000) {
setIsShow(data === null)
}
}
]
getManagerData();
}, [inViewPort, userAuth])
const tagsList = useMemo(() => {
const list = [
{
icon: logistics,
title: '物流派单',
url: '/memberCenter/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill',
count: responseData?.["toBeCommitCount"]
},
{
icon: logistics_form,
title: '接单报价',
url: '/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill',
count: responseData?.["toBeConfirmCount"]
},
{
icon: logistics_address,
title: '收货地址管理',
url: "/memberCenter/logisticsAbility/logisticsAdminister/receivingAddress"
},
{
icon: logistics_address,
title: '发货地址管理',
url: "/memberCenter/logisticsAbility/logisticsAdminister/shipmentsAddress",
},
{
icon: logistics_cost,
title: '运费模板',
url: "/memberCenter/logisticsAbility/logisticsAdminister/freightTemplate"
}
].filter((_item) => userAuth.urls?.includes(_item.url))
return list
}, [userAuth, responseData])
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="物流中心"
tips={"快速完成物流派单、接单、报价、物流信息对接"}
......@@ -67,25 +96,17 @@ const LogisticsCenter: React.FC<Iprops> = (props: Iprops) => {
}
loading={loading}
>
<div className={styles.centerRow}>
{
data.map((item) => {
// const hasAuth = !urls.includes(item.url);
// if(!hasAuth) {
// return null
// }
return (
<Link key={item.text} to={item.url} className={styles.tagsItem}>
<div className={styles.icon}>
<img src={item.icon} />
</div>
<div className={styles.text}>{item.text}</div>
<Badge count={item.key && responseData?.[item.key] || 0} className={styles.badge}></Badge>
</Link>
)
})
}
</div>
{
isShow && (
<Layout.AlertTip
content="您还没有创建物流公司门户，请先创建物流公司门户"
url={CREATE_INFO_MANAGE}
/>
)
}
<Layout.Tag tagList={tagsList} />
</Layout>
)
}
......
src/pages/home/components/Centers/MemberCenter.tsx
View file @ 574d33a0
......@@ -8,10 +8,11 @@ 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 {};
const { StaticsDataList } = Layout
const url = '/memberCenter/handling/assign/query';
const url = 'memberCenter/memberAbility';
const KEY_TITLE = {
importList: '会员入库',
......@@ -20,12 +21,17 @@ const KEY_TITLE = {
rectifyList: '会员整改',
rectifyNoticeList: '整改通知'
}
// 修改会员信息：判断当前用户是否有会员导入权限，有则显示修改会员信息按钮，点击跳转会员能力--会员管理--新增会员页
// 进入会员中心：判断当前用户是否有会员管理权限，有则显示进入会员中心按钮，点击跳转会员能力--会员管理
const MemberCenter: React.FC<Iprops> = () => {
const { loading, responseData, filterEmptyList, isError, ref, isEmpty } = useViewRequest<GetReportMemberHomeGetMemberTallyResponse, any>(PublicApi.getReportMemberHomeGetMemberTally, {})
const { hasAbilityFunc } = useGetAuth();
const hasAbility = hasAbilityFunc('memberAbility');
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="会员中心"
tips=""
......
src/pages/home/components/Centers/OrderCenter.tsx
View file @ 574d33a0
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 Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetOrderTallyResponse, GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2Api';
import { BellOutlined } from '@ant-design/icons';
import {Button} from 'antd';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const { StaticsDataList } = Layout
const url = '/memberCenter/handling/assign/query';
const purchaseOrderUrl = '/memberCenter/tranactionAbility/purchaseOrder/orderList';
const saleOrderUrl = '/memberCenter/tranactionAbility/saleOrder/orderList'
const KEY_TITLE = {
saleOrderList: '销售订单',
purchaseOrderList: '采购订单',
}
const PurchaseCenter: React.FC<Iprops> = () => {
const { loading, responseData, filterEmptyList, isError, ref } = useViewRequest<GetReportMemberHomeGetOrderTallyResponse, any>(PublicApi.getReportMemberHomeGetOrderTally, {})
// 订单中心：根据当前用户+当前角色是否有订单能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 进入订单中心：当前会员角色类型为服务消费则点击进入订单能力-采购订单--订单查询页，如果当前会员角色类型为服务提供则点击进入订单能力-销售订单--订单查询页
const OrderCenter: React.FC<Iprops> = () => {
const { loading, responseData, filterEmptyList, isError, ref, isEmpty } = useViewRequest<GetReportMemberHomeGetOrderTallyResponse, any>(PublicApi.getReportMemberHomeGetOrderTally, {})
const { hasAbilityFunc, isConsumer } = useGetAuth();
const hasAbility = hasAbilityFunc('orderAbility');
const orderCenterUrl = isConsumer ? purchaseOrderUrl : saleOrderUrl;
return (
<Layout
viewRef={ref}
hasAuth={hasAbility}
title="订单中心"
tips="提供订单管理、签订电子合同等功能"
extra={
<Authorize
url={url}
url={orderCenterUrl}
>
<div>
<Link to={url}>进入订单中心</Link>
<Link to={orderCenterUrl}>进入订单中心</Link>
</div>
</Authorize>
}
......@@ -43,4 +49,4 @@ const PurchaseCenter: React.FC<Iprops> = () => {
)
}
export default PurchaseCenter
export default OrderCenter
src/pages/home/components/Centers/ProcessCenter.tsx
View file @ 574d33a0
import React from 'react';
import React, { useEffect, useState } from 'react';
import styles from './center.less';
import { PublicApi } from '@/services/api'
import { Link } from 'umi'
......@@ -6,19 +6,43 @@ import Layout from './layout';
import Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetEnhanceTallyResponse } from '@/services/ReportApi';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const url = '/memberCenter/handling/assign/query'
const CREATE_INFO_MANAGE = "/memberCenter/handling/infoManage";
const KEY_TITLE = {
supplierList: '指派生产通知单',
processList: '生产通知单处理'
}
// 加工中心：根据当前用户+当前角色是否有此加工能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 如果当前用户有创建加工企业门户权限，但还未创建加工企业门户，则显示：您还没有创建加工企业门户，请先创建加工企业门户，点击创建加工企业门户按钮，跳转加工能力-加工企业门户管理-创建加工企业门户页
const ProcessCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError,filterEmptyList, ref } = useViewRequest<GetReportMemberHomeGetEnhanceTallyResponse, any>(PublicApi.getReportMemberHomeGetEnhanceTally, {})
const { loading, responseData, isError,filterEmptyList, ref, inViewPort } = useViewRequest<GetReportMemberHomeGetEnhanceTallyResponse, any>(PublicApi.getReportMemberHomeGetEnhanceTally, {})
const { hasAbilityFunc, userAuth } = useGetAuth();
const hasAbility = hasAbilityFunc('handling');
const [isShow, setIsShow] = useState(false);
useEffect(() => {
const hasCreateInfoManageAuth = userAuth.urls?.includes(CREATE_INFO_MANAGE)
if (!inViewPort || !hasCreateInfoManageAuth) {
return;
}
async function getManagerData() {
const { data, code } = await PublicApi.getTemplateWebMemberProcessWebFindCurrMemberProcess()
if (code === 1000) {
setIsShow(data === null)
}
}
getManagerData();
}, [inViewPort, userAuth])
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="加工中心"
tips="提供外发生产、加工、装配全流程环节管控"
......@@ -34,6 +58,14 @@ const ProcessCenter: React.FC<Iprops> = () => {
loading={loading}
isError={isError}
>
{
isShow && (
<Layout.AlertTip
content="您还没有创建加工企业门户，请先创建加工企业门户。"
url={CREATE_INFO_MANAGE}
/>
)
}
<Layout.StaticsDataList dataSource={filterEmptyList} title={KEY_TITLE}></Layout.StaticsDataList>
</Layout>
)
......
src/pages/home/components/Centers/ProductCenter.tsx
View file @ 574d33a0
......@@ -7,32 +7,41 @@ import Authorize from '../Authorize';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetCommodityTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const ADD_REPOSITORIES = '/memberCenter/commodityAbility/repositories/add';
const ADD_BRAND = "/memberCenter/commodityAbility/trademark/add";
const ADD_PRODUCT = '/memberCenter/commodityAbility/commodity/products/add';
const ADD_REPOSITORIES = '/memberCenter/commodityAbility/repositories/add';
// 商品中心：根据当前用户+当前角色是否有此商品能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 1、创建品牌：判断当前用户是否有品牌申请权限，有则显示创建品牌按钮，点击跳转能力中心-商品能力-品牌管理-新增品牌
// 2、创建商品：判断当前用户是否有商品发布权限，有则显示创建商品按钮，点击跳转能力中心-商品能力-商品管理-新增商品
// 3、设置库存：判断当前用户是否有仓位库存管理权限，有则显示设置库存按钮，点击跳转能力中心-商品能力-仓位管理--新增仓位库存
const ProductCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {})
const { userAuth, hasAbilityFunc } = useGetAuth();
const hasAbility = hasAbilityFunc('commodityAbility');
const extraList = useMemo(() => [
{
title: '设置库存',
authUrl: ADD_REPOSITORIES
},
{
title: '创建品牌',
authUrl: ADD_BRAND
authUrl: ADD_BRAND,
},
{
title: '创建商品',
authUrl: ADD_PRODUCT
}
},
{
title: '设置库存',
authUrl: ADD_REPOSITORIES
},
], [])
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="商品中心"
tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
......
src/pages/home/components/Centers/PurchaseCenter.tsx
View file @ 574d33a0
......@@ -9,6 +9,7 @@ import { GetReportMemberHomeGetPurchaseTallyResponse } from '@/services/ReportV2
import { BellOutlined } from '@ant-design/icons';
import {Button} from 'antd';
import { getAuth } from '@/utils/auth';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const { StaticsDataList } = Layout
......@@ -28,13 +29,16 @@ const KEY_TITLE = {
}
/** memberType 是否是企业会员或是企业个人会员 */
const isBusiness = [1, 2];
/** memberRoleType 是否是服务消费者 */
const isConsumer = 2;
// 采购中心：根据当前用户+当前角色是否有采购能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 进入采购中心：当前会员角色类型为服务消费则点击进入采购能力-采购询价--采购需求单查询页，如果当前会员角色类型为服务提供则点击进入采购能力--报价--报价单查询页
// 如果当前用户有创建采购门户权限，但还未创建采购门户，则显示：您还没有创建采购门户，请先创建采购门户，点击创建采购门户按钮，跳转采购能力-采购门户管理-创建采购门户页
const PurchaseCenter: React.FC<Iprops> = () => {
const { loading, responseData, filterEmptyList, isError, ref, inViewPort, refresh } = useViewRequest<GetReportMemberHomeGetPurchaseTallyResponse, any>(PublicApi.getReportMemberHomeGetPurchaseTally, {})
const auth = getAuth();
const { loading, filterEmptyList, isError, ref, inViewPort, refresh } = useViewRequest<GetReportMemberHomeGetPurchaseTallyResponse, any>(PublicApi.getReportMemberHomeGetPurchaseTally, {})
const { userAuth, hasAbilityFunc, isConsumer } = useGetAuth();
const hasAbility = hasAbilityFunc('procurementAbility');
/** 是否有权限 */
const hasPurchaseAuth = (isBusiness.includes(auth.memberType)) && isConsumer === auth.memberRoleType;
const hasPurchaseAuth = (isBusiness.includes(userAuth.memberType)) && isConsumer
/** 是否有采购门户 */
const [hasPurchase, setHasPurchase] = useState<boolean>(hasPurchaseAuth);
......@@ -51,11 +55,12 @@ const PurchaseCenter: React.FC<Iprops> = () => {
findCurrMemberPurchase()
}, [inViewPort, hasPurchaseAuth])
const purchaseCenterUrl = useMemo(() => isConsumer === auth.memberRoleType ? consumerUrl : providerUrl ,[auth])
const purchaseCenterUrl = useMemo(() => isConsumer ? consumerUrl : providerUrl ,[userAuth])
return (
<Layout
viewRef={ref}
hasAuth={hasAbility}
title="采购中心"
tips="提供在线采购询价、在线报价、在线招投标、在线竞价、制订采购计划、创建采购门户等功能"
extra={
......
src/pages/home/components/Centers/SettlementCenter.tsx
View file @ 574d33a0
import React from 'react';
import styles from './center.less'
import React, { useMemo } from 'react';
import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
import settlement_accountReceive from '@/assets/imgs/settlement_accountReceive.png';
import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.png';
import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
import { PublicApi } from '@/services/api'
import { Link } from 'umi'
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetSettleAccountTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
import useGetAuth from '../../hooks/uesGetAuth';
interface Iprops {};
const KEY_TITLE = {
......@@ -19,40 +17,52 @@ const KEY_TITLE = {
platformScoreList: '平台积分结算',
receivableList: '应收账款结算'
}
// 结算中心：根据当前用户+当前角色是否有此结算能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 1、平台代收款结算：判断当前用户是否有平台代收账款结算权限，有则显示平台代收款结算按钮与图标，点击跳转支付能力-平台结算管理-平台代收账款结算
// 2、平台积分结算：判断当前用户是否有平台积分结算权限，有则显示平台积分结算按钮与图标，点击跳转支付能力-平台结算管理--平台积分结算
// 3、应收账款结算：判断当前用户是否有应收账款结算权限，有则显示应收账款结算按钮与图标，点击跳转支付能力-应收账款管理-应收账款结算
// 4、应付账款结算：判断当前用户是否有应付账款结算权限，有则显示应付账款结算按钮与图标，点击跳转支付能力-应付账款管理-应付账款结算
// 5、开票管理：判断当前用户是否有开票管理权限，有则显示开票管理按钮与图标，点击跳转支付能力-应收账款管理-开票管理
const SettlementCenter: React.FC<Iprops> = () => {
const { loading, responseData, filterEmptyList, isError, ref } = useViewRequest<GetReportMemberHomeGetSettleAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetSettleAccountTally, {})
const { hasAbilityFunc, userAuth } = useGetAuth();
const hasAbility = hasAbilityFunc('balance');
const tagsList = useMemo(() => {
return [
{
icon: settlement_platformCollection,
title: '平台代收款结算',
url: '/memberCenter/balance/platformSettlement/accountReceivable'
},
{
icon: settlement_integrate,
title: '平台积分结算',
url: '/memberCenter/balance/platformSettlement/integral'
},
{
icon: settlement_accountReceive,
title: '应收账款结算',
url: '/memberCenter/balance/accountsReceivable/settlementList'
},
{
icon: settlement_accountPayable,
title: '应付账款结算',
url: '/memberCenter/balance/accountsPayable/settlementList'
},
{
icon: settlement_invoice,
title: '开票管理',
url: '/memberCenter/balance/accountsReceivable/invoice'
}
].filter((_item) => userAuth.urls?.includes(_item.url))
}, [userAuth])
const userAuth = getAuth();
const urls = userAuth?.urls;
const tagsList = [
{
icon: settlement_platformCollection,
title: '平台代收款结算',
url: '/memberCenter/balance/platformSettlement/accountReceivable'
},
{
icon: settlement_integrate,
title: '平台积分结算',
url: '/memberCenter/balance/platformSettlement/integral'
},
{
icon: settlement_accountReceive,
title: '应收账款结算',
url: '/memberCenter/balance/accountsReceivable/settlementList'
},
{
icon: settlement_accountPayable,
title: '应付账款结算',
url: '/memberCenter/balance/accountsPayable/settlementList'
},
{
icon: settlement_invoice,
title: '开票管理',
url: '/memberCenter/balance/accountsReceivable/invoice'
}
]
return (
<Layout
hasAuth={hasAbility}
viewRef={ref}
title="结算中心"
tips="提供资资金结算、发票管理等功能"
......
src/pages/home/components/Centers/ShopCenter.tsx
View file @ 574d33a0
import React, { Fragment, useMemo } from 'react';
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
import { BellOutlined, RightOutlined } from '@ant-design/icons'
......@@ -12,33 +12,62 @@ import { GetTemplateWebMemberShopWebFindCurrMemberShopResponse } from '@/service
import Layout from './layout';
interface Iprops {}
const SHOP_ABILITY = '/memberCenter/shopAbility';
const SHOP_CENTER = '/memberCenter/shopAbility/template'
const CREATE_SHOP = '/memberCenter/shopAbility/infoManage';
// 店铺中心：根据当前用户+当前角色是否有店铺能力此菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 1、创建店铺：判断当前用户是否有创建店铺权限，有则显示创建店铺按钮与图标，点击跳转能力中心-店铺能力-店铺管理-创建店铺页
// 2、店铺模板：判断当前用户是否有店铺模板权限，有则显示店铺模板按钮与图标，点击跳转能力中心-店铺能力-店铺管理--店铺模板管理
// 3、店铺装修：判断当前用户是否有店铺模板权限，有则显示店铺装修按钮与图标，点击跳转能力中心-店铺能力-店铺管理--店铺模板管理
// 4、进入店铺中心：判断当前用户是否有店铺模板权限，有则显示进入店铺中心按钮，点击跳转能力中心-店铺能力-店铺管理--店铺模板管理
// 5、如果当前用户有创建店铺权限，但还未创建店铺，则显示：您还没有创建店铺，请先创建店铺，点击创建店铺，跳转能力中心-店铺能力-店铺管理-创建店铺页
const ShopCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, ref } = useViewRequest<GetTemplateWebMemberShopWebFindCurrMemberShopResponse, any>(PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop, {})
const userAuth = getAuth();
const hasShopAbility = userAuth.urls?.some((_item) => _item.includes(SHOP_ABILITY));
const tagList = useMemo(() => [
{
icon: create_shop,
url: SHOP_CENTER,
title: "创建店铺"
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺模板"
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺装修"
const tagList = useMemo(() => {
const hasShopCenterAuth = userAuth.urls?.includes(SHOP_CENTER)
return [
{
icon: create_shop,
url: CREATE_SHOP,
title: "创建店铺",
hasAuth: userAuth.urls?.includes(CREATE_SHOP)
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺模板",
hasAuth: hasShopCenterAuth,
},
{
icon: create_shop,
url: SHOP_CENTER,
title: "店铺装修",
hasAuth: hasShopCenterAuth,
}
]
}, [userAuth])
const renderCreateBtn = () => {
if (!userAuth.urls?.includes(CREATE_SHOP) || responseData?.id) {
return null
}
], [])
return (
<Layout.AlertTip
content="轻松完成店铺的创建、店铺风格选择、店铺个性化装修。"
url={CREATE_SHOP}
/>
)
}
return (
<Layout
viewRef={ref}
hasAuth={hasShopAbility}
title="店铺中心"
tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
extra={
......@@ -51,14 +80,7 @@ const ShopCenter: React.FC<Iprops> = () => {
loading={loading}
>
<Fragment>
{
responseData && responseData.id && (
<Layout.AlertTip
content="轻松完成店铺的创建、店铺风格选择、店铺个性化装修。"
url=""
/>
)
}
{renderCreateBtn()}
<Layout.Tag tagList={tagList}></Layout.Tag>
</Fragment>
......
src/pages/home/components/Centers/TradeCenter.tsx
View file @ 574d33a0
import React, {useCallback} from 'react';
import styles from './center.less'
import { PublicApi } from '@/services/api';
import { Link } from 'umi'
import Authorize from '../Authorize';
import { getAuth } from '@/utils/auth';
import useViewRequest from '../../hooks/useViewRequest';
import { GetReportMemberHomeGetTradeTallyResponse } from '@/services/ReportApi';
import Layout from './layout';
import useGetAuth from '../../hooks/uesGetAuth';
import { GetReportMemberHomeGetTradeTallyResponse } from '@/services/ReportV2Api';
interface Iprops {};
......@@ -21,26 +20,29 @@ const KEY_TITLE = {
'purchaseOrderList': '采购订单'
}
const PURCHASE_URL = '/memberCenter/tranactionAbility/purchaseOrder/orderList';
const SALE_URL = '/memberCenter/tranactionAbility/saleOrder/orderList';
const productInquiry = '/memberCenter/tranactionAbility/productInquiry/inquirySearch';
const inquiryOffer = '/memberCenter/tranactionAbility/inquiryOffer/inquirySearch';
// 交易中心：根据当前用户+当前角色是否有交易能力菜单权限确定是否显示，再根据自定义布局确定显示及显示顺序
// 进入交易中心：当前会员角色类型为服务消费则点击进入交易能力-商品询价--询价单查询页，如果当前会员角色类型为服务提供则点击进入交易能力-询价报价--报价单查询页
const TradeCenter: React.FC<Iprops> = () => {
const { loading, responseData, isError, filterEmptyList, ref } = useViewRequest<GetReportMemberHomeGetTradeTallyResponse, any>(PublicApi.getReportMemberHomeGetTradeTally, {})
const auth = getAuth();
const roleType = auth.memberRoleType;
const { loading,filterEmptyList, ref, isEmpty } = useViewRequest<GetReportMemberHomeGetTradeTallyResponse, any>(PublicApi.getReportMemberHomeGetTradeTally, {})
const { userAuth, hasAbilityFunc, isConsumer } = useGetAuth();
const hasAbility = hasAbilityFunc('tranactionAbility');
const url = isConsumer ? productInquiry : inquiryOffer;
return (
<Layout
viewRef={ref}
hasAuth={hasAbility}
title="交易中心"
tips="提供在线发布需求，在线询价、在线报价、订单交易、签订电子合同等功能"
extra={
<Authorize
url={roleType == 1 ? SALE_URL : PURCHASE_URL}
url={url}
>
<div>
<Link to={roleType == 1 ? SALE_URL : PURCHASE_URL}>进入交易中心</Link>
<Link to={url}>进入交易中心</Link>
</div>
</Authorize>
}
......
src/pages/home/components/Centers/center.less
View file @ 574d33a0
......@@ -23,6 +23,9 @@
margin-right: 16px;
}
.wrapTagsItem {
margin: @margin-md @margin-md 0px 0;
}
.tagsItem {
min-width: 265px;
display: flex;
......@@ -31,9 +34,6 @@
padding: 8px 12px;
background: #FAFBFC;
align-self: flex-start;
margin: @margin-md @margin-md 0px 0;
.icon {
width: 32px;
......
src/pages/home/components/Centers/layout.tsx
View file @ 574d33a0
import React, { ReactNode, useEffect, useState } from 'react';
import { Button } from 'antd';
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import { Button, Badge } from 'antd';
import styles from './Container.less';
import { Skeleton } from 'antd';
import { Link } from 'umi';
......@@ -20,6 +20,8 @@ interface Iprops {
* 是否没数据
*/
isEmpty?: boolean,
/** 是否有权限 */
hasAuth?: boolean,
/**
* 标题
*/
......@@ -51,7 +53,7 @@ interface Iprops {
};
const Layout: LayoutType & React.FC<Iprops> = (props) => {
const { title, tips, extra, children, loading, isError, customizeErrorRender, viewRef, onRefresh, isEmpty = false } = props;
const { title, tips, extra, children, loading, isError, customizeErrorRender, viewRef, onRefresh, isEmpty = false, hasAuth = true } = props;
const handleRefresh = () => {
onRefresh?.({})
......@@ -74,15 +76,13 @@ const Layout: LayoutType & React.FC<Iprops> = (props) => {
return children;
}
const containerCs = cx(styles.container, {
// [styles.empty]: isEmpty
})
const containerCs = cx(styles.container)
return (
<div ref={viewRef}>
<div>
{
!isEmpty && (
<div className={containerCs} >
hasAuth && (
<div className={containerCs} ref={viewRef}>
<div className={styles.header}>
<div className={styles.left}>
<div className={styles.title}>{title}</div>
......@@ -153,29 +153,42 @@ interface TagProps {
icon: any,
url: string,
title: string,
hasAuth?: boolean,
count?: number
}[]
}
const Tags = (props: TagProps) => {
const { tagList } = props;
const list = useMemo(() => {
return tagList.filter((_item) => {
if (typeof _item.hasAuth === 'undefined' || _item.hasAuth) {
return true
}
return false
})
}, [tagList])
return (
<div className={layoutStyles.centerRow}>
{
tagList.map((_item) => {
list.map((_item) => {
return (
<Authorize url={_item.url} canView={true} key={_item.title}>
<Link to={_item.url} className={layoutStyles.tagsItem}>
<div className={layoutStyles.hoverLink}>
<img src={_item.icon} className={layoutStyles.icon}/>
<div className={layoutStyles.text}>{_item.title}</div>
<div className={layoutStyles.hoverIconConatiner}>
<div className={layoutStyles.hoverIcon}>
<RightOutlined style={{ color: '#fff', fontSize: '8px'}} />
<div className={layoutStyles.wrapTagsItem} key={`${_item.title}-${_item.url}`}>
<Badge count={_item.count || 0}>
<Link to={_item.url} className={layoutStyles.tagsItem} >
<div className={layoutStyles.hoverLink}>
<img src={_item.icon} className={layoutStyles.icon}/>
<div className={layoutStyles.text}>{_item.title}</div>
<div className={layoutStyles.hoverIconConatiner}>
<div className={layoutStyles.hoverIcon}>
<RightOutlined style={{ color: '#fff', fontSize: '8px'}} />
</div>
</div>
</div>
</div>
</Link>
</Authorize>
</Link>
</Badge>
</div>
)
})
}
......
src/pages/home/components/CustomWorkBench/Card.tsx
View file @ 574d33a0
......@@ -10,7 +10,7 @@ const style = {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
justifyContent: 'space-between',
border: '1px solid #EEF0F3',
padding: '14px 16px',
marginBottom: '12px',
......@@ -84,7 +84,7 @@ export const Card: React.FC<CardProps> = ({ id, text, index, moveCard, isShow, h
const opacity = isDragging ? 0 : 1
drag(drop(ref))
return (
<div ref={ref} style={{ ...style, opacity }}>
<div ref={ref} style={{ ...style, opacity } as any}>
<span>
{text}
</span>
......
src/pages/home/components/CustomWorkBench/DragSortList.tsx
View file @ 574d33a0
import React, { useState, useCallback, useEffect } from 'react'
import React, { useState, useCallback, useEffect, useMemo } from 'react'
import { Card } from './Card'
const style = {
height: "500px",
display: "flex",
flexDirection: "column",
flexWrap: "wrap",
}
export interface Item {
id: number
text: string
......@@ -39,10 +32,16 @@ const Container: React.FC<Iprops> = (props) => {
/>
)
}
const containerStyle = useMemo(() => ({
height: "500px",
display: "flex",
flexDirection: "column",
flexWrap: "wrap",
}), [])
return (
<>
<div style={style}> {cards.map((card, i) => renderCard(card, i))}</div>
<div style={containerStyle as any}> {cards.map((card, i) => renderCard(card, i))}</div>
</>
)
}
......
src/pages/home/components/CustomWorkBench/index.tsx
View file @ 574d33a0
......@@ -7,16 +7,24 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
import DragSortList from './DragSortList';
import update from 'immutability-helper';
import home_workBench from '@/assets/imgs/home_workBench.png';
import { useToggle } from '@umijs/hooks';
export type LayoutType = {
code: number,
name: string,
sort: number,
isShow: 1 | 2 | number & {}
}
interface Iprops {
handleChangeOrder: (list: any[]) => void,
layouts: any[],
layouts: LayoutType[],
handleChangeOrder: (list: LayoutType[]) => void,
}
const CustomWorkBench: React.FC<Iprops> = (props) => {
const { layouts } = props;
const [ cards, setCards ] = useState([]);
const [visible, setVisible] = useState<boolean>(false);
const { layouts, handleChangeOrder } = props;
const [ cards, setCards ] = useState([]);
const { state: visible, toggle: setVisible } = useToggle(false);
const handleVisible = () => {
setVisible(true)
}
......@@ -27,9 +35,10 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
useEffect(() => {
if(visible) {
setCards(layouts);
return;
}
}, [visible]);
setCards(layouts);
}, [visible, layouts]);
const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {
const dragCard = cards[dragIndex]
......@@ -58,7 +67,7 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
sort: key + 1
}
})
props.handleChangeOrder && props.handleChangeOrder(sortedData);
handleChangeOrder?.(sortedData);
setVisible(false);
}
......@@ -105,4 +114,4 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
)
}
export default CustomWorkBench
\ No newline at end of file
export default CustomWorkBench
src/pages/home/hooks/uesGetAuth.tsx 0 → 100644
View file @ 574d33a0
import { getAuth } from "@/utils/auth"
import { useCallback, useMemo } from "react";
type AbilityNameType = "orderAbility"
| 'shopAbility'
| 'tranactionAbility'
| "procurementAbility"
| "contract"
| "commodityAbility"
| "channelAbility"
| "payandSettle"
| "balance"
| "afterService"
| "logisticsAbility"
| "handling"
| "memberAbility"
const useGetAuth = () => {
const userAuth = getAuth();
const cacheAuth = useMemo(() => userAuth, [userAuth]);
const hasAbility = useCallback((abilityName: AbilityNameType) => {
const abilityUrls = {
"orderAbility": [
'/memberCenter/tranactionAbility/purchaseOrder',
'/memberCenter/tranactionAbility/saleOrder',
],
"shopAbility": '/memberCenter/shopAbility',
"tranactionAbility": [
'/memberCenter/tranactionAbility/productInquiry',
"/memberCenter/tranactionAbility/inquiryOffer",
"/memberCenter/tranactionAbility/confirmOffer",
],
// 采购中心
"procurementAbility": "/memberCenter/procurementAbility",
// 合同中心
"contract": "/memberCenter/contract",
// 商品能力
"commodityAbility": "/memberCenter/commodityAbility",
// 渠道商城能力
"channelAbility": "/memberCenter/channelAbility",
// 资金账户管理中心
"payandSettle": '/memberCenter/payandSettle',
// 结算
"balance": "/memberCenter/balance",
// 售后
"afterService": "/memberCenter/afterService",
// 物流中心
"logisticsAbility": "/memberCenter/logisticsAbility",
// 加工
"handling": '/memberCenter/handling',
// 会员
"memberAbility": "/memberCenter/memberAbility",
}
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])
const isConsumer = useMemo(() => cacheAuth.memberRoleType === 2, [cacheAuth])
const getLayoutCenters = useCallback(() => {
const name2link = {
'/memberCenter/tranactionAbility': "订单中心",
'/memberCenter/shopAbility': "店铺中心",
// '/memberCenter/tranactionAbility': "交易中心",
'/memberCenter/tranactionAbility/productInquiry': '交易中心',
"/memberCenter/tranactionAbility/inquiryOffer": '交易中心',
"/memberCenter/tranactionAbility/confirmOffer": "交易中心",
"/memberCenter/procurementAbility": "采购中心",
"/memberCenter/contract": "合同中心",
"/memberCenter/commodityAbility": "商品中心",
"/memberCenter/channelAbility": "渠道商城中心",
'/memberCenter/payandSettle': "资金账户管理中心",
"/memberCenter/balance": "结算中心",
"/memberCenter/afterService": "售后中心",
"/memberCenter/logisticsAbility": "物流中心",
'/memberCenter/handling': "加工中心",
"/memberCenter/memberAbility": "会员中心",
}
const allAuthCenterUrls = Object.keys(name2link);
const authCenterName = allAuthCenterUrls.reduce((result, _row) => {
const name = name2link[_row];
if (cacheAuth.urls?.includes(_row)) {
result = result.concat(name);
}
return result
}, [])
const uniqueName = Array.from(new Set(authCenterName))
return uniqueName
}, [cacheAuth])
return {
userAuth: cacheAuth,
hasAbilityFunc: hasAbility,
isConsumer,
getLayoutCentersName: getLayoutCenters
} as const
}
export default useGetAuth;
src/pages/home/hooks/useViewRequest.tsx
View file @ 574d33a0
......@@ -66,14 +66,13 @@ function useViewRequest<T, P>(fn: (postData: P) => Promise<ResponseDataType & {
result[_row] = responseData[_row];
}
})
console.log("result", result);
return result;
}, [responseData])
const isEmpty = useMemo(() => {
return filterEmptyList && Object.keys(filterEmptyList).length === 0;
}, [filterEmptyList])
return { loading, isError, ref, hasRequest, refresh, responseData, filterEmptyList, inViewPort, isEmpty }
return { loading, isError, ref, hasRequest, refresh, responseData, filterEmptyList, inViewPort, isEmpty } as const
}
export default useViewRequest
src/pages/home/index.tsx
View file @ 574d33a0
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useCallback } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Row, Col, Button, message } from 'antd';
import { Row, Col, Button, message, Card } from 'antd';
import UseGuaid from './components/UseGuaid';
import UserCenter from './components/UserCenter';
import CustomWorkBench from './components/CustomWorkBench';
import CustomWorkBench, { LayoutType } from './components/CustomWorkBench';
import LatestAnnounce from './components/LatestAnnounces';
import RecentVisit from './components/RecentVisit';
import AnyQuestion from './components/AnyQuestion';
......@@ -12,7 +12,8 @@ import { TradeCenter, FundCenter, ShopCenter, ProductCenter, SettlementCenter,
import styles from './index.less'
import { CompassFilled } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import { GetReportMemberHomeGetDataLayoutRequest } from '@/services/ReportApi';
import { GetReportMemberHomeGetDataLayoutResponse } from '@/services/ReportV2Api';
import useGetAuth from './hooks/uesGetAuth';
const ComponentSelect = {
"会员中心": MemberCenter,
......@@ -34,7 +35,10 @@ const ComponentSelect = {
const Home: React.FC<{}> = () => {
const [visible, setVisible] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutRequest>([]);
const [layout, setLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
// 记录所有layout
const [allLayout, setAllLayout] = useState<GetReportMemberHomeGetDataLayoutResponse>([]);
const { getLayoutCentersName, } = useGetAuth()
useEffect(() => {
async function getDataLayout() {
......@@ -42,7 +46,10 @@ const Home: React.FC<{}> = () => {
try {
const { data, code, message } = await PublicApi.getReportMemberHomeGetDataLayout();
if (code === 1000) {
setLayout(data)
const names = getLayoutCentersName()
const centers = data.filter((_item) => names.includes(_item.name))
setLayout(centers)
setAllLayout(data)
}
} finally {
setLoading(false)
......@@ -51,14 +58,46 @@ const Home: React.FC<{}> = () => {
getDataLayout();
}, [])
const handleChangeOrder = (list) => {
PublicApi.postReportMemberHomeUpdateDataLayout(list)
.then(({ code, data }) => {
if(code === 1000) {
setLayout(list);
}
})
}
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 { code } = await PublicApi.postReportMemberHomeUpdateDataLayout(postList)
if(code === 1000) {
setLayout(list);
}
}, [allLayout])
const renderCenters = useCallback(() => {
if (loading) {
return <Card loading={true}></Card>
}
return (
<>
{
(layout).map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{RenderComponent && <RenderComponent />}
</div>
)
})
}
</>
)
}, [loading, layout])
return (
<PageHeaderWrapper title="首页">
......@@ -69,20 +108,7 @@ const Home: React.FC<{}> = () => {
<div className={styles.left}>
<UserCenter />
<div className={styles.otherCenters}>
{
(layout as any[]).map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{RenderComponent && <RenderComponent />}
</div>
)
})
}
{renderCenters()}
</div>
</div>
<div className={styles.right}>
......
src/utils/auth.ts
View file @ 574d33a0
......@@ -16,7 +16,7 @@ export const setAuth = (info: AuthInfo) => {
window.localStorage.setItem('auth', JSON.stringify(info))
}
export const getAuth = (): Partial<GetMemberLoginRegetResponse> | null => {
export const getAuth = (): Partial<GetMemberLoginRegetResponse & { urls: string[] }> | null => {
try {
const localAuth = window.localStorage.getItem('auth')
return localAuth ? JSON.parse(localAuth) : null
......
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