forgeplus-react/src/forge/Source/Index.jsx

import React, { useEffect, useState } from 'react';
import './Index.scss';
import { Blueback , FlexAJ } from '../Component/layout';
import { Dropdown, Input , Menu , Pagination } from 'antd';
import { Link } from 'react-router-dom';
import UploadSource from './UploadSource';
import axios from 'axios';

const { Search } = Input;
const sort = [
  "按上传时间排序",
  "按下载次数排序",
  "按引用排序"
]
const limit = 15;
const https = 'http://117.50.100.12:8001';
function Index(props){
  const [ sortValue , setSortValue ] = useState(1);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ search , setSearch ] = useState(undefined);

  const [ visible , setVisible ] = useState(false);
  const repo_id = props.projectDetail && props.projectDetail.repo_id;
  const owner = props.match.params.owner;

  useEffect(()=>{
    if(owner && repo_id){
      getData();
    }
  },[repo_id,owner,search,sort,page])

  function getData(){
    const url = https +`/api/project/achievement/`;
    axios.get(url,{
      params:{
        projectId:repo_id,
        curPage:page,
        pageSize:limit,
        name:search,
        sort:sortValue,
      }
    }).then(result=>{
      if(result && result.data){

      }
    }).catch(error=>{})
  }

  // 搜索
  function onSearch(value){
    setSearch(value);
  }

  // 切换排序方式
  function changeSort(e,index){
    setSortValue(index);
  }


  const menu=(
    <Menu>
      {
        sort && sort.map((item,key)=>{
          return(
            <Menu.Item onClick={(e)=>changeSort(e,key+1)} value={key} className={key+1 === sortValue ?"color-blue":""}>{item}</Menu.Item>     
          )
        })
      }
    </Menu>
  )

  const listmenu=(
    <Menu>
      <Menu.Item>更新版本</Menu.Item>
      <Menu.Item>设为私有</Menu.Item>
      <Menu.Item>删除资源</Menu.Item>
    </Menu>
  )

  // 上传资源确定
  function onOk(){

  }

  // 删除标签
  function removeTagFunc(){

  }

  return(
    <div className="sourcePanel">
      <UploadSource visible={visible} onCancel={()=>setVisible(false)} onOk={onOk} showNotification={props.showNotification}/>
      <div className="headtitle">
        <FlexAJ>
          <span className="font-18">资源库(18)</span>
          <Blueback onClick={()=>setVisible(true)}>上传资源</Blueback>
        </FlexAJ>
      </div>
      <FlexAJ className="subHeadtitle">
        <Search 
          placeholder="在项目内搜索资源" 
          onSearch={onSearch} 
          allowClear 
          enterButton="搜索"
          width="220px"
        />
        <Dropdown overlay={menu} placement="bottomRight">
          <span className="color-grey-9">{sort[sortValue]}<i className="iconfont icon-sanjiaoxing-down font-16 color-grey-9 ml3"></i></span>
        </Dropdown>
      </FlexAJ>
      <div className="bodycontent">
        <ul className="bodycontentul">
          <li>
            <Link to= {`/users/`} className="infoImg"><img src={`https://testforgeplus.trustie.net/images/avatars/User/b`} alt="" /></Link>
            <div style={{flex:'1',width:"0"}}>
              <FlexAJ>
                <a href={``} className="infoname">DaVinci.fdb</a>
                <Dropdown overlay={listmenu} placement={'bottomRight'}>
                  <i className="iconfont icon-gengduo1 color-grey-6"></i>
                </Dropdown>
              </FlexAJ>
              <p className="infos">
                <span>上传时间：<span>2021-03-30</span></span>
                <span>上传类型：<span>软件版本</span></span>
                <span>文件大小：<span>10KB</span></span>
                <span>下载：<span>111</span></span>
              </p>
              <p className="infodesc task-hide-2">资源描述资源描述资源描述资源描述资源描述资源描述资源描述</p>
              <div className="infotag">
                <span>软件版本<i className="iconfont icon-guanbi font-12 ml2" onClick={removeTagFunc}></i></span>
              </div>
            </div>
          </li>
        </ul>
        {
          total > limit && 
          <div className="pt20 pb20 edu-txt-center">
            <Pagination 
              simple
              current={page}
              pageSize={limit}
              total={total}
              onChange={(p)=>{setPage(p)}}
            />
          </div>
        }
      </div>
    </div>
  )
}
export default Index;