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

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import { Spin } from 'antd';
import NoneData from '../Nodata';
import './version.css';
import axios from 'axios';
import RenderHtml from '../../components/render-html';

/**
 * issue_chosen:下拉的筛选列表,
 * data:列表接口返回的所有数据,
 * issues:列表数组,
 * isSpin:加载中,
 */
class version extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issue_chosen: undefined,
      data: undefined,
      releases:undefined,
      issues: undefined,
      isSpin: true,
      search: undefined,
      search_count: undefined,
    }
  }

  componentDidMount = () => {
    this.getIssueList();
  }
  // 获取列表数据
  getIssueList = () => {
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/releases.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          releases:result.data.releases,
          issues: result.data.issues,
          isSpin: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  // 显示版本描述
  showBody=(key,flag)=>{
    let { releases } = this.state;
    releases[key].bodyshow = !flag;
    this.setState({
      releases
    })
  }

  renderList = (releases) => {
    const { projectsId , owner } = this.props.match.params;
    const { isManager , isDeveloper } = this.props;
    const type = this.props.projectDetail && this.props.projectDetail.type;

    if (releases && releases.length > 0) {
      return (
        releases.map((item, key) => {
          return (
            <div className="versionInfo" key={key}>
              <span className="versionInfo_left">
                <span className={`${item.draft === "稳定" ?"versionTag green":"versionTag yellow"}`}>{item.draft}</span>
                <span className="mt10">{item.created_at}</span>
                <span className="color-grey-8">
                  <i className="iconfont icon-biaoqian3 mr3 font-14"></i>
                  {item.tag_name}
                </span>
              </span>
              <div className="versionInfo_right">
                <span className="versionName">
                  <span className="task-hide">{item.name}</span>
                  {
                    (isManager || isDeveloper) && type !==2 &&
                    <Link to={`/projects/${owner}/${projectsId}/releases/${item.version_id}/update`} className="color-blue ml3 font-12">（编辑）</Link>
                  }
                </span>
                <span className="color-grey-3">
                  <i className={`${item.bodyshow ? "iconfont icon-sanjiaoxing-down color-grey-8 mr3 font-14":"iconfont icon-triangle color-grey-8 mr3 font-14"}`} onClick={()=>this.showBody(key,item.bodyshow)}></i>
                  {item.user_name}:<span className="color-grey-8">发布了这个版本，并在发布后提交给{item.target_commitish}</span>
                </span>
                {
                  item.bodyshow && <RenderHtml className="break_word_comments imageLayerParent" value={item.body} url={this.props.history.location}/>
                }
                <RenderHtml />
                <p className="mt10 pl3">
                  <a href={item.tarball_url} style={{color:"#4CC1DA"}} className="mr30"><i className="iconfont icon-TAR font-18 mr5"></i>TAR</a>
                  <a href={item.zipball_url} style={{color:"#28BD6C"}}><i className="iconfont icon-ZIP font-18 mr5"></i>ZIP</a>
                </p>
              </div>
            </div>
          )
        })
      )
    } else if (releases && releases.length === 0) {
      return ( <NoneData _html="暂时还没有相关数据!" /> )
    }
  }

  render() {
    const { projectsId ,owner } = this.props.match.params;
    const { data , releases , isSpin } = this.state;
    const type = this.props.projectDetail && this.props.projectDetail.type;
    return (
      <div className="main" style={{padding:"0px"}}>
        <div className="topWrapper" style={{padding:"15px 20px"}}>
          <span className="font-18 color-grey-3">版本发布</span>
          {
            data && data.user_permission && type !== 2 ?
              <Link to={`/projects/${owner}/${projectsId}/releases/new`} className="topWrapper_btn_new">+ 发布新版</Link>
              : ''
          }
        </div>
        <div className="releasesVersion">
          <Spin spinning={isSpin}><div>{this.renderList(releases)}</div></Spin>
        </div>
      </div>
    )
  }
}
export default version;