调整 公告栏

public/react/src/modules/courses/gradinforms/Bullsubdirectory.js

@@ -0,0 +1,302 @@
+import React,{ Component } from "react";
+import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Button,Form } from "antd";
+import { WordsBtn,on, off, trigger,markdownToHTML,getImageUrl} from 'educoder';
+import './myysleduinforms.css'
+import axios from 'axios';
+import TPMMDEditor from "../../tpm/challengesnew/TPMMDEditor";
+import moment from "../new/CoursesNew";
+import Fileslistitem from "../Resource/Fileslistitem";
+// 公告栏
+class Bullsubdirectory extends Component{
+	constructor(props){
+		super(props);
+		this.messageRef = React.createRef();
+
+		this.state={
+			description:null,
+			isSpinysl:false,
+			whethertoeditysl:false,
+			addonAfter:0,
+			eduintits:"",
+			informs:[],
+
+
+		}
+	}
+
+	componentDidMount() {
+		console.log("获取到数据");
+		console.log(this.props);
+		let{id,myname,mydescription} =this.props
+		this.props.form.setFieldsValue({
+			id:id,
+			eduintits:myname,
+			description:mydescription,
+		});
+		this.setState({
+			id:id,
+			eduintits:myname,
+			description:mydescription,
+		})
+
+	}
+
+
+	bianji = (bians)=>{
+		this.setState({
+			whethertoeditysl:bians,
+		})
+		if(bians===true){
+			this.props.getyslbooltrue();
+		}else {
+			this.props.getyslboolfalse();
+		}
+	};
+	changeTopicName = (e) => {
+		console.log("调用了changeTopicName");
+		let num = parseInt(e.target.value.length);
+		if(num>60){
+			return;
+		}
+		this.setState({
+			addonAfter: num < 0 ? 0 : num
+		});
+		this.setState({
+			eduintits: e.target.value
+		})
+
+		this.props.form.setFieldsValue({
+			eduintits: e.target.value,
+		});
+	}
+	handleSubmit=(e) => {
+		e.preventDefault();
+		this.props.form.validateFields((err, values) => {
+			if (!err) {
+				console.log(values.description);
+				if(values.eduintits === undefined|| values.eduintits === "" || values.eduintits ===null){
+					this.props.showNotification(`请输入标题`);
+					return
+
+				}
+				if(values.description === undefined|| values.description === "" || values.description ===null){
+					this.props.showNotification(`请输入内容`);
+					return
+
+				}
+				var  id=this.props.match.params.coursesId
+
+				var  url = `/courses/${id}/update_informs.json`;
+				axios.post(url,{
+					inform_id:this.state.id,
+					name:values.eduintits,
+					description:values.description,
+				}).then((result) => {
+					if(result){
+						if(result.data){
+							if(result.data.status === 0){
+								this.props.form.setFieldsValue({
+									id:this.state.id,
+									eduintits:values.eduintits,
+									description:values.description,
+								});
+								this.setState({
+									whethertoeditysl:false,
+									id:this.state.id,
+									eduintits:values.eduintits,
+									description:values.description,
+								});
+								this.props.getinputdata();
+								this.props.showNotification(result.data.message);
+							}else {
+								this.props.showNotification(result.data.message);
+
+							}
+						}
+
+					}
+				}).catch((error) => {
+					console.log(error)
+				})
+			}else{
+				console.log(err);
+			}
+
+		});
+	}
+
+
+	render(){
+		let{description,whethertoeditysl,addonAfter,eduintits,informs,isSpinysl} =this.state;
+		let{myname,mydescription}=this.props;
+		const {getFieldDecorator} = this.props.form;
+
+		return(
+			<React.Fragment  >
+				<div >
+					<Spin size="large" spinning={isSpinysl}  >
+										<div  className="edu-back-white ">
+											{
+												whethertoeditysl === false?
+													<div  className="bor-bottom-greyE" >
+														<div className="fudonyingxiangysl"><div className="ysltitbt fl"><span >{myname}</span></div>
+															{
+																this.props.isAdmin() === true ?
+																	(this.props.yslbool===false?
+																			<i className="iconfont icon-bianji1 newbianji1 fr pr25  yslbianji" onClick={()=>this.bianji(true)}></i>
+																	:
+									              	""
+																)
+
+																	:""
+															}
+														</div>
+														<div id="MakedownHTML"className={"markdown-body fonttext yslmtopcg yslminHeigth markdownysltext"}   dangerouslySetInnerHTML={{__html: markdownToHTML(mydescription).replace(/▁/g, "▁▁▁")}}/>
+													</div>
+													:
+													<div  className="edu-back-white  bor-bottom-greyE">
+														<Form layout='vertical' onSubmit={this.handleSubmit} >
+															<style>
+																{
+																	`.ant-form-item{
+															    margin-bottom:0px !important;
+															}
+															.chooseDestwo .ant-form-item{
+															    margin-bottom:0px !important;
+															}
+														
+															.chooseDestwo .ant-form-item-control-wrapper .ant-form-item-control .ant-form-explain{
+															padding-left: 25px !important;
+															}
+															.ant-form-vertical .ant-form-item {
+															margin-bottom:0px !important;
+															 }
+															`
+
+																}
+															</style>
+															<Form.Item
+																style={{"borderBottom":'none'}}
+																className="chooseDestwo "
+															>
+																{getFieldDecorator('eduintits', {
+																	rules: [{
+																		required: true, message: '请在此输入标题,最多60个字符',
+																	}, {
+																		max: 60, message: '最大限制为60个字符',
+																	}],
+																})(
+																	<div className="ysleduinwh">
+																		<div className="yslduinlefts">
+																			<span className="yslduincolorred">*</span>
+																		</div>
+																		<div className="yslduinleft">
+																			<Input placeholder="请在此输入标题，最多60个字符" maxLength="60"
+																						 style={{ textAlign: "left",width:"100%",}}
+																						 onInput={this.changeTopicName}
+																						 autoComplete="off"
+																						 suffix={String(addonAfter)+"/60"}
+																						 value={eduintits}
+																						 className="searchViewAfter"></Input>
+																		</div>
+
+																	</div>
+																)}
+															</Form.Item>
+
+
+															<div  className="edu-back-white ">
+																<div className={"yslmt16px"}>
+																	<style>
+																		{
+																			`
+																.ant-form-item-children {
+																		position: unset;
+																}
+																
+																	.chooseDes .ant-form-item{
+															    margin-bottom:0px !important;
+															}
+															.rememberTip{
+																position:absolute;
+																right:0px;
+																bottom:-10px;
+															}
+															.chooseDes .ant-form-explain{
+															position:absolute;
+															bottom:-10px;
+															left:0px;
+														}
+														.ant-form-vertical .ant-form-explain {
+																margin-top: 0px !important;
+																margin-bottom: 0px !important;
+																padding-left: 0px !important;
+														}
+														.chooseDes .ant-form-item-with-help {
+																	margin-bottom: 24px !important;
+															}
+															
+															.courseMessageMD .ant-form-item-with-help {
+																	margin-bottom: 24px !important;
+															}
+														.chooseDes .editormd-toolbar {
+														 width: 100%; 
+														 min-height: 37px; 
+														 background: #fff; 
+														 display: none; 
+														 position: absolute !important; 
+														 left: 0;
+												     z-index: 10; 
+														 border-bottom: 1px solid #ddd; 
+														 
+														}
+														.yslmt16px .ant-form-item-with-help
+														{
+																margin-bottom: 24px !important;
+														}
+															`
+																		}
+																	</style>
+																	<Form.Item
+																		style={{"borderBottom":'none'}}
+																		className="chooseDes "
+																	>
+																		{getFieldDecorator('description', {
+																			rules: [{
+																				required: true, message: '请在此输入内容,最多5000个字符',
+																			}, {
+																				max: 5000, message: '最大限制为5000个字符',
+																			}],
+																		})(
+																			<TPMMDEditor ref={this.messageRef}
+																									 placeholder={'请在此输入内容,最多5000个字符'}
+																									 initValue={description}
+																									 mdID={'courseMessageMD'}
+																									 className="courseMessageMD "
+																									 height={518}
+																			></TPMMDEditor>
+																		)}
+																	</Form.Item>
+																</div>
+															</div>
+
+															<Form.Item>
+																<div className="clearfix mt28  fr pb50 mr25" style={{display:"block;"}}>
+																	<a className="defalutCancelbtn fl mr20 " onClick={()=>this.bianji(false)}>取消</a>
+																	<Button   htmlType="submit"  className="ant-btn defalutSubmitbtn fl  ant-btn-primary">
+																		<span>提 交</span></Button>
+																</div>
+															</Form.Item>
+														</Form>
+													</div>
+											}
+										</div>
+					</Spin>
+
+				</div>
+			</React.Fragment>
+		)
+	}
+}
+const Bullsubdirectorys = Form.create({ name: 'bullsubdirectorys' })(Bullsubdirectory);
+export default Bullsubdirectorys;

public/react/src/modules/courses/gradinforms/Eduinforms.js

@@ -4,6 +4,9 @@ import { WordsBtn,on, off, trigger,markdownToHTML,getImageUrl} from 'educoder';
 import './myysleduinforms.css'
 import axios from 'axios';
 import TPMMDEditor from "../../tpm/challengesnew/TPMMDEditor";
+import Bullsubdirectory from "./Bullsubdirectory";
+import moment from "../new/CoursesNew";
+import Fileslistitem from "../Resource/Fileslistitem";
  // 公告栏
 class Eduinforms extends Component{
 	constructor(props){
@@ -14,33 +17,57 @@ class Eduinforms extends Component{
 			description:null,
 			isSpin:true,
 			whethertoedit:false,
-
+			addonAfter:0,
+			eduintit:"",
+			informs:[],
+			yslbool:false,
 		}
 	}
 
 	componentDidMount() {
 		console.log("获取到数据");
     console.log(this.props);
-    let url = `/courses/${this.props.match.params.coursesId}/informs.json`;
+
+    this.getinputdata();
+	}
+
+	getyslbooltrue(){
+		console.log("调用了getyslbooltrue");
+		this.setState({
+			yslbool:true,
+		});
+	}
+
+	getyslboolfalse(){
+		console.log("调用了getyslboolfalse");
+		this.setState({
+			yslbool:false,
+		});
+	}
+	getinputdata=()=>{
+		this.setState({
+			isSpin:true,
+		})
+		let url = `/courses/${this.props.match.params.coursesId}/informs.json`;
 		//
 		axios.get(url).then((response) => {
 			if(response){
-       if(response.data){
+				if(response.data){
-         this.setState({
+					this.setState({
-					 description:response.data.description,
+						informs:response.data.informs,
-					 isSpin:false,
+						isSpin:false,
-				 })
+					})
-			 }else {
+				}else {
-				 this.setState({
+					this.setState({
-					 description:null,
+						informs:[],
-					 isSpin:false,
+						isSpin:false,
-
+
-				 })
+					})
-
+
-			 }
+				}
 			}else {
 				this.setState({
-					description:null,
+					informs:[],
 					isSpin:false,
 				})
 
@@ -48,14 +75,12 @@ class Eduinforms extends Component{
 		}).catch((error) => {
 			console.log(error)
 			this.setState({
-				description:null,
+				informs:[],
 				isSpin:false,
 			})
 		});
-
 	}
 
-
 	componentDidUpdate = (prevProps) => {
 
 
@@ -65,32 +90,60 @@ class Eduinforms extends Component{
 		this.setState({
 			whethertoedit:bians,
 		})
+		if(bians===true){
+			this.getyslbooltrue();
 
+		}else {
+			this.getyslboolfalse();
+		}
 	};
+	changeTopicName = (e) => {
+		console.log("调用了changeTopicName");
+		let num = parseInt(e.target.value.length);
+		if(num>60){
+			return;
+		}
+		this.setState({
+			addonAfter: num < 0 ? 0 : num
+		});
+		this.setState({
+			eduintit: e.target.value
+		})
 
+		this.props.form.setFieldsValue({
+			eduintits: e.target.value,
+		});
+	}
 	handleSubmit=(e) => {
 		e.preventDefault();
 		this.props.form.validateFields((err, values) => {
 			if (!err) {
 				console.log(values.description);
+				if(values.eduintits === undefined|| values.eduintits === "" || values.eduintits ===null){
+					this.props.showNotification(`请输入标题`);
+					return
+
+				}
 				if(values.description === undefined|| values.description === "" || values.description ===null){
-					this.props.showNotification(`请输入提交内容`);
+					this.props.showNotification(`请输入内容`);
 					return
 
 				}
 				var  id=this.props.match.params.coursesId
 
-				var  url = `/courses/${id}/update_informs.json`;
+				var  url = `/courses/${id}/new_informs.json`;
 				axios.post(url,{
+					name:values.eduintits,
 					description:values.description,
 				}).then((result) => {
 				 if(result){
 				 	if(result.data){
            if(result.data.status === 0){
             this.setState({
-							description:values.description,
 							whethertoedit:false,
-						})
+						});
+            this.getinputdata();
+            this.getyslboolfalse();
 						 this.props.showNotification(result.data.message);
 					 }else {
 						 this.props.showNotification(result.data.message);
@@ -111,7 +164,7 @@ class Eduinforms extends Component{
 
 
 	render(){
-		let{description,whethertoedit} =this.state;
+		let{description,whethertoedit,addonAfter,eduintit,informs,yslbool} =this.state;
 		const {getFieldDecorator} = this.props.form;
 
 		return(
@@ -123,10 +176,13 @@ class Eduinforms extends Component{
 								<span className="font-18 fl color-dark-21">公告栏</span>
 								{
 									this.props.isAdmin()===true?
-										<li className="btn colorblue font-16 fr" style={{cursor: "default"}}
+										(this.state.yslbool===false?
-												onClick={() => this.bianji(true)}>
+											<li className="btn colorblue font-16 fr bluebkbk" style={{cursor: "default"}}
-											编辑
+													onClick={() => this.bianji(true)}>
-										</li>
+												发布公告
+											</li>
+										:"")
+
 										:""
 								}
 
@@ -138,36 +194,73 @@ class Eduinforms extends Component{
 
 								<div id={"cdiv1"}>
 									{
-										whethertoedit === false?
+										whethertoedit === false?""
-											<div>
+											:
-												{
+											<div  className="edu-back-white  bor-bottom-greyE">
-													description === null || description=== undefined ||description === "" ?
-														<div className="alltask ">
-															<div className="edu-tab-con-box clearfix edu-txt-center"><img className="edu-nodata-img mb20"
-																																														src={getImageUrl("images/educoder/nodata.png")} />
-																<p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p></div>
-														</div>
-														:
-														<div  className="edu-back-white ">
-														<div id="MakedownHTML"  className={"markdown-body fonttext yslmtopcg yslminHeigth"}  style={{minHeight:"400px"}} dangerouslySetInnerHTML={{__html: markdownToHTML(description).replace(/▁/g, "▁▁▁")}}>
 
 
-														</div>
-														</div>
-												}
-											</div>
-											:
-											<div>
 												<Form layout='vertical' onSubmit={this.handleSubmit} >
-
-											<div  className="edu-back-white ">
-												<div className={"yslmt16px"}>
 													<style>
 														{
+															`.ant-form-item{
+															    margin-bottom:0px !important;
+															}
+															.chooseDestwo .ant-form-item{
+															    margin-bottom:0px !important;
+															}
+														
+															.chooseDestwo .ant-form-item-control-wrapper .ant-form-item-control .ant-form-explain{
+															padding-left: 25px !important;
+															}
+															.ant-form-vertical .ant-form-item {
+															margin-bottom:0px !important;
+															 }
 															`
+
+														}
+													</style>
+													<Form.Item
+														style={{"borderBottom":'none'}}
+														className="chooseDestwo "
+													>
+														{getFieldDecorator('eduintits', {
+															rules: [{
+																required: true, message: '请在此输入标题,最多60个字符',
+															}, {
+																max: 60, message: '最大限制为60个字符',
+															}],
+														})(
+															<div className="ysleduinwh">
+																<div className="yslduinlefts">
+																	<span className="yslduincolorred">*</span>
+																</div>
+																<div className="yslduinleft">
+																	<Input placeholder="请在此输入标题，最多60个字符" maxLength="60"
+																				 style={{ textAlign: "left",width:"100%",}}
+																				 onInput={this.changeTopicName}
+																				 autoComplete="off"
+																				 suffix={String(addonAfter)+"/60"}
+																				 value={eduintit}
+																				 className="searchViewAfter"></Input>
+																</div>
+
+															</div>
+														)}
+													</Form.Item>
+
+
+													<div  className="edu-back-white ">
+														<div className={"yslmt16px"}>
+															<style>
+																{
+																	`
 																.ant-form-item-children {
 																		position: unset;
 																}
+																
+																	.chooseDes .ant-form-item{
+															    margin-bottom:0px !important;
+															}
 															.rememberTip{
 																position:absolute;
 																right:0px;
@@ -206,41 +299,66 @@ class Eduinforms extends Component{
 																margin-bottom: 24px !important;
 														}
 															`
-														}
+																}
-													</style>
+															</style>
-													<Form.Item
+															<Form.Item
-														style={{"borderBottom":'none'}}
+																style={{"borderBottom":'none'}}
-														className="chooseDes "
+																className="chooseDes "
-													>
+															>
-													{getFieldDecorator('description', {
+																{getFieldDecorator('description', {
-														rules: [{
+																	rules: [{
-															required: true, message: '请在此输入内容,最多5000个字符',
+																		required: true, message: '请在此输入内容,最多5000个字符',
-														}, {
+																	}, {
-															max: 5000, message: '最大限制为5000个字符',
+																		max: 5000, message: '最大限制为5000个字符',
-														}],
+																	}],
-													})(
+																})(
-												<TPMMDEditor ref={this.messageRef}
+																	<TPMMDEditor ref={this.messageRef}
-																		 placeholder={'请在此输入内容,最多5000个字符'}
+																							 placeholder={'请在此输入内容,最多5000个字符'}
-																		 initValue={description}
+																							 initValue={description}
-																		 mdID={'courseMessageMD'}
+																							 mdID={'courseMessageMD'}
-																		 className="courseMessageMD "
+																							 className="courseMessageMD "
-																		 height={518}
+																							 height={518}
-												></TPMMDEditor>
+																	></TPMMDEditor>
-													)}
+																)}
-													</Form.Item>
+															</Form.Item>
-												</div>
+														</div>
-											</div>
+													</div>
 
 													<Form.Item>
-												<div className="clearfix mt28  fr" style={{display:"block;"}}>
+														<div className="clearfix mt28  fr pb50 mr25" style={{display:"block;"}}>
-													<a className="defalutCancelbtn fl mr20" onClick={()=>this.bianji(false)}>取消</a>
+															<a className="defalutCancelbtn fl mr20 " onClick={()=>this.bianji(false)}>取消</a>
-													<Button   htmlType="submit"  className="ant-btn defalutSubmitbtn fl  ant-btn-primary">
+															<Button   htmlType="submit"  className="ant-btn defalutSubmitbtn fl  ant-btn-primary">
-														<span>提 交</span></Button>
+																<span>提 交</span></Button>
-												</div>
+														</div>
 													</Form.Item>
 												</Form>
 											</div>
 									}
+											<div>
+												{
+													informs === null || informs=== undefined ||informs.length === 0 ?
+														<div className="alltask ">
+															<div className="edu-tab-con-box clearfix edu-txt-center"><img className="edu-nodata-img mb20"
+																																														src={getImageUrl("images/educoder/nodata.png")} />
+																<p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p></div>
+														</div>
+														:
+
+														<div  className="edu-back-white ">
+															{ informs&&informs.map((item, index) => {
+																return (
+																	<Bullsubdirectory {...this.state} {...this.props}  key={index} yslbool={yslbool} id={item.id} myname={item.name} mydescription={item.description}
+																										getyslbooltrue={()=>this.getyslbooltrue()}
+																										getyslboolfalse={()=>this.getyslboolfalse()}
+																										getinputdata={()=>this.getinputdata()} ></Bullsubdirectory>
+																)
+															})
+															}
+														</div>
+												}
+											</div>
+
+
 
 
 								</div>
@@ -257,3 +375,7 @@ class Eduinforms extends Component{
 }
 const Eduinformss = Form.create({ name: 'eduinforms' })(Eduinforms);
 export default Eduinformss;
+{/*<div key={index} className="bor-bottom-greyE" >*/}
+{/*	{item.name===""?"":item.name===undefined?"":item.name===null?"":<div className="ysltitbt"><span >{item.name}</span></div>}*/}
+{/*	<div id="MakedownHTML" key={index} className={"markdown-body fonttext yslmtopcg yslminHeigth markdownysltext"}   dangerouslySetInnerHTML={{__html: markdownToHTML(item.description).replace(/▁/g, "▁▁▁")}}/>*/}
+{/*</div>*/}

public/react/src/modules/courses/gradinforms/myysleduinforms.css

@@ -1,5 +1,5 @@
 .yslmt16px{
-   padding-top: 25px !important;
+   padding-top: 12px !important;
     padding-left: 25px !important;
     padding-right: 25px !important;
     padding-bottom: 1px !important;
@@ -11,3 +11,64 @@
 
 
 }
+
+.bluebkbk{
+    border: 1px solid #4CADFF;
+    width: 79px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+}
+.ysleduinwh{
+
+    padding-right: 25px;
+   margin-top:  26px;
+    display: flex;
+    justify-content:flex-start;
+}
+.yslduincolorred{
+    color: red;
+    line-height: 40px;
+    height: 40px;
+    text-align: center;
+}
+.yslduinleft{
+    width: 100% ;
+}
+.yslduinlefts{
+    width: 25px;
+    line-height: 40px;
+    height: 40px;
+    text-align: center;
+}
+.mtyslduin25{
+    margin-top: 25px;
+}
+
+.newbianji1{
+    font-size: 16px !important;
+    margin-right: 10px;
+    color: #4CACFF;
+    margin-bottom: 3px;
+    display: inline-block;
+}
+
+.ysltitbt{
+    float: left;
+    padding-top: 31px;
+    padding-left: 25px;
+    font-size: 16px;
+    color: #333333;
+    text-align: left;
+}
+.markdownysltext{
+    font-size: 14px;
+    color: #999999;
+}
+.fudonyingxiangysl{
+    width: 100%;
+    height: 66px;
+}
+.yslbianji{
+    padding-top: 31px;
+}