refactor: 重构首页

src/pages/content/announcements/index.tsx

@@ -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;
+export default Announcements;
\ No newline at end of file

src/pages/content/utils/utils.tsx

@@ -80,7 +80,8 @@ const ADVERTISE_APP_COLUMN_TYPE = {
 // 内容管理 - 公告栏目
 const ANNOUNCE_COLUMN_TYPE = {
   '1': '会员首页公告',
-  '2': '注册须知'
+  '2': '注册须知',
+  '3': '入库须知'
 }
 
 // 内容管理 - 图片管理 - 使用场景

src/pages/home/components/Order/columnChart.tsx

@@ -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

@@ -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

@@ -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

+@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

+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

@@ -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

@@ -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

@@ -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 => ({