forked from Gitlink/forgeplus-react
392 lines
12 KiB
JavaScript
392 lines
12 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import axios from "axios";
|
|
import { getImageUrl } from "educoder";
|
|
import { Form, Popconfirm, Tag, Spin } from "antd";
|
|
import Attachments from "../Upload/attachment";
|
|
import RenderHtml from "../../components/render-html";
|
|
import Comments from "../comments/comments";
|
|
import Claims from "../claims/claims"
|
|
import "./order.scss";
|
|
|
|
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,
|
|
isSpins: true,
|
|
showFiles: true,
|
|
quillValue: "",
|
|
quillFlag: false,
|
|
// 点击放大的图片路径
|
|
imageUrl: undefined,
|
|
visible: false,
|
|
journal_spin: false,
|
|
edit_spin: false,
|
|
};
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.getDetail();
|
|
};
|
|
|
|
componentDidUpdate=()=>{
|
|
this.updateDocumentTitle();
|
|
}
|
|
|
|
// 更新网页标题
|
|
updateDocumentTitle(){
|
|
const {projectDetail} = this.props;
|
|
const {data} = this.state;
|
|
if(projectDetail && data){
|
|
const { author, name} = projectDetail;
|
|
document.title = `${data.subject}-任务-${author.name}/${name}`;
|
|
}
|
|
}
|
|
|
|
getDetail = () => {
|
|
const { projectsId, orderId, owner } = this.props.match.params;
|
|
const url = `/${owner}/${projectsId}/issues/${orderId}.json`;
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
data: result.data,
|
|
isSpins: false
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
handleok = () => {
|
|
this.setState({
|
|
isShow: false,
|
|
});
|
|
};
|
|
handleCancel = () => {
|
|
this.setState({
|
|
isShow: false,
|
|
});
|
|
};
|
|
|
|
//删除任务信息
|
|
deletedetail = (id) => {
|
|
const { projectsId, orderId, owner } = this.props.match.params;
|
|
const url = `/${owner}/${projectsId}/issues/${orderId}.json`;
|
|
axios
|
|
.delete(url, {
|
|
data: {
|
|
project_id: projectsId,
|
|
id: id,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
if (result) {
|
|
this.props.history.push(`/${owner}/${projectsId}/issues`);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
//关闭任务
|
|
closedetail = (id) => {
|
|
const { projectsId, orderId, owner } = this.props.match.params;
|
|
const url = `/${owner}/${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);
|
|
});
|
|
};
|
|
|
|
editdetail = (count, status) => {
|
|
this.setState({
|
|
countvalue: this.stringJson(count),
|
|
isedit: status,
|
|
});
|
|
};
|
|
|
|
//复制
|
|
copydetail = () => {
|
|
const { projectsId, orderId, owner } = this.props.match.params;
|
|
this.props.history.push(
|
|
`/${owner}/${projectsId}/issues/${orderId}/copyetail`
|
|
);
|
|
};
|
|
|
|
// 翻页
|
|
ChangePage = (page) => {
|
|
this.setState({
|
|
page,
|
|
isSpins: true,
|
|
});
|
|
const { limit } = this.state;
|
|
this.getjournalslist(page, limit);
|
|
};
|
|
|
|
// 判断是否重新上传文件
|
|
changeIsComplete = (flag) => {
|
|
this.setState({
|
|
showFiles: flag,
|
|
});
|
|
};
|
|
|
|
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 imageLayerParent" value={v} url={this.props.history.location} />;
|
|
};
|
|
|
|
|
|
bindCommentRef = (commentRef) => {
|
|
this.childComment = commentRef;
|
|
}
|
|
|
|
refreshFunc=()=> {
|
|
this.childComment && this.childComment.getjournalslist();
|
|
}
|
|
|
|
render() {
|
|
const { projectsId, orderId, owner } = this.props.match.params;
|
|
const { data, isSpins } = this.state;
|
|
const get_color = (type) => {
|
|
if (type === "高") {
|
|
return "#e67e22";
|
|
} else if (type === "正常") {
|
|
return "#28be6c";
|
|
} else if (type === "低") {
|
|
return "#1abc9c";
|
|
} else {
|
|
return "#e74c3c";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Spin spinning={isSpins}>
|
|
<div className="ProjectListIndex">
|
|
<div className="item-list-right">
|
|
<div className="background-f boder-4">
|
|
<div className="grid-item border-1f pd20 ">
|
|
<Link
|
|
to={`/${data && data.author_login}`}
|
|
className="show-user-link"
|
|
>
|
|
<img
|
|
className="user_img"
|
|
src={getImageUrl(`/${data && data.author_picture}`)}
|
|
alt=""
|
|
width="50"
|
|
height="50"
|
|
/>
|
|
</Link>
|
|
<div className="ml10">
|
|
<div className="ver-middle">
|
|
<span className="mr10 ver-middle">
|
|
<span className="font-16">
|
|
【
|
|
{data && data.issue_classify === "issue"
|
|
? data.tracker
|
|
? data.tracker
|
|
: "缺陷"
|
|
: "合并请求"}
|
|
】
|
|
</span>
|
|
<span className="font-16 fwb" style={{wordBreak:"break-all"}}>{data && data.subject}</span>
|
|
</span>
|
|
|
|
{data && data.priority && (
|
|
<Tag color={get_color(data.priority)}>{data.priority}</Tag>
|
|
)}
|
|
</div>
|
|
<div className="mt10">
|
|
<span className="color-grey-9 mr5">由</span>
|
|
<Link
|
|
to={`/${data && data.author_login}`}
|
|
className="show-user-link color-blue"
|
|
>
|
|
{data && data.author_name}
|
|
</Link>
|
|
<span className="color-grey-9 ml5">
|
|
添加于 {data && data.created_at}
|
|
</span>
|
|
{data && data.user_permission ? (
|
|
<span className="pull-right">
|
|
<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={`/${owner}/${projectsId}/issues/${orderId}/edit`}
|
|
className="color-blue fr"
|
|
>
|
|
编辑
|
|
</Link>
|
|
</span>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pd20">
|
|
<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>
|
|
|
|
<Comments
|
|
order_id={orderId}
|
|
showNotification={this.props.showNotification}
|
|
{...this.props}
|
|
bindCommentRef={this.bindCommentRef}
|
|
/>
|
|
</div>
|
|
<div className="list-left list-left-padding">
|
|
<div className="list-right-item-padding background-f boder-4">
|
|
<Claims issue_id={orderId} {...this.props} refreshFunc={this.refreshFunc}/>
|
|
</div>
|
|
|
|
<div className="list-right-item-padding background-f boder-4">
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">负责人:</span>
|
|
<span>
|
|
{data && data.assign_user_name ? <Link to={`/${data.assign_user_login}`} className="color-blue">{data.assign_user_name}</Link> : "--"}
|
|
</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">标记:</span>
|
|
<span>
|
|
{data && data.issue_tags ? (
|
|
<span className="grid-item">
|
|
<span
|
|
className="tagColor"
|
|
style={{ background: data.issue_tags[0].color }}
|
|
></span>
|
|
{data.issue_tags[0].name}
|
|
</span>
|
|
) : (
|
|
"--"
|
|
)}
|
|
</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">里程碑:</span>
|
|
<span className="title_overflow">
|
|
{data && data.version ? <Link to={`/${owner}/${projectsId}/milestones/${data.version_id}`} className="color-blue">{data.version}</Link> : "--"}
|
|
</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">状态:</span>
|
|
<span>
|
|
{data && data.issue_status ? data.issue_status : "--"}
|
|
</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">类型:</span>
|
|
<span>{data && data.tracker ? data.tracker : "--"}</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">开始日期:</span>
|
|
<span>{data && data.start_date ? data.start_date : "--"}</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">结束日期:</span>
|
|
<span>{data && data.due_date ? data.due_date : "--"}</span>
|
|
</p>
|
|
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">完成度:</span>
|
|
<span>{data && data.done_ratio ? data.done_ratio : "--"}</span>
|
|
</p>
|
|
<p className="grid-item-left pb15">
|
|
<span className="issue_detail_info">分支:</span>
|
|
<span>{data && data.branch_name ? data.branch_name : "--"}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
);
|
|
}
|
|
}
|
|
|
|
const WrappedDetailForm = Form.create({ name: "DetailOrderForm" })(Detail);
|
|
export default WrappedDetailForm;
|