修改首页，修改加工业详情

src/app.tsx

@@ -14,8 +14,10 @@ import { getRouters, getAuth, asyncRouter, setAuth, setRouters, removeAuth, remo
 import { PublicApi } from './services/api';
 // 全局注册虚拟组件
 import '@/components/NiceForm/public'
-import { GlobalConfig } from '@/global/config'
+import { GlobalConfig } from '@/global/config';
+import LRU from '@/utils/lru';
 
+const recent = new LRU(6);
 setup()
 
 // 与用户登录相关路由
@@ -161,8 +163,12 @@ export function render(oldRender: Function) {
 export function onRouteChange({ routes, matchedRoutes, location, action }) {
   console.log('onRouteChange')
   // 路由切换时， 自动回到顶部
-  document.body.scrollTop = document.documentElement.scrollTop = 0
-
+  document.body.scrollTop = document.documentElement.scrollTop = 0;
+  // 路由切换的时候记住，使用LRU算法，为首页使用，就是要找到面包屑对应的url衔接，
+  const breadCrumb = matchedRoutes.slice(2).reduce((prev, current) => {
+    return prev += "." + current.route.name
+  }, 'menu')
+  recent.put(breadCrumb, location.pathname + location.search);
   if (isDev) {
     return;
   }

src/constants/index.ts

 export const NOT_CHANGE_VALUE = 'hello, world'
 
 // socket的链接地址， 默认会使用后端接口网关地址
-export const SOCKET_URL = process.env.SOCKET_URL || process.env.BACK_GATEWAY || "ws://10.0.0.25:9400"
+// export const SOCKET_URL = process.env.SOCKET_URL || process.env.BACK_GATEWAY || "ws://10.0.0.25:9400"
+export const SOCKET_URL = "ws://10.0.0.25:9400"
 
 export const MALL_TYPE = {
   1: '企业商城',

src/pages/handling/assign/detail/index.tsx

@@ -10,6 +10,8 @@ import Appendix from '../../components/Appendix';
 import ProcessDetail from '../../components/ProcessDetail';
 import { usePageStatus } from '@/hooks/usePageStatus'
 import { PublicApi } from '@/services/api';
+import StatusTag from '@/components/StatusTag';
+import DeliveryInfomation from '../../components/DeliveryInformation';
 import moment from 'moment';
 
 const { TabPane } = Tabs;
@@ -55,7 +57,9 @@ const Detail: React.FC<{}> = () => {
               <Descriptions.Item label="加工企业：">{info?.processName}</Descriptions.Item>
               <Descriptions.Item label="单据时间：">{info && info.createTime && moment(info.createTime).format('YYYY-MM-DD') || null   }</Descriptions.Item>
               <Descriptions.Item label="通知单来源：">{info?.source == '1' ? '订单加工': '商品加工'}</Descriptions.Item>
-              <Descriptions.Item label="外部状态：">{info.outerStatusName}</Descriptions.Item>
+              <Descriptions.Item label="外部状态：">
+                <StatusTag type="success" title={info.outerStatusName} />
+              </Descriptions.Item>
               <Descriptions.Item label="内部状态：">{info.innerStatusName}</Descriptions.Item>
             </Descriptions>
           </PageHeader>
@@ -86,11 +90,20 @@ const Detail: React.FC<{}> = () => {
         </Card> 
       </div>
       <div style={{marginTop: '20px'}}>
+        <DeliveryInfomation 
+          deliveryDate={info.deliveryDate} 
+          deliveryType={info.deliveryType} 
+          receiveAddress={info.receiveAddress}
+          receiveUserName={info.receiveUserName}
+          receiveUserTel={info.receiveUserTel}
+        />
+      </div>
+      <div style={{marginTop: '20px'}}>
         <Row justify="space-between">
           <Col flex={4}>
             <OtherRequirement />
           </Col>
-          <Col flex={2} style={{marginLeft: '20px'}}>
+          <Col flex={2} style={{marginLeft: '20px'}} >
             <Appendix />
           </Col>
         </Row>
@@ -99,15 +112,15 @@ const Detail: React.FC<{}> = () => {
         <Card bodyStyle={{padding: '10px 24px 24px 24px'}}>
           <Tabs>
             <TabPane tab="外部流转记录" key="1">
-              <WrapTable />
+              <WrapTable dataSource={info.outerWorkflowRecordsList} />
             </TabPane>
             <TabPane tab="内部流转记录" key="2">
-              <WrapTable />
+              <WrapTable dataSource={info.innerWorkflowRecordsList}/>
             </TabPane>
           </Tabs>
         </Card> 
       </div>
-      <ProcessDetail />
+      {/* <ProcessDetail /> */}
     </PageHeaderWrapper>
   )
 }

src/pages/handling/components/Appendix/index.tsx

@@ -16,6 +16,7 @@
    backgroundColor: '#F4F5F7',
    padding: '10px 15px',
    cursor: 'pointer',
+   height: '100%'
  }
  const AppendixItem = () => {
    return (
@@ -25,11 +26,11 @@
 
  const Appendix = () => {
    return (
-     <div>
-       <Card title={"附件"}>
+     <>
+       <Card title={"附件"} style={{height: '100%'}}>
         <AppendixItem />
        </Card>
-     </div>
+     </>
    )
  }
 

src/pages/handling/components/DeliveryInformation/index.tsx

+import React from 'react';
+import { Card, Col, Row } from 'antd'
+
+enum deliveryType {
+  logistics,
+  bySelf
+}
+
+interface Iprops {
+  deliveryDate: string,
+  deliveryType: deliveryType,
+  receiveAddress: string,
+  receiveUserName: string,
+  receiveUserTel: string
+}
+
+const DeliveryInfomation: React.FC<Iprops> = (props) => {
+  return (
+    <Card title="交付信息">
+      <Row>
+        <Col span={6}>
+          {/* <OtherRequirement /> */}
+          <Row style={{marginBottom: '20px'}}>
+            <Col span={6}>配送方式</Col>
+            <Col>{props.deliveryType}</Col>
+          </Row>
+          <Row>
+            <Col span={6}>交期</Col>
+            <Col>{props.deliveryDate}</Col>
+          </Row>
+        </Col>
+        <Col span={9}>
+          <Row style={{marginBottom: '20px'}}>
+            <Col span={5}>收货地址</Col>
+            <Col>{props.receiveUserName} / {props.receiveUserTel}</Col>
+          </Row>
+          <Row>
+          <Col offset={5}>{props.receiveAddress}</Col>
+          </Row>
+        </Col>
+        <Col span={9}>
+          <Row style={{marginBottom: '20px'}}>
+            <Col span={5}>发货地址</Col>
+            <Col>张三 / 136,7627,2729</Col>
+          </Row>
+          <Row>
+            <Col offset={5}>广东省广州市海珠区新港东路1068号中州中心北塔6楼</Col>
+          </Row>
+        </Col>
+      </Row>
+    </Card>
+  )
+}
+
+export default DeliveryInfomation;
\ No newline at end of file

src/pages/home/components/AdvertisementSpace/index.less

 @color: #303133;
 
-.advertisementSpace {
-  padding: 24px;
-  color: @color;
-  background-color: #fff;
-  border-radius: 8px;
-  .header {
+// .advertisementSpace {
+//   padding: 24px;
+//   color: @color;
+//   background-color: #fff;
+//   border-radius: 8px;
+//   .header {
     
-    margin-bottom: 24px;
-    .title {
-      font-size: 18px;
-    }
-  }
+//     margin-bottom: 24px;
+//     .title {
+//       font-size: 18px;
+//     }
+//   }
 
-  .body {
-    .tips {
-      font-size: 12px;
-    }
-  }
+//   .body {
+//     .tips {
+//       font-size: 12px;
+//     }
+//   }
 
-  .footer {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+//   .footer {
+//     margin-top: 10px;
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: space-between;
+//     align-items: center;
 
-    .link {
-      align-self: flex-end;
-    }
+//     .link {
+//       align-self: flex-end;
+//     }
+
+//     .img {
+//       img {
+//         width: 80px;
+//         height: 80px;
+//       }
+//     }
+//   }
+// }
+.advertisementSpace {
+  width: 386px;
+  height: 217px;
+  .img {
+    width: 100%;
+    height: 100%;
   }
-}
+}
\ No newline at end of file

src/pages/home/components/AdvertisementSpace/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './index.less';
-import factory from '@/assets/imgs/factory.png';
+import { PublicApi } from '@/services/api';
 
 interface Iprops {
-  title: string,
+  // title: string,
   urlLink: string,
-  urlText: string,
-  tips: string,
+  // urlText: string,
+  // tips: string,
+  imageUrl: string
 }
 
-const AdvertisementSpace: React.FC<Iprops> = () => {
+const AdvertisementContainer = () => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<any[]>([]);
+  const getList = (params) => {
+    setLoading(true);
+    PublicApi.getManageContentAdvertFindAllByColumnType(params)
+    .then(({data, code}) => {
+      setLoading(false);
+      if(code === 1000) {
+        setData(data);
+      }
+    })
+  }
+  useEffect(() => {
+    getList({columnType: 1})
+  }, [])
+
+  return (
+    <div>
+      {
+        data.map((item, key) => {
+          return (
+            <AdvertisementSpace 
+              urlLink={item.link} 
+              imageUrl={item.imageUrl}  
+              key={key}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+const AdvertisementSpace: React.FC<Iprops> = (props) => {
   return (
     <div className={styles.advertisementSpace}>
-      <div className={styles.header}>
-        <div className={styles.title}>方案中心</div>
-      </div>
-      <div className={styles.body}>
-        <div className={styles.tips}>
-          提供品类丰富，功能强大和配置灵活的产品智能化开发方案，可一键获取和采用，轻松实现您的智能化梦想。
-        </div>
-      </div>
-      <div className={styles.footer}>
-        <div className={styles.link}>
-          <a>前往购买</a>
-        </div>
-        <div className={styles.img}>
-          <img src={factory} />
-        </div>
-      </div>
+      <a href={props.urlLink}>
+        <img src={props.imageUrl} className={styles.img} />
+      </a>
     </div>
   )
 }
-export default AdvertisementSpace
\ No newline at end of file
+export default AdvertisementContainer
\ No newline at end of file

src/pages/home/components/CustomWorkBench/index.less

@@ -11,6 +11,22 @@
     color: #303133;
     border-radius: 8px;
     cursor: pointer;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: #00B37A;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      margin-right: 8px;
+      img {
+        width: 12px;
+        height: 12px;
+      }
+    }
   }
  
 }

src/pages/home/components/CustomWorkBench/index.tsx

@@ -5,7 +5,8 @@ import { CloseOutlined } from '@ant-design/icons';
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import DragSortList from './DragSortList';
-import update from 'immutability-helper'
+import update from 'immutability-helper';
+import home_workBench from '@/assets/imgs/home_workBench.png';
 
 interface Iprops {
   centerOrder: any,
@@ -68,6 +69,9 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
     <div className={styles.customWorkBench}>
       <div className={styles.btn} onClick={handleVisible}>
         {/* <span></span> */}
+        <span className={styles.icon}>
+          <img src={home_workBench} />
+        </span>
         自定义工作台
       </div>
       <Modal

src/pages/home/components/LatestAnnounces/index.less

@@ -40,6 +40,47 @@
           background: #F7F8FA;
         }
       }
+      .content {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.notice {
+  .noticeHeader {
+    padding: 34px 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background: #FAFBFC;
+
+    .title {
+      flex: 1;
+      text-align: center;
+      font-size: 20px;      
+      font-weight: 500;
+      color: #303133;
     }
+    .icon {
+      // margin-left: auto;
+      flex-basis: 35px;
+      cursor: pointer;
+    }
+  }
+
+  .noticeBody {
+    height: 504px;
+    overflow-y: auto;
+    padding: 24px;
+  }
+
+  .noticeFooter {
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
 }
\ No newline at end of file

src/pages/home/components/LatestAnnounces/index.tsx

 import React, { useState, useEffect } from 'react';
 import styles from './index.less';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
-import { keyBy } from 'lodash';
 import { PublicApi } from '@/services/api';
-
+import moment from 'moment';
+import { Modal } from 'antd';
 interface Iprops {}
 
 const LatestAnnouces: React.FC = () => {
   const [data, setData] = useState([]);
+  const [totalCount, setTotalCount] = useState<number>(0)
+  const [loading, setLoading] = useState<boolean>(false);
+  const [currnetNotice, setCurrnetNotice] = useState<any>({});
+  const [visible, setVisible] = useState<boolean>(false);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 5
+  })
+  
+  const getList = (params) => {
+    setLoading(true);
+    PublicApi.getManageContentNoticeFindNewestNotice(params)
+    .then(({data, code}) => {
+      setLoading(false);
+      if(code === 1000) {
+        setTotalCount(data.totalCount)
+        setData(data.data);
+      }
+    })
+  }
+  
   useEffect(() => {
-    ///manage/contentNotice/page
-    // PublicApi.getManageContentNoticePage()
-    // .then((data) => {
-
-    // })
+    getList(pagination);
   }, [])
+
+  const handlePrev = () => {
+    const data = {
+      ...pagination,
+      current: pagination.current - 1,
+    }
+    setPagination(data);
+    getList(data);
+  }
+
+  const handleNext = () => {
+    const data = {
+      ...pagination,
+      current: pagination.current + 1,
+    }
+    setPagination(data);
+    getList(data);
+  }
+
+  const handleViewDetail = (row) => {
+    setVisible(true)
+    setCurrnetNotice(row)
+  }
+
   return (
     <div className={styles.announces}>
       <div className={styles.header}>
         <div className={styles.title}>最新公告</div>
         <div className={styles.nextOrPreview}>
-          <Button icon={<LeftOutlined />} className={styles.prev}></Button>
-          <Button icon={<RightOutlined />}></Button>
+          <Button onClick={handlePrev} icon={<LeftOutlined/>} className={styles.prev} disabled={pagination.current <= 1}></Button>
+          <Button onClick={handleNext} icon={<RightOutlined/>} disabled={pagination.current * 5 >= totalCount}></Button>
         </div>
       </div>
       <div className={styles.body}>
         {
-          [1,2,3,4].map((item) => {
+          data.map((item, key) => {
+            const date = moment(item.createTime);
+            const month = date.month();
+            const day = date.date();
             return (
-              <div className={styles.item} key={item}>
+              <div className={styles.item} key={item.id}>
                 <div className={styles.date}>
-                  <div className={styles.month}>09月</div>
-                  <div className={styles.day}>17</div>
+                  <div className={styles.month}>{(month + 1)}月</div>
+                  <div className={styles.day}>{day}</div>
                 </div>
-                <div className={styles.content}>
-                  最新交易板块上线，全新体验，更多交易模式，更多好玩等你发现
+                <div className={styles.content} onClick={() => handleViewDetail(item)}>
+                  {item.title}
                 </div>
               </div>
             )
           })
         }
-        
       </div>
+      <Modal 
+        width={800}
+        visible={visible}
+        footer={false}
+        onCancel={() => setVisible(false)}
+        closable={false}
+        bodyStyle={{padding: 0}}
+      >
+        <div className={styles.notice}>
+          <div className={styles.noticeHeader}>
+            <div className={styles.title}>{currnetNotice.title}</div>
+            <div className={styles.icon}><CloseOutlined  onClick={() => setVisible(false)}/></div>
+          </div>
+          <div className={styles.noticeBody}>
+            <div dangerouslySetInnerHTML={{__html: currnetNotice.content}} ></div>
+          </div>
+          <div className={styles.noticeFooter}>
+            <Button onClick={() => setVisible(false)} type={"primary"}>我知道了</Button>
+          </div>
+        </div>
+       
+      </Modal>
     </div>
   )
 }

src/pages/home/components/RecentVisit/index.less

@@ -23,6 +23,10 @@
       color: #303133;
       padding: 6px;
       margin-bottom: 16px;
+
+      a {
+        color: #303133;
+      }
     }
   }
 }
\ No newline at end of file

src/pages/home/components/RecentVisit/index.tsx

 import React from 'react';
-import styles from './index.less'
-
+import styles from './index.less';
+import menu_zh from '@/locales/zh-CN/menu';
+import { Link } from 'umi';
 interface Iprops {}
 
 const RecentVisit: React.FC<Iprops> = () => {
+  const recentVisit = localStorage.getItem('recentVisit') && JSON.parse(localStorage.getItem('recentVisit')) || {};
   return (
     <div className={styles.recentVisit}>
       <div className={styles.header}>
@@ -11,11 +13,14 @@ const RecentVisit: React.FC<Iprops> = () => {
       </div>
       <div className={styles.body}>
         {
-          ["新增商品", "快捷修改商品单价", "新增仓位库存"].map((item) => {
+          Object.keys(recentVisit).map((item) => {
             return (
-              <div className={styles.item} key={item}>
-                {item}
-              </div>
+              <div key={item} className={styles.item}>
+                <Link key={item} to={recentVisit[item]}>
+                  { menu_zh[item] }
+                </Link>
+              </div> 
+              
             )
           })
         }

src/pages/home/components/UserCenter/index.tsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { Row, Col, Tag, Badge } from 'antd';
 import level2  from '@/assets/imgs/level2.png';
 import home_user from '@/assets/imgs/home_user.png';
+import { getAuth } from '@/utils/auth';
 
 interface Iprops {}
 
@@ -11,12 +12,13 @@ const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"]
 
 const UserCenter: React.FC<Iprops> = () => {
   const today = moment();
+  const userAuth = getAuth();
   return (
     <div className={styles.container}>
       <div className={styles.header}>
         <div className={styles.infos}>
           <div className={styles.hi}>
-            {"Hi, Zzb! 欢迎来到数商云瓴犀业务中台能力中心"}
+            {`Hi, ${userAuth.name}! 欢迎来到数商云瓴犀业务中台能力中心`}
           </div>
           <div className={styles.date}>
             {today.format('YYYY年MM月DD日')}  星期{WEEKDAYS[today.day()]}

src/pages/home/index.tsx

@@ -7,7 +7,7 @@ import CustomWorkBench from './components/CustomWorkBench';
 import LatestAnnounce from './components/LatestAnnounces';
 import RecentVisit from './components/RecentVisit';
 import AnyQuestion from './components/AnyQuestion';
-import AdvertisementSpace from './components/AdvertisementSpace';
+import AdvertisementContainer from './components/AdvertisementSpace';
 import { TradeCenter, ShopCenter, ProductCenter, SettlementCenter, AfterSoldCenter, LogisticsCenter, ProcessCenter } from './components/Centers';
 import styles from './index.less'
 import { CompassFilled } from '@ant-design/icons';
@@ -33,7 +33,6 @@ const Home: React.FC<{}> = () => {
     console.log(res);
     setCenterOrder(res);
   }
-
   return (
     <PageHeaderWrapper>
       <>
@@ -86,16 +85,9 @@ const Home: React.FC<{}> = () => {
             <div className={styles.announce}>
               <AnyQuestion />
             </div>
-            {
-              [1,2,3,4].map((item) => {
-                return (
-                  <div className={styles.announce} key={item}>
-                    <AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
-                  </div>      
-                )
-              })
-            }
-          
+            <div className={styles.announce}>
+              <AdvertisementContainer />
+            </div>
           </div>
         </div>
       </>

src/utils/lru.ts

+/**
+ * 最近未使用算法 
+ * 设置最长的长度为6，之而立其实不能用map，后面再改进吧，应为map的话不能放到localstorage，需要遍历一次，
+ */
+
+var LRUCache = function (capacity: number) {
+  this.cache = new Map();
+  this.capacity = capacity;
+};
+
+LRUCache.prototype.get = function (key) {
+  if (this.cache.has(key)) {
+    // 存在即更新
+    let temp = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, temp);
+    return temp;
+  }
+  return -1;
+};
+
+LRUCache.prototype.put = function (key: string, value: string) {
+  if (this.cache.has(key)) {
+    // 存在即更新（删除后加入）
+    this.cache.delete(key);
+  } else if (this.cache.size >= this.capacity) {
+    // 不存在即加入
+    // 缓存超过最大值，则移除最近没有使用的
+    this.cache.delete(this.cache.keys().next().value);
+  }
+  this.cache.set(key, value);
+  let data = {};
+  for(var [k, v] of this.cache) {
+    data[k] = v
+  }
+  localStorage.setItem("recentVisit", JSON.stringify(data))
+};
+
+
+export default LRUCache;
\ No newline at end of file