m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修复

Browse Source
dev_forum
ysl 6 years ago
parent 765af2c66e
commit 005dfc59ca
2 changed files with 359 additions and 328 deletions

685
public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js
Unescape View File

@ -1,297 +1,327 @@
import React,{Component} from "React"; import React, {Component} from "React";
import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal} from "antd"; import {Form, Select, Input, Button, Checkbox, Upload, Icon, message, Modal} from "antd";
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'; import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
import { WordsBtn,getUrl} from 'educoder'; import {WordsBtn, getUrl} from 'educoder';
import axios from 'axios'; import axios from 'axios';
import Modals from '../../../modals/Modals'; import Modals from '../../../modals/Modals';
import '../../css/Courses.css'; import '../../css/Courses.css';
const { Option} = Select;
const {Option} = Select;
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const confirm = Modal.confirm; const confirm = Modal.confirm;
let GraduationTasksnewtype=true; let GraduationTasksnewtype = true;
class GraduationTasksnew extends Component{
class GraduationTasksnew extends Component {
constructor(props){
super(props) constructor(props) {
this.state={ super(props)
coursename:"", this.state = {
coursesearch:"", coursename: "",
title_num:60, coursesearch: "",
title_value:"", title_num: 60,
fileList: [], title_value: "",
contents: [{val:"",id:1}], fileList: [],
type:true contents: [{val: "", id: 1}],
} type: true
} }
}
componentDidMount(){
// const query =this.props.location.search; componentDidMount() {
// // const query =this.props.location.search;
// const type = query.split('&'); //
// let name = type[1].split("name=") // const type = query.split('&');
// name = String(name).split(",") // let name = type[1].split("name=")
// name = decodeURI(name[1]) // name = String(name).split(",")
// // name = decodeURI(name[1])
// this.setState({ //
// coursename:name, // this.setState({
// coursesearch:this.props.location.search // coursename:name,
// }) // coursesearch:this.props.location.search
} // })
}
scrollToAnchors=(anchorName)=>{
this.setState({ scrollToAnchors = (anchorName) => {
anchor:anchorName this.setState({
}) anchor: anchorName
} })
}
handleSubmit=(e) => {
let {fileList}=this.state; handleSubmit = (e) => {
let listid=[] let {fileList} = this.state;
let listid = []
for(var list of fileList){
listid.push(list.response.id) for (var list of fileList) {
} listid.push(list.response.id)
e.preventDefault(); }
if( GraduationTasksnewtype===true){ e.preventDefault();
this.props.form.validateFields((err, values) => { if (GraduationTasksnewtype === true) {
if (!err) { this.props.form.validateFields((err, values) => {
if(values.tasktype===undefined){ if (!err) {
this.scrollToAnchors("tasktypes"); if (values.tasktype === undefined) {
return 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 (
<React.Fragment>
<div>
{/*提示*/}
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalCancel={ModalCancel}
modalSave={ModalSave}
/>
<div className="newMain clearfix">
<div className={"educontent mb20"}>
<p className="clearfix mt10">
<WordsBtn style="grey" className="fl"> <Link to={"/courses/" + courseId + "/students"}
className="color-grey-6">{this.props.current_user && this.props.current_user.course_name}</Link></WordsBtn>
<span className="color-grey-9 fl ml3 mr3">&gt;</span>
<WordsBtn style="grey" className="fl"> <Link
to={"/courses/" + courseId + "/graduation_tasks/" + category_id} className="color-grey-6">毕设任务</Link></WordsBtn>
<span className="color-grey-9 fl ml3 mr3">&gt;</span>
<span>{"新建"}</span>
</p>
<div style={{width: '100%', height: '60px'}}>
<p className=" fl color-black mt20 summaryname">新建毕设任务</p>
<a className="color-grey-6 fr font-16 ml30 mt10 mr20" onClick={this.goback}>返回</a>
</div>
<Form labelCol={{span: 5}} wrapperCol={{span: 12}}
onSubmit={GraduationTasksnewtype === true ? this.handleSubmit : ""}>
<style>
{
`.ant-form-item-label{
text-align: right;
vertical-align: middle;
padding: 0px 0px 20px 0px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
line-height: 20px; */
} }
.ant-form-item-control{
if(values.name===undefined){ line-height: 39.9999px;
this.scrollToAnchors("nametypes"); position: relative;
return zoom: 1;
} }
`
if(values.description===undefined){ }
this.scrollToAnchors("descriptiontypes"); </style>
return {/*内容*/}
}else if(values.description.length>5000){ <div className="stud-class-set bor-bottom-greyE pt20 pl20 pr20 edu-back-white">
this.scrollToAnchors("descriptiontypes");
return <Form.Item label="类型" >
} {getFieldDecorator('tasktype', {
console.log('Received values of form: ', values); rules: [{required: true, message: "请选择任务类型"}],
console.log(fileList); })(<Select className={"greyInput mb20"}
const course_id=this.props.match.params.coursesId; style={{width: '20%'}}
placeholder="请选择任务类型">
let url="/courses/"+course_id+"/graduation_tasks.json" <Option value="1">普通</Option>
axios.post(url, { <Option value="2">分组</Option>
task_type:parseInt(values.tasktype), </Select>)}
name:values.name, <input type="hidden" id='tasktypes'/>
description:values.description, <span className={"newcoursestitle"}>（选择确认后，无法修改）</span>
attachment_ids:listid, </Form.Item>
}
).then((response) => { <Form.Item label="任务标题" >
if(response.status===200) { {getFieldDecorator('name', {
GraduationTasksnewtype=false; rules: [{required: true, message: "不能为空"}],
// this.goback(); })(<Input placeholder="请输入任务名称，最大限制60个字符" value={title_value} onInput={this.changeTitle}
this.props.history.push("/courses/"+this.props.match.params.coursesId+"/graduation_tasks/"+this.props.match.params.category_id+"/"+response.data.task_id+"/setting"); className="searchView searchViewAfter mb20" style={{"width": "100%"}} maxLength="60"
} addonAfter={String(title_num)}/>)}
}).catch((error) => { </Form.Item>
console.log(error) <input type="hidden" id='nametypes'/>
}) </div>
}
}); <div className="stud-class-set pt20 pl20 pr20 coursenavbox edu-back-white">
} <style>{`
}
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(
<React.Fragment>
<div>
{/*提示*/}
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalCancel={ModalCancel}
modalSave={ModalSave}
/>
<div className="newMain clearfix">
<div className={"educontent mb20"}>
<p className="clearfix mt10">
<WordsBtn style="grey" className="fl"> <Link to={"/courses/"+courseId+"/students"} className="color-grey-6">{this.props.current_user&&this.props.current_user.course_name}</Link></WordsBtn>
<span className="color-grey-9 fl ml3 mr3">&gt;</span>
<WordsBtn style="grey" className="fl"> <Link to={"/courses/"+courseId+"/graduation_tasks/"+category_id} className="color-grey-6">毕设任务</Link></WordsBtn>
<span className="color-grey-9 fl ml3 mr3">&gt;</span>
<span>{"新建"}</span>
</p>
<div style={{ width:'100%',height:'75px'}} >
<p className=" fl color-black mt25 summaryname">新建毕设任务</p>
<a className="color-grey-6 fr font-16 ml30 mt10 mr20" onClick={this.goback}>返回</a>
</div>
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={GraduationTasksnewtype===true?this.handleSubmit:""} >
{/*内容*/}
<div className="stud-class-set bor-bottom-greyE pd20 edu-back-white">
<Form.Item label="类型">
{getFieldDecorator('tasktype', {
rules: [{ required: true, message: "请选择任务类型" }],
})(<Select className={"greyInput"}
style={{width:'20%'}}
placeholder="请选择任务类型">
<Option value="1">普通</Option>
<Option value="2">分组</Option>
</Select>)}
<input type="hidden" id='tasktypes' />
<span className={"newcoursestitle"}>（选择确认后，无法修改）</span>
</Form.Item>
<Form.Item label="任务标题" >
{getFieldDecorator('name', {
rules: [{ required: true, message: "不能为空" }],
})(<Input placeholder="请输入任务名称，最大限制60个字符" value={title_value} onInput={this.changeTitle} className="searchView searchViewAfter" style={{"width":"100%"}} maxLength="60" addonAfter={String(title_num)}/>)}
</Form.Item>
<input type="hidden" id='nametypes' />
</div>
<div className="stud-class-set pd20 coursenavbox edu-back-white">
<style>{`
.uploadBtn.ant-btn { .uploadBtn.ant-btn {
border: none; border: none;
color: #4CACFF; color: #4CACFF;
@ -309,47 +339,48 @@ render(){
margin-bottom:0px margin-bottom:0px
} }
`}</style> `}</style>
<Form.Item <Form.Item
label="内容" label="内容"
> >
{getFieldDecorator('description', { {getFieldDecorator('description', {
rules: [{ rules: [{
required: true, message: '请输入帖子内容', required: true, message: '请输入帖子内容',
}, { }, {
max: 5000, message: '最大限制为5000个字符', max: 5000, message: '最大限制为5000个字符',
}], }],
})( })(
<TPMMDEditor ref={this.mdRef} placeholder={'请输入任务内容说明，最大限制5000个字符'} <TPMMDEditor ref={this.mdRef} placeholder={'请输入任务内容说明，最大限制5000个字符'}
mdID={'courseMessageMD'} className="courseMessageMD"></TPMMDEditor> mdID={'courseMessageMD'} className="courseMessageMD"></TPMMDEditor>
)} )}
</Form.Item> </Form.Item>
<input type="hidden" id='descriptiontypes' /> <input type="hidden" id='descriptiontypes'/>
<Upload {...uploadProps} className="upload_1 ml5"> <Upload {...uploadProps} className="upload_1 ml5">
<Button className="uploadBtn"> <Button className="uploadBtn">
<Icon type="upload" /> 上传附件 <Icon type="upload"/> 上传附件
</Button> </Button>
(单个文件150M以内) (单个文件150M以内)
</Upload> </Upload>
</div> </div>
<Form.Item> <Form.Item>
<div className="clearfix mt30 mb30"> <div className="clearfix mt30 mb30">
<Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20">提交</Button> <Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20">提交</Button>
<a onClick={this.goback} className="defalutCancelbtn fl">取消</a> <a onClick={this.goback} className="defalutCancelbtn fl">取消</a>
</div> </div>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
</div> </div>
</React.Fragment> </React.Fragment>
) )
} }
} }
const GraduationTasksnewApp = Form.create({ name: 'coursesNew' })(GraduationTasksnew);
const GraduationTasksnewApp = Form.create({name: 'coursesNew'})(GraduationTasksnew);
export default GraduationTasksnewApp; export default GraduationTasksnewApp;

2
public/react/src/modules/tpm/NewHeader.js
Unescape View File

@ -570,7 +570,7 @@ submittojoinclass=(value)=>{
// join_course_url: "https://www.educoder.net/courses/join_course_multi_role" // join_course_url: "https://www.educoder.net/courses/join_course_multi_role"
// join_project_url: "https://www.educoder.net/applied_project/applied_project_info" // join_project_url: "https://www.educoder.net/applied_project/applied_project_info"
// rolearr:["",""], // rolearr:["",""],
console.log() // console.log()
return ( return (
<div className="newHeader" id="nHeader"> <div className="newHeader" id="nHeader">

Write Preview
Loading…
Cancel
Save