Skip to content

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

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

parent 0bacb5f8
Hide whitespace changes
Inline Side-by-side
Showing with 386 additions and 99 deletions
src/app.tsx
View file @ 44285560
......@@ -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
View file @ 44285560
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
View file @ 44285560
......@@ -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
View file @ 44285560
......@@ -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 0 → 100644
View file @ 44285560
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
View file @ 44285560
@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
View file @ 44285560
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
View file @ 44285560
......@@ -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
View file @ 44285560
......@@ -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
View file @ 44285560
......@@ -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
View file @ 44285560
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
View file @ 44285560
......@@ -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
View file @ 44285560
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
View file @ 44285560
......@@ -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
View file @ 44285560
......@@ -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 0 → 100644
View file @ 44285560
/**
* 最近未使用算法
* 设置最长的长度为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
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