forked from Gitlink/forgeplus-react
526 lines
14 KiB
JavaScript
526 lines
14 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Link } from "react-router-dom";
|
||
|
||
import axios from "axios";
|
||
import Upload from "../Upload/Index";
|
||
import UploadImg from "../Images/upload.png";
|
||
import { getImageUrl } from "educoder";
|
||
import { List, Popconfirm, Pagination, Button } from "antd";
|
||
import Attachments from "../Upload/attachment";
|
||
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
|
||
import RenderHtml from "../../components/render-html";
|
||
import ChildrenComments from "./children_comments";
|
||
import "../Order/order.css";
|
||
|
||
class comments extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
content: undefined,
|
||
journalsdata: undefined,
|
||
isedit: undefined,
|
||
fileList: undefined,
|
||
limit: 10,
|
||
page: 1,
|
||
journal_spin: false,
|
||
edit_spin: false,
|
||
attachment_clean: true,
|
||
orderId: this.props.order_id,
|
||
is_reply: false,
|
||
reply_id: undefined,
|
||
reply_content: undefined,
|
||
new_journal_id: undefined,
|
||
};
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.getjournalslist();
|
||
};
|
||
|
||
//添加评论
|
||
addjournals = () => {
|
||
const { content, reply_content } = this.state;
|
||
this.setState({
|
||
journal_spin: true,
|
||
});
|
||
if (!content && !reply_content) {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
return;
|
||
}
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
if (!err) {
|
||
const {
|
||
page,
|
||
limit,
|
||
fileList,
|
||
orderId,
|
||
reply_id,
|
||
is_reply,
|
||
} = this.state;
|
||
|
||
const url = `/issues/${orderId}/journals.json`;
|
||
|
||
axios
|
||
.post(url, {
|
||
...values,
|
||
content: is_reply ? reply_content : content,
|
||
issue_id: orderId,
|
||
attachment_ids: fileList,
|
||
parent_id: reply_id,
|
||
})
|
||
.then((result) => {
|
||
if (result && result.data.status === 0) {
|
||
this.props.form.setFieldsValue({
|
||
content: "",
|
||
reply_content: undefined,
|
||
});
|
||
this.setState({
|
||
showFiles: false,
|
||
content: "",
|
||
is_reply: false,
|
||
reply_id: undefined,
|
||
reply_content: undefined,
|
||
quillFlag: false,
|
||
journal_spin: false,
|
||
attachment_clean: false,
|
||
});
|
||
if (is_reply) {
|
||
this.state.new_journal_id = result.data.id;
|
||
// this.getjournalslist(page, limit);
|
||
// this.getjournalslist(page, limit);
|
||
// this.child.getChildrenJournals(orderId, reply_id);
|
||
}
|
||
this.getjournalslist(page, limit);
|
||
}
|
||
this.props.showNotification(result.data.message);
|
||
// this.state.success_journal = false
|
||
})
|
||
.catch((error) => {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
add_reply = (id) => {
|
||
this.setState({
|
||
is_reply: true,
|
||
success_journal: false,
|
||
reply_id: id,
|
||
});
|
||
};
|
||
|
||
cancel_reply = () => {
|
||
this.setState({
|
||
is_reply: false,
|
||
reply_id: undefined,
|
||
success_journal: false,
|
||
reply_content: undefined,
|
||
});
|
||
};
|
||
//获取评论信息
|
||
getjournalslist = (page, limit) => {
|
||
const { orderId } = this.state;
|
||
const url = `/issues/${orderId}/journals.json`;
|
||
let id = orderId;
|
||
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);
|
||
});
|
||
};
|
||
|
||
// 获取上传后的文件id数组
|
||
UploadFunc = (fileList) => {
|
||
this.setState({
|
||
fileList,
|
||
attachment_clean: true,
|
||
});
|
||
};
|
||
|
||
//删除评论
|
||
deleteorder = (id) => {
|
||
const { page, limit, orderId } = 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);
|
||
});
|
||
};
|
||
|
||
renderJournalList = (list) => {
|
||
if (list && list.length > 0) {
|
||
return list.map((item, key) => {
|
||
return (
|
||
<div key={key + 1} className="journal-list-item">
|
||
<span className="fwb 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({
|
||
content: value,
|
||
quillFlag: false,
|
||
});
|
||
}
|
||
};
|
||
replyContentChange = (value) => {
|
||
if (value) {
|
||
this.setState({
|
||
reply_content: value,
|
||
quillFlag: false,
|
||
});
|
||
}
|
||
};
|
||
|
||
onRef = (ref) => {
|
||
this.child = ref;
|
||
};
|
||
|
||
commentCtx = (v) => {
|
||
return <RenderHtml className="break_word_comments" value={v} />;
|
||
};
|
||
|
||
render() {
|
||
const {
|
||
journalsdata,
|
||
page,
|
||
limit,
|
||
search_count,
|
||
isSpin,
|
||
content,
|
||
quillFlag,
|
||
journal_spin,
|
||
attachment_clean,
|
||
is_reply,
|
||
reply_id,
|
||
reply_content,
|
||
orderId,
|
||
new_journal_id,
|
||
} = 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 new_comment = (is_reply, item_id) => {
|
||
return (
|
||
<div>
|
||
{current_user && current_user.login ? (
|
||
<div>
|
||
<div className="grid-item pb10">
|
||
<Link
|
||
to={`/users/${current_user && current_user.login}/projects`}
|
||
className="show-user-link"
|
||
>
|
||
<img
|
||
className="radius"
|
||
src={getImageUrl(
|
||
`images/${current_user && current_user.image_url}`
|
||
)}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
</Link>
|
||
<Link
|
||
to={`/users/${current_user && current_user.login}/projects`}
|
||
className="show-user-link color-blue ml10"
|
||
>
|
||
{current_user && current_user.real_name}
|
||
</Link>
|
||
</div>
|
||
<MDEditor
|
||
placeholder={"添加评论..."}
|
||
height={200}
|
||
mdID={
|
||
item_id
|
||
? "orderdetail-add-descriptions" + item_id
|
||
: "orderdetail-add-descriptions"
|
||
}
|
||
initValue={is_reply ? reply_content : content}
|
||
onChange={
|
||
is_reply ? this.replyContentChange : this.onContentChange
|
||
}
|
||
></MDEditor>
|
||
<p className="quillFlag">
|
||
{quillFlag && <span className="">请输入评论内容</span>}
|
||
</p>
|
||
<Upload
|
||
className="commentStyle"
|
||
isComplete={attachment_clean}
|
||
load={this.UploadFunc}
|
||
icon={
|
||
<img
|
||
src={UploadImg}
|
||
width="58"
|
||
alt=""
|
||
style={{ marginBottom: 15 }}
|
||
/>
|
||
}
|
||
size={100}
|
||
showNotification={this.props.showNotification}
|
||
/>
|
||
<p className="clearfix mt20 text-right">
|
||
{is_reply && (
|
||
<Button
|
||
onClick={this.cancel_reply}
|
||
size="large"
|
||
className="mr15"
|
||
>
|
||
取消
|
||
</Button>
|
||
)}
|
||
<Button
|
||
type="primary"
|
||
onClick={this.addjournals}
|
||
loading={journal_spin}
|
||
size="large"
|
||
>
|
||
评论
|
||
</Button>
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="loginDiv">
|
||
<Link to={`/login`}>登录</Link>并参与到对话中
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderList = (item) => {
|
||
return (
|
||
<div className="width100">
|
||
<div className="grid-item pb10">
|
||
<Link
|
||
to={`/users/${item && item.user_login}/projects`}
|
||
className="show-user-link"
|
||
>
|
||
<img
|
||
className="radius"
|
||
src={getImageUrl(`images/${item && item.user_picture}`)}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
</Link>
|
||
<span className="grid-item">
|
||
<span>
|
||
<Link
|
||
to={`/users/${item && item.user_login}/projects`}
|
||
className="show-user-link color-blue ml10"
|
||
>
|
||
{item && item.user_name}
|
||
</Link>
|
||
<span className="color-grey-8 ml20">{item.created_at}</span>
|
||
</span>
|
||
|
||
<span className="text-right">
|
||
{current_user &&
|
||
(current_user.admin ||
|
||
current_user.login === item.user_login) ? (
|
||
<Popconfirm
|
||
placement="bottom"
|
||
title={"确定要删除当前评论吗?"}
|
||
okText="是"
|
||
cancelText="否"
|
||
onConfirm={() => this.deleteorder(item.id)}
|
||
>
|
||
<Button type="link">
|
||
<i className="iconfont icon-shanchu font-15 color-grey-6"></i>
|
||
</Button>
|
||
</Popconfirm>
|
||
) : (
|
||
""
|
||
)}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div className="ml30">
|
||
{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)
|
||
}
|
||
/>
|
||
) : (
|
||
""
|
||
)}
|
||
|
||
<ChildrenComments
|
||
order_id={orderId}
|
||
parent_id={item.id}
|
||
onRef={this.onRef}
|
||
children_comment_id={new_journal_id}
|
||
{...this.props}
|
||
></ChildrenComments>
|
||
</div>
|
||
|
||
{current_user && (
|
||
<div>
|
||
{is_reply && reply_id && reply_id === item.id ? (
|
||
<div className="pd20">{new_comment(is_reply, item.id)}</div>
|
||
) : (
|
||
<div className="grid-item mt15">
|
||
<Link
|
||
to={`/users/${current_user && current_user.login}/projects`}
|
||
className="show-user-link mr10"
|
||
>
|
||
<img
|
||
className="radius"
|
||
src={getImageUrl(
|
||
`images/${current_user && current_user.image_url}`
|
||
)}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
</Link>
|
||
<span className="reply-comment-input">
|
||
<Button
|
||
className="add_reply_button"
|
||
onClick={() => this.add_reply(item.id)}
|
||
>
|
||
<span>我要回复</span>
|
||
</Button>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="pd20">
|
||
<div className="comment-background">
|
||
{journalsdata && journalsdata.journals_total_count > 0 ? (
|
||
<List
|
||
size="large"
|
||
loading={isSpin}
|
||
header={<div>回复({journalsdata.journals_total_count})</div>}
|
||
dataSource={journalsdata.issue_journals}
|
||
renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
|
||
/>
|
||
) : (
|
||
<div className="ant-list-header border-bottom-comment">
|
||
<div>回复({search_count})</div>
|
||
</div>
|
||
)}
|
||
{Paginations}
|
||
<div className="pd20">{new_comment()}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default comments;
|