Skip to content

J
jinfa-platform
Commit 5c929b45 authored by Bill's avatar Bill
Browse files
Options

Merge branch 'feat-srmPurchaserHome' into 'v2-220418'

feat: 完成src采购商首页UI See merge request linkseeks-design/pro-platform!411
parents 148b760c 745e5ccc
Show whitespace changes
Inline Side-by-side
Showing with 971 additions and 5 deletions
config/routes/index.ts
View file @ 5c929b45
......@@ -29,10 +29,22 @@ import ProcurementRoute from './procurementRoute';
const isDev = process.env.NODE_ENV === "development";
const homeRoute = {
path: `/memberCenter/home`,
name: 'home',
name: '首页能力',
icon: 'home',
key: 'home',
routes: [
// 首页
{
path: '/memberCenter/home/index',
name: 'home',
component: '@/pages/home',
},
// srm采购商首页
{
path: '/memberCenter/home/srmPurchaser',
name: 'srmPurchaser',
component: '@/pages/srmHome',
},
],
};
// isDev ? [ homeRoute, OrderRoute ] :
const routes = asyncRoutes;
......
src/components/MellowCard/index.less
View file @ 5c929b45
......@@ -20,7 +20,15 @@
}
.ant-card-body {
padding: 14px 24px 24px;
padding: 16px;
}
}
}
&-hasTitle {
:global {
.ant-card-body {
padding: 12px 16px 16px !important;
}
}
}
......
src/components/MellowCard/index.tsx
View file @ 5c929b45
......@@ -22,6 +22,7 @@ const MellowCard: React.FC<MellowCardProps> = props => {
const { children, fullHeight, ...rest } = props;
const cls = classNames(styles['mellow-card'], {
[styles.fullHeight]: fullHeight,
[styles['mellow-card-hasTitle']]: !!rest.title,
});
return (
......
src/layouts/BasicLayout.tsx
View file @ 5c929b45
......@@ -60,7 +60,7 @@ const defaultFooterDom = (
/>
);
const DEFAULT_COLLAPSED_LIST = ["/memberCenter/home", "/memberCenter/noAuth"];
const DEFAULT_COLLAPSED_LIST = ["/memberCenter/noAuth"];
const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
const {
......@@ -76,7 +76,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>([]);
// 获取全局状态
const [globalState, globalDispatch] = useGlobal();
const isHome = location.pathname === '/memberCenter/home'
// const isHome = location.pathname === '/memberCenter/home'
const isHome = false
const handleMenuCollapse = (payload: boolean): void => {
if (DEFAULT_COLLAPSED_LIST.includes(location.pathname)) {
......
src/pages/srmHome/components/IntroduceRow/components/AnalysisCard/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
.analysis-card {
&-content {
display: flex;
align-items: center;
padding: @padding-lg - 2 @padding-md @padding-lg @padding-md;
&-left {
flex: 1;
}
&-right {
flex-shrink: 0;
}
}
&-foot {
padding: @padding-md + 2 @padding-md;
border-top: 1px dashed @border-color-split;
}
}
\ No newline at end of file
src/pages/srmHome/components/IntroduceRow/components/AnalysisCard/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 统计行
*/
import React from 'react';
import { Statistic } from 'antd';
import MellowCard from '@/components/MellowCard';
import AnalysisTag from '../AnalysisTag';
import styles from './index.less';
export interface AnalysisCardProps {
/**
* 标题
*/
title: string,
/**
* 标题
*/
count: number,
/**
* 图标
*/
icon: string,
/**
* 增长值
*/
growthValue: number,
}
const AnalysisCard: React.FC<AnalysisCardProps> = (props) => {
const { title, count, icon, growthValue } = props;
return (
<MellowCard
bodyStyle={{
padding: 0,
}}
>
<div className={styles['analysis-card']}>
<div className={styles['analysis-card-content']}>
<div className={styles['analysis-card-content-left']}>
<Statistic
title={title}
value={count}
/>
</div>
<div className={styles['analysis-card-content-right']}>
<img src={icon} width={48} height={48} />
</div>
</div>
<div className={styles['analysis-card-foot']}>
<AnalysisTag value={growthValue} />
</div>
</div>
</MellowCard>
);
};
export default AnalysisCard;
\ No newline at end of file
src/pages/srmHome/components/IntroduceRow/components/AnalysisTag/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
.analysis {
&-tag {
display: flex;
align-items: center;
&-tofu {
padding: 1px 8px 1px 0;
color: @primary-color;
background-color: #EDFFF3;
border-radius: 4px;
}
&-desc {
margin-left: 10px;
font-size: 12px;
color: @text-color-secondary;
}
}
}
\ No newline at end of file
src/pages/srmHome/components/IntroduceRow/components/AnalysisTag/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 统计增长tag
*/
import React from 'react';
import { CaretUpOutlined } from '@ant-design/icons';
import styles from './index.less';
export interface AnalysisCardProps {
/**
* 值
*/
value: number,
}
const AnalysisCard: React.FC<AnalysisCardProps> = (props) => {
const { value } = props;
return (
<div className={styles['analysis-tag']}>
<div className={styles['analysis-tag-tofu']}>
<CaretUpOutlined style={{ paddingRight: 4, paddingLeft: 4 }} />
{value}
</div>
<div className={styles['analysis-tag-desc']}>
相比昨日
</div>
</div>
);
};
export default AnalysisCard;
\ No newline at end of file
src/pages/srmHome/components/IntroduceRow/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 统计行
*/
import React from 'react';
import { Row, Col } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import MellowCard from '@/components/MellowCard';
import themeConfig from '@/../config/lingxi.theme.config';
import HOME_ICON_1 from '@/assets/imgs/home-icon-23.png'
import HOME_ICON_2 from '@/assets/imgs/home-icon-12.png'
import HOME_ICON_3 from '@/assets/imgs/home-icon-14.png'
import HOME_ICON_4 from '@/assets/imgs/home-icon-22.png'
import AnalysisCard from './components/AnalysisCard';
import styles from './index.less';
const paddingMd = parseInt(themeConfig['@padding-md']);
const TodoCard: React.FC = () => {
return (
<Row gutter={[paddingMd, paddingMd]}>
<Col span={6}>
<AnalysisCard
title="今日新增订单(元)"
count={102086}
icon={HOME_ICON_1}
growthValue={2.5}
/>
</Col>
<Col span={6}>
<AnalysisCard
title="今日新增供应商"
count={102086}
icon={HOME_ICON_2}
growthValue={2.5}
/>
</Col>
<Col span={6}>
<AnalysisCard
title="今日新签合同"
count={102086}
icon={HOME_ICON_3}
growthValue={2.5}
/>
</Col>
<Col span={6}>
<AnalysisCard
title="今日新增采购订单"
count={102086}
icon={HOME_ICON_4}
growthValue={2.5}
/>
</Col>
</Row>
);
};
export default TodoCard;
\ No newline at end of file
src/pages/srmHome/components/MessageList/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
@import '../../../../global/styles/utils.less';
.message {
&-list {
height: 158px;
overflow-y: auto;
}
&-item {
display: flex;
align-items: center;
cursor: pointer;
&:not(:last-child) {
margin-bottom: @margin-md;
}
&-content {
flex: 1;
font-size: @font-size-sm;
color: @text-color;
.textOverflow();
}
&-date {
font-size: @font-size-sm;
color: @text-color;
}
}
&-action {}
}
\ No newline at end of file
src/pages/srmHome/components/MessageList/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 消息提醒
*/
import React from 'react';
import { List, Space, Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
const mockData = [
{
id: 1,
content: '最新交易版块上线，全新体验，更多交易模式，更多好玩等你发现！',
date: '2022-08-29 18:56',
},
{
id: 2,
content: '10.1日凌晨1:00~凌晨2:00平台维护公告',
date: '2022-08-29 18:56',
},
{
id: 3,
content: '第三期集采活动开始啦',
date: '2022-08-29 18:56',
},
{
id: 4,
content: '最新交易版块上线，全新体验，更多交易模式，更多好玩等你发现！最新交易版块上线，全新体验，更多交易模式，更多好玩等你发现！最新交易版块上线，全新体验，更多交易模式，更多好玩等你发现！',
date: '2022-08-29 18:56',
},
{
id: 5,
content: '10.1日凌晨1:00~凌晨2:00平台维护公告',
date: '2022-08-29 18:56',
},
];
const TodoCard: React.FC = () => {
return (
<MellowCard
title="消息提醒"
extra={(
<Space>
<Button
icon={<LeftOutlined />}
/>
<Button
icon={<RightOutlined />}
/>
</Space>
)}
>
<List
className={styles['message-list']}
loading={false}
itemLayout="horizontal"
dataSource={mockData}
renderItem={(item) => (
<div className={styles['message-item']}>
<div className={styles['message-item-content']}>
{item.content}
</div>
<div className={styles['message-item-date']}>
{item.date}
</div>
</div>
)}
bordered={false}
/>
</MellowCard>
);
};
export default TodoCard;
\ No newline at end of file
src/pages/srmHome/components/PurchaseOrderAnalysis/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 采购订单统计
*/
import React from 'react';
import { Space, Button } from 'antd';
import { Chart, Tooltip, Axis, Point, Line, Interval } from 'bizcharts';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
const data = [
{
time: "10:10",
call: 4,
waiting: 2,
people: 2,
},
{
time: "10:15",
call: 2,
waiting: 6,
people: 3,
},
{
time: "10:20",
call: 13,
waiting: 2,
people: 5,
},
{
time: "10:25",
call: 9,
waiting: 9,
people: 1,
},
{
time: "10:30",
call: 5,
waiting: 2,
people: 3,
},
{
time: "10:35",
call: 8,
waiting: 2,
people: 1,
},
{
time: "10:40",
call: 13,
waiting: 1,
people: 2,
},
];
const PurchaseOrderAnalysis: React.FC = () => {
const scale = {
people: {
min: 0,
tickCount: 4,
alias: '合同金额',
type: 'linear-strict'
},
waiting: {
min: 0,
tickCount: 4,
alias: '合同数',
type: 'linear-strict'
},
};
const colors = ['#6394f9', '#62daaa'];
return (
<MellowCard
title="采购订单统计"
extra={(
<Space>
<Button size="small">周</Button>
<Button size="small">月</Button>
<Button size="small">年</Button>
</Space>
)}
>
<Chart
scale={scale}
height={287}
data={data}
padding={[20, 20]}
autoFit
>
<Tooltip shared />
<Axis
name="time"
grid={{
line: {
type: 'line',
style: {
stroke: '#F5F6F7', // 网格线的颜色
}
},
}}
/>
<Axis
name="people"
grid={{
line: {
type: 'line',
style: {
stroke: '#F5F6F7', // 网格线的颜色
lineWidth: 1, // 网格线的宽度
}
},
}}
/>
<Interval position="time*waiting" color={colors[0]} />
<Line
position="time*people"
color={colors[1]}
size={3}
shape="smooth"
/>
<Point
position="time*people"
color={colors[1]}
size={3}
shape="circle"
/>
</Chart>
</MellowCard>
);
};
export default PurchaseOrderAnalysis;
\ No newline at end of file
src/pages/srmHome/components/RecentlyVisited/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
.recently {
&-list {
margin: -@padding-xs;
display: flex;
flex-wrap: wrap;
&-item {
padding: @padding-xs;
width: 33.33%;
&-content {
padding: @padding-sm - 2;
border-radius: 4px;
font-size: @font-size-sm;
color: @text-color;
background-color: #F5F6F7;
text-align: center;
cursor: pointer;
&:hover {
background-color: #EDEEEF;
}
&:active {
background-color: #E3E4E5;
}
}
}
}
}
\ No newline at end of file
src/pages/srmHome/components/RecentlyVisited/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 消息提醒
*/
import React from 'react';
import { List, Space, Button } from 'antd';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
const mockData = [
{
id: 1,
content: '新增商品',
},
{
id: 2,
content: '快捷修改商品单价',
},
{
id: 3,
content: '快捷修改商品单价',
},
{
id: 4,
content: '订单查询',
},
{
id: 5,
content: '提交审核订单',
},
{
id: 6,
content: '订单查询',
},
];
const RecentlyVisited: React.FC = () => {
return (
<MellowCard title="最近访问" fullHeight>
<div className={styles['recently-list']}>
{mockData.map((item) => (
<div key={item.id} className={styles['recently-list-item']}>
<div key={item.id} className={styles['recently-list-item-content']}>
{item.content}
</div>
</div>
))}
</div>
</MellowCard>
);
};
export default RecentlyVisited;
\ No newline at end of file
src/pages/srmHome/components/SupplierAnalysis/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 供应商统计
*/
import React from 'react';
import { Space, Button } from 'antd';
import { Chart, Tooltip, Area, Line, Axis } from 'bizcharts';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
const data = [
{ year: '1991', value: 15468 },
{ year: '1992', value: 16100 },
{ year: '1993', value: 15900 },
{ year: '1994', value: 17409 },
{ year: '1995', value: 17000 },
{ year: '1996', value: 31056 },
{ year: '1997', value: 31982 },
{ year: '1998', value: 32040 },
{ year: '1999', value: 33233 },
];
const SupplierAnalysis: React.FC = () => {
const scale = {
value: {
min: 10000,
nice: true,
alias: '供应商新增',
},
year: {
range: [0, 1],
},
};
return (
<MellowCard
title="采购订单统计"
extra={(
<Space>
<Button size="small">周</Button>
<Button size="small">月</Button>
<Button size="small">年</Button>
</Space>
)}
>
<Chart
scale={scale}
height={287}
data={data}
padding="auto"
appendPadding={[20, 20, 0, 0]}
autoFit
>
<Tooltip shared />
<Axis
name="year"
grid={{
line: {
type: 'line',
style: {
stroke: '#F5F6F7', // 网格线的颜色
}
},
}}
/>
<Axis
name="value"
grid={{
line: {
type: 'line',
style: {
stroke: '#F5F6F7', // 网格线的颜色
lineWidth: 1, // 网格线的宽度
}
},
}}
/>
<Area position="year*value" color="l (180) 0:rgba(71,135,240,0.24) 1:rgba(255,255,255,0.24)" />
<Line position="year*value" />
</Chart>
</MellowCard>
);
};
export default SupplierAnalysis;
\ No newline at end of file
src/pages/srmHome/components/TodoCard/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
.todo {
&-total {
font-size: @font-size-base * 2;
color: @text-color;
}
&-tag {
&-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: @margin-sm;
}
&-item {
display: inline-block;
padding: @padding-xss / 2 @padding-xs;
margin-right: @margin-md;
margin-bottom: @margin-md;
background-color: #EBF9F6;
color: @primary-color;
border-radius: 2px;
cursor: pointer;
&:hover {
background-color: rgba(34,41,50,0.04);
}
&:active {
background-color: rgba(37,45,55,0.08);;
}
}
}
&-list {
margin-top: @margin-xs;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
&-content {
margin-left: -@margin-md;
padding-bottom: @padding-md / 2;
}
&-group {
display: inline-block;
width: 50%;
padding-left: @margin-md;
}
&-item {
padding: @padding-md - 3 @padding-md;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FAFBFC;
border-left: 2px solid #5C626A;
border-radius: 4px;
cursor: pointer;
&:not(:last-child) {
margin-bottom: @margin-md;
}
&-name {
font-size: @font-size-sm;
color: @text-color-secondary;
}
&-total {
font-size: @font-size-lg;
color: @text-color;
}
&:hover {
background-color: rgba(34,41,50,0.04);
}
&:active {
background-color: rgba(37,45,55,0.08);;
}
}
}
}
\ No newline at end of file
src/pages/srmHome/components/TodoCard/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 欢迎卡片
*/
import React from 'react';
import MellowCard from '@/components/MellowCard';
import styles from './index.less';
const mockTags = [
{
id: 1,
name: '供应商管理',
},
{
id: 2,
name: '订单中心',
},
{
id: 3,
name: '采购中心',
},
{
id: 4,
name: '合同中心',
},
];
const mockData = [
[
{
id: 1,
name: '待审核入库资料',
total: 5,
},
{
id: 2,
name: '待审核入库资质',
total: 3,
},
{
id: 3,
name: '待审核考察',
total: 1,
},
],
[
{
id: 1,
name: '待审核入库资料',
total: 5,
},
{
id: 2,
name: '待审核入库资质',
total: 3,
},
{
id: 3,
name: '待审核考察',
total: 1,
},
],
[
{
id: 1,
name: '待审核入库资料',
total: 5,
},
{
id: 2,
name: '待审核入库资质',
total: 3,
},
{
id: 3,
name: '待审核考察',
total: 1,
},
],
];
const TodoCard: React.FC = () => {
return (
<MellowCard title="今日待办">
<ul className={styles['todo-tag-list']}>
{mockTags.map((item) => (
<li key={item.id} className={styles['todo-tag-item']}>
{item.name}
</li>
))}
</ul>
<div className={styles['todo-list']}>
<div className={styles['todo-list-content']}>
{mockData.map((group, index) => (
<div key={index} className={styles['todo-list-group']}>
{group.map((item) => (
<div key={item.id} className={styles['todo-list-item']}>
<div className={styles['todo-list-item-name']}>
{item.name}
</div>
<div className={styles['todo-list-item-total']}>
{item.total}
</div>
</div>
))}
</div>
))}
</div>
</div>
</MellowCard>
);
};
export default TodoCard;
\ No newline at end of file
src/pages/srmHome/components/WelcomeCard/index.less 0 → 100644
View file @ 5c929b45
@import '~antd/es/style/themes/default.less';
.welcome {
padding: @padding-md * 2 @padding-lg;
background-image: linear-gradient(-66deg, #0095EE 0%, #00BBD0 91%);
&-head {
margin-bottom: @padding-xs;
display: flex;
align-items: center;
justify-content: space-between;
}
&-user,
&-desc {
font-size: 20px;
font-weight: 500;
color: @text-color-inverse;
}
&-date {
color: @text-color-inverse;
font-size: @font-size-base;
}
}
\ No newline at end of file
src/pages/srmHome/components/WelcomeCard/index.tsx 0 → 100644
View file @ 5c929b45
/**
* @Description 欢迎卡片
*/
import React from 'react';
import styles from './index.less';
const WelcomCard: React.FC = () => {
return (
<div className={styles['welcome']}>
<div className={styles['welcome-head']}>
<div className={styles['welcome-user']}>
Hi,蒯美政！
</div>
<div className={styles['welcome-date']}>
2020年8月26日 星期三
</div>
</div>
<div className={styles['welcome-desc']}>
欢迎来到瓴犀 SRM 工作台
</div>
</div>
);
};
export default WelcomCard;
\ No newline at end of file
src/pages/srmHome/index.less 0 → 100644
View file @ 5c929b45
.compound {
height: 100%;
display: flex;
flex-direction: column;
&-head {
flex-shrink: 0;
margin-bottom: @margin-md;
}
&-foot {
flex: 1;
}
}
\ No newline at end of file
src/pages/srmHome/index.tsx 0 → 100644
View file @ 5c929b45
/**
* SRM采购商首页
*/
import React from 'react';
import { Row, Col } from 'antd';
import { IRouteComponentProps, useIntl } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import MellowCard from '@/components/MellowCard';
import themeConfig from '@/../config/lingxi.theme.config';
import WelcomeCard from './components/WelcomeCard';
import MessageList from './components/MessageList';
import TodoCard from './components/TodoCard';
import RecentlyVisited from './components/RecentlyVisited';
import IntroduceRow from './components/IntroduceRow';
import PurchaseOrderAnalysis from './components/PurchaseOrderAnalysis';
import SupplierAnalysis from './components/SupplierAnalysis';
import styles from './index.less';
const paddingMd = parseInt(themeConfig['@padding-md']);
interface IProps extends IRouteComponentProps {}
const SRMHome: React.FC<IProps> = () => {
const intl = useIntl();
return (
<PageHeaderWrapper title={intl.formatMessage({ id: 'home.title' })}>
<Row gutter={[paddingMd, paddingMd]}>
<Col span={24}>
<Row gutter={[paddingMd, paddingMd]}>
<Col span={12}>
<MellowCard
bodyStyle={{
padding: 0,
}}
>
<WelcomeCard />
<div style={{ marginTop: -(paddingMd) }}>
<TodoCard />
</div>
</MellowCard>
</Col>
<Col span={12}>
<div className={styles.compound}>
<div className={styles['compound-head']}>
<MessageList />
</div>
<div className={styles['compound-foot']}>
<RecentlyVisited />
</div>
</div>
</Col>
</Row>
</Col>
<Col span={24}>
<IntroduceRow />
</Col>
<Col span={24}>
<PurchaseOrderAnalysis />
</Col>
<Col span={24}>
<SupplierAnalysis />
</Col>
</Row>
</PageHeaderWrapper>
);
};
export default SRMHome;
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