|
|
|
|
@ -0,0 +1,163 @@
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import {Button, Card, Row, Col ,Upload,Icon,message} from 'antd';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import {getImageUrl,getUrl,appendFileSizeToUploadFileAll,appendFileSizeToUploadFile} from 'educoder';
|
|
|
|
|
|
|
|
|
|
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
|
|
|
|
|
|
|
|
|
|
class CompetitionContentsMd extends Component{
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.contentMdRef = React.createRef();
|
|
|
|
|
this.state={
|
|
|
|
|
contentFileList:[]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount(){
|
|
|
|
|
window.document.title = '竞赛';
|
|
|
|
|
let {mdContentdata}=this.props;
|
|
|
|
|
// this.gettitledata()
|
|
|
|
|
|
|
|
|
|
// is_pdf: false
|
|
|
|
|
//
|
|
|
|
|
let contentFileList = mdContentdata===undefined?[]:mdContentdata.attachments===undefined?[]:mdContentdata.attachments.map((item) => {
|
|
|
|
|
return {
|
|
|
|
|
id: item.id,
|
|
|
|
|
uid: item.id,
|
|
|
|
|
name: appendFileSizeToUploadFile(item),
|
|
|
|
|
url: item.url,
|
|
|
|
|
filesize: item.filesize,
|
|
|
|
|
status: 'done',
|
|
|
|
|
response:{id: item.id}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.setState({
|
|
|
|
|
contentFileList:contentFileList
|
|
|
|
|
})
|
|
|
|
|
this.contentMdRef.current.setValue(mdContentdata===undefined?"":mdContentdata.md_content===undefined?"":mdContentdata.md_content || '')
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleContentUploadChange = (info) => {
|
|
|
|
|
let contentFileList = info.fileList;
|
|
|
|
|
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onAttachmentRemove = (file, stateName) => {
|
|
|
|
|
debugger
|
|
|
|
|
if(file.response!=undefined){
|
|
|
|
|
this.props.confirm({
|
|
|
|
|
content: '是否确认删除?',
|
|
|
|
|
|
|
|
|
|
onOk: () => {
|
|
|
|
|
this.deleteAttachment(file, stateName)
|
|
|
|
|
},
|
|
|
|
|
onCancel() {
|
|
|
|
|
console.log('Cancel');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
deleteAttachment = (file, stateName) => {
|
|
|
|
|
// 初次上传不能直接取uid
|
|
|
|
|
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.props.showNotification(response.data.message);
|
|
|
|
|
this.setState((state) => {
|
|
|
|
|
const index = state[stateName].indexOf(file);
|
|
|
|
|
const newFileList = state[stateName].slice();
|
|
|
|
|
newFileList.splice(index, 1);
|
|
|
|
|
return {
|
|
|
|
|
[stateName]: newFileList,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
handleSubmit = () => {
|
|
|
|
|
let {contentFileList}=this.state;
|
|
|
|
|
const mdContnet = this.contentMdRef.current.getValue().trim();
|
|
|
|
|
let attachment_ids = contentFileList.map(item => {
|
|
|
|
|
return item.response ? item.response.id : item.id
|
|
|
|
|
})
|
|
|
|
|
console.log(attachment_ids)
|
|
|
|
|
|
|
|
|
|
let url=`/competitions/${this.props.match.params.identifier}/update_md_content.json`;
|
|
|
|
|
axios.post(url,{
|
|
|
|
|
md_content_id:this.props.mdContentdata.md_id,
|
|
|
|
|
competition_module_id:this.props.mdContentdata.id,
|
|
|
|
|
content:mdContnet,
|
|
|
|
|
name:"编辑",
|
|
|
|
|
attachment_ids:attachment_ids
|
|
|
|
|
}
|
|
|
|
|
).then((response) => {
|
|
|
|
|
if(response.data.status===0){
|
|
|
|
|
this.props.showNotification(response.data.message);
|
|
|
|
|
this.props.getlistdata(this.props.thiskeys);
|
|
|
|
|
this.props.hideCompetitionedit();
|
|
|
|
|
}else{
|
|
|
|
|
this.props.showNotification(response.data.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.log(error)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
let {contentFileList}=this.state;
|
|
|
|
|
const uploadProps = {
|
|
|
|
|
width: 600,
|
|
|
|
|
fileList: contentFileList,
|
|
|
|
|
multiple: true,
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/15505
|
|
|
|
|
// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
|
|
|
|
|
// showUploadList: false,
|
|
|
|
|
action: `${getUrl()}/api/attachments.json`,
|
|
|
|
|
onChange: this.handleContentUploadChange,
|
|
|
|
|
onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
|
|
|
|
|
beforeUpload: (file) => {
|
|
|
|
|
console.log('beforeUpload', file.name);
|
|
|
|
|
const isLt150M = file.size / 1024 / 1024 < 150;
|
|
|
|
|
if (!isLt150M) {
|
|
|
|
|
message.error('文件大小必须小于150MB!');
|
|
|
|
|
}
|
|
|
|
|
return isLt150M;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
console.log(contentFileList)
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
<TPMMDEditor ref={this.contentMdRef} placeholder="请输入任务内容说明，最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500}
|
|
|
|
|
className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
|
|
|
|
|
<Upload {...uploadProps} className="upload_1 newWorkUpload">
|
|
|
|
|
<Button className="uploadBtn">
|
|
|
|
|
<Icon type="upload" /> 上传附件
|
|
|
|
|
</Button>
|
|
|
|
|
(单个文件150M以内)
|
|
|
|
|
</Upload>
|
|
|
|
|
|
|
|
|
|
<div className="clearfix mt30 mb30">
|
|
|
|
|
{/* htmlType="submit" */}
|
|
|
|
|
<Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
|
|
|
|
|
<a className="defalutCancelbtn fl" onClick={() => this.props.hideCompetitionedit()}>取消</ a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
export default CompetitionContentsMd;
|
