educoder/public/react/src/modules/courses/coursesPublic/ModulationModal.js

import React,{ Component } from "react";
import {Modal, Checkbox, Upload, Button, Icon, message, Input, Form} from "antd";
import { WordNumberTextarea } from 'educoder';
import './Newshixunmodel.css'

//调分
class ModulationModal extends Component{
  constructor(props){
    super(props);
    this.state={
      group_ids:[],
      fileList:[],
      textareaval:undefined,
      Inputsval:undefined
    }
  }


  Saves=()=>{
    let {textareaval,Inputsval}=this.state;
		// if(textareaval===""||textareaval===undefined){
		//   this.setState({
		//     textareavaltype:true
		//   })
		//   return
		// }
    this.setState({
      textareavaltype: false
    })

    if(Inputsval===undefined||Inputsval===""){
			this.setState({
				Inputsval: "",
				Inputsvaltype: true,
				Inputsvaltest: "请输入分数",
			})
      return
    }

		if (this.state.Inputsvaltype === true) {
			return;
		}
		this.setState({
			Inputsvaltype: false,
			Inputsvaltest: "",
		})
     this.props.Saves(textareaval,Inputsval)

  }

  settextarea=(e)=>{
   this.setState({
     textareaval:e.target.value
   })
  }

  setInputs=(e)=>{
		debugger
    var value=parseInt(e.target.value)

    if(isNaN(value)){
			value = 0;
			this.setState({
				Inputsval: value,
				Inputsvaltype: true,
				Inputsvaltest: "请输入分数",
			})
    }else{
      if(value<0||value>100){
				value = 0;
				this.setState({
					Inputsval: value,
					Inputsvaltype: true,
					Inputsvaltest: "请输入0-100的分数",
				})

      }
    }
    this.setState({
			Inputsval: value,
			Inputsvaltype: false,
    })
  }
  render(){
		let {textareaval, Inputsval, textareavaltype, Inputsvaltype, Inputsvaltest} = this.state;
    return(
      <div>
        <Modal
          keyboard={false}
          className={"HomeworkModal"}
          title={this.props.modalname || '调分'}
          visible={this.props.visible}
          closable={false}
          footer={null}
          destroyOnClose={true}
        >
					<div className="clearfix" style={{
						display: "-webkit-flex",
						flexDirection: "column",
						alignItems: "center",
					}}>
						<div style={{
							marginTop: " 27px",
							display: "flex",
							flexDirection: "initial",
						}}>



             <span style={{
							 width: "70px",
							 textAlign: "center",
							 lineHeight: " 40px",
						 }}><span style={{
							 textAlign: "center",
							 lineHeight: " 40px",
							 color: " #f5222d",
						 }}>*</span>调分：</span>
							<Input
								className={Inputsvaltype === true ? "borerinput" : ""}
								style={{
								width: "335px",
								height: "40px",
							}}
								placeholder="请填写分数"
								value={Inputsval}
								onInput={this.setInputs}
								suffix={
											 <span
												 style={{
													 textAlign: "center",
													 lineHeight: " 40px",
												 }}
											 >分</span>
										 }
							/>
						</div>
						{
							Inputsvaltype === true ?
								<p style={{color: "#DD1717", width: "268px"}}>{Inputsvaltest}</p>
								: ""
						}

						<div style={{
							display: "flex",
							flexDirection: "initial",

						}}>
							<span style={{width: "70px"}}></span>
							<p className=" mt3 font-14 " style={{color: "#666666"}}>调分后该学生的最终成绩将不会按照评分规则进行计算</p>
						</div>

						<div style={{
							display: "flex",
							flexDirection: "initial",
							marginTop: "10px;",
						}}>
							<span style={{width: "70px", marginTop: "24px"}}>调分原因：</span>
							<WordNumberTextarea
								style={{width: "335px"}}
								placeholder={"请输入调分原因（选填）"}
								onInput={(e) => this.settextarea(e)}
								value={textareaval}
								maxlength={100}
							/>
						</div>

						<div style={{
							marginTop: "27px",
							width: " 336px",
							marginLeft: "70px",
							marginBottom: "29px",
						}}>
							<a className="task-btn color-white mr30" style={{width: "72px",}}
								 onClick={this.props.Cancel}>{this.props.Cancelname || '取消'}</a>
							<a className="task-btn task-btn-orange" style={{width: "72px",}}
								 onClick={this.Saves}>{this.props.Savesname || '保存'}</a>
            </div>

          </div>


				</Modal>
      </div>
    )
  }
}
export default ModulationModal;
// <div className="task-popup-content">
//   <p className="task-popup-text-center font-16 mb20">
//
//     <span className={"color-dark-21"}>该学生的最终成绩将不会按照评分规则进行计算</span>
//
//   </p>
//
//
//   <div className="clearfix">
//     {/*<textarea*/}
//     {/*className="winput-100-150"*/}
//     {/*placeholder="请填写您对作品调分的原因"*/}
//     {/*value={textareaval}*/}
//     {/*onInput={this.settextarea}*/}
//     {/*></textarea>*/}
//
//     <WordNumberTextarea
//       placeholder={"请填写您对作品调分的原因"}
//       onInput={(e)=>this.settextarea(e)}
//       value={textareaval}
//       maxlength={100}
//     />
//
//     {/*<li style={{height:"20px",lineHeight:"20px"}}><span className={textareavaltype===true?"color-red":"none"}>原因不能为空</span></li>*/}
//     <div style={{height:"20px",lineHeight:"20px"}}></div>
//   </div>
//
//   <style>
//     {
//
//       `
// 									.pdl10{
// 									 padding-left:10px;
// 									}
// 									`
//     }
//   </style>
//
//   <li className={"pdl10"}>
//
//   </li>
//   <li style={{height:"20px",lineHeight:"20px"}}><span className={Inputsvaltype===true?"color-red":"none"}>分数不能为空</span></li>
//   <div className="clearfix edu-txt-center">
//     <a  className="task-btn color-white mr30" onClick={this.props.Cancel}>{this.props.Cancelname || '取消'}</a>
//     <a className="task-btn task-btn-orange" onClick={this.Saves}>{this.props.Savesname || '保存'}</a>
{/*  </div>*/
}
{/*</div>*/
}