You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
9.8 KiB
370 lines
9.8 KiB
import React,{ Component } from "react";
|
|
import { Modal,Checkbox,Upload,Button,Icon,message,notification,Input} from "antd";
|
|
import { WordsBtn,getUrl, getUploadActionUrl,WordNumberTextarea} from 'educoder';
|
|
import axios from 'axios';
|
|
import Modals from '../../modals/Modals';
|
|
|
|
const CheckboxGroup = Checkbox.Group;
|
|
const { TextArea } = Input;
|
|
|
|
class AccessoryModal extends Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state={
|
|
group_ids:[],
|
|
fileList:[],
|
|
Modalstype:false,
|
|
Modalstopval:"",
|
|
ModalCancel:"",
|
|
ModalSave:"",
|
|
loadtype:false,
|
|
updatas:false,
|
|
shixunsreplace:false,
|
|
Errormessage:false,
|
|
description:undefined
|
|
}
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
}
|
|
|
|
//勾选实训
|
|
shixunhomeworkedit=(list)=>{
|
|
|
|
this.setState({
|
|
group_ids:list
|
|
})
|
|
|
|
}
|
|
// 附件相关 START
|
|
handleChange = (info) => {
|
|
let fileList = info.fileList;
|
|
console.log(fileList)
|
|
// for(var list of fileList ){
|
|
// console.log(fileList)
|
|
// }
|
|
this.setState({
|
|
fileList:fileList,
|
|
Errormessage:false,
|
|
});
|
|
}
|
|
|
|
onAttachmentRemove = (file) => {
|
|
// confirm({
|
|
// title: '确定要删除这个附件吗?',
|
|
// okText: '确定',
|
|
// cancelText: '取消',
|
|
// // content: 'Some descriptions',
|
|
// onOk: () => {
|
|
// this.deleteAttachment(file)
|
|
// },
|
|
// onCancel() {
|
|
// console.log('Cancel');
|
|
// },
|
|
// });
|
|
// return false;
|
|
|
|
// this.setState({
|
|
// Modalstype:true,
|
|
// Modalstopval:'确定要删除这个附件吗?',
|
|
// ModalSave: ()=>this.deleteAttachment(file),
|
|
// ModalCancel:this.cancelAttachment
|
|
// })
|
|
// return false;
|
|
if(!file.percent || file.percent == 100){
|
|
this.deleteAttachment(file);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
deleteAttachment = (file) => {
|
|
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
|
|
axios.delete(url, {
|
|
})
|
|
.then((response) => {
|
|
if (response.data) {
|
|
const { status } = response.data;
|
|
if (status == 0) {
|
|
console.log('--- success')
|
|
|
|
this.setState((state) => {
|
|
const index = state.fileList.indexOf(file);
|
|
const newFileList = state.fileList.slice();
|
|
newFileList.splice(index, 1);
|
|
return {
|
|
fileList: newFileList,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
ModalCancelModalCancel=()=>{
|
|
this.setState({
|
|
Modalstype:false,
|
|
Modalstopval:"",
|
|
ModalSave:this.ModalCancelModalCancel,
|
|
loadtype:false,
|
|
shixunsreplace:false,
|
|
})
|
|
this.props.Cancel()
|
|
}
|
|
Saves=()=>{
|
|
|
|
let id=this.props.categoryid;
|
|
let {fileList,description} =this.state;
|
|
|
|
let newfileList=[];
|
|
for(var list of fileList){
|
|
newfileList.push(list.response.id)
|
|
}
|
|
|
|
if (newfileList.length == 0) {
|
|
// this.props.showNotification('请先上传附件')
|
|
if(this.props.modalname === "补交附件"){
|
|
this.setState({
|
|
Errormessage:true,
|
|
shixunsreplace:false,
|
|
})
|
|
}else{
|
|
this.setState({
|
|
shixunsreplace:true,
|
|
Errormessage:false,
|
|
})
|
|
}
|
|
return;
|
|
}else{
|
|
this.setState({
|
|
shixunsreplace:false,
|
|
Errormessage:false,
|
|
})
|
|
}
|
|
|
|
let url= this.props.reviseAttachmentUrl || "/graduation_works/"+id+"/revise_attachment.json"
|
|
axios.post(url,{
|
|
description:description,
|
|
attachment_ids:newfileList
|
|
}).then((result)=>{
|
|
|
|
if(result.data.status===0){
|
|
this.props.Cancel()
|
|
this.props.setupdate()
|
|
|
|
// this.setState({
|
|
// Modalstype:true,
|
|
// Modalstopval:result.data.message,
|
|
// ModalSave:this.ModalCancelModalCancel,
|
|
// loadtype:true
|
|
// })
|
|
this.ModalCancelModalCancel()
|
|
|
|
notification.open({
|
|
message: '提示',
|
|
description:
|
|
'提交成功'
|
|
});
|
|
if(this.props.seeworks!=undefined){
|
|
this.props.history.push(this.props.seeworks);
|
|
}
|
|
|
|
}
|
|
}).catch((error)=>{
|
|
|
|
})
|
|
}
|
|
|
|
settextarea=(e)=>{
|
|
this.setState({
|
|
description:e.target.value
|
|
})
|
|
}
|
|
//确认
|
|
hidestartshixunsreplace=()=>{
|
|
let id=this.props.categoryid;
|
|
let {fileList,description} =this.state;
|
|
|
|
let newfileList=[];
|
|
for(var list of fileList){
|
|
newfileList.push(list.response.id)
|
|
}
|
|
let url= this.props.reviseAttachmentUrl || "/graduation_works/"+id+"/revise_attachment.json"
|
|
axios.post(url,{
|
|
description:description,
|
|
attachment_ids:newfileList
|
|
}).then((result)=>{
|
|
|
|
if(result.data.status===0){
|
|
this.props.Cancel()
|
|
this.props.setupdate()
|
|
|
|
// this.setState({
|
|
// Modalstype:true,
|
|
// Modalstopval:result.data.message,
|
|
// ModalSave:this.ModalCancelModalCancel,
|
|
// loadtype:true
|
|
// })
|
|
|
|
this.ModalCancelModalCancel()
|
|
notification.open({
|
|
message: '提示',
|
|
description:
|
|
'提交成功'
|
|
});
|
|
if(this.props.seeworks!=undefined){
|
|
this.props.history.push(this.props.seeworks);
|
|
}
|
|
|
|
}
|
|
}).catch((error)=>{
|
|
|
|
})
|
|
}
|
|
//取消
|
|
hidestartshixunsreplacetwo=()=>{
|
|
this.setState({
|
|
shixunsreplace:false,
|
|
})
|
|
}
|
|
|
|
render(){
|
|
let {settextarea,fileList,
|
|
Modalstype,
|
|
Modalstopval,
|
|
ModalCancel,
|
|
ModalSave,
|
|
loadtype,
|
|
shixunsreplace,
|
|
description
|
|
}=this.state;
|
|
let {course_groups}=this.props;
|
|
const uploadProps = {
|
|
width: 600,
|
|
// https://github.com/ant-design/ant-design/issues/15505
|
|
// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
|
|
// showUploadList: false,
|
|
action: `${getUploadActionUrl()}`,
|
|
onChange: this.handleChange,
|
|
onRemove: this.onAttachmentRemove,
|
|
beforeUpload: (file) => {
|
|
console.log('beforeUpload', file.name);
|
|
const isLt150M = file.size / 1024 / 1024 < 150;
|
|
if (!isLt150M) {
|
|
this.props.showNotification('文件大小必须小于150MB!');
|
|
}
|
|
return isLt150M;
|
|
},
|
|
};
|
|
|
|
return(
|
|
<React.Fragment>
|
|
|
|
<Modal
|
|
keyboard={false}
|
|
title="提示"
|
|
visible={shixunsreplace}
|
|
closable={false}
|
|
footer={null}
|
|
>
|
|
<div className="task-popup-content">
|
|
<p className="task-popup-text-center font-16 ">还未上传附件</p>
|
|
<p className="task-popup-text-center font-16 pb20">是否确认提交作品?</p>
|
|
</div>
|
|
<div className="task-popup-submit clearfix">
|
|
<a className="task-btn task-btn-orange fr "
|
|
onClick={() => this.hidestartshixunsreplace()}>确认</a>
|
|
<a className="task-btn fr mr50"
|
|
onClick={() => this.hidestartshixunsreplacetwo()}>取消</a>
|
|
</div>
|
|
</Modal>
|
|
{/*提示*/}
|
|
<Modals
|
|
modalsType={Modalstype}
|
|
modalsTopval={Modalstopval}
|
|
modalCancel={ModalCancel}
|
|
modalSave={ModalSave}
|
|
loadtype= {loadtype}
|
|
|
|
/>
|
|
<Modal
|
|
keyboard={false}
|
|
className={"HomeworkModal"}
|
|
title={this.props.modalname}
|
|
visible={this.props.visible}
|
|
closable={false}
|
|
footer={null}
|
|
destroyOnClose={true}
|
|
>
|
|
<div className="task-popup-content">
|
|
<p className="task-popup-text-center font-16">
|
|
|
|
<span className={"color-blue underline"}> </span>
|
|
</p>
|
|
|
|
<style>{`
|
|
.uploadBtn.ant-btn {
|
|
border: none;
|
|
color: #4CACFF;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
padding: 0 6px;
|
|
}
|
|
.ant-upload-list-item:hover .ant-upload-list-item-info{
|
|
background-color:#fff;
|
|
}
|
|
.upload_1 .ant-upload-list {
|
|
width: 350px;
|
|
}
|
|
.ant-upload-select{
|
|
float: left;
|
|
}
|
|
.ant-upload-list :nth-child(1).ant-upload-list-item {
|
|
margin-top:31px;
|
|
}
|
|
`}</style>
|
|
|
|
<p >
|
|
<Upload {...uploadProps} fileList={this.state.fileList} className="upload_1">
|
|
<Button className="uploadBtn">
|
|
<Icon type="upload" /> 选择文件
|
|
</Button>
|
|
(单个文件最大150M)
|
|
</Upload>
|
|
</p>
|
|
|
|
<WordNumberTextarea
|
|
placeholder={`请在此输入补交附件的原因，最大限制${this.props.maxFontLength || 100}个字符`}
|
|
onInput={(e)=>this.settextarea(e)}
|
|
value={description}
|
|
maxlength={100}
|
|
/>
|
|
|
|
{
|
|
this.state.Errormessage && this.state.Errormessage === true ?
|
|
<p className="color-red mt5 mb5 " style={{width: " 100%", height: "20px"}}>
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>还未上传附件</span>
|
|
</p>
|
|
: ""
|
|
|
|
}
|
|
{this.state.updatas===true?<span className={"color-red"}>请上传附件</span>:""}
|
|
<div className="clearfix mt30 edu-txt-center mb10">
|
|
<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>
|
|
</React.Fragment>
|
|
|
|
)
|
|
}
|
|
}
|
|
export default AccessoryModal; |