forked from Gitlink/forgeplus-react
244 lines
8.1 KiB
JavaScript
244 lines
8.1 KiB
JavaScript
import React, { Component } from "react";
|
||
|
||
import { Input } from 'antd';
|
||
import TPMMDEditor from "../tpm/challengesnew/TPMMDEditor";
|
||
import { Link } from "react-router-dom";
|
||
|
||
import axios from 'axios';
|
||
require('codemirror/lib/codemirror.css');
|
||
|
||
|
||
const $ = window.$;
|
||
|
||
class PathNew extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.contentMdRef = React.createRef();
|
||
this.Point_editMD = React.createRef();
|
||
this.state = {
|
||
pathName: "",
|
||
description: "",
|
||
point: "",
|
||
flag_name: true,
|
||
bottonloading: false
|
||
}
|
||
}
|
||
|
||
// 提交
|
||
submitNewPath = () => {
|
||
let { pathName } = this.state;
|
||
if (pathName === "") {
|
||
this.props.showSnackbar("请输入实践课程名称");
|
||
window.location.href = "#part_Name";
|
||
this.setState({
|
||
flag_name: false
|
||
})
|
||
return;
|
||
}
|
||
let des = this.contentMdRef.current.getValue().trim();
|
||
if (des === "") {
|
||
this.props.showSnackbar("请输入实践课程的简介");
|
||
window.location.href = "#part_Des";
|
||
return;
|
||
}
|
||
if (des.length > 8000) {
|
||
this.props.showSnackbar("实践课程的简介最大限制8000个字符");
|
||
window.location.href = "#part_Des";
|
||
return;
|
||
}
|
||
let point = this.Point_editMD.current.getValue().trim();
|
||
if (point === "") {
|
||
this.props.showSnackbar("请输入实践课程的学习须知");
|
||
window.location.href = "#part_point";
|
||
return;
|
||
}
|
||
if (point.length > 2000) {
|
||
this.props.showSnackbar("实践课程的学习须知最大限制2000个字符");
|
||
window.location.href = "#part_point";
|
||
return;
|
||
}
|
||
if (this.isEditPage == true) {
|
||
this.setState({
|
||
bottonloading: true
|
||
})
|
||
let pathId = this.props.match.params.pathId;
|
||
|
||
const editUrl = `/paths/${pathId}.json`
|
||
axios.put(editUrl, {
|
||
name: pathName,
|
||
description: des,
|
||
learning_notes: point
|
||
}).then((response) => {
|
||
// console.log(response.data.subject_id);
|
||
if (response.data.subject_id) {
|
||
this.props.history.push(`/paths/${response.data.subject_id}`)
|
||
} else {
|
||
this.setState({
|
||
bottonloading: false
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
this.setState({
|
||
bottonloading: false
|
||
})
|
||
})
|
||
} else {
|
||
this.setState({
|
||
bottonloading: true
|
||
})
|
||
let url = "/paths.json"
|
||
axios.post(url, {
|
||
name: pathName,
|
||
description: des,
|
||
learning_notes: point
|
||
}).then((response) => {
|
||
// console.log(response.data.subject_id);
|
||
if (response.data.subject_id) {
|
||
this.props.history.push(`/paths/${response.data.subject_id}`)
|
||
} else {
|
||
this.setState({
|
||
bottonloading: false
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
this.setState({
|
||
bottonloading: false
|
||
})
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
componentDidMount() {
|
||
|
||
let url = "/paths/new.json"
|
||
axios.get(url).then((result) => {
|
||
console.log(result)
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
|
||
|
||
let pathId = this.props.match.params.pathId;
|
||
if (pathId) {
|
||
this.isEditPage = true
|
||
|
||
// const url = `/paths/${pathId}.json`
|
||
const url = `/paths/${pathId}/edit.json`
|
||
axios.get(url).then((response) => {
|
||
/**
|
||
description:
|
||
id: 13
|
||
learning_notes:
|
||
name:
|
||
*/
|
||
if (response.data.name) {
|
||
this.setState({
|
||
pathName: response.data.name
|
||
})
|
||
this.contentMdRef.current.setValue(response.data && response.data.description);
|
||
this.Point_editMD.current.setValue(response.data && response.data.learning_notes);
|
||
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
} else {
|
||
this.isEditPage = false
|
||
|
||
this.contentMdRef.current.setValue("");
|
||
this.Point_editMD.current.setValue("");
|
||
}
|
||
|
||
}
|
||
|
||
InputName = (e) => {
|
||
this.setState({
|
||
pathName: e.target.value,
|
||
})
|
||
}
|
||
|
||
render() {
|
||
let pathId = this.props.match.params.pathId;
|
||
|
||
let { pathName, description, point, flag_name } = this.state;
|
||
return (
|
||
<div className="newContainer">
|
||
<div className="newMain clearfix">
|
||
<div className="educontent mt10 mb50">
|
||
<div className="mb10 edu-back-white">
|
||
<p className="padding20 bor-bottom-greyE font-18 color-grey-3">{pathId ? '编辑' : '创建'}实践课程</p>
|
||
<div className="padding30-20" id="part_Name">
|
||
<p className="color-grey-6 font-16 mb15">实践课程名称</p>
|
||
<div className="df">
|
||
<span className="mr30 color-orange pt10">*</span>
|
||
<div className="flex1 mr20">
|
||
<Input className={flag_name === true ? "input-100-45 greyInput" : "input-100-45 greyInput bor-red"}
|
||
maxLength="60"
|
||
placeholder="例如：从Python程序设计-入门精通"
|
||
value={pathName}
|
||
onInput={this.InputName}
|
||
></Input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb10 edu-back-white padding30-20" id="part_Des">
|
||
<p className="color-grey-6 font-16 mb15">简介</p>
|
||
<div className="df">
|
||
<span className="mr30 color-orange pt10">*</span>
|
||
<div className="flex1 mr20">
|
||
<div id="shixun_introduction" className="new_li">
|
||
{/*<textarea className="input-100-45" name="description" placeholder="请在此输入实践课程的简介" value={description}></textarea>*/}
|
||
<TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入实践课程的简介，最大限制8000个字符" mdID={'courseContentMD'}
|
||
refreshTimeout={1500}
|
||
className="courseMessageMD"
|
||
// initValue={this.state.description === null ? "" : this.state.description}
|
||
></TPMMDEditor>
|
||
|
||
</div>
|
||
<p id="e_tip_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
|
||
<p id="e_tips_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb10 edu-back-white padding30-20" id="part_point">
|
||
<p className="color-grey-6 font-16 mb15" id="learning_notes">学习须知</p>
|
||
<div className="df">
|
||
<span className="mr30 color-orange pt10">*</span>
|
||
<div className="flex1 mr20">
|
||
<div id="shixun_propaedeutics" className="new_li ">
|
||
{/*<textarea name="learning_notes" placeholder="请在此输入实践课程的学习须知" value={point}></textarea>*/}
|
||
<TPMMDEditor ref={this.Point_editMD} placeholder="请在此输入实践课程的学习须知，最大限制2000个字符" mdID={'Point_editMDs'}
|
||
refreshTimeout={1500}
|
||
className="courseMessageMD"
|
||
// initValue={this.state.description === null ? "" : this.state.description}
|
||
></TPMMDEditor>
|
||
</div>
|
||
<p id="e_tip_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
|
||
<p id="e_tips_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="clearfix mb30 mt30">
|
||
<button className="defalutSubmitbtn fl mr20" loading={this.state.bottonloading} onClick={this.submitNewPath}>提交</button>
|
||
{this.isEditPage ?
|
||
<Link to={`/paths/${this.props.match.params.pathId}`}
|
||
className="defalutCancelbtn fl">取消</Link>
|
||
: <Link to={`/paths`} className="defalutCancelbtn fl">取消</Link>
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
export default PathNew; |