xxq250
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改公告页面左侧导航栏-谢思 

修改公告页面左侧导航栏-谢思
This commit is contained in:
tongChong 2021-08-23 14:40:16 +08:00
parent 97bd7673e1 8dc08c3992
commit 706830928e
4 changed files with 2659 additions and 2696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4883
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
src/military/notice/api.js
View File

@ -9,7 +9,7 @@ export async function getNoticeList(params) {
method: 'get',
params,
});
if (res.code === '1') {
if (res.message === 'success') {
return res.data;
} else {
notification.open({
@ -27,7 +27,7 @@ export async function getNoticeDetail(id) {
method: 'get',
params:{flag:1}
});
if (res.code === '1') {
if (res.message === 'success') {
return res.data;
} else {
notification.open({

421
src/military/notice/noticeList/index.jsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { Pagination, Icon, Input, Tabs } from 'antd';
import { Menu, Pagination, Icon, Input, Tabs } from 'antd';
import { Link } from "react-router-dom";
import ItemList from '../components/itemList';
import Nodata from '../../../forge/Nodata';
@ -10,11 +10,13 @@ import noticePng from '../image/banner.png';
import { getNoticeList } from '../api';
import './index.scss';
import { backgroundColor } from 'echarts/lib/theme/dark';
const Search = Input.Search;
const { TabPane } = Tabs;
const { SubMenu } = Menu;
const defaultColor = '#1890ff';
const activeColor = '#fff';
const defaultColor = '#848684';
const activeColor = '#ffffff';
const svgColor = '#1890ff';
export default (props) => {
@ -32,12 +34,16 @@ export default (props) => {
const [changeList, setChangeList] = useState([]);
const [checkList, setCheckList] = useState([]);
const [abandonList, setAbandonList] = useState([]);
const [technologyList, setTechnologyList] = useState([]);
const [dealList, setDealList] = useState([]);
const [openKeys, setOpenKeys] = useState(['sub2']);
const rootSubmenuKeys = ['sub1', 'sub2'];
useEffect(() => {
setLoading(true);
if (tab === '0') {
if (tab === '0' || tab === '7') {
const params = {
orderBy,
curPage: 1,
@ -62,6 +68,13 @@ export default (props) => {
setAbandonList(data.rows);
setLoading(false);
});
getNoticeList({ ...params, type: 5 }).then(data => {
setTechnologyList(data.rows);
});
getNoticeList({ ...params, type: 6 }).then(data => {
setDealList(data.rows);
setLoading(false);
});
} else {
const params = {
orderBy,
@ -81,7 +94,6 @@ export default (props) => {
}
}, [tab, title, orderBy, curPage]);
function changeSort(sortType) {
setOrderBy(sortType);
setCurPage(1);
@ -93,14 +105,12 @@ export default (props) => {
function sortNav() {
return <div className="notice-sort-nav">
{/* <div className="center-left-but"> */}
<Search
maxLength={20}
style={{ width: "56%" }}
placeholder="输入标题关键字，不能超过20字符"
enterButton={<span><Icon type="search" className="mr5" /> 搜索</span>}
onSearch={(value) => setTitle(value)} />
{/* </div> */}
<div className="center-right-but">
<div className={classNames({ sortLink: true, active: orderBy === 'publishDateDesc' })} onClick={() => { changeSort('publishDateDesc') }}>时间降序<Icon type="arrow-down" /></div>
<span className="piece">|</span>
@ -109,13 +119,112 @@ export default (props) => {
</div>
}
function changeTab(key) {
setTab(key);
function onOpenChange(e) {
setCurPage(1);
setTitle('');
setOrderBy('publishDateDesc');
const latestOpenKey = e.find(key => openKeys.indexOf(key) === -1);
if (latestOpenKey == 'sub2') {
setTab('0');
} else if (latestOpenKey == 'sub1') {
setTab('7');
} else {
setTab('8');
}
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys([e]);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
}
function handleClick(e) {
setTab(e.key);
setCurPage(1);
setTitle('');
setOrderBy('publishDateDesc');
}
function cont(param, titleStr, key) {
return <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={activeColor} />
<span>{titleStr}</span>
</div>
{param.length === 5 && <span className="link" onClick={() => { handleClick({ key: key }) }}>查看更多 <Icon type="arrow-right" /></span>}
</div>
<ItemList
list={param}
itemClick={noticeClick}
/>
</React.Fragment>
}
function content() {
if (tab === '0') {
return <React.Fragment>
{callList.length <= 0 && changeList.length <= 0 && checkList.length <= 0 && abandonList.length <= 0 ? <Nodata _html="暂无数据" /> : ""}
{callList.length > 0 && cont(callList, "招标公告", '4')}
{changeList.length > 0 && cont(changeList, "更正公告", '1')}
{checkList.length > 0 && cont(checkList, "中标公告", '2')}
{abandonList.length > 0 && cont(abandonList, "废标公告", '3')}
</React.Fragment>
} else if (tab === '7') {
return <React.Fragment>
{technologyList.length <= 0 && dealList.length <= 0 ? <Nodata _html="暂无数据" /> : ""}
{technologyList.length > 0 && cont(technologyList, "技术资产", '5')}
{dealList.length > 0 && cont(dealList, "成交公告", '6')}
</React.Fragment>
} else if (tab === '8') {
return <div></div>
} else {
let titleStr;
switch (tab) {
case '1':
titleStr = "更正公告";
break;
case '2':
titleStr = "中标公告";
break;
case '3':
titleStr = "废标公告";
break;
case '4':
titleStr = "招标公告";
break;
case '5':
titleStr = "技术资产";
break;
default:
titleStr = "成交公告";
}
return <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<AbandonSvg color={defaultColor} />
<span>{titleStr}</span>
</div>
</div>
<ItemList
list={noticeList}
itemClick={noticeClick}
/>
{noticeList.length > 0 ? <div className="edu-txt-center mt30 mb30">
<Pagination
showQuickJumper
onChange={(page) => { setCurPage(page) }}
current={curPage}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div> : <Nodata _html="暂无数据" />}
</React.Fragment>
}
}
console.log('-------------render');
return (
<React.Fragment>
<img alt="图片加载失败" src={noticePng} width="100%"></img>
@ -124,273 +233,33 @@ export default (props) => {
<Link to="/">首页<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
<span>公告<span className="greater">&nbsp;&gt;&nbsp;</span> </span>
</div>
<Tabs activeKey={tab} tabPosition="left" onChange={(key) => { changeTab(key) }}>
<TabPane
tab={
<React.Fragment>
<AllSvg color={tab === '0' ? activeColor : defaultColor} />
<span>全部公告</span>
</React.Fragment>
}
key="0">
<div className="notice-center-content">
{
sortNav()
}
{
loading ? <Loading /> :
<React.Fragment>
{callList.length > 0 && <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={defaultColor} />
<span>招标公告</span>
</div>
{callList.length === 5 && <span className="link" onClick={() => { changeTab('4') }}>查看更多 <Icon type="arrow-right" /></span>}
</div>
<ItemList
list={callList}
itemClick={noticeClick}
/>
</React.Fragment>
}
{changeList.length > 0 && <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={defaultColor} />
<span>更正公告</span>
</div>
{changeList.length === 5 && <span className="link" onClick={() => { changeTab('1') }}>查看更多 <Icon type="arrow-right" /></span>}
</div>
<ItemList
list={changeList}
itemClick={noticeClick}
/>
</React.Fragment>
}
{checkList.length > 0 && <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={defaultColor} />
<span>中标公告</span>
</div>
{checkList.length === 5 && <span className="link" onClick={() => { changeTab('2') }}>查看更多 <Icon type="arrow-right" /></span>}
</div>
<ItemList
list={checkList}
itemClick={noticeClick}
/>
</React.Fragment>
}
{abandonList.length > 0 && <React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={defaultColor} />
<span>废标公告</span>
</div>
{abandonList.length === 5 && <span className="link" onClick={() => { changeTab('3') }}>查看更多 <Icon type="arrow-right" /></span>}
</div>
<ItemList
list={abandonList}
itemClick={noticeClick}
/>
</React.Fragment>
}
{changeList.length === 0 && checkList.length === 0 && abandonList.length === 0 && <Nodata _html="暂无数据" />}
</React.Fragment>
}
</div>
</TabPane>
<TabPane
tab={
<React.Fragment>
<CallSvg color={tab === '4' ? activeColor : defaultColor} />
<span>招标公告</span>
</React.Fragment>
}
key="4">
<div className="notice-center-content">
{
sortNav()
}
{
loading ? <Loading /> :
<React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<CallSvg color={defaultColor} />
<span>招标公告</span>
</div>
</div>
<ItemList
list={noticeList}
itemClick={noticeClick}
/>
{noticeList.length > 0 ? <div className="edu-txt-center mt30 mb30">
<Pagination
showQuickJumper
onChange={(page) => { setCurPage(page) }}
current={curPage}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div> : <Nodata _html="暂无数据" />}
</React.Fragment>
}
</div>
</TabPane>
<TabPane
tab={
<React.Fragment>
<ChangeSvg color={tab === '1' ? activeColor : defaultColor} />
<span>更正公告</span>
</React.Fragment>
}
key="1">
<div className="notice-center-content">
{
sortNav()
}
{
loading ? <Loading /> :
<React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<ChangeSvg color={defaultColor} />
<span>更正公告</span>
</div>
</div>
<ItemList
list={noticeList}
itemClick={noticeClick}
/>
{noticeList.length > 0 ? <div className="edu-txt-center mt30 mb30">
<Pagination
showQuickJumper
onChange={(page) => { setCurPage(page) }}
current={curPage}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div> : <Nodata _html="暂无数据" />}
</React.Fragment>
}
</div>
</TabPane>
<TabPane
tab={
<React.Fragment>
<CheckSvg color={tab === '2' ? activeColor : defaultColor} />
<span>中标公告</span>
</React.Fragment>
}
key="2">
<div className="notice-center-content">
{
sortNav()
}
{
loading ? <Loading /> :
<React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<CheckSvg color={defaultColor} />
<span>中标公告</span>
</div>
</div>
<ItemList
list={noticeList}
itemClick={noticeClick}
/>
{noticeList.length > 0 ? <div className="edu-txt-center mt30 mb30">
<Pagination
showQuickJumper
onChange={(page) => { setCurPage(page) }}
current={curPage}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div> : <Nodata _html="暂无数据" />}
</React.Fragment>
}
</div>
</TabPane>
<TabPane
tab={
<React.Fragment>
<AbandonSvg color={tab === '3' ? activeColor : defaultColor} />
<span>废标公告</span>
</React.Fragment>
}
key="3">
<div className="notice-center-content">
{
sortNav()
}
{
loading ? <Loading /> :
<React.Fragment>
<div className="item-head-title">
<div className="item-head-title-content">
<AbandonSvg color={defaultColor} />
<span>废标公告</span>
</div>
</div>
<ItemList
list={noticeList}
itemClick={noticeClick}
/>
{noticeList.length > 0 ? <div className="edu-txt-center mt30 mb30">
<Pagination
showQuickJumper
onChange={(page) => { setCurPage(page) }}
current={curPage}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div> : <Nodata _html="暂无数据" />}
</React.Fragment>
}
</div>
</TabPane>
</Tabs>
<div className="body">
<div className="navigationMenu">
<Menu
onClick={handleClick}
style={{ width: 216 }}
mode="inline"
openKeys={openKeys}
onOpenChange={onOpenChange}
>
<SubMenu id={tab === '0' ? "menu-selected" : "menu"} key="sub2" title={<span className="itemClass"><AllSvg color={tab === '0' ? activeColor : svgColor} /><span className="subMenuspan">项目公告</span></span>} >
<Menu.Item key="4" id={tab === '4' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '4' ? activeColor : svgColor} />招标公告</span></Menu.Item>
<Menu.Item key="1" id={tab === '1' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '1' ? activeColor : svgColor} />更正公告</span></Menu.Item>
<Menu.Item key="2" id={tab === '2' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '2' ? activeColor : svgColor} />中标公告</span></Menu.Item>
<Menu.Item key="3" id={tab === '3' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '3' ? activeColor : svgColor} />废标公告</span></Menu.Item>
</SubMenu>
<SubMenu id={tab === '7' ? "menu-selected" : "menu"} key="sub1" title={<span className="itemClass"><AllSvg color={tab === '7' ? activeColor : svgColor} /><span className="subMenuspan">成果转化</span></span>}>
<Menu.Item key="5" id={tab === '5' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '5' ? activeColor : svgColor} />技术资产</span></Menu.Item>
<Menu.Item key="6" id={tab === '6' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '6' ? activeColor : svgColor} />成交公告</span></Menu.Item>
</SubMenu>
</Menu>
</div>
<div className="notice-center-content">
{sortNav()}
{loading ? <Loading /> : content()}
</div>
</div>
</div>
</React.Fragment>
)
}

47
src/military/notice/noticeList/index.scss
View File

@ -1,3 +1,6 @@
body{
caret-color: rgba(0, 0, 0, 0);
}
.notice-list{
.ant-tabs {
.ant-tabs-left-bar{
@ -42,20 +45,18 @@
justify-content: space-between;
padding: .625rem 1rem .5rem;
background: #f5f5f5;
width: 920px;
}
.notice-center-content{
padding:1.25rem;
background: #fff;
}
.item-head-title{
display: flex;
justify-content: space-between;
align-items: center;
// height: 3.75rem;
padding: 1.25rem 0 .6rem 0;
.item-head-title-content{
display: flex;
@ -96,3 +97,43 @@
}
}
.body{
display: flex;
justify-content: space-between;
}
Menu.Item{
display: flex;
align-items: center;
}
#menu-selected{
background-color: #1890ff;
color: #fff;
.subMenuspan{
color: #fff;
}
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
background-color: #fff;
color: #595959;
}
.ant-menu-item-active{
color: #1890ff;
}
.ant-menu-submenu-selected{
color: #595959;
}
.itemClass{
display: flex;
align-items: center;
font-size: 18px;
svg{
margin-right:.75em;
}
}