forgeplus-react/src/forge/Main/version/version.js

import React, { useEffect , useState } from "react";
import { Link } from 'react-router-dom';
import { Spin , Button } from 'antd';
import { getImageUrl } from 'educoder';
import {truncateCommitId} from '../../common/util';
import Empty from './Empty';
import './version.scss';
import axios from 'axios';
import Tree from '../img/tree-black.png';
import RenderHtml from '../../../components/render-html';
import User from "../../Component/User";

function version(props) {
  const [ data , setData ] = useState(undefined);
  const [ releases , setReleases ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const { projectsId ,owner } = props.match.params;
  const { location } = props;
  const type = props.projectDetail && props.projectDetail.type;
  const turnFromNew = location && location.query && location.query.turnFromNew;
  useEffect(()=>{
    getIssueList();
  },[])
  // 获取列表数据
  function getIssueList(){
    const url = `/${owner}/${projectsId}/releases.json`;
    axios.get(url).then((result) => {
      if (result) {
        setData(result.data);
        const { releases = [] } = result.data;
        //默认第一个展开（body参数)
        releases.length && (releases[0].bodyshow = true);
        setReleases(result.data.releases);
        setIsSpin(false);
      }
    }).catch((error) => {
      console.log(error);
    })
  }
  // 显示版本描述
  function showBody(key,flag){
    var lists = releases.concat();
    lists[key].bodyshow = !flag ? true : false;
    lists.splice();
    setReleases(lists);
  }
  //删除
  function deleteRelease(releaseId) {
    if(releaseId){
      axios.delete(`/${owner}/${projectsId}/releases/${releaseId}.json`).then((result)=>{
        if(result){
          getIssueList();
        }
      })
    }
  }
  function release(item,key){
    return (
      <div className="versionInfo" key={key}>
        <span className="versionInfo_left">
          <span className={`${item.draft === "稳定" ?"versionTag green":"versionTag orange"}`}>{item.draft}</span>
          <span className="color-grey-3 mt15 font-12">
            <i className="iconfont icon-biaoqianicon mr3 font-14"></i>
            <Link className="hover" to={`/${owner}/${projectsId}/tree/${item.tag_name}`} >{item.tag_name}</Link>
          </span>
          <span className="color-grey-3 font-12">
            <img src={Tree} width="16px" color="#333333" className="mr3"/>
            <Link className="hover" to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`}>{truncateCommitId(item.sha)}</Link>
          </span>
        </span>
        <div className="versionInfo_right">
          <div className="versionName">
            <Link to={`/${owner}/${projectsId}/tree/${item.tag_name}`} className="task-hide color-blue hover font-18">{item.name}</Link>
            <span>
            {data && data.user_admin_permission && type !== 2 && <Link to={{pathname:`/${owner}/${projectsId}/releases/${item.version_id}/update`,state:{"stable":item.draft==="稳定"}}} className="ml15"><i className="iconfont icon-a-bianji1 font-16 color-grey-6"></i></Link>}
            {data && data.user_admin_permission && type !== 2 && <i className ="iconfont icon-shanchuicon1 font-16 ml15" onClick={()=>{deleteRelease(item.version_id)}}></i>}
            </span>
          </div>
          <span className="color-grey-3 mb15 version-user">
            <i className={`${item.bodyshow ? "iconfont icon-sanjiaoxing-down color-grey-8 mr3 font-14":"iconfont icon-triangle color-grey-8 mr3 font-14"}`} onClick={()=>showBody(key,item.bodyshow)}></i>
            <User
              id={item.id}
              url={(item.image_url && getImageUrl(`/${item.image_url}`)) || "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
              name={item.user_name}
              login={item.user_login}
            />
            <span className="ml5">发布于{item.created_at}</span>
          </span>
          {
            item.bodyshow && 
            <div className="body-show">
              <RenderHtml className="break_word_comments imageLayerParent" value={item.body || ''} url={props.history.location}/>
            </div>
          }
          <RenderHtml />
          <p className="versionFile">
            {/* 发行版附件下载 */}
            {item.attachments && item.attachments.map((item)=>{
              return(<a href={item.url}><i className="iconfont icon-wenjian7 font-14 mr10 color-grey-3"></i>下载  {item.title}</a>)
            })}
            {/* 发行版下载包 */}
            <a href={item.tarball_url}><i className="iconfont icon-wenjian7 font-14 mr10 color-grey-3"></i>下载  {item.tag_name}.TAR.gz</a>
            <a href={item.zipball_url}><i className="iconfont icon-wenjian7 font-14 mr10 color-grey-3"></i>下载  {item.tag_name}.ZIP</a>
          </p>
        </div>
      </div>
    )
  }
  function renderList(releases){
    if (releases && releases.length > 0) {
      return (
        <React.Fragment>
          {
            data && data.user_admin_permission && type !== 2 &&
            <div className="addReleaseBtn">
              <Button type={"primary"} onClick={addFunc} className="btnblue" style={{height:"36px"}}>发布新版本</Button>
            </div>
          }
          <div>
            {!turnFromNew ? releases.map((item, key) => release(item,key)) : release(releases[0],0)}
          </div>
        </React.Fragment>
      )
    } else if (releases && releases.length === 0) {
      return (
        <Empty 
          operation={data && data.user_admin_permission && type !== 2} 
          addFunc={addFunc}
        />
      )
    } else{
      return (<div></div>)
    }
  }

  function addFunc(){
    props.history.push({pathname:`/${owner}/${projectsId}/releases/new`,state:{stable:true}});
  }

  return (
    <div className="releaseIndex">
      <div className="releasesVersion">
        <Spin spinning={isSpin}>
          {renderList(releases)}
        </Spin>
      </div>
    </div>
  )
}
export default version;