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 Empty from './Empty';
import './version.scss';
import axios from 'axios';
import RenderHtml from '../../../components/render-html';

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 { isManager , isDeveloper } = props;
  const type = props.projectDetail && props.projectDetail.type;

  useEffect(()=>{
    getIssueList();
  },[])
  // 获取列表数据
  function getIssueList(){
    const url = `/${owner}/${projectsId}/releases.json`;
    axios.get(url).then((result) => {
      if (result) {
        setData(result.data);
        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 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>
            {
              releases.map((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">
                        <i className="iconfont icon-biaoqianicon mr3 font-14"></i>
                        {item.tag_name}{item.draft === "预发行" ?"(standalone)":""}
                      </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>
                        {
                          (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>
                        }
                      </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="padding10">
                          <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>
                    </div>
                  </div>
                )
              })
            }
          </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;