forked from Gitlink/forgeplus-react
284 lines
11 KiB
JavaScript
284 lines
11 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import classNames from 'classnames';
|
||
import { Menu, Pagination, Icon, Input } from 'antd';
|
||
import { Link } from "react-router-dom";
|
||
import ItemList from '../components/itemList';
|
||
import Nodata from '../../../forge/Nodata';
|
||
import Loading from "../../../Loading";
|
||
// import { AbandonSvg, AllSvg, ChangeSvg, CallSvg, CheckSvg } from '../svg';
|
||
import noticePng from '../image/banner.png';
|
||
import { getNoticeList } from '../api';
|
||
|
||
import './index.scss';
|
||
const Search = Input.Search;
|
||
// const { SubMenu } = Menu;
|
||
|
||
// const defaultColor = '#848684';
|
||
// const activeColor = '#ffffff';
|
||
// const svgColor = '#1890ff';
|
||
|
||
export default (props) => {
|
||
|
||
const [tab, setTab] = useState('0');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const [title, setTitle] = useState(undefined);
|
||
const [orderBy, setOrderBy] = useState('publishDateDesc');
|
||
|
||
const [curPage, setCurPage] = useState(1);
|
||
const [total, setTotal] = useState(0);
|
||
const [noticeList, setNoticeList] = useState([]);
|
||
|
||
const [callList, setCallList] = useState([]);
|
||
const [changeList, setChangeList] = useState([]);
|
||
const [checkList, setCheckList] = useState([]);
|
||
const [abandonList, setAbandonList] = useState([]);
|
||
const [technologyList, setTechnologyList] = useState([]);
|
||
const [dealList, setDealList] = useState([]);
|
||
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
if (tab === '0' || tab === '7') {
|
||
const params = {
|
||
orderBy,
|
||
curPage: 1,
|
||
isChecked: 1,
|
||
pageSize: 5,
|
||
status: 1,
|
||
type: 1,
|
||
title,
|
||
flag: 1, //后台管理查询：2；前台展示：1
|
||
};
|
||
getNoticeList(params).then(data => {
|
||
setChangeList(data.rows);
|
||
});
|
||
getNoticeList({ ...params, type: 4 }).then(data => {
|
||
setCallList(data.rows);
|
||
setLoading(false);
|
||
});
|
||
getNoticeList({ ...params, type: 2 }).then(data => {
|
||
setCheckList(data.rows);
|
||
});
|
||
getNoticeList({ ...params, type: 3 }).then(data => {
|
||
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,
|
||
curPage,
|
||
isChecked: 1,
|
||
pageSize: 10,
|
||
status: 1,
|
||
title,
|
||
type: tab,
|
||
flag: 1, //后台管理查询：2；前台展示：1
|
||
};
|
||
getNoticeList(params).then(data => {
|
||
setNoticeList(data.rows);
|
||
setTotal(data.total);
|
||
setLoading(false);
|
||
})
|
||
}
|
||
}, [tab, title, orderBy, curPage]);
|
||
|
||
function changeSort(sortType) {
|
||
setOrderBy(sortType);
|
||
setCurPage(1);
|
||
}
|
||
|
||
function noticeClick(id) {
|
||
props.history.push(`/notice/noticeDetail/${id}`);
|
||
}
|
||
|
||
function sortNav() {
|
||
return <div className="notice-sort-nav">
|
||
<Search
|
||
maxLength={20}
|
||
style={{ width: "56%" }}
|
||
placeholder="输入标题关键字，不能超过20字符"
|
||
enterButton={<span><Icon type="search" className="mr5" /> 搜索</span>}
|
||
onSearch={(value) => setTitle(value)} />
|
||
<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>
|
||
<div className={classNames({ sortLink: true, active: orderBy === 'publishDateAsc' })} onClick={() => { changeSort('publishDateAsc') }}>时间升序<Icon type="arrow-up" /></div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
// function onOpenChange(e) {
|
||
// if(e.length===2){
|
||
// if(e[1]==='sub1'){
|
||
// setTab('0');
|
||
// }else{
|
||
// setTab('7');
|
||
// }
|
||
// }else{
|
||
// if(e[0]==='sub1'){
|
||
// setTab('0');
|
||
// } else if (e[0] == 'sub2') {
|
||
// setTab('7');
|
||
// } else {
|
||
// setTab('8');
|
||
// }
|
||
// }
|
||
// setCurPage(1);
|
||
// setTitle('');
|
||
// setOrderBy('publishDateDesc');
|
||
// }
|
||
|
||
function handleClick(e) {
|
||
setTab(e.key);
|
||
setCurPage(1);
|
||
setTitle('');
|
||
setOrderBy('publishDateDesc');
|
||
}
|
||
|
||
function cont(param, titleStr, key,svgStr) {
|
||
return <React.Fragment>
|
||
<div className="item-head-title">
|
||
<div className="item-head-title-content">
|
||
<i className={svgStr}></i>
|
||
<span>{titleStr}</span>
|
||
</div>
|
||
{param.length === 5 && <span className="link" onClick={() => { handleClick({ key: key }) }}>查看更多 <Icon type="arrow-right" /></span>}
|
||
</div>
|
||
{param.length>0?<ItemList
|
||
list={param}
|
||
itemClick={noticeClick}
|
||
/>:<Nodata _html="暂无数据" />}
|
||
{/* <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="暂无数据" /> : ""} */}
|
||
{cont(callList, "招标公告", '4',"iconfont icon-zhaobiaogonggao")}
|
||
{cont(changeList, "更正公告", '1',"iconfont icon-gengzhenggonggao")}
|
||
{cont(checkList, "中标公告", '2',"iconfont icon-zhongbiaogonggao")}
|
||
{cont(abandonList, "废标公告", '3',"iconfont icon-feibiaogonggao")}
|
||
</React.Fragment>
|
||
} else if (tab === '7') {
|
||
return <React.Fragment>
|
||
{/* {technologyList.length <= 0 && dealList.length <= 0 ? <Nodata _html="暂无数据" /> : ""} */}
|
||
{/* {technologyList.length > 0 && cont(technologyList, "技术资产", '5',"iconfont icon-jishuzichan")} */}
|
||
{cont(technologyList, "技术资产", '5',"iconfont icon-jishuzichan")}
|
||
{cont(dealList, "成交公告", '6',"iconfont icon-chengjiaogonggao")}
|
||
</React.Fragment>
|
||
} else if (tab === '8') {
|
||
return <div></div>
|
||
} else {
|
||
let titleStr;
|
||
let svgStr;
|
||
switch (tab) {
|
||
case '1':
|
||
titleStr = "更正公告";
|
||
svgStr = "iconfont icon-gengzhenggonggao"
|
||
break;
|
||
case '2':
|
||
titleStr = "中标公告";
|
||
svgStr = "iconfont icon-zhongbiaogonggao"
|
||
break;
|
||
case '3':
|
||
titleStr = "废标公告";
|
||
svgStr = "iconfont icon-feibiaogonggao"
|
||
break;
|
||
case '4':
|
||
titleStr = "招标公告";
|
||
svgStr = "iconfont icon-zhaobiaogonggao"
|
||
break;
|
||
case '5':
|
||
titleStr = "技术资产";
|
||
svgStr = "iconfont icon-jishuzichan"
|
||
break;
|
||
default:
|
||
titleStr = "成交公告";
|
||
svgStr = "iconfont icon-chengjiaogonggao"
|
||
}
|
||
return <React.Fragment>
|
||
<div className="item-head-title">
|
||
<div className="item-head-title-content">
|
||
<i className={svgStr}></i>
|
||
<span>{titleStr}</span>
|
||
</div>
|
||
</div>
|
||
<ItemList
|
||
list={noticeList}
|
||
itemClick={noticeClick}
|
||
/>
|
||
{/* {noticeList.length === 10 && <div className="edu-txt-center mt30 mb30">
|
||
<Pagination
|
||
showQuickJumper
|
||
onChange={(page) => { setCurPage(page) }}
|
||
current={curPage}
|
||
total={total}
|
||
showTotal={total => `共 ${total} 条`}
|
||
/>
|
||
</div>} */}
|
||
{noticeList.length > 0 ? noticeList.length === 10 &&<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>
|
||
}
|
||
}
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<img alt="图片加载失败" src={noticePng} width="100%"></img>
|
||
<div className="centerbox notice-list clearfix">
|
||
<div className="head-navigation">
|
||
<Link to="/">首页<span className="greater"> > </span></Link>
|
||
<span>公告</span>
|
||
</div>
|
||
<div className="body">
|
||
<div className="navigationMenu">
|
||
<Menu
|
||
onClick={handleClick}
|
||
// style={{width: 216 }}
|
||
mode="inline"
|
||
// onOpenChange={onOpenChange}
|
||
// defaultSelectedKeys={['4']}
|
||
// defaultOpenKeys={['sub1']}
|
||
>
|
||
<Menu.Item key="0" id={tab === '0' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-xiangmugonggao"></i>项目公告</span></Menu.Item>
|
||
{/* <SubMenu id={tab === '0' ? "menu-selected" : "menu"} key="sub1" title={<span className="itemClass"><i className="iconfont icon-xiangmugonggao"></i><span className="subMenuspan">项目公告</span></span>} > */}
|
||
<Menu.Item key="4" id={tab === '4' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-zhaobiaogonggao" style={{marginLeft:'1.2em'}}></i>招标公告</span></Menu.Item>
|
||
<Menu.Item key="1" id={tab === '1' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-gengzhenggonggao" style={{marginLeft:'1.2em'}}></i>更正公告</span></Menu.Item>
|
||
<Menu.Item key="2" id={tab === '2' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-zhongbiaogonggao" style={{marginLeft:'1.2em'}}></i>中标公告</span></Menu.Item>
|
||
<Menu.Item key="3" id={tab === '3' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-feibiaogonggao" style={{marginLeft:'1.2em'}}></i>废标公告</span></Menu.Item>
|
||
{/* </SubMenu> */}
|
||
<Menu.Item key="7" id={tab === '7' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-chengguo"></i>成果转化</span></Menu.Item>
|
||
{/* <SubMenu id={tab === '7' ? "menu-selected" : "menu"} key="sub2" title={<span className="itemClass"><i className="iconfont icon-chengguo"></i><span className="subMenuspan">成果转化</span></span>}> */}
|
||
<Menu.Item key="5" id={tab === '5' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-jishuzichan" style={{marginLeft:'1.2em'}}></i>技术资产</span></Menu.Item>
|
||
<Menu.Item key="6" id={tab === '6' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-chengjiaogonggao" style={{marginLeft:'1.2em'}}></i>成交公告</span></Menu.Item>
|
||
{/* </SubMenu> */}
|
||
</Menu>
|
||
</div>
|
||
<div className="notice-center-content">
|
||
{sortNav()}
|
||
{loading ? <Loading /> : content()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
)
|
||
} |