From 58f943919c20f398a49678fc6ee5201325375d08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Tue, 10 Dec 2019 20:19:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=AE=9E=E8=AE=ADend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/src/modules/modals/Bottomsubmit.js | 8 +-
.../src/modules/tpm/newshixuns/Newshixuns.js | 378 +++++++++---------
.../modules/tpm/newshixuns/css/Newshixuns.css | 4 +
3 files changed, 204 insertions(+), 186 deletions(-)
diff --git a/public/react/src/modules/modals/Bottomsubmit.js b/public/react/src/modules/modals/Bottomsubmit.js
index fe5d897f2..7c811be26 100644
--- a/public/react/src/modules/modals/Bottomsubmit.js
+++ b/public/react/src/modules/modals/Bottomsubmit.js
@@ -9,7 +9,9 @@ class Bottomsubmit extends Component {
}
}
-
+ cannelfun=()=>{
+ window.location.href=this.props.url
+ }
render() {
@@ -27,8 +29,8 @@ class Bottomsubmit extends Component {
</style>
<div className="clearfix bor-bottom-greyE edu-back-white orderingbox newshixunbottombtn">
<div className=" edu-txt-center padding13-30">
- <button type="button" className="ant-btn mr20 newshixunmode backgroundFFF" ><span>取 消</span></button>
- <button type="button" className="ant-btn newshixunmode mr40 ant-btn-primary" type="primary" htmlType="submit" onClick={this.handleSubmit}><span>确 定</span></button>
+ <button type="button" className="ant-btn mr20 newshixunmode backgroundFFF" onClick={()=>this.cannelfun()}><span>取 消</span></button>
+ <button type="button" className="ant-btn newshixunmode mr40 ant-btn-primary" type="primary" htmlType="submit" onClick={()=>this.props.onSubmits()}><span>确 定</span></button>
</div>
</div>
</div>
diff --git a/public/react/src/modules/tpm/newshixuns/Newshixuns.js b/public/react/src/modules/tpm/newshixuns/Newshixuns.js
index 90d839436..bc3bf9f2b 100644
--- a/public/react/src/modules/tpm/newshixuns/Newshixuns.js
+++ b/public/react/src/modules/tpm/newshixuns/Newshixuns.js
@@ -4,15 +4,11 @@ import {TPMIndexHOC} from '../TPMIndexHOC';
import {SnackbarHOC} from 'educoder';
-import {Select, Radio, Input, Modal, Button, Form, Tooltip, Upload,Icon} from 'antd';
-
-import locale from 'antd/lib/date-picker/locale/zh_CN';
+import {Select, Radio, Input, Modal, Button, Form, Tooltip, Upload, Icon} from 'antd';
import axios from 'axios';
-import {getUrl,getUploadActionUrl} from 'educoder';
-
-import moment from 'moment';
+import {getUploadActionUrl} from 'educoder';
import './css/Newshixuns.css';
@@ -20,20 +16,8 @@ import TPMMDEditor from "../challengesnew/TPMMDEditor";
import Bottomsubmit from "../../modals/Bottomsubmit";
-let path = getUrl("/editormd/lib/");
-
-const $ = window.$;
-
-let timeout;
-
-let currentValue;
-
const Option = Select.Option;
-const RadioGroup = Radio.Group;
-
-const confirm = Modal.confirm;
-
class Newshixuns extends Component {
constructor(props) {
super(props)
@@ -41,20 +25,21 @@ class Newshixuns extends Component {
this.state = {
shixunName: undefined,
NAME_COUNT: 60,
- Radiovalue: "1",
+ is_jupyter: "1",
newshixunlist: undefined,
- languagewrite:undefined,
- systemenvironment:undefined,
- testcoderunmode:undefined,
- postapplyvisible:undefined
+ language: undefined,
+ runtime: undefined,
+ run_method: undefined,
+ postapplyvisible: undefined,
}
}
componentDidMount() {
this.props.form.setFieldsValue({
- radiogroup: `1`,
+ is_jupyter: `1`,
});
+
let newshixunUrl = `/shixuns/new.json`;
axios.get(newshixunUrl).then((response) => {
if (response.status === 200) {
@@ -62,10 +47,8 @@ class Newshixuns extends Component {
this.setState({
newshixunlist: response.data
});
-
this.contentMdRef.current.setValue(!response.data.sample[0][1] ? "" : response.data.sample[0][1]);
}
-
}
}).catch((error) => {
console.log(error)
@@ -84,7 +67,7 @@ class Newshixuns extends Component {
console.log(error)
});
- // const mdContnet = this.contentMdRef.current.getValue().trim();
+
}
shixunNameInput = (e) => {
@@ -103,11 +86,42 @@ class Newshixuns extends Component {
});
};
- handleSubmit = e => {
- e.preventDefault();
+ handleSubmit = (e) => {
+ const mdContnet = this.contentMdRef.current.getValue().trim();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
+
+ let Url = `/api/shixuns.json`;
+ axios.post(Url, {
+ description: mdContnet,
+ main_type: values.main_type,
+ is_jupyter: values.is_jupyter === "2" ? true : false,
+ sub_type: values.sub_type,
+ shixun: {
+ name: values.name,
+ trainee: values.select,
+ task_pass: 1
+ }
+ }
+ ).then((response) => {
+ if (response.status === 200) {
+ debugger
+ window.location.href = "/shixuns/" + response.data.shixun_identifier + "/challenges";
+ // window.open("/shixuns/"+response.data.shixun_identifier+"/challenges");
+ } else {
+ this.setState({
+ bottonloading: false
+ })
+ }
+ }).catch((error) => {
+ console.log(error)
+ this.setState({
+ bottonloading: false
+ })
+ })
+
+
}
});
};
@@ -117,15 +131,15 @@ class Newshixuns extends Component {
});
}
- selectleft = (value) => {
+ main_type = (value) => {
this.props.form.setFieldsValue({
- selectleft: value,
+ main_type: value,
});
}
- selectright=(value)=>{
+ sub_type = (value) => {
this.props.form.setFieldsValue({
- selectright: value,
+ sub_type: value,
});
}
@@ -136,132 +150,106 @@ class Newshixuns extends Component {
}
-
sendhideModaly = () => {
this.setState({
postapplyvisible: false,
})
- if(this.state.file !== undefined){
- console.log("580");
+ if (this.state.file !== undefined) {
// this.deleteAttachment(this.state.file);
this.setState({
- file:undefined,
- deleteisnot:true,
- languagewrite:"",
- systemenvironment:"",
- testcoderunmode:"",
- fileList:[]
+ file: undefined,
+ deleteisnot: true,
+ language: "",
+ runtime: "",
+ run_method: "",
+ fileList: []
})
- }else {
+ } else {
this.setState({
- file:undefined,
- deleteisnot:true,
- languagewrite:"",
- systemenvironment:"",
- testcoderunmode:"",
- fileList:[]
+ file: undefined,
+ deleteisnot: true,
+ language: "",
+ runtime: "",
+ run_method: "",
+ fileList: []
})
}
}
sendsure_apply = () => {
- let {languagewrite,systemenvironment,testcoderunmode} = this.state;
- // console.log("点击确定")
- // console.log("languagewrite"+languagewrite);
- // console.log("systemenvironment"+systemenvironment);
- // console.log("testcoderunmode"+testcoderunmode);
-
- // let attachment_ids = undefined
- // if (this.state.fileList) {
- // attachment_ids = this.state.fileList.map(item => {
- // return item.response ? item.response.id : item.id
- // })
- // }
- if(languagewrite === undefined || languagewrite === "" ){
+ let {language, runtime, run_method} = this.state;
+
+ if (!language || language === "") {
// this.props.showNotification(`请填写该镜像是基于什么语言`);
this.setState({
- languagewritetype:true
+ languagewritetype: true
})
return
}
- if(systemenvironment === undefined || systemenvironment === ""){
+ if (!runtime || runtime === "") {
// this.props.showNotification(`请填写该镜像是基于什么语言系统环境`);
this.setState({
- systemenvironmenttype:true
+ systemenvironmenttype: true
})
return;
}
- if(testcoderunmode === undefined || testcoderunmode === "") {
+ if (!run_method || run_method === "") {
// this.props.showNotification(`请填写该镜像中测试代码运行方式`);
this.setState({
- testcoderunmodetype:true
+ testcoderunmodetype: true
})
return;
}
- var attachment_ids=undefined;
+
+ var attachment_ids = undefined;
if (this.state.fileList) {
attachment_ids = this.state.fileList.map(item => {
return item.response ? item.response.id : item.id
})
}
- if( attachment_ids === undefined || attachment_ids.length===0){
-
- // notification.open(
- // {
- // message: '提示',
- // description:
- // '请上传附件！',
- //
- // }
- // )
+ if (attachment_ids === undefined || attachment_ids.length === 0) {
this.setState({
- attachmentidstype:true
+ attachmentidstype: true
})
return;
}
- // console.log("attachment_ids"+attachment_ids);
-
- // alert(languagewrite +" "+systemenvironment +" "+testcoderunmode + " "+attachment_ids);
- var data={
- language:languagewrite,
- runtime:systemenvironment,
- run_method:testcoderunmode,
- attachment_id:attachment_ids[0],
+ var data = {
+ language: language,
+ runtime: runtime,
+ run_method: run_method,
+ attachment_id: attachment_ids[0],
}
- var url =`/shixuns/apply_shixun_mirror.json`;
- axios.post(url,data
+ var url = `/shixuns/apply_shixun_mirror.json`;
+ axios.post(url, data
).then((response) => {
try {
if (response.data) {
- // const { id } = response.data;
- // if (id) {
- if(this.state.file !== undefined){
- console.log("549");
- // this.deleteAttachment(this.state.file);
+
+ if (this.state.file !== undefined) {
this.setState({
- file:undefined,
- deleteisnot:true,
- languagewrite:"",
- systemenvironment:"",
- testcoderunmode:"",
- fileList:[]
+ file: undefined,
+ deleteisnot: true,
+ language: "",
+ runtime: "",
+ run_method: "",
+ fileList: []
})
- }else {
+ } else {
this.setState({
- file:undefined,
- deleteisnot:true,
- languagewrite:"",
- systemenvironment:"",
- testcoderunmode:"",
- fileList:[]
+ file: undefined,
+ deleteisnot: true,
+ language: "",
+ runtime: "",
+ run_method: "",
+ fileList: []
})
}
- // this.props.showNotification('提交成功！');
+
notification.open(
{
message: '提示',
@@ -271,10 +259,9 @@ class Newshixuns extends Component {
}
)
this.sendhideModaly()
- // this.props.history.push(`/courses/${cid}/graduation_topics`);
- // }
+
}
- }catch (e) {
+ } catch (e) {
}
@@ -282,19 +269,47 @@ class Newshixuns extends Component {
}
+ setlanguage = (e) => {
+ this.setState({
+ language: e.target.value
+ })
+ if (e.target.value) {
+ this.setState({
+ languagewritetype: false
+ })
+ }
+ }
+ setruntime = (e) => {
+ this.setState({
+ runtime: e.target.value
+ })
+ if (e.target.value) {
+ this.setState({
+ systemenvironmenttype: false
+ })
+ }
+ }
+
+ setrun_method = (e) => {
+ this.setState({
+ run_method: e.target.value
+ })
+ if (e.target.value) {
+ this.setState({
+ testcoderunmodetype: false
+ })
+ }
+ }
render() {
const {getFieldDecorator} = this.props.form;
- const {newshixunlist,languagewrite,systemenvironment,testcoderunmode,fileList,postapplytitle,postapplyvisible} = this.state;
+ const {newshixunlist, fileList, postapplytitle, postapplyvisible} = this.state;
const uploadProps = {
width: 600,
fileList,
multiple: true,
- // https://github.com/ant-design/ant-design/issues/15505
- // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
- // showUploadList: false,
- action: `${getUploadActionUrl()}`,
+ action: `${getUploadActionUrl()}`,
onChange: this.handleChange,
onRemove: this.onAttachmentRemove,
beforeUpload: (file, fileList) => {
@@ -302,10 +317,10 @@ class Newshixuns extends Component {
if (this.state.fileList.length >= 1) {
return false
}
- // console.log('beforeUpload', file.name);
+
const isLt150M = file.size / 1024 / 1024 < 50;
if (!isLt150M) {
- // this.props.showNotification(`文件大小必须小于50MB`);
+
notification.open(
{
message: '提示',
@@ -315,18 +330,15 @@ class Newshixuns extends Component {
}
)
}
- if(this.state.file !== undefined){
- console.log("763")
+ if (this.state.file !== undefined) {
this.setState({
- file:file
+ file: file
})
- }else {
+ } else {
this.setState({
- file:file
+ file: file
})
}
-
- console.log("handleChange2");
return isLt150M;
},
}
@@ -336,7 +348,7 @@ class Newshixuns extends Component {
<div className="educontent mt20 mb60 clearfix">
<div className="new_shixun">
- <div className="mb10 edu-back-white">
+ <div className="mb10 edu-back-white pd40px">
<div className="padding10-20 bor-bottom-greyE color-grey-3 clearfix">
<span className="fl font-18 lineh-35">新建实训项目</span>
@@ -345,9 +357,9 @@ class Newshixuns extends Component {
target="_blank">实训制作指南</a> : ""}
</div>
<div className="padding10-20 color-grey-3 clearfix">
- <Form onSubmit={this.handleSubmit}>
+ <Form>
<Form.Item label="实训类型">
- {getFieldDecorator('radiogroup')(
+ {getFieldDecorator('is_jupyter')(
<Radio.Group onChange={this.RadiovalueonChange}>
<Radio value="1">普通实训</Radio>
<Radio value="2">Jupyter实训</Radio>
@@ -363,8 +375,8 @@ class Newshixuns extends Component {
required: true, message: '请输入选题名称',
}, {
max: 60, message: '请输入名称，最大限制60个字符',
- },{
- whitespace:true,message:'请勿输入空格'
+ }, {
+ whitespace: true, message: '请勿输入空格'
}],
})(
<Input placeholder="请输入名称，最大限制60个字符"
@@ -402,8 +414,8 @@ class Newshixuns extends Component {
>
<Option value={1}>初级</Option>
<Option value={2}>中级</Option>
- <Option value={3}>中高级</Option>
- <Option value={4}>高级</Option>
+ <Option value={3}>高级</Option>
+ <Option value={4}>顶级</Option>
</Select>
</div>
@@ -412,22 +424,21 @@ class Newshixuns extends Component {
</Form.Item>
-
- <Form.Item
+ <Form.Item
label={"实验环境"}
- style={{"borderBottom": 'none','width': '18%','float': 'left'}}
+ style={{"borderBottom": 'none', 'width': '18%', 'float': 'left'}}
className="chooseDes pr"
>
<div>
- {getFieldDecorator('selectleft', {
+ {getFieldDecorator('main_type', {
rules: [{required: true, message: '请选择主类别'}],
})(
<div className="width100 fl mr20">
<Select placeholder="请选择主类别"
style={{width: 180}}
- onChange={this.selectleft}
+ onChange={this.main_type}
defaultOpen={false}
>
{
@@ -447,20 +458,21 @@ class Newshixuns extends Component {
</div>
)}
</div>
- </Form.Item>
+ </Form.Item>
<Form.Item
- style={{"borderBottom": 'none','width': '61%','float': 'left','margin-top': '40px'}}
+ style={{"borderBottom": 'none', 'width': '61%', 'float': 'left', 'marginTop': '40px'}}
className="chooseDes pr"
- >
- <div className=" fl pr mr20">
- {getFieldDecorator('selectright', {
+ >
+ <div className=" fl pr mr20">
+ {getFieldDecorator('sub_type', {
rules: [{required: true, message: '请选择小类别'}],
})(
<div className=" fl pr mr20">
<Select placeholder="请选择小类别"
+ mode="multiple"
style={{width: 180}}
- onChange={this.selectright}
+ onChange={this.sub_type}
defaultOpen={false}
>
{
@@ -477,7 +489,6 @@ class Newshixuns extends Component {
}
</Select>
</div>
-
)}
<span className="fl ml20 color-grey lineh-20">
<div>
@@ -493,22 +504,21 @@ class Newshixuns extends Component {
</Form.Item>
-
</Form>
<div className={"both"}></div>
<div className=" color-grey lineh-20">
- 没有实验环境？
- <a className="color-blue" onClick={this.post_apply}> 申请新建</a>
- </div>
- {postapplyvisible===true?<style>
+ 没有实验环境？
+ <a className="color-blue" onClick={this.post_apply}> 申请新建</a>
+ </div>
+ {postapplyvisible === true ? <style>
{
- `
+ `
body{
overflow: hidden !important;
}
`
- }
- </style>:""}
+ }
+ </style> : ""}
<Modal
keyboard={false}
@@ -520,49 +530,54 @@ class Newshixuns extends Component {
heigth={720}
>
<div>
- <li className="clearfix ml82" >
+ <li className="clearfix ml82">
<label className="fl mt10 "><span
className="color-red fl mt3">*</span>语言： </label>
- <textarea className={this.state.languagewritetype===true?"fl task-form-80 task-height-150 bor-reds":"fl task-form-80 task-height-150"}
- style={{width:'89%',height:'100px'}}
- onInput={this.setlanguagewrite}
- value={languagewrite}
- placeholder="请填写该镜像是基于什么语言：示例：Python"
- id="demand_info"></textarea>
+ <textarea
+ className={this.state.languagewritetype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
+ style={{width: '89%', height: '100px'}}
+ onInput={this.setlanguage}
+ value={this.state.language}
+ placeholder="请填写该镜像是基于什么语言：示例：Python"
+ id="demand_info"></textarea>
</li>
- <div className={"color-red shixunspanred"}>{this.state.languagewritetype===true?"请填写该镜像语言":""}</div>
+ <div
+ className={"color-red shixunspanred"}>{this.state.languagewritetype === true ? "请填写该镜像语言" : ""}</div>
<li className="clearfix ml1">
<label className="panel-form-label fl ml50"><span
className="color-red fl mt3">*</span>系统环境： </label>
- <textarea className={this.state.systemenvironmenttype===true?"fl task-form-80 task-height-150 bor-reds":"fl task-form-80 task-height-150"}
- onInput={this.setsystemenvironment}
- style={{height:'100px'}}
- value={systemenvironment}
- placeholder="请填写该镜像是基于什么linux系统环境,代码运行环境"
- id="demand_info"></textarea>
+ <textarea
+ className={this.state.systemenvironmenttype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
+ onInput={this.setruntime}
+ style={{height: '100px'}}
+ value={this.state.runtime}
+ placeholder="请填写该镜像是基于什么linux系统环境,代码运行环境"
+ id="demand_info"></textarea>
</li>
- <div className={"color-red shixunspanred"}>{this.state.systemenvironmenttype===true?"请填写该镜像语言系统环境":""}</div>
+ <div
+ className={"color-red shixunspanred"}>{this.state.systemenvironmenttype === true ? "请填写该镜像语言系统环境" : ""}</div>
<li className="clearfix">
- <label className="fl mt10" ><span
+ <label className="fl mt10"><span
className="color-red fl mt3">*</span>测试代码运行方式： </label>
<textarea
- className={this.state.testcoderunmodetype===true?"fl task-form-80 task-height-150 bor-reds":"fl task-form-80 task-height-150"}
- onInput={this.settestcoderunmode}
- value={testcoderunmode}
- style={{height:'100px'}}
- placeholder="请填写该镜像中测试代码运行方式"
- id="demand_info"></textarea>
+ className={this.state.testcoderunmodetype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
+ onInput={this.setrun_method}
+ value={this.state.run_method}
+ style={{height: '100px'}}
+ placeholder="请填写该镜像中测试代码运行方式"
+ id="demand_info"></textarea>
</li>
- <div className={"color-red shixunspanred"}>{this.state.testcoderunmodetype===true?"请填写该镜像测试代码运行方式":""}</div>
+ <div
+ className={"color-red shixunspanred"}>{this.state.testcoderunmodetype === true ? "请填写该镜像测试代码运行方式" : ""}</div>
<li className="clearfix ml50">
<label className="panel-form-label fl mt-5"><span
className="color-red fl">*</span>测试代码： </label>
- <div className="mt10" style={{
+ <div className="mt10" style={{
display: "inline-block"
}}>
<Upload {...uploadProps}>
- <Icon type="upload" className="fl mt3" > </Icon>
+ <Icon type="upload" className="fl mt3"> </Icon>
<span className="color-blue fl cdefault">上传附件</span>
<span className="color-grey-c fl ml10 ">(单个文件50M以内)</span>
@@ -571,13 +586,13 @@ class Newshixuns extends Component {
</li>
<div className={"color-red shixunspanred"}>
- {this.state.attachmentidstype===true?"请上传附件":""}
+ {this.state.attachmentidstype === true ? "请上传附件" : ""}
</div>
<li className="edu-txt-center clearfix ">
<a className="pop_close task-btn mr30"
onClick={() => this.sendhideModaly()}
>取消</a>
- <Button type="primary" onClick={()=>this.sendsure_apply()}
+ <Button type="primary" onClick={() => this.sendsure_apply()}
className="task-btn task-btn-orange">确定</Button>
</li>
<div className="cl"></div>
@@ -586,7 +601,6 @@ class Newshixuns extends Component {
</Modal>
-
<Modal
keyboard={false}
title="提示"
@@ -612,9 +626,7 @@ class Newshixuns extends Component {
</div>
</div>
</div>
-
-
- <Bottomsubmit/>
+ <Bottomsubmit url={"/shixuns"} onSubmits={() => this.handleSubmit()}/>
</div>
);
diff --git a/public/react/src/modules/tpm/newshixuns/css/Newshixuns.css b/public/react/src/modules/tpm/newshixuns/css/Newshixuns.css
index 060ceff6d..f18446ea1 100644
--- a/public/react/src/modules/tpm/newshixuns/css/Newshixuns.css
+++ b/public/react/src/modules/tpm/newshixuns/css/Newshixuns.css
@@ -826,4 +826,8 @@ a.white-btn.use_scope-btn:hover{
.relative{
position: relative;
+}
+
+.pd40px{
+ padding-bottom: 40px;
}
\ No newline at end of file