调整毕设新建编辑并封装textarea字数控制

public/react/src/common/educoder.js

@@ -70,3 +70,5 @@ export { CNotificationHOC as CNotificationHOC } from '../modules/courses/common/
 export { default as ModalWrapper } from '../modules/courses/common/ModalWrapper'
 export { default as NoneData } from '../modules/courses/coursesPublic/NoneData'
 
+export {default as WordNumberTextarea} from '../modules/modals/WordNumberTextarea'
+

public/react/src/modules/courses/coursesPublic/AccessoryModal.js

@@ -1,9 +1,11 @@
 import React,{ Component } from "react";
-import { Modal,Checkbox,Upload,Button,Icon,message,notification} from "antd";
-import { WordsBtn,getUrl, getUploadActionUrl} from 'educoder';
+import { Modal,Checkbox,Upload,Button,Icon,message,notification,Input} from "antd";
+import { WordsBtn,getUrl, getUploadActionUrl,WordNumberTextarea} from 'educoder';
 import axios from 'axios';
 import Modals from '../../modals/Modals';
+
 const CheckboxGroup = Checkbox.Group;
+const { TextArea } = Input;
 
 class AccessoryModal extends Component{
   constructor(props){
@@ -258,7 +260,6 @@ class AccessoryModal extends Component{
       },
     };
 
-
     return(
       <React.Fragment>
 
@@ -335,23 +336,24 @@ class AccessoryModal extends Component{
               </Upload>
             </p>
 
-            <textarea  placeholder="请在此输入补交附件的原因，最大限制100个字符" className={"mt20"} value={settextarea} onInput={this.settextarea} style={{
-              width: '100%',
-              height:'150px',
-              border:'1px solid rgba(234,234,234,1)',
-              padding: '10px'
-            }}></textarea>
+						<WordNumberTextarea
+							thisInput={(e)=>this.settextarea(e)}
+							thisValue={this.state.description}
+							startFontLength={description===undefined?0:description.length}
+							maxFontLength={100}
+						/>
+
             {
               this.state.Errormessage && this.state.Errormessage === true ?
                 <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                   <span className="fl" style={{textAlign:"left",width: " 100%"}}>还未上传附件</span>
                 </p>
-                : <div style={{height:"25px"}}></div>
+                : ""
 
             }
 						{this.state.updatas===true?<span className={"color-red"}>请上传附件</span>:""}
             <div className="clearfix mt30 edu-txt-center mb10">
-              <a  className="task-btn color-white mr70" onClick={this.props.Cancel}>{this.props.Cancelname || '取消'}</a>
+              <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>
 

public/react/src/modules/courses/graduation/tasks/GraduationTasksedit.js

@@ -379,7 +379,7 @@ class GraduationTasksedit extends Component{
                   <Form.Item label="任务标题"  >
                     {getFieldDecorator('name', {
                       rules: [{ required: true, message: "请输入标题" }],
-                    })(<Input placeholder="请输入任务名称，最大限制60个字符" value={name} onInput={this.changeTitle}  className="searchView searchViewAfter" style={{"width":"100%"}} maxLength="60" addonAfter={String(title_num)+"/60"}/>)}
+                    })(<Input placeholder="请输入任务名称，最大限制60个字符" value={name} onInput={this.changeTitle}  className="searchView searchViewAfter" style={{"width":"100%"}} maxLength="60" suffix={String(title_num)+"/60"}/>)}
                   </Form.Item>
                   <input type="hidden"  id='nametypes' />
                 </div>

public/react/src/modules/courses/graduation/tasks/GraduationTasksnew.js

@@ -384,7 +384,7 @@ class GraduationTasksnew extends Component {
 											rules: [{required: true, message: "不能为空"}],
 										})(<Input placeholder="请输入任务名称，最大限制60个字符" value={title_value} onInput={this.changeTitle}
 															className="searchView searchViewAfter  h40" style={{"width": "100%"}} maxLength="60"
-															addonAfter={String(title_num)+"/60"}/>)}
+															suffix={String(title_num)+"/60"}/>)}
 									</Form.Item>
 									<input type="hidden" id='nametypes'  />
 								</div>

public/react/src/modules/modals/WordNumberTextarea.css

@@ -0,0 +1,42 @@
+.WordNumberTextarea {
+    outline: none; /* 去掉输入字符时的默认样式 */
+    appearance:none;
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    background-color: white;
+    text-shadow: none;
+    -webkit-writing-mode: horizontal-tb !important;
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+    resize:none; /*禁止拉伸*/
+    border: none; /*去掉默认边框*/
+    width: 100%;
+    height:150px;
+    border:none;
+    padding: 10px;
+    display: block;
+}
+
+.WordNumbernote {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-decoration: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: auto;
+    border: 1px solid rgba(234,234,234,1);
+    border-radius: 0.125rem;
+    margin: 0.31rem;
+    padding: 0.19rem;
+    backgroud:rgba(234,234,234,1);
+    padding-bottom: 10px;
+    padding-right: 10px;
+
+}
+.WordNumberTextarea-count {
+    display: inline-block;
+    float: right;
+    font-size: 0.28rem;
+    color: #adadad;
+    padding-right: 0.25rem;
+}

public/react/src/modules/modals/WordNumberTextarea.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import './WordNumberTextarea.css';
+class WordNumberTextarea extends Component {
+  constructor(props) {
+    super(props);
+  }
+render() {
+    return(
+			<div className="WordNumbernote">
+					<textarea placeholder={`请在此输入补交附件的原因，最大限制${this.props.maxFontLength}个字符`}
+										className="WordNumberTextarea"
+										value={this.props.thisValue}
+										onInput={(e)=>this.props.thisInput(e)}
+										maxlength={this.props.maxFontLength}
+					/>
+					<div className="WordNumberTextarea-count"><span>{this.props.startFontLength}</span>/{this.props.maxFontLength}</div>
+			</div>
+    )
+  }
+}
+
+export default WordNumberTextarea;