|
|
import React,{ Component } from "react";
|
|
|
import { getImageUrl, markdownToHTML, WordsBtn, getUrl } from 'educoder';
|
|
|
import { Tooltip } from 'antd'
|
|
|
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'
|
|
|
import axios from 'axios'
|
|
|
import moment from 'moment'
|
|
|
const _origin = ''
|
|
|
/**
|
|
|
https://www.showdoc.cc/127895880302646?page_id=1962215317836957
|
|
|
comment_scores[:appeal_status] int 0：正常；1：申诉中，2：撤销申诉；3：申诉成功；4：申诉被拒绝；5：申诉失效
|
|
|
*/
|
|
|
const ACCEPT = 3
|
|
|
const REFUSE = 4
|
|
|
class CCommentItem extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
|
|
|
this.state = {
|
|
|
show_reply: false,
|
|
|
show_appeal: false,
|
|
|
}
|
|
|
}
|
|
|
cancelReply = () => {
|
|
|
this.setState({ show_reply: false })
|
|
|
}
|
|
|
showReply = () => {
|
|
|
this.setState({ show_reply: true, show_appeal: false })
|
|
|
}
|
|
|
showAppeal = () => {
|
|
|
this.setState({ show_appeal: true, show_reply: false })
|
|
|
}
|
|
|
cancelAppeal = () => {
|
|
|
this.setState({ show_appeal: false })
|
|
|
}
|
|
|
onCancel = () => {
|
|
|
this.state.show_reply ? this.cancelReply() : this.cancelAppeal()
|
|
|
}
|
|
|
cancelMyAppeal = () => {
|
|
|
this.props.confirm({
|
|
|
content: <div>
|
|
|
<div>撤销申诉后，无法再对本评阅记录进行申诉</div>
|
|
|
<div>是否确认撤销申诉</div>
|
|
|
</div>,
|
|
|
onOk: () => {
|
|
|
let studentWorkId =this.props.match.params.studentWorkId;
|
|
|
let { item, commentIndex }=this.props;
|
|
|
|
|
|
const url = `/student_works/${studentWorkId}/cancel_appeal.json`
|
|
|
axios.post(url, {
|
|
|
score_id: item.id
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.showNotification('撤销成功')
|
|
|
this.props.replySuccess()
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
onSubmit = () => {
|
|
|
let workId=this.props.match.params.workId;
|
|
|
let studentWorkId =this.props.match.params.studentWorkId;
|
|
|
|
|
|
let { item, commentIndex }=this.props;
|
|
|
if (!this.state.secondReplyContent || !this.state.secondReplyContent.trim()) {
|
|
|
this.props.showNotification('内容不能为空')
|
|
|
return;
|
|
|
}
|
|
|
if (this.state.show_reply) {
|
|
|
const url = `/student_works/${studentWorkId}/add_score_reply.json`
|
|
|
axios.post(url, {
|
|
|
score_id: item.id,
|
|
|
comment: this.state.secondReplyContent
|
|
|
}).then((result)=>{
|
|
|
if(result.data.status == 0){
|
|
|
this.props.replySuccess()
|
|
|
this.cancelReply()
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
} else {
|
|
|
const appealUrl = `/student_works/${studentWorkId}/appeal_anonymous_score.json`
|
|
|
axios.post(appealUrl, {
|
|
|
score_id: item.id,
|
|
|
comment: this.state.secondReplyContent
|
|
|
}).then((result)=>{
|
|
|
if(result.data.status == 0){
|
|
|
this.props.replySuccess()
|
|
|
this.cancelAppeal()
|
|
|
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
onDeleteSecondReply = (item) => {
|
|
|
this.props.confirm({
|
|
|
// content: `确认要删除所选的${len}个帖子吗？`,
|
|
|
content: `是否确认删除?`,
|
|
|
onOk: () => {
|
|
|
|
|
|
const url = `/commons/delete.json`
|
|
|
axios.delete(url, { data: {
|
|
|
object_id: item.id,
|
|
|
object_type: 'journals_for_message'
|
|
|
}})
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.replySuccess()
|
|
|
this.cancelAppeal()
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
on_deal_appeal_score = (mode, item) => {
|
|
|
this.props.confirm({
|
|
|
// content: `确认要删除所选的${len}个帖子吗？`,
|
|
|
content:
|
|
|
<div>
|
|
|
<div>{mode == ACCEPT ? '此匿评成绩将被废弃，评阅人的作品将被违规扣分' : '此匿评成绩将被认为合理'}</div>
|
|
|
<div>是否确认{mode == ACCEPT ? '接受申诉' : '拒绝申诉'}</div>
|
|
|
</div>
|
|
|
,
|
|
|
onOk: () => {
|
|
|
let studentWorkId =this.props.match.params.studentWorkId;
|
|
|
const url = `/student_works/${studentWorkId}/deal_appeal_score.json`
|
|
|
axios.post(url, {
|
|
|
score_id: item.score_id,
|
|
|
status: mode
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.showNotification(`${mode == ACCEPT ? '接受申诉' : '拒绝申诉'}成功`)
|
|
|
this.props.replySuccess()
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
parseCommentContent = (oldContent) => {
|
|
|
return markdownToHTML(oldContent);
|
|
|
}
|
|
|
renderChildenComments = (parent) => {
|
|
|
if (parent.journals.length == 0) {
|
|
|
return '';
|
|
|
}
|
|
|
const isAdmin = this.props.isAdmin()
|
|
|
/**
|
|
|
can_delete: true
|
|
|
content: "qwe"
|
|
|
id: 81136
|
|
|
time: "2019-06-04T11:00:21.000+08:00"
|
|
|
|
|
|
user_image_url: "avatars/User/1"
|
|
|
user_login: "innov"
|
|
|
user_name: "社区导师"
|
|
|
*/
|
|
|
|
|
|
// is_appeal_info true 是匿评人匿评信息，需要统一使用头像去掉链接
|
|
|
return parent.journals.map(item => {
|
|
|
// <div>{item.content} {item.user_info.user_name}</div>
|
|
|
|
|
|
// src={getImageUrl(`images/${item.image_url}`)}
|
|
|
return (
|
|
|
<div className="comment_item_cont appraise df clearfix" key={item.id}>
|
|
|
<div className="J_Comment_Face fl">
|
|
|
{item.is_appeal_info == true ?
|
|
|
<a href={`javascript:void(0)`} target="_blank">
|
|
|
<img alt="用户头像" height="50"
|
|
|
src={`${getUrl()}/images/edu_user/anony.png`} width="50"/>
|
|
|
</a>
|
|
|
: <a href={`${_origin}/users/${item.user_info.user_login}`} target="_blank">
|
|
|
<img alt="用户头像" height="50"
|
|
|
src={`/images/${item.user_info.user_image_url}`}
|
|
|
width="50"/>
|
|
|
</a>}
|
|
|
</div>
|
|
|
|
|
|
<div className="t_content fl">
|
|
|
<div className="J_Comment_Reply">
|
|
|
<div className="comment_orig_content" style={{ margin:"0px" }}>
|
|
|
<div className="J_Comment_Info clearfix mt3">
|
|
|
<div className="t_info fl">
|
|
|
{item.user_info.user_login==="--"?
|
|
|
<a className="content-username hide fl">
|
|
|
{item.user_info.user_name}
|
|
|
</a>
|
|
|
:<a href={`${_origin}/users/${item.user_info.user_login}`} className="content-username hide fl">
|
|
|
{item.user_info.user_name}
|
|
|
</a>}
|
|
|
|
|
|
<span className="t_area fl">{moment(item.time).format('YYYY-MM-DD HH:mm')}</span>
|
|
|
{item.is_appeal_info && (item.appeal_status == 1 ?
|
|
|
<span className={"edu-filter-btn edu-filter-btn-4CACFF ml15 fl typestyle "} >申诉中</span> :
|
|
|
item.appeal_status == 2 ?
|
|
|
<span className={"edu-filter-btn edu-filter-btn-EDEDED ml15 fl typestyle color666666 "} >申诉已撤销</span> :
|
|
|
item.appeal_status == 3 ?
|
|
|
<span className={"edu-filter-btn edu-filter-btn-4CACFF ml15 fl typestyle "} >申诉成功</span> :
|
|
|
item.appeal_status == 4 ?
|
|
|
<span className={"edu-filter-btn edu-filter-btn-EDEDED ml15 fl typestyle color666666 "} >申诉被拒绝</span> :
|
|
|
item.appeal_status == 5 ?
|
|
|
<span className={"edu-filter-btn edu-filter-btn-EDEDED ml15 fl typestyle color666666 "} >申诉失败</span> : '')
|
|
|
}
|
|
|
|
|
|
|
|
|
{/* fr */}
|
|
|
{/* { item.is_invalid ? <span className="validate_area fr">失效</span> :
|
|
|
<React.Fragment> */}
|
|
|
{!item.is_appeal_info && item.can_delete == true && <Tooltip title="删除">
|
|
|
<i className="iconfont icon-shanchu mr5 fr font-14" onClick={() => this.onDeleteSecondReply(item)}
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
></i>
|
|
|
</Tooltip> }
|
|
|
{/* </React.Fragment>
|
|
|
} */}
|
|
|
{item.is_appeal_info && isAdmin && item.appeal_status == 1 && <React.Fragment>
|
|
|
<WordsBtn style="grey" onClick={() => this.on_deal_appeal_score(REFUSE, item)} className="fr ml6">拒绝申诉</WordsBtn>
|
|
|
<WordsBtn style="orange" onClick={() => this.on_deal_appeal_score(ACCEPT, item)} className="fr">接受申诉</WordsBtn>
|
|
|
</React.Fragment>}
|
|
|
{item.appeal_status == 1 && this.props.is_author == true &&
|
|
|
<WordsBtn style="blue" className="fr mr5" onClick={() => this.cancelMyAppeal()}>撤销申诉</WordsBtn>}
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="comment_content clearfix" id={`reply_content_${item.id}`}>
|
|
|
<div className="color-grey-3" id={`reply_content_${item.id}`}>
|
|
|
<div className={"break_word_comments markdown-body"} dangerouslySetInnerHTML={{__html: item.content}}></div>
|
|
|
<div className="cl"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
render(){
|
|
|
let { item, commentIndex, homework_status, is_author }=this.props;
|
|
|
let { show_reply, show_appeal }=this.state;
|
|
|
const _content = item.content ? this.parseCommentContent(item.content) : ''
|
|
|
const isAnonymous = homework_status && homework_status.indexOf('匿评中') != -1
|
|
|
const isAppealing = homework_status && homework_status.indexOf('申诉中') != -1
|
|
|
const attachments = item.attachments;
|
|
|
|
|
|
return(
|
|
|
<div className="ccomment comment_item_cont df clearfix" key={item.id}>
|
|
|
<div className="J_Comment_Face fl">
|
|
|
|
|
|
{item.image_url == '--' ?
|
|
|
<a href={`javascript:void(0)`} >
|
|
|
<img alt="用户头像" height="50"
|
|
|
src={`${getUrl()}/images/edu_user/anony.png`} width="50"/>
|
|
|
</a>
|
|
|
: <a href={`${_origin}/users/${item.user_login}`} target="_blank">
|
|
|
<img alt="用户头像" height="50"
|
|
|
src={`${getUrl()}/images/${item.image_url}`}
|
|
|
width="50"/>
|
|
|
</a>}
|
|
|
|
|
|
{/* <a href={`${_origin}/users/${item.user_login}`} target="_blank">
|
|
|
<img alt="用户头像" height="50" src={getImageUrl(`images/${item.image_url}`)} width="50"/>
|
|
|
</a> */}
|
|
|
</div>
|
|
|
|
|
|
<div className="t_content fl">
|
|
|
<div className="J_Comment_Reply">
|
|
|
<div className="comment_orig_content" style={{ margin:"0px" }}>
|
|
|
|
|
|
|
|
|
<div className="J_Comment_Info clearfix mt3">
|
|
|
<div className="t_info fl">
|
|
|
{
|
|
|
item.user_login==="--"? <a className="content-username hide fl">
|
|
|
{item.username}（{item.comment_role}）
|
|
|
</a>
|
|
|
:
|
|
|
<a href={`${_origin}/users/${item.user_login}`} className="content-username hide fl">
|
|
|
{item.username}（{item.comment_role}）
|
|
|
</a>
|
|
|
}
|
|
|
|
|
|
|
|
|
<span className="t_area fl">{item.time}</span>
|
|
|
{/* 分数 */}
|
|
|
{item.score !== null && <span className="score_area fl">{item.score}分</span>}
|
|
|
|
|
|
|
|
|
{/* !item.is_invalid && */}
|
|
|
{/* { item.delete && <Tooltip title={ "删除" } >
|
|
|
<i className="iconfont icon-shanchu mr5 fr" style={{marginLeft: '6px'}}
|
|
|
onClick={() => this.props.onDelete(item)}>
|
|
|
</i>
|
|
|
</Tooltip>} */}
|
|
|
{/* fr */}
|
|
|
{/* <WordsBtn style="blue" className="fr">回复</WordsBtn> */}
|
|
|
{ item.is_invalid ? <span className="validate_area fr">失效</span> :
|
|
|
<React.Fragment>
|
|
|
<WordsBtn style="blue" className="fr" onClick={this.state.show_reply ? this.cancelReply : this.showReply}>回复</WordsBtn>
|
|
|
{(isAppealing || isAnonymous) && item.can_appeal && item.appeal_status == 0 && <WordsBtn style="blue" className="fr mr20" onClick={this.state.show_appeal ? this.cancelAppeal : this.showAppeal}>申诉</WordsBtn>}
|
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{!!_content && _content !== 'null' && <div className="comment_content clearfix mt8" id={`reply_content_${item.id}`}>
|
|
|
<div className="color-grey-3" id={`reply_content_${item.id}`}>
|
|
|
<div className={"break_word_comments markdown-body"} dangerouslySetInnerHTML={{__html: _content}}></div>
|
|
|
<div className="cl"></div>
|
|
|
</div>
|
|
|
</div>}
|
|
|
{!_content && <span className="color656565 mt2 color-grey-9 font-12 mr8" style={{ display: 'inline-block'}}>{"暂未写评语"}</span>}
|
|
|
<div className="mt6">
|
|
|
{attachments && attachments.map((attaItem, key)=>{
|
|
|
return(
|
|
|
<div className="color-grey attachItem" key={key}>
|
|
|
<a className="color-grey ">
|
|
|
<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
|
|
|
</a>
|
|
|
<a href={attaItem.url}
|
|
|
className="mr12 color9B9B" length="58">
|
|
|
{attaItem.title}
|
|
|
</a>
|
|
|
<span className="color656565 mt2 color-grey-6 font-12 mr8">{attaItem.filesize}</span>
|
|
|
{/*{item.delete===true?<i className="font-14 iconfont icon-guanbi " id={item.id} aria-hidden="true" onClick={()=>this.onAttachmentRemove(item.id)}></i>:""}*/}
|
|
|
</div>
|
|
|
)
|
|
|
})}
|
|
|
</div>
|
|
|
|
|
|
<style>{`
|
|
|
.ccomment .childrenCommentsView .comment_item_cont .break_word_comments {
|
|
|
margin-top: 4px;
|
|
|
width: 94%;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
`}</style>
|
|
|
<div className="childrenCommentsView" style={{background: '#fff'}}>
|
|
|
{/* {(item && item.journals && item.journals.length) ? <div className="trangle"></div>: ''} */}
|
|
|
{this.renderChildenComments(item)}
|
|
|
{/* { item.isAllChildrenLoaded != true && item.journals && this.props.isChildCommentPagination == true && item.journals.length >= 5?
|
|
|
<Tooltip title={ "点击查看更多回复" } disableFocusListener={true}>
|
|
|
<div className="loadMoreChildComments" onClick={() => {this.props.loadMoreChildComments && this.props.loadMoreChildComments(item)}}>
|
|
|
<i className="iconfont icon-xiajiantou"></i>
|
|
|
</div>
|
|
|
</Tooltip>
|
|
|
: ''} */}
|
|
|
</div>
|
|
|
{/* style={{ height: '130px'}} */}
|
|
|
<p className="orig_reply" >
|
|
|
{/* 第二排右侧按钮区域 */}
|
|
|
{/* ${this.state.show_reply ? '回复' : '申诉'} */}
|
|
|
{(show_reply || show_appeal) &&
|
|
|
<React.Fragment>
|
|
|
<TPMMDEditor mdID={`${commentIndex}`} watch={false}
|
|
|
height={130} onChange={(val) => this.setState({ secondReplyContent: val})}
|
|
|
placeholder={`请输入内容`} noStorage={true}
|
|
|
></TPMMDEditor>
|
|
|
<div className="fr">
|
|
|
<a className="task-btn task-btn-orange fr" style={{height: '26px', lineHeight: '26px', width: '60px'}}
|
|
|
onClick={this.onSubmit}
|
|
|
>{this.state.show_reply ? '回复' : '申诉'}</a>
|
|
|
<a onClick={this.onCancel} className="defalutCancelbtn fr"
|
|
|
style={{height: '26px', width: '60px', fontSize: '14px', lineHeight: '26px', marginRight: '10px'}}>取消</a>
|
|
|
|
|
|
</div>
|
|
|
</React.Fragment>
|
|
|
}
|
|
|
</p>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default CCommentItem; |
