资源发布-zone

src/forge/Information/Component/publicBanner.jsx

@@ -1,6 +1,5 @@
 import React , { useState , useEffect } from 'react';
 import { Menu } from 'antd';
-import banner from '../img/mainbanner.png'
 import { Link } from 'react-router-dom';
 import { tempConfig } from '../tempInfo';
 import TopEdition from './TopEdition'
@@ -18,6 +17,7 @@ function PublicBanner(props){
       const info = /[A-Za-z0-9]{0,}\/news/g;
       const infodetail = /[A-Za-z0-9]{0,}\/newdetail/g;
       const project = /[A-Za-z0-9]{0,}\/projects/g;
+      const source = /[A-Za-z0-9]{0,}\/source/g;
       const vip = /[A-Za-z0-9]{0,}\/VIP/g;
       if(pathname === `/zone/${deptId}`){
         setKey("1");
@@ -25,6 +25,9 @@ function PublicBanner(props){
       else if(project.test(pathname)){
         setKey("2");
       }
+      else if(source.test(pathname)){
+        setKey("3");
+      }
       else if(info.test(pathname) || infodetail.test(pathname)){
         setKey("4");
       }
@@ -48,7 +51,7 @@ function PublicBanner(props){
         <Menu mode={"horizontal"} selectedKeys={[key]}>
           <Menu.Item key={"1"}><Link to={`/zone/${deptId}`}><img src={require(`../img/${temp}Menu1.png`)} alt="" width="29px"/>首页</Link></Menu.Item>
           <Menu.Item key={"2"}><Link to={`/zone/${deptId}/projects`}><img src={require(`../img/${temp}Menu2.png`)} alt="" width="34px"/>开源项目</Link></Menu.Item>
-          {/* <Menu.Item key={"3"}><img src={Menu3} alt="" width="33px"/>资源发布</Menu.Item> */}
+          <Menu.Item key={"3"}><Link to={`/zone/${deptId}/source`}><img src={require(`../img/${temp}Menu3.png`)} alt="" width="33px"/>资源发布</Link></Menu.Item>
           <Menu.Item key={"4"}><Link to={`/zone/${deptId}/news`}><img src={require(`../img/${temp}Menu4.png`)} alt="" width="32px"/>{ tempConfig[temp].mainTitle }</Link></Menu.Item>
           {/* <Menu.Item key={"5"}><img src={Menu5} alt="" width="27px"/>Sig小组</Menu.Item> */}
           <Menu.Item key={"6"}><Link to={`/zone/${deptId}/VIP`}><img src={require(`../img/${temp}Menu6.png`)} alt="" width="36px"/>{ tempConfig[temp].member }</Link></Menu.Item>

src/forge/Information/Pages/source.jsx

@@ -0,0 +1,140 @@
+import React , { useEffect , useState } from 'react';
+import { Input , Pagination, Spin } from 'antd';
+import SourceIcon from '../img/sourceIcon.png';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { getSourceTypeList , getSourceList , getSourceZoneList } from '../api';
+import Nodata from '../../Nodata';
+
+const { Search } = Input;
+
+function Source(props){
+  const { deptId } = props.match.params;
+  const [ sourceList , setSourceList ] = useState(undefined);
+  const [ zoneList , setZoneList ] = useState(undefined);
+  const [ typeList , setTypeList ] = useState(undefined);
+  const [ chooseZoneId , setChooseZoneId ] = useState(undefined);
+  const [ chooseTypeId , setChooseTypeId ] = useState(undefined);
+  const [ page , setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const [ search , setSearch ] = useState(undefined);
+  const [ isSpin , setIsSpin ] = useState(true);
+  const limit = 20;
+  const { id , temp } = props;
+
+
+  useEffect(()=>{
+    id && getLists();
+  },[id,chooseTypeId,chooseZoneId,page,search])
+
+  useEffect(()=>{
+    id && getZoneList();
+    id && getTypeList();
+  },[id])
+
+  function getZoneList(){
+    getSourceZoneList(id).then(response=>{
+      if(response && response.data){
+        setZoneList(response.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getTypeList(){
+    getSourceTypeList(id).then(response=>{
+      if(response && response.data){
+        setTypeList(response.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getLists(){
+    setIsSpin(true);
+    getSourceList({
+      id,pageSize:limit,pageNum:page,typeId:chooseTypeId,domainId:chooseZoneId,name:search
+    }).then(response=>{
+      if(response){
+        setSourceList(response.data.rows);
+        setTotal(response.data.total);
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+
+
+  function onSourceSearch(value){
+    setSearch(value);
+    setPage(1);
+  }
+
+  return(
+    <div style={{paddingTop:"56px"}}>
+      <p className="in_title">资源发布</p>
+      <div style={{marginTop:"30px",textAlign:"center"}}>
+        <Search 
+          placeholder="请输入资源名称(共180个资源)"
+          onSearch={onSourceSearch}
+          style={{width:'645px',borderColor:"#fff",boxShadow:"0px 0px 10px rgba(61, 85, 183, 0.1)"}}
+          size="large"
+          className="source_search_box"
+          enterButton={<span><i className="iconfont icon-sousuo5 font-15"/>搜索</span>}
+        />
+      </div>
+      <div className="sources">
+        <ul className="source_left_ul">
+          <p>资源领域</p>
+          {
+            zoneList && zoneList.length>0&&
+            zoneList.map((i,k)=>{
+              return(
+                <li key={k} onClick={()=>{setChooseZoneId(i.id === chooseZoneId ?undefined : i.id)}} className={chooseZoneId && chooseZoneId === i.id ? "active":"" }>{i.name}</li>
+              )
+            })
+          }
+          <p>资源类别</p>
+          {
+            typeList && typeList.length>0&&
+            typeList.map((i,k)=>{
+              return(
+                <li key={k} onClick={()=>{setChooseTypeId(i.id === chooseTypeId ?undefined : i.id)}} className={chooseTypeId && chooseTypeId === i.id ? "active":"" }>{i.name}</li>
+              )
+            })
+          }
+        </ul>
+        <Spin spinning={isSpin}>
+          <div style={{width:"945px"}}>
+          {
+            sourceList && sourceList.length > 0 &&
+            <div className="source_lists">
+              {sourceList.map((i,k)=>{
+                return(
+                    <div className="source_lists_card" key={k}>
+                      <Link to={`/zone/${deptId}/source/${i.id}`} className="task-hide">{i.name}</Link>
+                      <p className="task-hide-2 desc">
+                      {i.introduction}
+                      </p>
+                      <p className="load_count"><img src={SourceIcon} alt="" width="18px" className="mr5"/><span style={{color:"#5e6685"}}>{i.downloadCount}</span></p>
+                    </div>
+                  )
+                })
+            }
+            </div>
+          }
+          {sourceList && sourceList.length === 0 && 
+            <div style={{textAlign:'center'}}>
+              <Nodata _html="暂无数据"/>
+            </div>
+          }
+          {
+            total > limit &&
+            <div style={{textAlign:'center',padding:"20px 0px"}}>
+              <Pagination pageSize={limit} total={total} current={page} onChange={(p)=>setPage(p)} showQuickJumper/>
+            </div>
+          }
+          </div>
+        </Spin>
+      </div>
+    </div>
+  )
+}
+export default Source;

src/forge/Information/Pages/sourceDetail.jsx

@@ -0,0 +1,67 @@
+import React , { useEffect , useState } from 'react';
+import { Breadcrumb } from 'antd';
+import SourceFile from '../img/sourceFile.png';
+import RenderHtml from '../../../components/render-html';
+import { getSourceDetail } from '../api';
+
+
+function SourceDetail(props){
+  const { deptId , sourceid } = props.match.params;
+  const [ detail , setDetail ] = useState(undefined);
+
+  useEffect(()=>{
+    if(sourceid){
+      getDetails();
+    }
+  },[sourceid])
+
+  function getDetails(){
+    getSourceDetail(sourceid).then(response=>{
+      if(response){
+        setDetail(response.data.data);
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <div className="boxmain"style={{paddingBottom:"40px"}}>
+      <Breadcrumb separator=">" style={{paddingTop:"20px"}}>
+        <Breadcrumb.Item href={`/zone/${deptId}/source`}>资源列表</Breadcrumb.Item>
+        <Breadcrumb.Item>详情页</Breadcrumb.Item>
+      </Breadcrumb>
+      {
+        detail &&
+        <div className="source_detail_box">
+          <div className="s_d_title">{detail.name}</div>
+          {
+            detail.fileList && detail.fileList.length > 0 &&
+            <ul className="files_box">
+              {
+                detail.fileList.map((i,k)=>{
+                  return(
+                    <li>
+                      <img src={SourceFile} alt="" width="30px" className="mr12"/>
+                      <span className="task-hide">{i.fileOriginName}</span>
+                      <span>{i.fileSizeInfo}</span>
+                      <a href="" className="f_b_load">下载</a>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          }
+          
+          { detail.introduction && 
+            <div style={{padding:"20px 0px"}}>
+              <RenderHtml 
+                className="source_detail imageLayerParent" 
+                value={detail.introduction} 
+                url={props.history.location} 
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  )
+}
+export default SourceDetail;

src/forge/Information/api.js

@@ -98,4 +98,31 @@ export function applyJoin(id,data) {
     method: 'post',
     data: data
   });
+}
+
+// 资源模块
+export function getSourceTypeList(id){
+  return fetch({
+    url:`/zone/open/${id}/resourceType/list`,
+    method: 'get',
+  })
+}
+export function getSourceZoneList(id){
+  return fetch({
+    url:`/zone/open/${id}/resourceDomain/list`,
+    method: 'get',
+  })
+}
+export function getSourceList(params){
+  return fetch({
+    url:`/zone/open/${params.id}/resource/list`,
+    method: 'get',
+    params
+  })
+}
+export function getSourceDetail(id){
+  return fetch({
+    url:`/zone/open/resource/detail/${id}`,
+    method: 'get'
+  })
 }

src/forge/Information/index.jsx

@@ -15,10 +15,18 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { tempEnum } from "./tempInfo";
 
+const SourceDetail = Loadable({
+  loader: () => import("./Pages/sourceDetail"),
+  loading: Loading,
+});
 const VIP = Loadable({
   loader: () => import("./Pages/zoneVIP"),
   loading: Loading,
 });
+const Source = Loadable({
+  loader: () => import("./Pages/source"),
+  loading: Loading,
+});
 const HeaderPage = Loadable({
   loader: () => import("./Pages/headerPage"),
   loading: Loading,
@@ -115,6 +123,18 @@ function Index(props){
             <NewsDetail {...props} {...p} id={id} temp={ temp }/>
           )}
         ></Route>
+        <Route
+          path="/zone/:deptId/source/:sourceid"
+          render={(p) => (
+            <SourceDetail {...props} {...p} id={id} temp={ temp }/>
+          )}
+        ></Route>
+        <Route
+          path="/zone/:deptId/source"
+          render={(p) => (
+            <Source {...props} {...p} id={id} temp={ temp }/>
+          )}
+        ></Route>
         <Route
           path="/zone/:deptId/VIP"
           render={(p) => (

src/forge/Information/index.scss

@@ -1221,4 +1221,108 @@
     line-height: 32px;
     margin-bottom: 8px!important;
   }
+}
+.source_search_box{
+  .ant-input-lg{
+    border-color: #fff;
+  }
+}
+.sources{
+  display: flex;
+  align-items: flex-start;
+  padding:45px 0px;
+  .source_left_ul{
+    width: 610px;
+    background-image:linear-gradient(89.9deg,#f5f7fa 0%,#f5f7fa 70.54%,rgba(255, 255, 255, 0.97) 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding:5px 0px;
+    margin-right: 6px;
+    p,li{
+      height: 60px;
+      line-height: 60px;
+      padding-left: 34px;
+      width: 250px;
+    }
+    p{
+      font-weight:700;
+      color:#1f2329;
+      font-size:18px;
+    }
+    li{
+      border-right: 3px solid #fff;
+      font-weight:500;
+      color:#3d485d;
+      cursor: pointer;
+      font-size:16px;
+      &.active{
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+        background-image:linear-gradient(89.9deg,rgba(70, 106, 255, 0) 0%,rgba(70, 106, 255, 0.09) 100%);
+      }
+    }
+  }
+  .source_lists{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .source_lists_card{
+      margin-left: 29px;
+      width: 286px;
+      min-height: 180px;
+      background-color: rgba(255, 255, 255, 0.986);
+      padding:20px;
+      margin-bottom: 29px;
+      position: relative;
+      background-image: url(./img/sourceCardBack.png); 
+      background-size: 100% 100%;
+      border-radius: 2px;
+      a.task-hide{
+        color:#1f2329;
+        font-size:16px;
+        height: 28px;
+        line-height: 28px;
+        display: block;
+        margin-bottom: 15px;
+      }
+      .desc{
+        color:#4c5876;
+        height: 54px;
+        line-height: 27px;
+        margin-bottom: 14px!important;
+      }
+    }
+  }
+}
+.source_detail_box{
+  background-color: #fff;
+  padding:10px 35px 30px;
+  .s_d_title{
+    padding:25px 0px;
+    border-bottom: 1px dashed rgba(141, 149, 172, 0.27);
+    color:#1f2329;
+    font-size:22px;
+    margin-bottom: 20px!important;
+  }
+  .files_box{
+    padding:11px 30px;
+    background-color:#f6f8fa;
+    li{
+      display: flex;
+      align-items: center;
+      height: 42px;
+      &>span{
+        color:#3d485d;
+        font-size:15px;
+        min-width: 190px;
+        &.task-hide{
+          min-width: 400px;
+        }
+      }
+      &>a{
+        color: var(--primary-color);
+      }
+    }
+  }
 }