From 8fd8d45df2f1e707b5c6de66947e82bb15032278 Mon Sep 17 00:00:00 2001 From: hjm <63528605@qq.com> Date: Thu, 29 Aug 2019 16:57:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E7=BC=96=E8=BE=91=E9=87=8D?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/courses/busyWork/NewWork.js | 449 +---------------- .../modules/courses/busyWork/NewWorkForm.js | 466 ++++++++++++++++++ 2 files changed, 493 insertions(+), 422 deletions(-) create mode 100644 public/react/src/modules/courses/busyWork/NewWorkForm.js diff --git a/public/react/src/modules/courses/busyWork/NewWork.js b/public/react/src/modules/courses/busyWork/NewWork.js index 525e13922..09b029044 100644 --- a/public/react/src/modules/courses/busyWork/NewWork.js +++ b/public/react/src/modules/courses/busyWork/NewWork.js @@ -3,11 +3,11 @@ import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Moda 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 { WordsBtn, getUrl, ConditionToolTip } from 'educoder' + import CBreadcrumb from '../common/CBreadcrumb' +import NewWorkForm from './NewWorkForm' -const confirm = Modal.confirm; const $ = window.$ const MAX_TITLE_LENGTH = 60; class NewWork extends Component{ @@ -17,15 +17,6 @@ class NewWork extends Component{ 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 () { @@ -50,7 +41,6 @@ class NewWork extends Component{ course_id: data.course_id, course_name: data.course_name, category: data.category, - }) } }) @@ -65,129 +55,26 @@ class NewWork extends Component{ .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 || '', - }); - + data.isEdit = true; + this.setState({ + category: data.category, + course_id: data.course_id, + course_name: data.course_name, }) - + this.newWorkFormRef.initValue(data); } }) .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) => { + + doEdit = (params) => { 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 - }) + axios.put(newUrl, params) .then((response) => { if (response.data.status == 0) { this.props.showNotification('保存成功') @@ -198,30 +85,11 @@ class NewWork extends Component{ console.log(error); }); } - doNew = (courseId, values) => { + doNew = (params) => { + const courseId = this.props.match.params.coursesId ; 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 - }) + axios.post(newUrl, params) .then((response) => { if (response.data.status == 0) { this.props.showNotification('保存成功') @@ -232,144 +100,26 @@ class NewWork extends Component{ 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 + category }=this.state const { current_user } = this.props - const courseId = this.state.course_id || this.props.match.params.coursesId ; + const courseId = 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(
- {/*

- {course_name} - > - {typeId==1 ?"普通作业":"分组作业"} - > - {pageType==="new"?"新建":"编辑"} -

*/} +

- {/* onSubmit={this.handleSubmit} */} - -
- - {getFieldDecorator('title', { - rules: [{ - required: true, message: '请输入标题' - }], - })( - - )} - - - - - { - {getFieldDecorator('description', { - rules: [{ - required: true, message: '请输入作业内容和要求' - }], - })( - - )} - } - - - (单个文件150M以内) - - - - { isGroup && - - {getFieldDecorator('personNum', { - rules: [{ - required: false - // required: true, message: '请输入最小人数和最大人数' - }], - })( -
-

- - {/* max={has_commit ? init_min_num : null } */} - - - - ~ - {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) } */} - - - - -

-

- - 基于项目实施 - - - -

-
- )} - - } - - {getFieldDecorator('reference_answer', { - rules: [{ - required: false - }], - })( - - )} - - - (单个文件150M以内) - - - - - - + {this.newWorkFormRef = ref}} + {...this.props} + onSave={this.onSave} + doNew={this.doNew} + doEdit={this.doEdit} + >
) } } -const WrappedBoardsNew = Form.create({ name: 'NewWork' })(NewWork); -export default WrappedBoardsNew; \ No newline at end of file +export default NewWork; \ No newline at end of file diff --git a/public/react/src/modules/courses/busyWork/NewWorkForm.js b/public/react/src/modules/courses/busyWork/NewWorkForm.js new file mode 100644 index 000000000..a79aa74dc --- /dev/null +++ b/public/react/src/modules/courses/busyWork/NewWorkForm.js @@ -0,0 +1,466 @@ +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 NewWorkForm 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, + } + } + initValue = (data) => { + if (data.isEdit) { + 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 || '', + }); + + }) + } else { // new + + } + } + + + // 输入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) => { + 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() + + const params = { + 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 + } + this.props.doEdit && this.props.doEdit(params) + } + doNew = (courseId, values) => { + 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 + + const params = { + 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 + } + this.props.doNew && this.props.doNew(params) + + } + + 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, + + isEdit + }=this.state + const { current_user } = this.props + + const courseId = this.state.course_id || this.props.match.params.coursesId ; + + if ((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( + + + +
+ + {getFieldDecorator('title', { + rules: [{ + required: true, message: '请输入标题' + }], + })( + + )} + + + + + { + {getFieldDecorator('description', { + rules: [{ + required: true, message: '请输入作业内容和要求' + }], + })( + + )} + } + + + (单个文件150M以内) + + + + { isGroup && + + {getFieldDecorator('personNum', { + rules: [{ + required: false + // required: true, message: '请输入最小人数和最大人数' + }], + })( +
+

+ + {/* max={has_commit ? init_min_num : null } */} + + + + ~ + {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) } */} + + + + +

+

+ + 基于项目实施 + + + +

+
+ )} + + } + + {getFieldDecorator('reference_answer', { + rules: [{ + required: false + }], + })( + + )} + + + (单个文件150M以内) + + + +
+ {/* htmlType="submit" */} + + this.props.toListPage(this.props.match.params, category.category_id)}>取消 +
+ + + + + ) + } +} +const WrappedWorkForm = Form.create({ name: 'NewWorkForm' })(NewWorkForm); +export default WrappedWorkForm; \ No newline at end of file