forgeplus-react/src/forge/Merge/components/operateDate.jsx

import React , { useState ,useEffect} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { getImageUrl , timeAgo } from 'educoder';
import "../../Issues/Component/comments/list.scss";

function OperateDate(props){
    // 一个合并请求就是一个issue，order_id是pull详情接口中返回的issue的详情
    const { order_id , match } = props;
    const { mergeId, owner , projectsId } = match.params;
    const [journals , setJournals ] =useState([])
    const journalsIcon ={
    'issue': 'icon-chuangjianqianbao',
    'branch_name': 'icon-fenzhi3',
    'assigner': 'icon-chengyuan2',
    'status_id': 'icon-xiugaibaobiaomoban',
    'fixed_version_id': 'icon-lichengbeiicon2',
    'due_date': 'icon-riqi',
    'issue_tag': 'icon-biaoji2',
    'description': 'icon-xiugaibaobiaomoban',
    'subject': 'icon-xiugaibaobiaomoban',
    'start_date': 'icon-riqi',
    'priority_id': 'icon-youxian',
    'attachment': 'icon-xiugaibaobiaomoban'
  }
    
    useEffect(()=>{
        if(order_id && mergeId){
            getDate();
        }
    },[order_id,mergeId])

    function getDate(){
        const url = `/v1/${owner}/${projectsId}/issues/${order_id}/journals`;
        axios.get(url,{
            params:{
                category:"operate",
                page:1,
                limit:50
            }
        }).then(response=>{
            if(response){
                setJournals(response.data.journals);
            }
        }).catch(error=>{})
    }
    return(
    <div className='issueCommentsBox'>
        { journals.map(item=>{
            return <div key={item.id} className='operationLog'>
            {/* 操作日志 */}
            <div className='operationCommentBor'></div>
            <div className='flexCenter font-14' style={{width: '100%'}}>
                <div className='flexCenter opBox'>
                    <span className='iconBackBox mr10'><i className={`iconfont font-12 ${journalsIcon[item.operate_category] || "icon-bianji7"}`}></i></span>
                    <div className='task-hide operationWords' style={{maxWidth: item.closeAndSpan && item.id === item.start? '550px' : '700px'}}>
                    <Link to={`/${item.user.login}`}><img src={getImageUrl(item.user.image_url)} alt="" className='commentUserImg mr5'/></Link>
                    <Link to={`/${item.user.login}`}>{item.user.name}&nbsp;</Link>
                    {(item.user.name.length + item.operate_content.length) > 62 ? <Tooltip title={<div><span>{item.user.name} </span><span dangerouslySetInnerHTML={{__html:item.operate_content}}></span></div>}><span dangerouslySetInnerHTML={{__html:item.operate_content}}></span></Tooltip> : <span dangerouslySetInnerHTML={{__html:item.operate_content}}></span>}
                    </div>
                    <span className='ml15 timeAgo font-14' style={{marginTop:"-2px"}}>{timeAgo(item.created_at)}</span>
                </div>
            </div>
        </div>}
        )}
    </div>
    )
}
export default OperateDate;