forked from Gitlink/forgeplus-react
356 lines
13 KiB
JavaScript
356 lines
13 KiB
JavaScript
import '../katex.css';
|
||
import '../css/Courses.css';
|
||
import React, { Component } from "react";
|
||
import { ImageLayer2 } from 'educoder';
|
||
import { Button, Row, Col } from "antd";
|
||
import axios from 'axios';
|
||
import Modals from '../../modals/Modals';
|
||
import moment from 'moment';
|
||
import WorkDetailPageHeader from './common/WorkDetailPageHeader'
|
||
import CommonWorkAppraiseReply from './reply/CommonWorkAppraiseReply'
|
||
import CommonWorkAppraiseReviseAttachments from './CommonWorkAppraiseReviseAttachments'
|
||
import LeaderIcon from './common/LeaderIcon';
|
||
import RenderHtml from '../../../components/render-html';
|
||
class CommonWorkAppraise extends Component {
|
||
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
course_name: "",
|
||
homework_name: "",
|
||
search: '',
|
||
get_next_work: undefined,
|
||
attachments: [],
|
||
revise_attachments: [],
|
||
get_next_worktype: false
|
||
}
|
||
}
|
||
getWork = () => {
|
||
let workId = this.props.match.params.workId;
|
||
let studentWorkId = this.props.match.params.studentWorkId;
|
||
|
||
// https://www.showdoc.cc/127895880302646?page_id=1957586480118445
|
||
const url = `/student_works/${studentWorkId}.json`
|
||
|
||
axios.get(url).then((result) => {
|
||
if (result.data.course_id) {
|
||
|
||
this.setState({
|
||
...result.data
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
getReviseAttachments = () => {
|
||
let studentWorkId = this.props.match.params.studentWorkId;
|
||
const url = `/student_works/${studentWorkId}/supply_attachments.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result.data.revise_attachments) {
|
||
|
||
this.setState({
|
||
...result.data
|
||
})
|
||
}
|
||
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
componentDidUpdate(prevProps, prevState) {
|
||
if (this.props.match.params.studentWorkId != prevProps.match.params.studentWorkId) {
|
||
this.getWork();
|
||
this.getReviseAttachments()
|
||
this.commonWorkAppraiseReply && this.commonWorkAppraiseReply.fetchAllComments()
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.getWork();
|
||
this.getReviseAttachments()
|
||
}
|
||
|
||
get_next_works = (id) => {
|
||
let workId = this.props.match.params.workId;
|
||
let url
|
||
if (id) {
|
||
url = `/homework_commons/${workId}/get_next_work.json?work_id=${id}`;
|
||
} else {
|
||
url = `/homework_commons/${workId}/get_next_work.json?work_id=${this.props.match.params.studentWorkId}`;
|
||
}
|
||
axios.get(url).then((result) => {
|
||
this.setState({
|
||
get_next_work: result.data,
|
||
get_next_worktype: true
|
||
})
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
|
||
gotoget_next_work = (id) => {
|
||
|
||
if (this.props.match.path === `/classrooms/:coursesId/common_homework/:workId/:studentWorkId/appraise`) {
|
||
this.props.history.replace(`/classrooms/${this.props.match.params.coursesId}/common_homeworks/${this.props.match.params.workId}/${id}/appraise`);
|
||
}
|
||
|
||
if (this.props.match.path === `/classrooms/:coursesId/group_homework/:workId/:studentWorkId/appraise`) {
|
||
this.props.history.replace(`/classrooms/${this.props.match.params.coursesId}/group_homework/${this.props.match.params.workId}/${id}/appraise`);
|
||
}
|
||
|
||
if (this.props.match.path === `/classrooms/:coursesId/common_homeworks/:workId/:studentWorkId/appraise`) {
|
||
this.props.history.replace(`/classrooms/${this.props.match.params.coursesId}/common_homeworks/${this.props.match.params.workId}/${id}/appraise`);
|
||
}
|
||
|
||
if (this.props.match.path === `/classrooms/:coursesId/group_homeworks/:workId/:studentWorkId/appraise`) {
|
||
this.props.history.replace(`/classrooms/${this.props.match.params.coursesId}/group_homeworks/${this.props.match.params.workId}/${id}/appraise`);
|
||
}
|
||
|
||
this.setState({
|
||
get_next_worktype: false
|
||
})
|
||
}
|
||
|
||
onAttachmentRemove = (id) => {
|
||
this.setState({
|
||
Modalstype: true,
|
||
// Modalstopval:'确定要删除这个附件吗?',
|
||
Modalstopval: '是否确认删除?',
|
||
|
||
ModalSave: () => this.deleteAttachment(id),
|
||
ModalCancel: this.cancelAttachment
|
||
})
|
||
}
|
||
deleteAttachment = (id) => {
|
||
const url = `/attachments/${id}.json`
|
||
axios.delete(url, {
|
||
})
|
||
.then((response) => {
|
||
if (response.data) {
|
||
const { status } = response.data;
|
||
if (status == 0) {
|
||
this.getWork()
|
||
this.getReviseAttachments();
|
||
this.cancelAttachment();
|
||
}
|
||
}
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
}
|
||
cancelAttachment = () => {
|
||
this.setState({
|
||
Modalstype: false,
|
||
Modalstopval: '',
|
||
ModalSave: "",
|
||
ModalCancel: ""
|
||
})
|
||
}
|
||
onReplySuccess = () => {
|
||
this.getReviseAttachments();
|
||
}
|
||
|
||
render() {
|
||
let { course_name, get_next_work, get_next_worktype,
|
||
attachments, project_info, work_members, is_evaluation,
|
||
description, update_user_name, commit_user_name, update_time, commit_time, author_name,
|
||
Modalstype, Modalstopval, ModalCancel, ModalSave, loadtype, is_leader_work
|
||
} = this.state;
|
||
|
||
// let courseId=this.props.match.params.coursesId;
|
||
// let category_id=this.props.match.params.category_id;
|
||
let studentWorkId = this.props.match.params.studentWorkId;
|
||
const isAdmin = this.props.isAdmin()
|
||
|
||
document.title = course_name && course_name;
|
||
return (
|
||
<div>
|
||
|
||
<WorkDetailPageHeader
|
||
{...this.props} {...this.state}
|
||
noTab={true}
|
||
moduleName={'作业详情'}
|
||
getReviseAttachments={this.getReviseAttachments}
|
||
>
|
||
{/*提示*/}
|
||
<Modals
|
||
modalsType={Modalstype}
|
||
modalsTopval={Modalstopval}
|
||
modalCancel={ModalCancel}
|
||
modalSave={ModalSave}
|
||
loadtype={loadtype}
|
||
/>
|
||
{/* 内容区 */}
|
||
{/* <div className="padding40 memoContent new_li">
|
||
</div> */}
|
||
|
||
<div className={"appraise imageLayerParent "} style={{}}>
|
||
|
||
<style>{`
|
||
.workAppraise>div:last-child {
|
||
border-bottom: none !important;
|
||
}
|
||
`}</style>
|
||
<ImageLayer2 parentSel=".workAppraise" childSel="a.imageTarget"></ImageLayer2>
|
||
<div className={"workAppraise"}>
|
||
{(description || (attachments && attachments.length != 0)) && <div className={"stud-class-set edu-back-white padding20-30"}>
|
||
<div className={"color-grey-6 mb15 font-16"}>
|
||
内容
|
||
</div>
|
||
<RenderHtml className="markdown-body ml20" value={description} />
|
||
|
||
{attachments.map((item, key) => {
|
||
return (
|
||
<div className="color-grey" key={key}>
|
||
<a className="color-grey ml20">
|
||
<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
|
||
</a>
|
||
|
||
<a href={item.url}
|
||
className="mr12 color9B9B imageTarget" length="58" title={`${item.title && item.title.length > 40 ? item.title : ''}`}>
|
||
{item.title}
|
||
</a>
|
||
<span className="color656565 mt2 color-grey-6 font-12 mr8">{item.filesize}</span>
|
||
{/*{item.delete===true?<i className="font-14 iconfont icon-guanbi " id={item.id} aria-hidden="true" onClick={()=>this.onAttachmentRemove(item.id)}></i>:""}*/}
|
||
{item.delete === true ? <i className="font-14 iconfont icon-guanbi " id={item.id} aria-hidden="true" onClick={() => this.onAttachmentRemove(item.id)}></i> : ""}
|
||
{/* style={{display: 'none'}} */}
|
||
</div>
|
||
)
|
||
})}
|
||
|
||
|
||
<div className={"color-grey-6 h20 ml20"}>
|
||
{update_time &&
|
||
<React.Fragment>
|
||
<span className={"color9B9B fr"}>更新</span>
|
||
<span className={"fr font-14 mr10 ml10"}>{update_user_name}</span>
|
||
<span className={"color9B9B fr"}>
|
||
{moment(update_time).format('YYYY-MM-DD HH:mm') === "Invalid date" ? "" : moment(update_time).format('YYYY-MM-DD HH:mm')}
|
||
</span>
|
||
</React.Fragment>}
|
||
|
||
{commit_time &&
|
||
<React.Fragment>
|
||
<span className={"color9B9B fr mr30"}>提交</span>
|
||
<span className={"fr font-14 mr10 ml10"}>{commit_user_name}</span>
|
||
<span className={" color9B9B fr"}>
|
||
{moment(commit_time).format('YYYY-MM-DD HH:mm') === "Invalid date" ? "" : moment(commit_time).format('YYYY-MM-DD HH:mm')}
|
||
</span>
|
||
</React.Fragment>}
|
||
</div>
|
||
|
||
</div>}
|
||
|
||
<CommonWorkAppraiseReviseAttachments {...this.state}
|
||
onAttachmentRemove={this.onAttachmentRemove}
|
||
></CommonWorkAppraiseReviseAttachments>
|
||
|
||
{is_evaluation != true && project_info && project_info.name && <div className={"stud-class-set bor-top-greyE edu-back-white padding20-30"}>
|
||
<div className={"color-grey-6 mb10"}>
|
||
关联项目
|
||
</div>
|
||
<div className={"ml20"}>
|
||
<a className="color-blue" href={`/projects/${project_info.id}`}>{project_info.name}</a>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
{is_evaluation != true && work_members && !!work_members.length && <div className={"stud-class-set bor-top-greyE edu-back-white padding20-30"}>
|
||
<div className={"color-grey-6 mb10"}>
|
||
全部组员
|
||
</div>
|
||
<div className={"ml20 color-grey-6"}>
|
||
<div className="">
|
||
当前组员：{author_name} {is_leader_work && <LeaderIcon small={true} ></LeaderIcon>}
|
||
</div>
|
||
<div>
|
||
其他组员：
|
||
{work_members.map((item, index) => {
|
||
return <React.Fragment>
|
||
{isAdmin ?
|
||
<a className={`color-blue ${index == 0 ? '' : 'ml12'}`}
|
||
onClick={() => this.props.toWorkDetailPage(this.props.match.params, null, item.work_id)}
|
||
>
|
||
{item.user_name}
|
||
</a> : <span className={`${index == 0 ? '' : 'ml12'}`} >{item.user_name}</span>}
|
||
{item.is_leader && <LeaderIcon small={true} ></LeaderIcon>}
|
||
</React.Fragment>
|
||
})}
|
||
</div>
|
||
{isAdmin && <div className="font-12 color-grey-9">
|
||
<span >温馨提示：</span>
|
||
点击其他组员的姓名，可以快速评阅TA的作品
|
||
</div>}
|
||
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
|
||
|
||
{/* task_type={datalist&&datalist.task_type} */}
|
||
<CommonWorkAppraiseReply {...this.props} task_id={studentWorkId}
|
||
onReplySuccess={this.onReplySuccess} {...this.state}
|
||
wrappedComponentRef={(ref) => { this.commonWorkAppraiseReply = ref }}
|
||
get_next_works={() => this.get_next_works()}
|
||
></CommonWorkAppraiseReply>
|
||
|
||
</div>
|
||
|
||
</WorkDetailPageHeader>
|
||
{isAdmin === true && get_next_worktype === true ? <style>
|
||
{
|
||
`
|
||
.newFooter{
|
||
display:none !important;
|
||
}
|
||
.-task-sidebar{
|
||
display:none !important;
|
||
}
|
||
.educontent{
|
||
margin-bottom: 0px !important;
|
||
}
|
||
`
|
||
}
|
||
</style> : ""}
|
||
|
||
{isAdmin === true && get_next_worktype === true ? <div className="clearfix bor-bottom-greyE edu-back-white orderingbox newshixunbottombtn">
|
||
|
||
<div className={"educontent mt5"}>
|
||
<div>
|
||
|
||
<Row>
|
||
<Col span={12} className={"mt13"}>
|
||
{get_next_work && get_next_work.work_id === null ?
|
||
<Row type="flex" justify="start">
|
||
<Col span={8}><div style={{ color: "#333333" }}>已全部评阅完</div></Col>
|
||
</Row> : <Row type="flex" justify="start">
|
||
<Col><div style={{ color: "#333333" }}>{get_next_work && get_next_work ? `下一位待评阅人员：${get_next_work && get_next_work.user_name}` : ""}</div></Col>
|
||
<Col span={4}><a className={"ml10 color-blue font-15"} onClick={() => this.get_next_works(get_next_work && get_next_work.work_id)}>跳过</a></Col>
|
||
</Row>}
|
||
</Col>
|
||
{get_next_work && get_next_work.work_id === null ? "" : <Col span={12} className={"mt8"}>
|
||
<Row type="flex" justify="end">
|
||
<Col span={4}>
|
||
<Button className={"newshixunmode"} type="primary"
|
||
onClick={() => this.gotoget_next_work(get_next_work && get_next_work.work_id)}
|
||
// loading={this.state.hometypepvisible}
|
||
>评阅</Button>
|
||
</Col>
|
||
</Row>
|
||
</Col>}
|
||
</Row>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> : ""}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default CommonWorkAppraise;
|