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

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import NoneData from '../Nodata';
import './version.css';
import { getImageUrl } from 'educoder';
import axios from 'axios';

/**
 * 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: false,
      search: undefined,
      search_count: undefined,
    }
  }

  componentDidMount = () => {
    this.getIssueList();
  }
  // 获取列表数据
  getIssueList = () => {
    const { projectsId } = this.props.match.params;
    const url = `/projects/${projectsId}/version_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
    })
  }

  render() {
    const { projectsId } = this.props.match.params;
    const { data , releases } = this.state
    const renderList = () => {
      if (releases && releases.length > 0) {
        return (
          <div>
          {
            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>
                      <Link to={`/projects/${projectsId}/coders/version/${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 && <p className="mt10">{item.body}</p>
                    }
                    <p className="mt10 pl3">
                      {/* <span className="commitKey mr20">{item.commit_id}</span> */}
                      <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>
              )
            })
          }
          </div>
        )
      } else {
        return (
          <NoneData _html="暂时还没有相关数据哦!" />
        )
      }
    }

    return (
      <div className="main">
        <div className="topWrapper">
          <span className="font-18 color-grey-3">版本发布</span>
          {
            data && data.user_permission ?
              <Link to={`/projects/${projectsId}/coders/version/new`} className="topWrapper_btn_new">+ 发布新版</Link>
              : ''
          }
        </div>
        <div className="releasesVersion">
          {renderList()}
        </div>

      </div>
    )
  }
}
export default version;