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 { getImageUrl } from 'educoder';
import axios from 'axios';

const { Search } = Input;
const sort = [
  "按上传时间排序",
  "按下载次数排序",
  "按引用排序"
]
const limit = 15;
const https = 'https://testfiles.trustie.net';
function Index(props){
  const [ sortValue , setSortValue ] = useState(0);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ search , setSearch ] = useState(undefined);
  const [ data , setData ] = 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,sortValue,page])

  function getData(){
    const url = https +`/api/project/achievement/`;
    axios.get(url,{
      params:{
        projectId:repo_id,
        curPage:page,
        pageSize:limit,
        name:search,
        sort:sortValue+1,
      }
    }).then(result=>{
      if(result && result.data){
        setData(result.data.data.rows);
        setTotal(result.data.data.total);
      }
    }).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)} value={key} className={key=== 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(){
    getData();
  }

  // 删除标签
  function removeTagFunc(){

  }

  return(
    <div className="sourcePanel">
      <UploadSource 
        visible={visible} 
        onCancel={()=>setVisible(false)} 
        onOk={onOk} 
        showNotification={props.showNotification}
        owner={owner}
        projectsId={repo_id}
      />
      <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">
          {
            data && data.length> 0 && data.map((item,key)=>{
              return(
                <li>
                  <Link to= {`/users/${item.login}`} className="infoImg"><img src={getImageUrl(`${item.imageUrl}`)} alt="" /></Link>
                  <div style={{flex:'1',width:"0"}}>
                    <FlexAJ>
                      <a href={``} className="infoname">{item.fileName}</a>
                      <Dropdown overlay={listmenu} placement={'bottomRight'}>
                        <i className="iconfont icon-gengduo1 color-grey-6"></i>
                      </Dropdown>
                    </FlexAJ>
                    <p className="infos">
                      <span>上传时间：<span>{item.uploadTime}</span></span>
                      <span>文件大小：<span>{item.fileSize}</span></span>
                      <span>下载：<span>{item.download}</span></span>
                    </p>
                    <p className="infodesc task-hide-2">{item.remark}</p>
                    { item.tags && item.tags.length>0 && 
                      <div className="infotag">
                        {
                          item.tags.map((i,k)=>{
                            return(
                              <span>{i}<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;