|
|
import React,{ Component } from "react";
|
|
|
import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd";
|
|
|
import axios from 'axios'
|
|
|
import '../css/busyWork.css'
|
|
|
import '../css/Courses.css'
|
|
|
import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder'
|
|
|
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
|
|
|
import CBreadcrumb from '../common/CBreadcrumb'
|
|
|
|
|
|
const confirm = Modal.confirm;
|
|
|
const $ = window.$
|
|
|
const MAX_TITLE_LENGTH = 60;
|
|
|
class NewWork extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.contentMdRef = React.createRef();
|
|
|
this.answerMdRef = React.createRef();
|
|
|
|
|
|
this.state={
|
|
|
title_value:"",
|
|
|
title_num: 0,
|
|
|
contentFileList: [],
|
|
|
answerFileList: [],
|
|
|
workLoaded: false,
|
|
|
base_on_project: true,
|
|
|
category: {},
|
|
|
min_num: 2,
|
|
|
max_num: 10,
|
|
|
}
|
|
|
}
|
|
|
componentDidMount () {
|
|
|
let {typeId, coursesId, pageType, workId}=this.props.match.params;
|
|
|
const isEdit = pageType === "edit"
|
|
|
this.isEdit = isEdit;
|
|
|
if (isEdit) {
|
|
|
this.fetchWork(workId)
|
|
|
} else {
|
|
|
this.fetchCourseData(coursesId)
|
|
|
}
|
|
|
}
|
|
|
fetchCourseData = (courseId) => {
|
|
|
const isGroup = this.props.isGroup()
|
|
|
const url = `/courses/${courseId}/homework_commons/new.json?type=${isGroup ? 3 : 1}`
|
|
|
axios.get(url, {
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.course_name) {
|
|
|
const data = response.data;
|
|
|
this.setState({
|
|
|
course_id: data.course_id,
|
|
|
course_name: data.course_name,
|
|
|
category: data.category,
|
|
|
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
fetchWork = (workId) => {
|
|
|
const url = `/homework_commons/${workId}/edit.json`
|
|
|
axios.get(url, {
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.name) {
|
|
|
const data = response.data;
|
|
|
|
|
|
const contentFileList = data.attachments.map(item => {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
uid: item.id,
|
|
|
name: appendFileSizeToUploadFile(item),
|
|
|
url: item.url,
|
|
|
filesize: item.filesize,
|
|
|
status: 'done'
|
|
|
}
|
|
|
})
|
|
|
const answerFileList = data.ref_attachments.map(item => {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
uid: item.id,
|
|
|
name: appendFileSizeToUploadFile(item),
|
|
|
url: item.url,
|
|
|
filesize: item.filesize,
|
|
|
status: 'done'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
this.setState({
|
|
|
...data,
|
|
|
// course_id: data.course_id,
|
|
|
// course_name: data.course_name,
|
|
|
// category: data.category,
|
|
|
title_num: parseInt(data.name.length),
|
|
|
workLoaded: true,
|
|
|
init_min_num: data.min_num,
|
|
|
init_max_num: data.max_num,
|
|
|
// description: data.description,
|
|
|
reference_answer: data.reference_answer,
|
|
|
contentFileList,
|
|
|
answerFileList,
|
|
|
}, () => {
|
|
|
setTimeout(() => {
|
|
|
this.contentMdRef.current.setValue(data.description || '')
|
|
|
this.answerMdRef.current.setValue(data.reference_answer || '')
|
|
|
|
|
|
}, 2000)
|
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
title: data.name,
|
|
|
description: data.description || '',
|
|
|
reference_answer: data.reference_answer || '',
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 输入title
|
|
|
changeTitle=(e)=>{
|
|
|
console.log(e.target.value.length);
|
|
|
this.setState({
|
|
|
title_num: parseInt(e.target.value.length)
|
|
|
})
|
|
|
}
|
|
|
handleSubmit = () => {
|
|
|
const courseId = this.state.course_id || this.props.match.params.coursesId ;
|
|
|
|
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
console.log(values)
|
|
|
const mdContnet = this.contentMdRef.current.getValue().trim();
|
|
|
console.log(mdContnet)
|
|
|
values.description = mdContnet;
|
|
|
// return;
|
|
|
|
|
|
{/* max={has_commit ? init_min_num : null } */}
|
|
|
{/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) } */}
|
|
|
// 已有提交作品，人数范围只能扩大
|
|
|
const { has_commit, max_num, init_max_num, min_num, init_min_num } = this.state;
|
|
|
if (has_commit) {
|
|
|
if (max_num < init_max_num || min_num > init_min_num) {
|
|
|
this.props.showNotification(`已有提交作品，人数范围只能扩大(原设置为：${init_min_num} - ${init_max_num})`)
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// const errKeys = Object.keys(err); // || errKeys.length == 1 && errKeys[0] == 'content' && mdContnet
|
|
|
if (!err) {
|
|
|
if (this.isEdit) {
|
|
|
this.doEdit(courseId, values)
|
|
|
} else {
|
|
|
this.doNew(courseId, values)
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
$("html").animate({ scrollTop: $('html').scrollTop() - 100 })
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
doEdit = (courseId, values) => {
|
|
|
const workId = this.props.match.params.workId
|
|
|
const newUrl = `/homework_commons/${workId}.json`
|
|
|
|
|
|
let attachment_ids = this.state.contentFileList.map(item => {
|
|
|
return item.response ? item.response.id : item.id
|
|
|
})
|
|
|
let reference_attachment_ids = this.state.answerFileList.map(item => {
|
|
|
return item.response ? item.response.id : item.id
|
|
|
})
|
|
|
|
|
|
const { min_num, max_num, base_on_project, category } = this.state
|
|
|
const isGroup = this.props.isGroup()
|
|
|
axios.put(newUrl, {
|
|
|
type: isGroup ? 3 : 1,
|
|
|
name: values.title,
|
|
|
description: values.description,
|
|
|
reference_answer: values.reference_answer,
|
|
|
attachment_ids,
|
|
|
reference_attachment_ids,
|
|
|
|
|
|
min_num,
|
|
|
max_num,
|
|
|
base_on_project
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.showNotification('保存成功')
|
|
|
this.props.toWorkListPage(this.props.match.params, workId)
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
doNew = (courseId, values) => {
|
|
|
const newUrl = `/courses/${courseId}/homework_commons.json`
|
|
|
|
|
|
let attachment_ids = this.state.contentFileList.map(item => {
|
|
|
return item.response ? item.response.id : item.id
|
|
|
})
|
|
|
let reference_attachment_ids = this.state.answerFileList.map(item => {
|
|
|
return item.response ? item.response.id : item.id
|
|
|
})
|
|
|
const isGroup = this.props.isGroup()
|
|
|
const { min_num, max_num, base_on_project, category } = this.state
|
|
|
|
|
|
axios.post(newUrl, {
|
|
|
type: isGroup ? 3 : 1,
|
|
|
name: values.title,
|
|
|
description: values.description,
|
|
|
reference_answer: values.reference_answer,
|
|
|
attachment_ids,
|
|
|
reference_attachment_ids,
|
|
|
|
|
|
min_num,
|
|
|
max_num,
|
|
|
base_on_project
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.showNotification('保存成功')
|
|
|
this.props.toWorkListPage(this.props.match.params, response.data.homework_id)
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
handleContentUploadChange = (info) => {
|
|
|
let contentFileList = info.fileList;
|
|
|
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
|
|
|
}
|
|
|
handleAnswerUploadChange = (info) => {
|
|
|
let answerFileList = info.fileList;
|
|
|
this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
|
|
|
}
|
|
|
|
|
|
onAttachmentRemove = (file, stateName) => {
|
|
|
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.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);
|
|
|
});
|
|
|
}
|
|
|
max_num_change = (val) => {
|
|
|
if (val < 2) {
|
|
|
this.setState({
|
|
|
max_num: 2,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
const { min_num } = this.state;
|
|
|
this.setState({
|
|
|
max_num: val,
|
|
|
min_num: val <= min_num ? val - 1 : min_num
|
|
|
})
|
|
|
}
|
|
|
min_num_change = (val) => {
|
|
|
this.setState({ min_num: val })
|
|
|
}
|
|
|
base_on_project_change = () => {
|
|
|
this.setState({ base_on_project: !this.state.base_on_project })
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let {typeId,coursesId,pageType}=this.props.match.params;
|
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
const isGroup = this.props.isGroup()
|
|
|
const moduleName = !isGroup? "普通作业":"分组作业";
|
|
|
const moduleEngName = this.props.getModuleName()
|
|
|
let{
|
|
|
title_value, contentFileList, answerFileList, max_num, min_num, base_on_project,
|
|
|
init_max_num, init_min_num,
|
|
|
title_num, course_name, category, has_commit, has_project
|
|
|
}=this.state
|
|
|
const { current_user } = this.props
|
|
|
|
|
|
const courseId = this.state.course_id || this.props.match.params.coursesId ;
|
|
|
const isEdit = this.isEdit;
|
|
|
if ((isEdit == undefined || isEdit) && !this.state.workLoaded) {
|
|
|
return ''
|
|
|
}
|
|
|
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;
|
|
|
},
|
|
|
};
|
|
|
const answerUploadProps = {
|
|
|
width: 600,
|
|
|
fileList: answerFileList,
|
|
|
multiple: true,
|
|
|
// https://github.com/ant-design/ant-design/issues/15505
|
|
|
// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
|
|
|
// showUploadList: false,
|
|
|
action: `${getUrl()}/api/attachments.json`,
|
|
|
onChange: this.handleAnswerUploadChange,
|
|
|
onRemove: (file) => this.onAttachmentRemove(file, 'answerFileList'),
|
|
|
beforeUpload: (file) => {
|
|
|
console.log('beforeUpload', file.name);
|
|
|
const isLt150M = file.size / 1024 / 1024 < 150;
|
|
|
if (!isLt150M) {
|
|
|
message.error('文件大小必须小于150MB!');
|
|
|
}
|
|
|
return isLt150M;
|
|
|
},
|
|
|
};
|
|
|
|
|
|
return(
|
|
|
<div className="newMain">
|
|
|
<div className="educontent mt20 mb50">
|
|
|
{/* <p className="clearfix">
|
|
|
<WordsBtn style="grey" className="fl">{course_name}</WordsBtn>
|
|
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
|
|
<WordsBtn style="grey" className="fl">{typeId==1 ?"普通作业":"分组作业"}</WordsBtn>
|
|
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
|
|
<span>{pageType==="new"?"新建":"编辑"}</span>
|
|
|
</p> */}
|
|
|
<CBreadcrumb items={[
|
|
|
{ to: current_user && current_user.first_category_url, name: this.state.course_name},
|
|
|
{ to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
|
|
|
, name: category && category.category_name },
|
|
|
{ name: `${ this.isEdit ? '编辑' : '新建'}` }
|
|
|
]}></CBreadcrumb>
|
|
|
|
|
|
<p className="clearfix mt20 mb20">
|
|
|
<span className="fl font-24 color-grey-3">{this.isEdit ?"编辑":"新建"}{ moduleName }</span>
|
|
|
{/* history.goBack()
|
|
|
this.props.toListPage(this.props.match.params, category.category_id)}
|
|
|
*/}
|
|
|
<a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2"
|
|
|
onClick={() => this.props.history.goBack()}>
|
|
|
返回
|
|
|
</a>
|
|
|
</p>
|
|
|
<div>
|
|
|
{/* onSubmit={this.handleSubmit} */}
|
|
|
<Form className="courseForm">
|
|
|
<Form.Item
|
|
|
label="标题"
|
|
|
className="AboutInputForm"
|
|
|
>
|
|
|
{getFieldDecorator('title', {
|
|
|
rules: [{
|
|
|
required: true, message: '请输入标题'
|
|
|
}],
|
|
|
})(
|
|
|
<Input placeholder="请输入作业标题，最大限制60个字符" onInput={this.changeTitle} className="searchView searchViewAfter" style={{"width":"100%"}} maxLength={MAX_TITLE_LENGTH} addonAfter={`${String(title_num)}/${MAX_TITLE_LENGTH}`}/>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<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-input-number {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
|
|
|
.workContent.AboutInputForm.ant-form-item {
|
|
|
border-bottom: none;
|
|
|
padding-bottom: 0px !important;
|
|
|
}
|
|
|
.newWorkUpload {
|
|
|
padding: 0px 30px 30px 30px!important;
|
|
|
background: #fff;
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
border-bottom: 1px solid #EDEDED;
|
|
|
}
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
{ <Form.Item
|
|
|
label="内容"
|
|
|
className="AboutInputForm workContent mdInForm"
|
|
|
>
|
|
|
{getFieldDecorator('description', {
|
|
|
rules: [{
|
|
|
required: true, message: '请输入作业内容和要求'
|
|
|
}],
|
|
|
})(
|
|
|
<TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入作业内容和要求,最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500}
|
|
|
className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
|
|
|
)}
|
|
|
</Form.Item> }
|
|
|
<Upload {...uploadProps} className="upload_1 newWorkUpload">
|
|
|
<Button className="uploadBtn">
|
|
|
<Icon type="upload" /> 上传附件
|
|
|
</Button>
|
|
|
(单个文件150M以内)
|
|
|
</Upload>
|
|
|
|
|
|
|
|
|
{ isGroup &&
|
|
|
<Form.Item
|
|
|
label="分组设置"
|
|
|
className="AboutInputForm"
|
|
|
>
|
|
|
{getFieldDecorator('personNum', {
|
|
|
rules: [{
|
|
|
required: false
|
|
|
// required: true, message: '请输入最小人数和最大人数'
|
|
|
}],
|
|
|
})(
|
|
|
<div>
|
|
|
<p className="clearfix">
|
|
|
<ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
|
|
|
{/* max={has_commit ? init_min_num : null } */}
|
|
|
<InputNumber placeholder="请填写每组最小人数" min={1} className="winput-240-40" value={min_num}
|
|
|
|
|
|
onChange={this.min_num_change} style={{width:'180px'}} />
|
|
|
</ConditionToolTip>
|
|
|
|
|
|
<span className="ml15 mr15">~</span>
|
|
|
{/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) } */}
|
|
|
<ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
|
|
|
<InputNumber className="winput-240-40" placeholder="请填写每组最大人数" value={max_num} max={10}
|
|
|
onChange={this.max_num_change} style={{width:'180px'}} />
|
|
|
</ConditionToolTip>
|
|
|
<label className="color-grey-9 ml20 font-14">（项目管理员角色的成员都可以提交作品，提交作品时需要关联同组成员，组内成员作品共享）</label>
|
|
|
</p>
|
|
|
<p className="mt20">
|
|
|
<ConditionToolTip condition={has_commit || has_project} title={'已有关联项目或作品，不能修改'}>
|
|
|
<Checkbox checked={base_on_project} onChange={this.base_on_project_change}
|
|
|
disabled={has_project || has_commit}
|
|
|
>基于项目实施</Checkbox>
|
|
|
</ConditionToolTip>
|
|
|
|
|
|
<label className="color-grey-9 ml12 font-14">（勾选后各小组必须在educoder平台创建项目，教师可随时观察平台对各小组最新进展的实时统计）</label>
|
|
|
</p>
|
|
|
</div>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
}
|
|
|
<Form.Item
|
|
|
label="参考答案"
|
|
|
className="AboutInputForm"
|
|
|
style={{"borderBottom":"none"}}
|
|
|
>
|
|
|
{getFieldDecorator('reference_answer', {
|
|
|
rules: [{
|
|
|
required: false
|
|
|
}],
|
|
|
})(
|
|
|
<TPMMDEditor ref={this.answerMdRef} placeholder="请在此输入作业的参考答案,最大限制5000个字符" mdID={'workAnswerMD'}
|
|
|
className="courseMessageMD" refreshTimeout={1500} initValue={this.state.reference_answer || ''}></TPMMDEditor>
|
|
|
)}
|
|
|
<Upload {...answerUploadProps} className="upload_1">
|
|
|
<Button className="uploadBtn">
|
|
|
<Icon type="upload" /> 上传附件
|
|
|
</Button>
|
|
|
(单个文件150M以内)
|
|
|
</Upload>
|
|
|
</Form.Item>
|
|
|
<Form.Item>
|
|
|
<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.toListPage(this.props.match.params, category.category_id)}>取消</ a>
|
|
|
</div>
|
|
|
</Form.Item>
|
|
|
</Form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
const WrappedBoardsNew = Form.create({ name: 'NewWork' })(NewWork);
|
|
|
export default WrappedBoardsNew; |
