613 lines
20 KiB
JavaScript
613 lines
20 KiB
JavaScript
import React , {Component} from 'react';
|
||
import {Link} from 'react-router-dom';
|
||
|
||
import axios from 'axios';
|
||
import UploadComponent from '../Upload/Index';
|
||
import { getImageUrl } from 'educoder';
|
||
import {Modal , Form , Tooltip, Popconfirm, Pagination , Spin} from 'antd'
|
||
import Attachments from '../Upload/attachment';
|
||
import MDEditor from '../../modules/tpm/challengesnew/tpm-md-editor';
|
||
import RenderHtml from '../../components/render-html';
|
||
import AmplifyImg from './AmplifyImg';
|
||
|
||
|
||
class Detail extends Component{
|
||
constructor(props){
|
||
super(props);
|
||
this.state={
|
||
data:undefined,
|
||
isShow:false,
|
||
imgsrc:'',
|
||
journalsdata:undefined,
|
||
//图片区域是否显示 none 隐藏 block 显示
|
||
display:'none',
|
||
titledisplay:'none',
|
||
countvalue:'',
|
||
//是否需要编辑
|
||
isedit:undefined,
|
||
fileList:undefined,
|
||
limit:10,
|
||
page:1,
|
||
search_count:undefined,
|
||
isSpin:false,
|
||
showFiles: true,
|
||
quillValue:'',
|
||
quillFlag:false,
|
||
// 点击放大的图片路径
|
||
imageUrl:undefined,
|
||
visible:false,
|
||
journal_spin: false,
|
||
edit_spin: false
|
||
}
|
||
}
|
||
|
||
componentDidMount=()=>{
|
||
this.getDetail();
|
||
}
|
||
|
||
getDetail=()=>{
|
||
const { projectsId , orderId} = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues/${orderId}.json`;
|
||
axios.get(url).then((result)=>{
|
||
if(result){
|
||
this.setState({
|
||
data:result.data
|
||
})
|
||
this.getjournalslist();
|
||
}
|
||
}).catch((error)=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
handleok=() => {
|
||
this.setState({
|
||
isShow:false
|
||
});
|
||
};
|
||
handleCancel=()=>{
|
||
this.setState({
|
||
isShow:false
|
||
});
|
||
}
|
||
|
||
imgshow=()=>{
|
||
this.setState({
|
||
isShow:true
|
||
});
|
||
};
|
||
|
||
//添加评论
|
||
addjournals=()=>{
|
||
const { quillValue } = this.state;
|
||
this.setState({
|
||
journal_spin: true
|
||
})
|
||
if(!quillValue){
|
||
this.setState({
|
||
quillFlag:true
|
||
})
|
||
return;
|
||
}
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
if(!err){
|
||
const { data, page, limit, fileList } = this.state;
|
||
const url = `/issues/${data.id}/journals.json`;
|
||
axios.post(url,{
|
||
...values,
|
||
content:quillValue,
|
||
issue_id:data.id,
|
||
attachment_ids:fileList
|
||
}).then(result=>{
|
||
if(result){
|
||
this.props.showNotification("评论成功！");
|
||
this.props.form.setFieldsValue({
|
||
content: ""
|
||
});
|
||
this.setState({
|
||
showFiles: false,
|
||
quillValue:'',
|
||
quillFlag:false,
|
||
journal_spin: false
|
||
})
|
||
this.getjournalslist(page, limit);
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
})
|
||
}
|
||
//获取评论信息
|
||
getjournalslist=(page, limit)=>{
|
||
const { data} = this.state;
|
||
const url = `/issues/${data.id}/journals.json`;
|
||
let id=data.id;
|
||
axios.get(url,{
|
||
params:{
|
||
id,page,limit
|
||
}
|
||
}).then(result=>{
|
||
if(result){
|
||
this.setState({
|
||
journalsdata:result.data,
|
||
search_count:result.data.journals_count,
|
||
isSpin:false,
|
||
fileList:undefined,
|
||
})
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
//删除任务信息
|
||
deletedetail=(id)=>{
|
||
const { projectsId , orderId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues/${orderId}.json`;
|
||
axios.delete(url,{ data: {
|
||
project_id: projectsId,
|
||
id:id
|
||
}
|
||
}).then((result)=>{
|
||
if(result){
|
||
this.props.history.push(`/projects/${projectsId}/orders`);
|
||
}
|
||
}).catch((error)=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
//关闭任务
|
||
closedetail=(id)=>{
|
||
const {projectsId,orderId} = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues/${orderId}/close_issue.json`;
|
||
axios.post(url,{
|
||
project_id:projectsId,
|
||
id:orderId,
|
||
status_id:id,
|
||
}).then(result=>{
|
||
if(result){
|
||
this.getDetail();
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
//修改评论
|
||
updatedetail=(id)=>{
|
||
const { page , limit , countvalue } = this.state;
|
||
const {orderId} = this.props.match.params;
|
||
this.setState({
|
||
edit_spin: true
|
||
})
|
||
const url = `/issues/${orderId}/journals/${id}.json`;
|
||
axios.put(url,{
|
||
issue_id:orderId,
|
||
id:id,
|
||
content:countvalue
|
||
}).then(result=>{
|
||
if(result){
|
||
this.setState({
|
||
isedit: undefined,
|
||
edit_spin: false
|
||
})
|
||
this.getjournalslist(page, limit);
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
// 获取上传后的文件id数组
|
||
UploadFunc=(fileList)=>{
|
||
this.setState({
|
||
fileList
|
||
})
|
||
}
|
||
|
||
//删除评论
|
||
deleteorder=(id)=>{
|
||
const { orderId} = this.props.match.params;
|
||
const { page, limit } = this.state;
|
||
const url = `/issues/${orderId}/journals/${id}.json`;
|
||
axios.delete(url,{ data: {
|
||
issue_id: orderId,
|
||
id:id
|
||
}
|
||
}).then((result)=>{
|
||
if(result){
|
||
this.getjournalslist(page,limit)
|
||
}
|
||
}).catch((error)=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
|
||
editdetail=(count,status)=>{
|
||
this.setState({
|
||
countvalue:this.stringJson(count),
|
||
isedit:status
|
||
})
|
||
}
|
||
|
||
renderJournalList=(list)=>{
|
||
if(list && list.length >0){
|
||
return(
|
||
list.map((item,key)=>{
|
||
return(
|
||
<div key={key+1} className="journal-list-item">
|
||
<span className="font-weight-bold mr3">
|
||
{item.detail}：
|
||
</span>
|
||
<span className="mr5 color-grey-9">
|
||
{item.old_value && item.old_value.length > 0 ? "更新为" : "新增"}
|
||
</span>
|
||
<span>
|
||
{item.value && item.value.length > 0 ?
|
||
item.detail === "标签" ? <span className="issue-tag-show" style={{background: item.value[0].color}}>{item.value[0].name}</span> : item.value
|
||
:
|
||
"无"
|
||
}
|
||
</span>
|
||
</div>
|
||
)
|
||
})
|
||
)
|
||
}else{
|
||
return(
|
||
<div>
|
||
<span>没有评论~</span>
|
||
</div>
|
||
|
||
)
|
||
}
|
||
}
|
||
|
||
//复制
|
||
copydetail=()=>{
|
||
const {projectsId , orderId} = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues/${orderId}/copy.json`;
|
||
axios.post(url,{
|
||
project_id:projectsId,
|
||
id:orderId,
|
||
}).then(result=>{
|
||
if(result){
|
||
this.props.history.push(`/projects/${projectsId}/orders/${result.data.issue_id}/copyetail`);
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
// 翻页
|
||
ChangePage=(page)=>{
|
||
this.setState({
|
||
page,
|
||
isSpin:true
|
||
})
|
||
const {limit} = this.state;
|
||
this.getjournalslist(page,limit);
|
||
}
|
||
|
||
// 判断是否重新上传文件
|
||
changeIsComplete=(flag)=>{
|
||
this.setState({
|
||
showFiles:flag
|
||
})
|
||
}
|
||
// 新建评论
|
||
onContentChange=(value)=>{
|
||
if(value){
|
||
this.setState({
|
||
quillValue:value,
|
||
quillFlag:false
|
||
})
|
||
}
|
||
}
|
||
// 编辑评论
|
||
onEditContentChange=(value)=>{
|
||
if(value){
|
||
this.setState({
|
||
countvalue:value
|
||
})
|
||
}
|
||
}
|
||
|
||
handleShowImage=(value)=>{
|
||
this.setState({
|
||
imageUrl:value,
|
||
visible:true
|
||
})
|
||
}
|
||
setVisible=(flag)=>{
|
||
this.setState({
|
||
visible:flag
|
||
})
|
||
}
|
||
|
||
stringJson=(value) =>{
|
||
let _value = null;
|
||
|
||
try {
|
||
_value = JSON.parse(value);
|
||
} catch (e) {
|
||
_value = value;
|
||
}
|
||
return _value
|
||
}
|
||
|
||
commentCtx = (v) => {
|
||
return (
|
||
<RenderHtml className="break_word_comments" value={v} />
|
||
)
|
||
};
|
||
|
||
render(){
|
||
const { projectsId , orderId } = this.props.match.params;
|
||
const { data,journalsdata, page, limit, search_count, isSpin, isedit, showFiles , quillValue , quillFlag , countvalue , imageUrl , visible, journal_spin, edit_spin } = this.state;
|
||
const { current_user } = this.props;
|
||
const Paginations = (
|
||
<React.Fragment>
|
||
{
|
||
search_count > limit ?
|
||
<div className="pt30 mb50 edu-txt-center btp1">
|
||
<Pagination simple defaultCurrent={page} total={search_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
||
</div>:""
|
||
}
|
||
</React.Fragment>
|
||
)
|
||
const renderList =()=>{
|
||
if(journalsdata && journalsdata.issue_journals && journalsdata.issue_journals.length>0 ){
|
||
return(
|
||
<div className="tagList">{
|
||
journalsdata.issue_journals.map((item,key)=>{
|
||
return(
|
||
<li key={key}>
|
||
{
|
||
key > 0&&
|
||
<div className="order_line" style={{marginLeft:80}}></div>
|
||
}
|
||
<div className="df">
|
||
<Link to={`/users/${item && item.user_login}/projects`} className="show-user-link">
|
||
<img className="user_img" src={getImageUrl(`images/${item && item.user_picture}`)} alt=""/>
|
||
</Link>
|
||
|
||
<div className="detail_context" >
|
||
<div className="topWrapper_detali">
|
||
<p className="ml6 detail_p lineH40">
|
||
{item.user_name}
|
||
<span className="color-grey-9 ml3 mr3">评论于</span>
|
||
<Tooltip title={item.format_time} placement="bottom">
|
||
<span>{item.created_at}</span>
|
||
</Tooltip>
|
||
</p>
|
||
<div className="detail_right" style={{display: current_user && isedit === undefined && (current_user.admin || current_user.login === item.user_login) ? "block" : "none"}}>
|
||
<span onClick={()=>this.editdetail(item.content,item.id)} className="detail_edit_action">编辑</span>
|
||
<Popconfirm placement="bottom" title={'确定要删除当前评论吗?'} okText="是" cancelText="否" onConfirm={()=>this.deleteorder(item.id)}>
|
||
<span className="detail_edit_action">删除</span>
|
||
</Popconfirm>
|
||
</div>
|
||
</div>
|
||
<div className="detail_ptitlecount">
|
||
<div style={{display: (isedit && isedit === item.id) ? "none" : "block"}} >
|
||
{
|
||
item.content ?
|
||
this.commentCtx(item.content)
|
||
:
|
||
<div>
|
||
{this.renderJournalList(item.journal_details)}
|
||
</div>
|
||
}
|
||
{
|
||
item && item.attachments && item.attachments.length > 0 ?
|
||
<Attachments attachments={item.attachments} showNotification={this.props.showNotification} canDelete={current_user && (current_user.admin || current_user.login === item.user_login)}/>
|
||
:
|
||
""
|
||
}
|
||
</div>
|
||
<div style={{display: (isedit && isedit === item.id) ? "block" : "none"}}>
|
||
<div className="quillContent mt20">
|
||
<MDEditor placeholder={'添加评论...'} height={200}
|
||
mdID={`orderdetail-add-description${item.id}`} startInit={isedit && isedit === item.id} initValue={countvalue} onChange={this.onEditContentChange} ></MDEditor>
|
||
<p className="quillFlag">
|
||
{ quillFlag && <span className="">请输入评论内容</span>}
|
||
</p>
|
||
</div>
|
||
{/*<TextArea style={{height:"200px"}} value={this.state.countvalue} onChange={this.changmodelname}/>*/}
|
||
<p className="clearfix mt15">
|
||
<Spin spinning={edit_spin}>
|
||
<a className="topWrapper_btn fr" type="submit" onClick={()=>this.updatedetail(item.id)}>保存</a>
|
||
<a className="a_btn cancel_btn fr" type="submit" onClick={()=>this.editdetail(item.content,undefined)}>取消</a>
|
||
</Spin>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div style={{display: this.state.display}}>
|
||
<div className="div_line" ></div>
|
||
{/* <List
|
||
grid={{ gutter: 16, column: 6 }}
|
||
dataSource={valuse}
|
||
renderItem={obj => (
|
||
<List.Item>
|
||
<img class="list_img" onClick={this.imgshow} src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt=""/>
|
||
</List.Item>
|
||
)}
|
||
/> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
return(
|
||
<div className="main">
|
||
{ visible && <AmplifyImg url={imageUrl} visible={visible} setVisible={this.setVisible}/> }
|
||
<div>
|
||
<div className="detailContent">
|
||
<p>
|
||
{
|
||
data ?
|
||
<span className="font-20">【{data.issue_classify === "issue" ? (data.tracker ? data.tracker : "缺陷" ) : "合并请求"}】</span>
|
||
:
|
||
""
|
||
}
|
||
<span className="font-20" > { data && data.subject }</span>
|
||
|
||
</p>
|
||
<p className="mt15 color-grey-c">
|
||
<span className={data&&data.issue_status==="关闭"?"closedetail":"opendetail"}>{data&&data.issue_status==="关闭"?"关闭中":"开启中"} </span>
|
||
<span className="ml10 lineH32">
|
||
由 { data && data.author_name} 于 { data && data.created_at }创建{ data && data.journals_count && data.journals_count > 0 ?` · ${data.journals_count} 条评论`:""}
|
||
</span>
|
||
{
|
||
data && data.user_permission ?
|
||
<span className="pull-right lineH32">
|
||
<a className="color-blue fr" onClick={this.copydetail}>复制</a>
|
||
<Popconfirm placement="bottom" title={'您确定要删除吗'} okText="是" cancelText="否" onConfirm={()=>this.deletedetail(orderId)}>
|
||
<a className="color-blue fr" style={{marginLeft:20,marginRight:20}}>删除</a>
|
||
</Popconfirm>
|
||
|
||
<Link to={`/projects/${projectsId}/orders/${orderId}/updatedetail`} className="color-blue fr">编辑</Link>
|
||
</span>
|
||
:
|
||
""
|
||
}
|
||
</p>
|
||
|
||
</div>
|
||
<div className="f-wrap-between mt20" style={{alignItems:"flex-start"}}>
|
||
<div className="item-list-right" >
|
||
<div className="df ">
|
||
<Link to={``}><img className="user_img" src={getImageUrl(`images/${data && data.author_picture}`)} alt=""/></Link>
|
||
<div className="detail_context">
|
||
<div className="detail_p">
|
||
{data&&data.description&&(data.description.length > 0)?this.commentCtx(data.description): <span className="color-grey-9 ml3 mr3">没有描述</span>}
|
||
</div>
|
||
{
|
||
data && data.attachments && data.attachments.length > 0 ?
|
||
<Attachments attachments={data.attachments} showNotification={this.props.showNotification}/>
|
||
:
|
||
""
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="order_line" style={{marginLeft:80}}></div>
|
||
<Spin spinning={isSpin}>
|
||
<ul className="ul_width">
|
||
{renderList()}
|
||
</ul>
|
||
</Spin>
|
||
|
||
{ Paginations }
|
||
{
|
||
current_user && current_user.login ?
|
||
<React.Fragment>
|
||
<div className="order_line" style={{marginLeft:80}}></div>
|
||
<div className="df">
|
||
<img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt=""/>
|
||
<div className="new_context">
|
||
<div className="quillContent" style={{marginBottom:"20px"}}>
|
||
<MDEditor placeholder={'添加评论...'} height={200}
|
||
mdID={'orderdetail-add-descriptions'} initValue={quillValue} onChange={this.onContentChange} ></MDEditor>
|
||
<p className="quillFlag">
|
||
{ quillFlag && <span className="">请输入评论内容</span>}
|
||
</p>
|
||
</div>
|
||
<UploadComponent load={this.UploadFunc} isComplete={showFiles} changeIsComplete={this.changeIsComplete}></UploadComponent>
|
||
<p className="clearfix mt15">
|
||
<Spin spinning={journal_spin}>
|
||
<a className="topWrapper_btn fr" type="submit" onClick={this.addjournals}>评论</a>
|
||
{
|
||
data && data.user_permission ?
|
||
<a className="Closeor_btn fr" type="submit"
|
||
onClick={() => this.closedetail(data && data.issue_status === "关闭" ? 2 : 5)}>{data && data.issue_status === "关闭" ? "重新开启" : "关闭"}</a>
|
||
:
|
||
""
|
||
}
|
||
</Spin>
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
:
|
||
<div className="loginDiv"><Link to={`/login`}>登录</Link>并参与到对话中</div>
|
||
}
|
||
|
||
</div>
|
||
<div className="list-left DetailRight" style={{backgroundColor:"#fff"}}>
|
||
<p>
|
||
<span className="span_title">分支</span>
|
||
<span>{
|
||
data && data.branch_name ? data.branch_name : "--"
|
||
}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">标签</span>
|
||
<span>{
|
||
data && data.issue_tags ? <span className="issue-tag-show" style={{background: data.issue_tags[0].color}}>{data.issue_tags[0].name}</span> : "--"
|
||
}</span>
|
||
</p>
|
||
<p style={{display: "inline-block",'white-space': "nowrap" }}>
|
||
<span className="span_title">里程碑</span>
|
||
<span className="title_overflow">{
|
||
data && data.version ? data.version : "--"
|
||
}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">当前状态</span>
|
||
<span>{
|
||
data && data.issue_status ? data.issue_status : "--"
|
||
}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">分类</span>
|
||
<span>{
|
||
data && data.tracker ? data.tracker : "--"
|
||
}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">指派给</span>
|
||
<span>{data && data.assign_user_name ? data.assign_user_name : "--"}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">优先级</span>
|
||
<span>{data && data.priority ? data.priority : "--"}</span>
|
||
</p>
|
||
<p>
|
||
<span className="span_title">完成度</span>
|
||
<span>{data && data.done_ratio ? data.done_ratio : "--"}</span>
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal
|
||
onCancel={this.handleCancel}
|
||
visible={this.state.isShow}
|
||
width="400px"
|
||
footer={
|
||
[]
|
||
}
|
||
bodyStyle={{textAlign:'center'}}
|
||
>
|
||
<img className="list_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt=""/>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
const WrappedDetailForm = Form.create({ name: 'DetailOrderForm' })(Detail);
|
||
export default WrappedDetailForm; |