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

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

src/military/notice/api.js

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

src/military/notice/noticeList/index.jsx

@@ -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 defaultColor = '#848684';
-const activeColor = '#fff';
+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) {
+  function onOpenChange(e) {
-    setTab(key);
+    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) }}>
+        <div className="body">
-          <TabPane
+          <div className="navigationMenu">
-            tab={
+            <Menu
-              <React.Fragment>
+              onClick={handleClick}
-                <AllSvg color={tab === '0' ? activeColor : defaultColor} />
+              style={{ width: 216 }}
-                <span>全部公告</span>
+              mode="inline"
-              </React.Fragment>
+              openKeys={openKeys}
-            }
+              onOpenChange={onOpenChange}
-            key="0">
+            >
-
+              <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>
-            <div className="notice-center-content">
+                <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>
-                sortNav()
+                <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>
-                loading ? <Loading /> :
+                <Menu.Item key="6" id={tab === '6' ? "menu-selected" : "menu"}><span className="itemClass"><CallSvg color={tab === '6' ? activeColor : svgColor} />成交公告</span></Menu.Item>
-                  <React.Fragment>
+              </SubMenu>
-
+            </Menu>
-                    {callList.length > 0 && <React.Fragment>
+          </div>
-                      <div className="item-head-title">
+          <div className="notice-center-content">
-                        <div className="item-head-title-content">
+            {sortNav()}
-                          <ChangeSvg color={defaultColor} />
+            {loading ? <Loading /> : content()}
-                          <span>招标公告</span>
+          </div>
-                        </div>
+        </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>
-
     </React.Fragment>
-
-
   )
 }

src/military/notice/noticeList/index.scss

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