From e071a48600b2512360fa4574d3d8b162a8728811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com> Date: Sat, 31 Aug 2019 09:06:00 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=98=E5=BA=93=E6=AF=95=E8=AE=BE=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/react/config/webpack.config.dev.js | 2 +- .../user/usersInfo/banks/BanksIndex.js | 20 +- ...taskBanksEditEdit.js => GtaskBanksEdit.js} | 20 +- .../user/usersInfo/banks/NewGtaskForm.js | 358 ++++++++++++++++++ 4 files changed, 379 insertions(+), 21 deletions(-) rename public/react/src/modules/user/usersInfo/banks/{GtaskBanksEditEdit.js => GtaskBanksEdit.js} (80%) create mode 100644 public/react/src/modules/user/usersInfo/banks/NewGtaskForm.js diff --git a/public/react/config/webpack.config.dev.js b/public/react/config/webpack.config.dev.js index eaacd9f1e..8045580e9 100644 --- a/public/react/config/webpack.config.dev.js +++ b/public/react/config/webpack.config.dev.js @@ -32,7 +32,7 @@ module.exports = { // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.s // devtool: "cheap-module-eval-source-map", // 开启调试 - // devtool: "source-map", // 开启调试 + devtool: "eval", // 开启调试 // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. // The first two entry points enable "hot" CSS and auto-refreshes for JS. diff --git a/public/react/src/modules/user/usersInfo/banks/BanksIndex.js b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js index 2d86e4ef1..47c4c47cf 100644 --- a/public/react/src/modules/user/usersInfo/banks/BanksIndex.js +++ b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js @@ -60,7 +60,7 @@ const PollNewQuestbank =Loadable({ }); const GtaskBanksEdit = Loadable({ - loader: () => import('./GtaskBanksEditEdit'), + loader: () => import('./GtaskBanksEdit'), loading: Loading, }) @@ -108,8 +108,15 @@ class BanksIndex extends Component{

} + {/*毕设任务编辑*/} + { + return () + } + }> - { return ( - {/*毕设任务编辑*/} - { - return () - } - }> - + {/*题库问卷编辑详情*/} { @@ -69,7 +69,7 @@ class GtaskBanksEditEdit extends Component { return this.state.isGroup; } render(){ - let { bankId } = this.props.match.params + const common = { onCancel:this.onCancel, isGroup: this.isGroup, @@ -85,15 +85,15 @@ class GtaskBanksEditEdit extends Component { } `} - this.newWorkFormRef = ref} - topicId={bankId} - > + topicId={this.props.match.params.workId} + > ) } } -export default GtaskBanksEditEdit; \ No newline at end of file +export default GtaskBanksEdit; \ No newline at end of file diff --git a/public/react/src/modules/user/usersInfo/banks/NewGtaskForm.js b/public/react/src/modules/user/usersInfo/banks/NewGtaskForm.js new file mode 100644 index 000000000..78f2c1d7d --- /dev/null +++ b/public/react/src/modules/user/usersInfo/banks/NewGtaskForm.js @@ -0,0 +1,358 @@ +import React,{ Component } from "react"; +import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd"; +import axios from 'axios' +import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder' +import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'; + + +const MAX_TITLE_LENGTH = 60; +class NewGtaskForms extends Component{ + constructor(props){ + super(props); + this.contentMdRef = React.createRef(); + this.state={ + title_num:0, + description:"", + contentFileList: [], + } + } + + + 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' + } + }) + this.setState({ + ...data, + base_on_project: data.group_info.base_on_project, + title_num: parseInt(data.name.length), + min_num: data.group_info.min_number, + max_num: data.group_info.max_number, + contentFileList, + }, () => { + setTimeout(() => { + this.contentMdRef.current.setValue(data.description || '') + }, 2000) + + this.props.form.setFieldsValue({ + title: data.name, + description: data.description || '', + }); + + }) + } else { // new + + } + } + + + // 输入title + changeTitle=(e)=>{ + console.log(e.target.value.length); + this.setState({ + title_num: parseInt(e.target.value.length) + }) + } + handleContentUploadChange = (info) => { + let contentFileList = info.fileList; + this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) }); + } + 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); + }); + } + + onAttachmentRemove = (file, stateName) => { + if(file.response!=undefined){ + this.props.confirm({ + content: '是否确认删除?', + + onOk: () => { + this.deleteAttachment(file, stateName) + }, + onCancel() { + console.log('Cancel'); + }, + }); + return false; + } + + } + + handleSubmit = () => { + + let {contentFileList,min_num,max_num,base_on_project}=this.state; + let {data}=this.props; + let task_type=data.task_type + let topicId=this.props.topicId + this.props.form.validateFieldsAndScroll((err, values) => { + + const mdContnet = this.contentMdRef.current.getValue().trim(); + + values.description = mdContnet; + + if (!err) { + if (this.state.isEdit) { + let url="/task_banks/"+topicId+".json"; + axios.put(url, { + gtask_bank: { + name: values.title, + description: values.description, + min_num:task_type===1?undefined:min_num, + max_num:task_type===1?undefined:max_num, + base_on_project: task_type===1?undefined:base_on_project===true?1:0 + }, + attachment_ids:contentFileList + } + ).then((response) => { + if(response.data.status===0){ + this.props.showNotification(response.data.message) + }else{ + this.props.showNotification(response.data.message) + } + }).catch((error) => { + console.log(error) + }) + + } else { + + } + + } else { + $("html").animate({ scrollTop: $('html').scrollTop() - 100 }) + } + }) + } + + 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(){ + const { getFieldDecorator } = this.props.form; + 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 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; + }, + }; + + + return( +
+ +
+
+
+ {this.props.data&&this.props.data.task_type===1?"普通作业":this.props.data&&this.props.data.task_type===2?"分组作业":""} +
+
+ + {getFieldDecorator('title', { + rules: [{ + required: true, message: '请输入标题' + }], + })( + + )} + + + + + + { + {getFieldDecorator('description', { + rules: [{ + required: true, message: '请输入任务内容说明' + }], + })( + + )} + } + + + (单个文件150M以内) + + {this.props.data&&this.props.data.task_type===2? + + {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) } */} + + 每组最大人数： 人 + +

学生提交作品时需要关联同组成员，组内成员作品共享
+

+

+ + 基于项目（选中，则必须在本平台创建项目，项目管理员可以提交作品；不选中，无需在平台创建项目，任意小组成员均可以提交作品） + +

+
+ )} + :"" + } + +
+ {/* htmlType="submit" */} + + this.props.onCancel()}>取消 +
+ + +
+ ) + } +} + + +const NewGtaskForm = Form.create({ name: 'NewGtaskForm' })(NewGtaskForms); +export default NewGtaskForm; \ No newline at end of file