|
|
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 Bullsubdirectory from "./Bullsubdirectory";
|
|
|
import NoneData from '../../../modules/courses/coursesPublic/NoneData'
|
|
|
|
|
|
import moment from "../new/CoursesNew";
|
|
|
import Fileslistitem from "../Resource/Fileslistitem";
|
|
|
// 公告栏
|
|
|
// var isOnComposition = false;
|
|
|
// const isChrome = !!window.chrome && !!window.chrome.webstore
|
|
|
class Eduinforms extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.messageRef = React.createRef();
|
|
|
|
|
|
this.state={
|
|
|
description:null,
|
|
|
isSpin:true,
|
|
|
whethertoedit:false,
|
|
|
addonAfter:0,
|
|
|
eduintits:"",
|
|
|
informs:[],
|
|
|
yslbool:false,
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
console.log("获取到数据");
|
|
|
console.log(this.props);
|
|
|
|
|
|
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){
|
|
|
this.setState({
|
|
|
informs:response.data.informs,
|
|
|
isSpin:false,
|
|
|
})
|
|
|
}else {
|
|
|
this.setState({
|
|
|
informs:[],
|
|
|
isSpin:false,
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}else {
|
|
|
this.setState({
|
|
|
informs:[],
|
|
|
isSpin:false,
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
this.setState({
|
|
|
informs:[],
|
|
|
isSpin:false,
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
bianji = (bians)=>{
|
|
|
this.setState({
|
|
|
whethertoedit:bians,
|
|
|
description:"",
|
|
|
eduintits:"",
|
|
|
addonAfter:0,
|
|
|
});
|
|
|
this.props.form.setFieldsValue({
|
|
|
description:"",
|
|
|
eduintits:"",
|
|
|
});
|
|
|
if(bians===true){
|
|
|
this.getyslbooltrue();
|
|
|
|
|
|
}else {
|
|
|
this.getyslboolfalse();
|
|
|
}
|
|
|
};
|
|
|
changeTopicName = (e) => {
|
|
|
// console.log("调用了changeTopicName");
|
|
|
let num = e.target.value.length;
|
|
|
if(num>60){
|
|
|
return;
|
|
|
}
|
|
|
this.setState({
|
|
|
addonAfter: num < 0 ? 0 : num
|
|
|
});
|
|
|
if(num<=60){
|
|
|
this.setState({
|
|
|
eduintits: e.target.value
|
|
|
})
|
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
eduintits: e.target.value,
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
// handleComposition=(e)=>{
|
|
|
// if (e.type === 'compositionend') {
|
|
|
// // composition is end
|
|
|
// isOnComposition = false
|
|
|
//
|
|
|
// if (!isOnComposition && isChrome) {
|
|
|
// // fire onChange
|
|
|
// console.log(!isOnComposition);
|
|
|
// this.changeTopicName(e);
|
|
|
// }
|
|
|
// } else {
|
|
|
// // in composition
|
|
|
// isOnComposition = true
|
|
|
// }
|
|
|
// };
|
|
|
// handleComposition = (e) => {
|
|
|
// console.log(e.type + ": " + e.target.value);
|
|
|
// if (e.type === 'compositionend') {
|
|
|
// // composition is end
|
|
|
// const value = e.target.value;
|
|
|
// this.setState({ isOnComposition: false },()=>{
|
|
|
// // this.handleFixedChange(value);
|
|
|
// });
|
|
|
// } else {
|
|
|
// // in composition
|
|
|
// this.setState({ isOnComposition: true });
|
|
|
// }
|
|
|
// }
|
|
|
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 titname="";
|
|
|
try {
|
|
|
if(values.eduintits.length>0){
|
|
|
if( values.eduintits.length>60){
|
|
|
var str=values.eduintits;
|
|
|
titname=str.substring(0,60);
|
|
|
}else {
|
|
|
titname=values.eduintits;
|
|
|
}
|
|
|
}else {
|
|
|
titname=values.eduintits;
|
|
|
}
|
|
|
}catch (e) {
|
|
|
titname=values.eduintits;
|
|
|
}
|
|
|
var url = `/courses/${id}/new_informs.json`;
|
|
|
axios.post(url,{
|
|
|
name:titname,
|
|
|
description:values.description,
|
|
|
}).then((result) => {
|
|
|
if(result){
|
|
|
if(result.data){
|
|
|
if(result.data.status === 0){
|
|
|
this.setState({
|
|
|
whethertoedit:false,
|
|
|
|
|
|
});
|
|
|
this.getinputdata();
|
|
|
this.getyslboolfalse();
|
|
|
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,whethertoedit,addonAfter,eduintits,informs,yslbool} =this.state;
|
|
|
const {getFieldDecorator} = this.props.form;
|
|
|
|
|
|
return(
|
|
|
<React.Fragment >
|
|
|
<div id={"zhudiv"}>
|
|
|
<div className="edu-back-white">
|
|
|
<p className="clearfix padding30 bor-bottom-greyE yslmaxheigth80" >
|
|
|
<p style={{height: '20px'}}>
|
|
|
<span className="font-18 fl color-dark-21">公告栏</span>
|
|
|
{
|
|
|
this.props.isAdmin()===true?
|
|
|
(this.state.yslbool===false?
|
|
|
<li className="btn colorblue font-16 fr bluebkbk pointer"
|
|
|
onClick={() => this.bianji(true)}>
|
|
|
发布公告
|
|
|
</li>
|
|
|
:"")
|
|
|
|
|
|
:""
|
|
|
}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</p>
|
|
|
</div>
|
|
|
<Spin size="large" spinning={this.state.isSpin} id={"cdiv"}>
|
|
|
|
|
|
<div id={"cdiv1"}>
|
|
|
{
|
|
|
whethertoedit === false?""
|
|
|
:
|
|
|
<div className="edu-back-white ">
|
|
|
|
|
|
|
|
|
<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个字符',
|
|
|
}],
|
|
|
})(
|
|
|
<div className="ysleduinwh">
|
|
|
<div className="yslduinlefts">
|
|
|
<span className="yslduincolorred">*</span>
|
|
|
</div>
|
|
|
<div className="yslduinleft">
|
|
|
<style>{
|
|
|
`
|
|
|
.ant-input{
|
|
|
border-right: none !important;
|
|
|
height: 40px !important;
|
|
|
}
|
|
|
`
|
|
|
}</style>
|
|
|
<Input placeholder="请在此输入标题，最多60个字符" maxLength={60}
|
|
|
style={{ textAlign: "left",width:"100%",}}
|
|
|
onInput={this.changeTopicName}
|
|
|
autoComplete="off"
|
|
|
addonAfter={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" >
|
|
|
<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 className="bor-bottom-greyE mr25 ml25"></div>
|
|
|
</div>
|
|
|
}
|
|
|
<div>
|
|
|
{
|
|
|
informs === null || informs=== undefined ||informs.length === 0 ?
|
|
|
this.state.yslbool===false?
|
|
|
<NoneData></NoneData>
|
|
|
:""
|
|
|
:
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Spin>
|
|
|
|
|
|
</div>
|
|
|
</React.Fragment>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
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>*/} |
