Skip to content

J
jinfa-admin
Commit 701a9836 authored by Bill's avatar Bill
Browse files
Options

refactor: 重构首页

parent aa9d996a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 338 additions and 175 deletions
src/pages/content/announcements/index.tsx
View file @ 701a9836
......@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { FilterTable, SchemaFlexRowLayout, SchemaFlexColumnLayout } from '../components/FilterTable';
import { Card, Input, Button, Table, Dropdown, Menu, Select, Space, Popconfirm, Modal } from 'antd';
import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
import { history, Link } from 'umi';
import { history, Link } from 'umi';
import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
import { timeRange } from '@/utils/index';
import { PublicApi } from '@/services/api';
......@@ -41,14 +41,14 @@ const Announcements = () => {
state.visible = false;
})
})
merge(
onFieldValueChange$('columnType'),
onFieldValueChange$('status'),
onFieldValueChange$('status'),
onFieldValueChange$('time'),
).subscribe(
fieldState => {
if(fieldState.active && fieldState.value != null) {
handleSearch({})
}
......@@ -58,7 +58,7 @@ const Announcements = () => {
onFieldValueChange$('pagination').subscribe((state) => {
handleSearch({...state.value})
})
}
const handleSearch = async (params) => {
......@@ -71,9 +71,9 @@ const Announcements = () => {
title: title || '',
columnType: columnType != 0 ? columnType : '',
status: status != 0 ? status : '',
startTime: st && st * 1000,
endTime: et && et * 1000,
current: 1,
startTime: st,
endTime: et,
current: 1,
pageSize: 10,
...params
}
......@@ -91,7 +91,7 @@ const Announcements = () => {
})
}
})
}
// 修改状态
......@@ -115,7 +115,7 @@ const Announcements = () => {
return (
<Card>
<FilterTable
<FilterTable
schema={advertisementSchema}
components={{
CustomSearch,
......@@ -155,7 +155,7 @@ const Announcements = () => {
</span>
)
},
toggleFilters: () => {
actions.setFieldState('FILTERS', state => {
const visible = !state.visible;
......@@ -182,7 +182,7 @@ const Announcements = () => {
<a>
删除
</a>
</Menu.Item>
</Menu.Item>
</Menu>
)
return (
......@@ -198,7 +198,7 @@ const Announcements = () => {
</Popconfirm>
{/* // 只有待上架， 已下架架才有 修改和删除 */}
{
canModify.includes(record.status)
canModify.includes(record.status)
? (
<Dropdown overlay={menu}>
<a>
......@@ -219,4 +219,4 @@ const Announcements = () => {
)
}
export default Announcements;
\ No newline at end of file
export default Announcements;
src/pages/content/utils/utils.tsx
View file @ 701a9836
......@@ -80,7 +80,8 @@ const ADVERTISE_APP_COLUMN_TYPE = {
// 内容管理 - 公告栏目
const ANNOUNCE_COLUMN_TYPE = {
'1': '会员首页公告',
'2': '注册须知'
'2': '注册须知',
'3': '入库须知'
}
// 内容管理 - 图片管理 - 使用场景
......
src/pages/home/components/Order/columnChart.tsx
View file @ 701a9836
......@@ -3,13 +3,19 @@ import React from 'react';
import { Chart, Tooltip, Point, Line, Interval } from "bizcharts";
interface IProps {
currentIndex: number,
data: {
dateTime: string | {},
count: number,
amount: number
}[],
height: number,
}
const colors = ["#6394f9", "#62daaa"];
const ColumnChart: React.FC<IProps> = (props) => {
const { data, height } = props;
return (
<Chart height={302} autoFit data={props.data} >
<Chart height={height} autoFit data={data} >
<Tooltip shared />
<Interval
tooltip={['dateTime*count', (text, num) => {
......@@ -49,4 +55,8 @@ const ColumnChart: React.FC<IProps> = (props) => {
)
}
ColumnChart.defaultProps = {
height: 302
}
export default ColumnChart;
src/pages/home/components/Order/index.tsx
View file @ 701a9836
......@@ -12,46 +12,67 @@ const OrderContainer = () => {
const { loading, responseData, ref } = useViewRequest<GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse, any>(PublicApi.getReportPlatformHomeGetTradeAndAfterSaleTally, {})
const { loading: orderStatisticsLoading, responseData: orderStatisticsData, ref: orderStatisticsRef } = useViewRequest<GetReportPlatformHomeGetOrderListResponse, any>(PublicApi.getReportPlatformHomeGetOrderList, {})
const renderLoading = () => {
return (
[1, 2, 3].map((_item) => {
return (
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24}>
<Card loading={true} />
</Col>
)
})
)
}
const renderChild = () => {
return (
responseData && Object.keys(responseData).map((item, key) => {
return (
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24} key={item}>
<Card
headStyle={{borderBottom:'none'}}
title={item === 'afterSaleList' ? '待处理售后' : '待处理交易'}
bordered={false}
style={{height: '100%'}}
className={key == 1 ? styles.lastCard : ''}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
{
responseData[item].map((row) => {
return (
<List.Item
key={row.name}
actions={[<Link to={row?.link}>查看&nbsp;<RightOutlined /></Link>]}
>
<List.Item.Meta
title={row.count.toString()}
description={row.name}
/>
</List.Item>
)
})
}
</List>
</Card>
</Col>
)
})
)
}
return (
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}} ref={ref}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Row style={{height: '100%'}} gutter={[24, 12]}>
{
responseData && Object.keys(responseData).map((item, key) => {
return (
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24} key={item}>
<Card
headStyle={{borderBottom:'none'}}
title={item === 'afterSaleList' ? '待处理售后' : '待处理交易'}
bordered={false}
style={{height: '100%'}}
className={key == 1 ? styles.lastCard : ''}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
{
responseData[item].map((row) => {
return (
<List.Item
key={row.name}
actions={[<Link to={row?.link}>查看&nbsp;<RightOutlined /></Link>]}
>
<List.Item.Meta
title={row.count.toString()}
description={row.name}
/>
</List.Item>
)
})
}
</List>
</Card>
</Col>
)
})
(loading) && (
renderLoading()
) || (
renderChild()
)
}
</Row>
</Col>
......
src/pages/home/components/Order/statisticsChart.tsx
View file @ 701a9836
......@@ -13,13 +13,14 @@ import { GetReportPlatformHomeGetOrderListResponse } from '@/services/reportApi'
interface Iprops {
orderData: GetReportPlatformHomeGetOrderListResponse | null,
loading: boolean
loading: boolean,
height?: number,
}
const OrderStatistics: React.FC<Iprops> = (props) => {
const { orderData, loading } = props
const { orderData, loading, height } = props
const [timeRadio, setTimeRadio] = useState<TimeEnum>(TimeEnum.WEEK)
const [currentChartData, setCurrentChartData] = useState<Ilist[]>([]);
const [currentChartData, setCurrentChartData] = useState<{dateTime: {}, count: number, amount: number}[]>([]);
const handleChangeTime = (e) => {
setTimeRadio(e.target.value)
const dataMap = {
......@@ -61,7 +62,6 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
return (
<Card
headStyle={{borderBottom:'none'}}
style={{height: '100%'}}
title="订单统计"
bordered={false}
loading={loading}
......@@ -76,7 +76,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
<Row style={{margin: '36px 0 0 0'}}>
<Col span={24}>
{/* 折线图 */}
<ColumnChart data={currentChartData} />
<ColumnChart data={currentChartData} height={height!} />
</Col>
<Col span={24}>
<Row>
......@@ -85,7 +85,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
return (
<Col xxl={6} xl={6} lg={12} md={12} sm={24} xs={24} key={key}>
<div className={styles.lineDesc}>
<img src={item.icon} className={styles.icon} alt=""/>
<img src={item.icon} className={styles.icon}/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>{item.value}</p>
<p className={styles.lineDescTip}>{item.tips}</p>
......@@ -102,4 +102,8 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
)
}
OrderStatistics.defaultProps = {
height: 302
}
export default OrderStatistics
src/pages/home/components/PurchaseCenter/index.less 0 → 100644
View file @ 701a9836
@media (min-width: 1600px) {
.lastCard {
margin-top: 12px;
}
}
.sideListBox{
:global{
.ant-list-item-meta-title{
font-size: 24px;
font-weight: 500;
color: #303133;
}
}
}
.lineDesc{
display: flex;
align-items: center;
margin-top: 14px;
.icon {
display: block;
width: 48px;
height: 48px;
margin: 24px 16px 24px 24px;
}
.lineDescText{
p{
margin-bottom: 8px;
line-height: 1;
}
.lineDescTitle{
font-size: 24px;
font-weight: 500;
color: #303133;
overflow: hidden;
}
.lineDescTip{
font-size: 12px;
font-weight: 400;
color: #909399;
}
}
}
src/pages/home/components/PurchaseCenter/index.tsx 0 → 100644
View file @ 701a9836
import { PublicApi } from '@/services/api';
import { GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse } from '@/services/reportApi';
import { GetReportMemberHomeGetPurchaseTallyResponse, GetReportPlatformHomeGetPurchaseListResponse } from '@/services/ReportV2Api';
import { RightOutlined } from '@ant-design/icons';
import { Col, Row, Card, List } from 'antd';
import React, { useMemo } from 'react';
import { Link } from 'umi';
import useViewRequest from '../../common/hooks/useViewRequest';
import OrderStatistics from '../Order/statisticsChart';
import styles from './index.less'
const PurchaseCenter = () => {
const { loading, responseData, ref } = useViewRequest<GetReportPlatformHomeGetTradeAndAfterSaleTallyResponse, any>(PublicApi.getReportPlatformHomeGetTradeAndAfterSaleTally, {})
const { loading: orderStatisticsLoading, responseData: orderStatisticsData, ref: orderStatisticsRef } = useViewRequest<GetReportPlatformHomeGetPurchaseListResponse, any>(PublicApi.getReportPlatformHomeGetPurchaseList, {})
const listItem = useMemo(() => {
return [
{
name: '待审核采购询价',
count: 0,
link: '/'
},
{
name: '待审核采购竞价',
count: 1,
link: '/'
},
{
name: '待审核招标项目',
count: 2,
link: '/'
}
]
}, [])
return (
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}} ref={ref}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Card
headStyle={{borderBottom:'none'}}
title={'待处理采购哦'}
bordered={false}
style={{height: '100%'}}
loading={loading}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
{
listItem.map((row) => {
return (
<List.Item
key={row.name}
actions={[<Link to={row?.link}>查看&nbsp;<RightOutlined /></Link>]}
>
<List.Item.Meta
title={row.count.toString()}
description={row.name}
/>
</List.Item>
)
})
}
</List>
</Card>
</Col>
<Col xxl={18} xl={24} lg={24} ref={orderStatisticsRef}>
<OrderStatistics height={158} orderData={orderStatisticsData} loading={orderStatisticsLoading}/>
</Col>
</Row>
)
}
export default PurchaseCenter
src/pages/home/index.tsx
View file @ 701a9836
......@@ -8,6 +8,7 @@ import DataCenter from './components/DataCenter'
import RiskCenter from './components/RiseCenter';
import MemberStatisticsContainer from './components/MemberStatistics/MemberStatisticsContainer';
import OrderContainer from './components/Order';
import PurchaseCenter from './components/PurchaseCenter';
const Home: React.FC<{}> = () => {
......@@ -25,12 +26,13 @@ const Home: React.FC<{}> = () => {
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<OrderContainer />
</Space>
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<PurchaseCenter />
</Space>
{/* 商品品牌统计 */}
<div id="product">
<Space direction="vertical" style={{width:'100%'}}>
<StatisticsColumn />
</Space>
</div>
<Space direction="vertical" style={{width:'100%'}}>
<StatisticsColumn />
</Space>
{/* 付款提现统计 */}
<Space direction="vertical" style={{width:'100%'}}>
......
src/services/api.ts
View file @ 701a9836
......@@ -15,6 +15,7 @@ import * as EnhanceApi from './enhanceApi';
import * as AfterServiceApi from './AfterServiceApi';
import * as PurchaseApi from './PurchaseApi';
import * as PlatformApi from './PlatformApi';
import * as ReportApiV2 from './ReportV2Api';
/**
* 可在这里写入自定义的接口
......@@ -42,4 +43,5 @@ export const PublicApi = {
...AfterServiceApi,
...PurchaseApi,
...PlatformApi,
...ReportApiV2,
}
ytt.config.ts
View file @ 701a9836
......@@ -16,7 +16,8 @@ const tokenList = [
{ name: 'enhance', token: '594a7e7ff17f6f40fb9fb726c1da9a3f282a926a8d386eb6cbfd668a3f75f251', categoryIds: [0] }, // 加工服务
{ name: 'AfterService', token: 'bac1c7ca2c63869ec87085b0b33e830fea19f707dea5763f1bf8f2dc5996bde8', categoryIds: [0] }, // 售后服务
{ name: 'Platform', token: 'cadc3b13452c3ec67b5ef0c57063f12142e857a9eaa64669e80165adf42f5861', categoryIds: [0] }, // 平台后台v2
{ name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0] } //会员服务 V2
{ name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0] }, //会员服务 V2
{ name: 'ReportV2', token: 'dab50c384c27f1c981a03f2c44ad76d1e7e1f60b4520bd279cea67f5cf146cee', categoryIds: [0] }, // 报表服务v2
]
const getConfigMap = (tokens) => tokens.map(v => ({
......
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