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.png';
import RenderHtml from '../../../components/render-html';
import { result } from "lodash";

function version(props) {
  console.log(props);
  const [ data , setData ] = useState(undefined);
  const [ releases , setReleases ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const { projectsId ,owner } = props.match.params;
  const { isManager, isDeveloper, location , user } = props;
  const type = props.projectDetail && props.projectDetail.type;
  const turnFromNew = location && location.query && location.query.turnFromNew;
  const current_user_login = user && user.login;
  owner && console.log(owner);
  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) {
    console.log(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>
            {item.tag_name}{item.draft === "预发行" ?"(standalone)":""}
          </span>
          <span className="color-grey-3 font-12">
            <img src={Tree} width="16px" color="#333333" className="mr3"/>
            {truncateCommitId(item.sha)}
          </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}{item.draft === "预发行" ?"(standalone)版本":""}</Link>
            <span>
            {
              (isManager || isDeveloper) && type !==2 &&
              <Link to={`/${owner}/${projectsId}/releases/${item.version_id}/update`} className="ml15"><i className="iconfont icon-a-bianji1 font-16 color-grey-6"></i></Link>
            }
            {current_user_login == owner && <i className ="iconfont icon-shanchuicon1 font-16 ml15" onClick={()=>{deleteRelease(item.version_id)}}></i>}
            </span>
          </div>
          <span className="color-grey-3 mb15">
            <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>
            <img src={getImageUrl(item.image_url)} alt="" className="sendAuthorImg"/>
            <span className="weight500">{item.user_name}</span>
            <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">
            <a href={item.tarball_url}><i className="iconfont icon-tar font-14 mr10 color-grey-3"></i>{item.tag_name}.TAR.gz</a>
            <a href={item.zipball_url}><i className="iconfont icon-icon font-14 mr10 color-grey-3"></i>{item.tag_name}.ZIP</a>
          </p>
          {/* 发行版附件下载 */}
          {item.attachments && item.attachments.map((item)=>{
            return(<a href={`/${owner}/${projectsId}${item.url}`}>{item.title}</a>)
          })}
        </div>
      </div>
    )
  }
  function renderList(releases){
    if (releases && releases.length > 0) {
      return (
        <React.Fragment>
          {
            data && data.user_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_permission && type !== 2} 
          addFunc={addFunc}
        />
      )
    }
  }

  function addFunc(){
    props.history.push(`/${owner}/${projectsId}/releases/new`);
  }

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