实训评阅封装,实训报告页调整end

dev_hss
杨树明 6 years ago
parent dec37e3d72
commit ee5d867ef3

@ -0,0 +1,137 @@
import React,{ Component } from "react";
import { Modal,Checkbox,Upload,Button,Icon,message,Input,Radio} from "antd";
import { WordNumberTextarea } from 'educoder';
import axios from 'axios';
class AppraiseModal extends Component{
constructor(props){
super(props);
this.state={
group_ids:[],
fileList:[],
textareaval:undefined,
Inputsval:undefined,
valuetype:1,
textareavaltype:false
}
}
onChanges=(e)=>{
this.setState({
valuetype:e.target.value
})
}
settextarea=(e)=>{
this.setState({
textareaval:e.target.value
})
}
Saves=()=>{
let{textareaval,valuetype}=this.state;
let newvaluetype=valuetype===1?false:true;
if(textareaval===undefined||textareaval===null||textareaval===""){
this.setState({
textareavaltype:true
})
return
}
let url=`/student_works/${this.props.match.params.homeworkid}/shixun_work_comment.json`
axios.post(url, {
comment:textareaval,
is_hidden:newvaluetype
}).then((response) => {
if(response.data.status===0){
this.props.showNotification(response.data.message)
this.props.Cancel()
}else{
this.props.showNotification(response.data.message)
}
}).catch((error) => {
console.log(error)
});
}
render(){
let {textareaval,Inputsval,textareavaltype,Inputsvaltype}=this.state;
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
};
return(
<div>
<Modal
keyboard={false}
className={"HomeworkModal"}
title={"评阅"}
visible={this.props.visible}
closable={false}
footer={null}
destroyOnClose={true}
>
<div className={"pd015"}>
<style>
{
`
.pd015{
padding: 0px 15px 15px 15px;
}
.font{
width: 48px;
height: 16px;
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(5,16,26,1);
line-height: 16px;
}
.newfont{
height: 16px;
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(5,16,26,1);
line-height: 16px;
margin-bottom: 5px;
}
`
}
</style>
<div className="clearfix">
<p className={"font mt10 mb10"}>
权限
</p>
<Radio.Group onChange={this.onChanges} value={this.state.valuetype}>
<Radio value={1} style={radioStyle} className={"newfont"}>可见 (学生查看老师的评阅内容</Radio>
<Radio value={2} style={radioStyle} className={"newfont"}>不可见 (仅对课堂老师可见</Radio>
</Radio.Group>
<p className={"font mt10 mb20"}>
内容
</p>
<WordNumberTextarea
placeholder={"请填写评阅内容"}
onInput={(e)=>this.settextarea(e)}
value={textareaval}
maxlength={500}
/>
<li style={{height:"20px",lineHeight:"20px"}} className={textareavaltype===true?"color-red mt20 mb10":"none"}><span>评阅内容不能为空</span></li>
</div>
<div className={textareavaltype===false?"mt20 clearfix edu-txt-center":"clearfix edu-txt-center"}>
<a className="task-btn color-white mr30" onClick={this.props.Cancel()}>{this.props.Cancelname || '取消'}</a>
<a className="task-btn task-btn-orange" onClick={this.Saves}>{this.props.Savesname || '确定'}</a>
</div>
</div>
</Modal>
</div>
)
}
}
export default AppraiseModal;

@ -8,7 +8,8 @@ import ConclusionEvaluation from './shixunreport/ConclusionEvaluation';
import OfficialAcademicTranscript from './shixunreport/OfficialAcademicTranscript';
import Coursesshixundetails from './shixunreport/Coursesshixundetails';
import Shixunechart from './shixunreport/Shixunechart';
import DownloadMessageysl from "../../modals/DownloadMessageysl";
import DownloadMessageysl from "../../modals/DownloadMessageysl"
import AppraiseModal from "../coursesPublic/AppraiseModal";
import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/mode/cmake/cmake';
import 'codemirror/mode/xml/xml';
@ -29,7 +30,9 @@ class ShixunWorkReport extends Component {
spinning:true,
DownloadType:false,
DownloadMessageval:undefined,
isspinning:false
isspinning:false,
showAppraiseModaltype:false,
work_comment_hidden:false
}
}
@ -41,8 +44,7 @@ class ShixunWorkReport extends Component {
if(child!=undefined){
params =child._getRequestParams()!==undefined?child._getRequestParams():{};
}
console.log("170");
console.log(params);
const urll=url+`?${queryString.stringify(params)}`;
axios.get(urll+ '&export=true').then((response) => {
if(response===undefined){
@ -72,6 +74,7 @@ class ShixunWorkReport extends Component {
}
}).catch((error) => {
console.log(error)
this.setState({ isspinning: false })
});
}
Downloadcal=()=>{
@ -100,6 +103,7 @@ class ShixunWorkReport extends Component {
}else{
this.setState({
data:result.data,
work_comment_hidden:result.data.work_comment_hidden,
spinning:false
})
}
@ -145,17 +149,56 @@ class ShixunWorkReport extends Component {
data:newdata
})
}
showAppraiseModal=()=>{
this.setState({
showAppraiseModaltype:true
})
}
hideAppraiseModal=()=>{
let{data}=this.state;
this.setState({
showAppraiseModaltype:false,
work_comment_hidden:data&&data.work_comment_hidden===true?true:data&&data.work_description!=null?true:false,
})
}
isdeleteModal=()=>{
let url =`/student_works/${this.props.match.params.homeworkid}/destroy_work_comment.json`
axios.delete(url).then((response) => {
// const { status } = response.data;
if(response.data.status===0){
this.props.showNotification(response.data.message)
}else{
this.props.showNotification(response.data.message)
}
})
.catch(function (error) {
console.log(error);
});
}
render() {
let{data} =this.state;
console.log(data)
console.log(this.props)
let{data,showAppraiseModaltype,work_comment_hidden} =this.state;
let category_id=data===undefined?"":data.category===null?"":data.category.category_id;
let homework_common_id=data===undefined?"":data.homework_common_id;
let homeworkid=this.props.match.params.homeworkid;
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
let showAppraiseModals=this.props&&this.props.isAdminOrTeacher()===true?work_comment_hidden===true?true:false:data&&data.work_description===null?false:true;
return (
data===undefined?"":<Spin indicator={antIcon} spinning={this.state.spinning}><div className="newMain clearfix ">
data===undefined?"":<Spin indicator={antIcon} spinning={this.state.spinning}>
{showAppraiseModaltype===true?<AppraiseModal
{...this.props}
{...this.state}
visible={showAppraiseModaltype}
Cancel={()=>this.hideAppraiseModal()}
/>:""}
<div className="newMain clearfix ">
<div className={"educontent mb20" }>
<div className="educontent">
<DownloadMessageysl
@ -181,18 +224,108 @@ class ShixunWorkReport extends Component {
<div style={{ width:'100%',height:'75px'}} >
<p className=" fl color-black mt25 summaryname">{data&&data.shixun_name}</p>
{/*{this.props.isAdmin()?<a className=" fr font-14 ml30 mt10 mr20 color-grey-9 ">导出实训报告数据</a>:""}*/}
<a onClick={this.goback} className="color-grey-6 fr font-16 ml30 mt15 mr20">返回</a>
<a onClick={this.goback} className="color-grey-6 fr font-14 ml20 mt15">返回</a>
{this.props.isAdmin() ? <a
className=" color-blue font-16 fr ml30 mt15"
className=" color-blue font-14 fr ml20 mt15"
onClick={()=>this.confirmysl(`/student_works/${homeworkid}/export_shixun_work_report.pdf`)}
> <Spin size="small" spinning={this.state.isspinning}>导出实训报告数据</Spin></a> : ""}
{this.props.isAdmin() ?work_comment_hidden===true? "":<a
className=" color-blue font-14 fr ml20 mt15"
onClick={()=>this.showAppraiseModal()}
>评阅</a> : ""}
</div>
<style>{
`
.shixunreporttitleboxtop {
border-bottom: 2px solid #fafafa;
text-align: justify;
height: 62px;
line-height: 24px;
padding-left: 28px;
}
.shixunreporttitleboxbom {
text-align: justify;
line-height: 24px;
}
.ml39{
margin-left: 39px;
}
.back_font{
height: 18px;
font-size: 18px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(51,51,51,1);
line-height: 18px;
margin-bottom: 19px;
}
.passfont{
display: inline-block;
margin-right: 72px;
}
.passfontmid{
display: inline-block;
margin-right: 36px;
}
.passfontbom{
display: inline-block;
margin-right: 58px;
}
.passfontbommid{
display: inline-block;
margin-right: 93px;
}
.color999{
color: #999999;
}
.colorCF3B3B{
color:#CF3B3B;
}
.color333{
color:#333333;
}
.mt19{
margin-top:19px;
}
`
}</style>
<div className="stud-class-set">
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">总体评价</div>
<div className="font-16 color-dark-21 shixunreporttitleboxtop pd20">总体评价</div>
<div className="font-16 color-dark-21 shixunreporttitleboxbom pd20">
<div style={{clear:"both",height:'100px'}}>
<div className="fl edu-back-white ml10 ">
<img alt="头像" className="radius" height="91" id="nh_user_logo" name="avatar_image"
src={"https://pre-newweb.educoder.net/images/avatars/User/8686"}
width="91"/>
</div>
<div className={"fl edu-back-white ml39 "}>
<p className={"back_font"}>陈晓</p>
<p className={"mb16"}>
<span className={"passfont"}><span className={"color999"}>通过</span> <span className={"colorCF3B3B"}>{data&&data.complete_count}/{data&&data.challenges_count}</span></span>
<span className={"passfontmid"}><span className={"color999"}>课堂最高完成效率</span> <span className={data&&data.max_efficiency===null?"color999":"color333"}>{data&&data.max_efficiency===null?'--':data&&data.max_efficiency}</span></span>
<span><span className={"color999"}>通关时间</span> <span className={data&&data.passed_time===null?"color999":"color333"}>{data&&data.passed_time===null?'--':data&&data.passed_time}</span></span>
</p>
<p>
<span className={"passfontbom"}><span className={"color999"}>经验值</span> <span className={"color333"}>{data&&data.myself_experience}/{data&&data.total_experience}</span></span>
<span className={"passfontbommid"}><span className={"color999"}>完成效率</span> <span className={data&&data.efficiency===null?"color999":"color333"}>{data&&data.efficiency===null?'--':data&&data.efficiency}</span></span>
<span><span className={"color999"}>实战耗时</span> <span className={data&&data.efficiency===null?"color999":"color333"}>{data&&data.time_consuming===null?'--':data&&data.time_consuming}</span></span>
</p>
</div>
</div>
</div>
<ConclusionEvaluation
data={data}
/>
@ -200,7 +333,7 @@ class ShixunWorkReport extends Component {
</div>
</div>
<div className="stud-class-set">
<div className="stud-class-set mt19">
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">阶段成绩</div>
@ -216,15 +349,10 @@ class ShixunWorkReport extends Component {
</div>
</div>
<div className="stud-class-set bor-bottom-greyE"
style={{display:data&&data.work_description===null?"none":""}}
>
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">个人总结</div>
<style>
{`
<style>
{`
.personalsummary{
border:1px solid rgba(235,235,235,1);
border-radius:2px;
}
.pad040{
@ -241,19 +369,62 @@ class ShixunWorkReport extends Component {
color: #999999!important;
font-size: 16px;
}
.pd30{
padding: 30px;
}
`}
</style>
<div className={"pad040"}>
<div className={"personalsummary"}>
</style>
<div className={"markdown-body"}
dangerouslySetInnerHTML={{__html: markdownToHTML(data&&data.work_description).replace(/▁/g, "▁▁▁")}}></div>
<div className="stud-class-set mt17"
style={{display:data&&data.work_description===null?"none":""}}
>
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitleboxtop pd20 color333">
个人总结
</div>
<div className="font-16 color-dark-21 shixunreporttitleboxbom pd30">
<div style={{minHeight:'50px'}}>
<div className={"personalsummary"}>
<div className={"markdown-body"}
dangerouslySetInnerHTML={{__html: markdownToHTML(data===undefined?"":data.work_description).replace(/▁/g, "▁▁▁")}}
></div>
</div>
</div>
</div>
</div>
</div>
<div className="stud-class-set bor-bottom-greyE">
{showAppraiseModals===true?<div className="stud-class-set mt17">
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitleboxtop pd20 color333">
老师评阅<span>{showAppraiseModals===true?"":"(仅对课堂老师可见)"}</span>
{this.props&&this.props.isAdminOrTeacher()===true?<a className="color-blue font-14 fr ml20"
onClick={()=>this.isdeleteModal()}
>删除</a>:""}
{this.props&&this.props.isAdminOrTeacher()===true?<a className="color-blue font-14 fr"
onClick={()=>this.showAppraiseModal()}
>编辑</a>:""}
</div>
<div className="font-16 color-dark-21 shixunreporttitleboxbom pd30">
<div style={{minHeight:'50px'}}>
<div className={"personalsummary"}>
<div className={"markdown-body"}
dangerouslySetInnerHTML={{__html: markdownToHTML("字符串或串(String)是由数字、字母、下划线组成的一串字符在Python中字符串用单引号或者双引号括起来。在很多情况下我们需要将两个字符串拼接起来形成一个字符串。在Python中字符串用单引号或者双引号括起来。 例如,一个人的姓名通常是由“姓氏”+“名字”组成的。在很多程序中,为了方便后续处理通常将姓氏和名字分别存在两个变量中,然后在显示时要将姓氏和名字拼接起来按全名显示。").replace(/▁/g, "▁▁▁")}}></div>
</div>
</div>
</div>
</div>
</div>:""}
<div className="stud-class-set bor-bottom-greyE mt17">
<div className="clearfix edu-back-white poll_list">
<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">图形统计</div>
<Shixunechart

@ -144,8 +144,17 @@ class ConclusionEvaluation extends Component {
.ant-table-tbody > tr{
height:64px;
}
// .Tablebox .ant-table-body table .ant-table-tbody > tr > td{
// border: none;
// }
.Tablebox .ant-table-body table .ant-table-thead > tr > th{
background: #fff;
border-bottom: 3px solid #fafafa !important;
}
`}</style>
<Table
className={"Tablebox"}
dataSource={datas}
columns={columns}
pagination={false}

Loading…
Cancel
Save