603 lines
17 KiB
JavaScript
603 lines
17 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, Tabs, Avatar } 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";
|
||
const { TabPane } = Tabs;
|
||
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,
|
||
atWhoLoginList:undefined
|
||
};
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.getjournalslist();
|
||
// 给父组件绑定，以使父组件可以使用组件内方法，用于切换tab时重新请求评论列表、合并请求完之后重新请求评论列表
|
||
this.props.bindCommentRef && this.props.bindCommentRef(this);
|
||
};
|
||
|
||
//添加评论
|
||
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,
|
||
atWhoLoginList,
|
||
} = 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,
|
||
receivers_login:atWhoLoginList,
|
||
})
|
||
.then((result) => {
|
||
if (result && result.data.status === 0) {
|
||
this.props.form.setFieldsValue({
|
||
content: "",
|
||
reply_content: undefined,
|
||
});
|
||
this.state.new_journal_id = result.data.id;
|
||
this.getjournalslist(page, limit);
|
||
this.setState({
|
||
showFiles: false,
|
||
content: "",
|
||
is_reply: false,
|
||
reply_id: undefined,
|
||
reply_content: undefined,
|
||
quillFlag: false,
|
||
journal_spin: false,
|
||
attachment_clean: false,
|
||
});
|
||
}
|
||
this.setState({
|
||
journal_spin: false
|
||
});
|
||
if(result && result.data.status !== 411){
|
||
this.props.showNotification(result.data.message);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.setState({
|
||
journal_spin: false,
|
||
});
|
||
}
|
||
});
|
||
};
|
||
add_reply = (id) => {
|
||
if (this.props.checkIfLogin() === false) {
|
||
this.props.showLoginDialog();
|
||
return;
|
||
} else {
|
||
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,
|
||
});
|
||
const { updateCommentsNum } = this.props;
|
||
updateCommentsNum && updateCommentsNum(result.data.journals_total_count);
|
||
}
|
||
})
|
||
.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({
|
||
quillFlag: false,
|
||
});
|
||
}
|
||
this.setState({
|
||
content: value,
|
||
});
|
||
};
|
||
replyContentChange = (value) => {
|
||
if (value) {
|
||
this.setState({
|
||
quillFlag: false,
|
||
});
|
||
}
|
||
this.setState({
|
||
reply_content: value,
|
||
});
|
||
};
|
||
|
||
//评论中at谁列表（存储：login）
|
||
changeAtWhoLoginList = (loginList) =>{
|
||
this.setState({
|
||
atWhoLoginList:loginList,
|
||
});
|
||
};
|
||
|
||
onRef = (ref) => {
|
||
this.child = ref;
|
||
};
|
||
|
||
loginModal() {
|
||
this.props.showLoginDialog();
|
||
return;
|
||
}
|
||
|
||
commentCtx = (v) => {
|
||
return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location}/>;
|
||
};
|
||
Paginations = ()=>{
|
||
const { page, limit, search_count } = this.state;
|
||
if(search_count > limit){
|
||
return(
|
||
<div className="pt30 mb50 edu-txt-center btp1">
|
||
<Pagination
|
||
simple
|
||
defaultCurrent={page}
|
||
total={search_count}
|
||
pageSize={limit}
|
||
onChange={this.ChangePage}
|
||
></Pagination>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
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, only_show_content } = this.props;
|
||
const { projectsId ,owner } = this.props.match.params;
|
||
|
||
const new_comment = (is_reply, item_id) => {
|
||
return (
|
||
<div className="grid-item-top pb10">
|
||
<Link
|
||
to={`/${current_user && current_user.login}`}
|
||
className="show-user-link mr10"
|
||
>
|
||
<img
|
||
className="radius"
|
||
src={getImageUrl(
|
||
`/${current_user && current_user.image_url}`
|
||
)}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
</Link>
|
||
<div>
|
||
<MDEditor
|
||
placeholder={"添加评论..."}
|
||
height={300}
|
||
mdID={
|
||
item_id
|
||
? "orderdetail-add-descriptions" + item_id
|
||
: "orderdetail-add-descriptions"
|
||
}
|
||
initValue={is_reply ? reply_content : content}
|
||
onChange={
|
||
is_reply ? this.replyContentChange : this.onContentChange
|
||
}
|
||
isCanAtme = {true}
|
||
changeAtWhoLoginList = {this.changeAtWhoLoginList}
|
||
owner = {owner}
|
||
projectsId = {projectsId}
|
||
></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">
|
||
<Button
|
||
type="primary"
|
||
onClick={this.addjournals}
|
||
loading={journal_spin}
|
||
className="mr15"
|
||
>
|
||
评论
|
||
</Button>
|
||
<Button onClick={this.cancel_reply}>取消</Button>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderList = (item) => {
|
||
return (
|
||
<div className="width100" key={item.id}>
|
||
<div className="pb5">
|
||
<Link
|
||
to={`/${item && item.user_login}`}
|
||
className="show-user-link"
|
||
>
|
||
<img
|
||
className="radius"
|
||
src={getImageUrl(`/${item && item.user_picture}`)}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
</Link>
|
||
<Link
|
||
to={`/${item && item.user_login}`}
|
||
className="show-user-link color-black ml10 fwb"
|
||
>
|
||
{item && item.user_name}
|
||
</Link>
|
||
</div>
|
||
<div className="ml40">
|
||
{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 className="grid-item mt5">
|
||
<span className="color-grey-8">{item.created_at}</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-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
|
||
<span className="font-12 color-grey-6">删除</span>
|
||
</Button>
|
||
</Popconfirm>
|
||
) : (
|
||
""
|
||
)}
|
||
<Button
|
||
type="link"
|
||
className="ml-10"
|
||
onClick={() => this.add_reply(item.id)}
|
||
>
|
||
<i className="iconfont icon-huifu1 font-15 color-grey-6 mr5 ver-middle"></i>
|
||
<span className="font-12 color-grey-6">回复</span>
|
||
</Button>
|
||
</span>
|
||
</div>
|
||
{current_user && (
|
||
<div>
|
||
{is_reply && reply_id && reply_id === item.id ? (
|
||
<div className="pt20">{new_comment(is_reply, item.id)}</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
)}
|
||
<ChildrenComments
|
||
order_id={orderId}
|
||
parent_id={item.id}
|
||
onRef={this.onRef}
|
||
children_comment_id={new_journal_id}
|
||
refreshCommentList={this.getjournalslist}
|
||
{...this.props}
|
||
></ChildrenComments>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
{only_show_content ? (
|
||
<div>
|
||
<div className="mb10">
|
||
{is_reply && !reply_id ? (
|
||
<div className="pd20">{new_comment(is_reply, undefined)}</div>
|
||
) : (
|
||
<div className="children-comment-bg pd20 grid-item">
|
||
<img
|
||
className="radius"
|
||
src={
|
||
current_user && current_user.image_url
|
||
? getImageUrl(`/${current_user.image_url}`)
|
||
: "images/avatars/User/b"
|
||
}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
<span className="reply-comment-input mr20">
|
||
<Button
|
||
className="add_reply_button ml10"
|
||
onClick={() => this.add_reply(undefined)}
|
||
>
|
||
<span>添加评论...</span>
|
||
</Button>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{journalsdata && journalsdata.journals_total_count > 0 && (
|
||
<List
|
||
size="large"
|
||
loading={isSpin}
|
||
header=""
|
||
dataSource={journalsdata.issue_journals}
|
||
renderItem={(item) => <List.Item key={item.id}>{renderList(item)}</List.Item>}
|
||
/>
|
||
)}
|
||
{this.Paginations()}
|
||
</div>
|
||
) : (
|
||
<div className="mt20">
|
||
<div className="comment-background">
|
||
<Tabs defaultActiveKey="1" className="custom-comment-tabs">
|
||
<TabPane
|
||
tab={
|
||
<span className="ml-3 font-16">
|
||
评论
|
||
{search_count > 0 && (
|
||
<span className="search-count-button">
|
||
{search_count}
|
||
</span>
|
||
)}
|
||
</span>
|
||
}
|
||
key="1"
|
||
>
|
||
<div className="mb10">
|
||
{is_reply && !reply_id ? (
|
||
<div className="pd20">
|
||
{new_comment(is_reply, undefined)}
|
||
</div>
|
||
) : (
|
||
<div className="children-comment-bg pd20 grid-item mb20">
|
||
<img
|
||
className="radius"
|
||
src={
|
||
current_user && current_user.image_url
|
||
? getImageUrl(`/${current_user.image_url}`)
|
||
: "images/avatars/User/b"
|
||
}
|
||
alt=""
|
||
width="30"
|
||
height="30"
|
||
/>
|
||
<span className="reply-comment-input mr20">
|
||
<Button
|
||
className="add_reply_button ml10"
|
||
onClick={() => this.add_reply(undefined)}
|
||
>
|
||
<span>添加评论...</span>
|
||
</Button>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{journalsdata && journalsdata.journals_total_count > 0 && (
|
||
<List
|
||
size="large"
|
||
loading={isSpin}
|
||
header=""
|
||
dataSource={journalsdata.issue_journals}
|
||
renderItem={(item) => (
|
||
<List.Item key={item.id}>{renderList(item)}</List.Item>
|
||
)}
|
||
/>
|
||
)}
|
||
</TabPane>
|
||
</Tabs>
|
||
{this.Paginations()}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default comments;
|