From 005dfc59ca1d5a61e04594491dfbb93c67ae3f22 Mon Sep 17 00:00:00 2001 From: ysl <904079904@qq.com> Date: Fri, 21 Jun 2019 14:41:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graduation/tasks/GraduationTasksnew.js | 685 +++++++++--------- public/react/src/modules/tpm/NewHeader.js | 2 +- 2 files changed, 359 insertions(+), 328 deletions(-) diff --git a/public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js b/public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js index f98373fe6..79a0e77ea 100644 --- a/public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js +++ b/public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js @@ -1,297 +1,327 @@ -import React,{Component} from "React"; -import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal} from "antd"; +import React, {Component} from "React"; +import {Form, Select, Input, Button, Checkbox, Upload, Icon, message, Modal} from "antd"; import {Link} from 'react-router-dom'; import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'; -import { WordsBtn,getUrl} from 'educoder'; +import {WordsBtn, getUrl} from 'educoder'; import axios from 'axios'; import Modals from '../../../modals/Modals'; import '../../css/Courses.css'; -const { Option} = Select; + +const {Option} = Select; const CheckboxGroup = Checkbox.Group; const confirm = Modal.confirm; -let GraduationTasksnewtype=true; -class GraduationTasksnew extends Component{ - - constructor(props){ - super(props) - this.state={ - coursename:"", - coursesearch:"", - title_num:60, - title_value:"", - fileList: [], - contents: [{val:"",id:1}], - type:true - } - } - - componentDidMount(){ - // const query =this.props.location.search; - // - // const type = query.split('&'); - // let name = type[1].split("name=") - // name = String(name).split(",") - // name = decodeURI(name[1]) - // - // this.setState({ - // coursename:name, - // coursesearch:this.props.location.search - // }) - } - - scrollToAnchors=(anchorName)=>{ - this.setState({ - anchor:anchorName - }) - } - - - handleSubmit=(e) => { - let {fileList}=this.state; - let listid=[] - - for(var list of fileList){ - listid.push(list.response.id) - } - e.preventDefault(); - if( GraduationTasksnewtype===true){ - this.props.form.validateFields((err, values) => { - if (!err) { - if(values.tasktype===undefined){ - this.scrollToAnchors("tasktypes"); - return +let GraduationTasksnewtype = true; + +class GraduationTasksnew extends Component { + + constructor(props) { + super(props) + this.state = { + coursename: "", + coursesearch: "", + title_num: 60, + title_value: "", + fileList: [], + contents: [{val: "", id: 1}], + type: true + } + } + + componentDidMount() { + // const query =this.props.location.search; + // + // const type = query.split('&'); + // let name = type[1].split("name=") + // name = String(name).split(",") + // name = decodeURI(name[1]) + // + // this.setState({ + // coursename:name, + // coursesearch:this.props.location.search + // }) + } + + scrollToAnchors = (anchorName) => { + this.setState({ + anchor: anchorName + }) + } + + + handleSubmit = (e) => { + let {fileList} = this.state; + let listid = [] + + for (var list of fileList) { + listid.push(list.response.id) + } + e.preventDefault(); + if (GraduationTasksnewtype === true) { + this.props.form.validateFields((err, values) => { + if (!err) { + if (values.tasktype === undefined) { + this.scrollToAnchors("tasktypes"); + return + } + + if (values.name === undefined) { + this.scrollToAnchors("nametypes"); + return + } + + if (values.description === undefined) { + this.scrollToAnchors("descriptiontypes"); + return + } else if (values.description.length > 5000) { + this.scrollToAnchors("descriptiontypes"); + return + } + console.log('Received values of form: ', values); + console.log(fileList); + const course_id = this.props.match.params.coursesId; + + let url = "/courses/" + course_id + "/graduation_tasks.json" + axios.post(url, { + task_type: parseInt(values.tasktype), + name: values.name, + description: values.description, + attachment_ids: listid, + } + ).then((response) => { + if (response.status === 200) { + GraduationTasksnewtype = false; + // this.goback(); + this.props.history.push("/courses/" + this.props.match.params.coursesId + "/graduation_tasks/" + this.props.match.params.category_id + "/" + response.data.task_id + "/setting"); + } + }).catch((error) => { + console.log(error) + }) + } + + }); + } + + + } + + + goback = () => { + let courseId = this.props.match.params.coursesId; + let category_id = this.props.match.params.category_id; + + window.location.href = "/courses/" + courseId + "/graduation_tasks/" + category_id; + } + + + // 输入title + changeTitle = (e) => { + + this.setState({ + title_num: 60 - parseInt(e.target.value.length), + title_value: e.target.value + }) + + } + // 附件相关 START + handleChange = (info) => { + let fileList = info.fileList; + + // for(var list of fileList ){ + // console.log(list) + // } + this.setState({fileList}); + } + + 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; + } + + cancelAttachment = () => { + this.setState({ + Modalstype: false, + Modalstopval: '确定要删除这个附件吗?', + ModalSave: "", + ModalCancel: "" + }) + } + + 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); + }); + } + + //滚动 + ifHasAnchorJustScorll() { + // let anchor = this.getURLStuff("anchor"); + + let anchor = this.state.anchor; + // console.log("anchor ", anchor); + // 对应id的话, 滚动到相应位置 + if (!!anchor) { + let anchorElement = document.getElementById(anchor); + if (anchorElement) { + window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2); + } + } + // 没有的话，滚动到头部 + else { + document.body.scrollTop = document.documentElement.scrollTop = 0; + } + } + + render() { + const {getFieldDecorator} = this.props.form; + let { + coursename, coursesearch, title_num, title_value, pageType, fileList, contents, type, + Modalstype, Modalstopval, ModalCancel, ModalSave + } = this.state; + + let {coursedata} = this.props; + + let courseId = this.props.match.params.coursesId; + let position = this.props.match.params.position; + let category_id = this.props.match.params.category_id; + const uploadProps = { + width: 600, + fileList, + multiple: true, + // https://github.com/ant-design/ant-design/issues/15505 + // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。 + // showUploadList: false, + action: `${getUrl()}/api/attachments.json`, + onChange: this.handleChange, + onRemove: this.onAttachmentRemove, + beforeUpload: (file) => { + console.log('beforeUpload', file.name); + const isLt150M = file.size / 1024 / 1024 < 150; + if (!isLt150M) { + message.error('文件大小必须小于150MB!'); + } + return isLt150M; + }, + }; + this.ifHasAnchorJustScorll(); + // console.log(this.props.current_user.course_name) + return ( + + +
+ {/*提示*/} + +
+
+ +

+ {this.props.current_user && this.props.current_user.course_name} + > + 毕设任务 + > + {"新建"} +

+ +
+

新建毕设任务

+ 返回 +
+ + +
+ + {/*内容*/} +
+ + + {getFieldDecorator('tasktype', { + rules: [{required: true, message: "请选择任务类型"}], + })()} + + （选择确认后，无法修改） + + + + {getFieldDecorator('name', { + rules: [{required: true, message: "不能为空"}], + })()} + + +
+ + +
+ - - {getFieldDecorator('description', { - rules: [{ - required: true, message: '请输入帖子内容', - }, { - max: 5000, message: '最大限制为5000个字符', - }], - })( - - )} - - - - - (单个文件150M以内) - -
- - - -
- - 取消 -
- -
- -
-
-
- - - - ) - } + + {getFieldDecorator('description', { + rules: [{ + required: true, message: '请输入帖子内容', + }, { + max: 5000, message: '最大限制为5000个字符', + }], + })( + + )} + + + + + (单个文件150M以内) + + + + + +
+ + 取消 +
+ + + + + + + + + + ) + } } -const GraduationTasksnewApp = Form.create({ name: 'coursesNew' })(GraduationTasksnew); + +const GraduationTasksnewApp = Form.create({name: 'coursesNew'})(GraduationTasksnew); export default GraduationTasksnewApp; \ No newline at end of file diff --git a/public/react/src/modules/tpm/NewHeader.js b/public/react/src/modules/tpm/NewHeader.js index 25d290fac..e97a728d4 100644 --- a/public/react/src/modules/tpm/NewHeader.js +++ b/public/react/src/modules/tpm/NewHeader.js @@ -570,7 +570,7 @@ submittojoinclass=(value)=>{ // join_course_url: "https://www.educoder.net/courses/join_course_multi_role" // join_project_url: "https://www.educoder.net/applied_project/applied_project_info" // rolearr:["",""], - console.log() + // console.log() return (