forked from Gitlink/forgeplus-react
606 lines
20 KiB
JavaScript
606 lines
20 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import axios from "axios";
|
||
import { getImageUrl } from "educoder";
|
||
import Attachments from "../Upload/attachment";
|
||
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
|
||
import RenderHtml from "../../components/render-html";
|
||
import "./order.css";
|
||
import { Popconfirm , Tooltip , Spin } from 'antd';
|
||
|
||
class comments extends Component {
|
||
|
||
componentDidMount = () => {
|
||
this.getjournalslist();
|
||
};
|
||
|
||
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,
|
||
journal_spin: false,
|
||
});
|
||
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) => {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//获取评论信息
|
||
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);
|
||
});
|
||
};
|
||
|
||
//修改评论
|
||
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) => {
|
||
this.setState({
|
||
edit_spin: false,
|
||
});
|
||
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>
|
||
);
|
||
}
|
||
};
|
||
|
||
// 翻页
|
||
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 {
|
||
journalsdata,
|
||
isedit,
|
||
quillFlag,
|
||
countvalue,
|
||
edit_spin,
|
||
} = this.state;
|
||
const { current_user } = this.props;
|
||
|
||
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}`}
|
||
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={"添加评论..."}
|
||
autoFocus={true}
|
||
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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="ProjectListIndex">
|
||
</div>
|
||
// <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>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default comments;
|