作业编辑重构

public/react/src/modules/courses/busyWork/NewWork.js

@@ -3,11 +3,11 @@ import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Moda
 import axios from 'axios'
 import '../css/busyWork.css'
 import '../css/Courses.css'
-import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder'
+import { WordsBtn, getUrl, ConditionToolTip } from 'educoder'
-import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
+
 import CBreadcrumb from '../common/CBreadcrumb'
+import NewWorkForm from './NewWorkForm'
 
-const confirm = Modal.confirm;
 const $ = window.$
 const MAX_TITLE_LENGTH = 60;
 class NewWork extends Component{
@@ -17,15 +17,6 @@ class NewWork extends Component{
     this.answerMdRef = React.createRef();
     
     this.state={
-      title_value:"",
-      title_num: 0,
-      contentFileList: [],
-      answerFileList: [],
-      workLoaded: false,
-      base_on_project: true,
-      category: {},
-      min_num: 2,
-      max_num: 10,
     }
   }
   componentDidMount () {
@@ -50,7 +41,6 @@ class NewWork extends Component{
           course_id: data.course_id,
           course_name: data.course_name,
           category: data.category,
-
         })
       }
     })
@@ -65,56 +55,13 @@ class NewWork extends Component{
     .then((response) => {
       if (response.data.name) {
         const data = response.data;
-        
+        data.isEdit = true;
-        const contentFileList = data.attachments.map(item => {
-          return {
-            id: item.id,
-            uid: item.id,
-            name: appendFileSizeToUploadFile(item),
-            url: item.url,
-            filesize: item.filesize,
-            status: 'done'
-          }
-        })
-        const answerFileList = data.ref_attachments.map(item => {
-          return {
-            id: item.id,
-            uid: item.id,
-            name: appendFileSizeToUploadFile(item),
-            url: item.url,
-            filesize: item.filesize,
-            status: 'done'
-          }
-        })
-
         this.setState({ 
-          ...data,
+          category: data.category,
-          // course_id: data.course_id,
+          course_id: data.course_id,
-          // course_name: data.course_name,
+          course_name: data.course_name,
-          // category: data.category,
-          title_num: parseInt(data.name.length),
-          workLoaded: true,
-          init_min_num: data.min_num,
-          init_max_num: data.max_num,
-          // description: data.description,
-          reference_answer: data.reference_answer,
-          contentFileList,
-          answerFileList,
-        }, () => {
-          setTimeout(() => {
-            this.contentMdRef.current.setValue(data.description || '')
-            this.answerMdRef.current.setValue(data.reference_answer || '')
-          
-          }, 2000)
-          
-          this.props.form.setFieldsValue({
-            title: data.name,
-            description: data.description || '',
-            reference_answer: data.reference_answer || '',
-          });
-          
         })
-
+        this.newWorkFormRef.initValue(data);
       }
     })
     .catch(function (error) {
@@ -122,72 +69,12 @@ class NewWork extends Component{
     });
   }
   
-  // 输入title
+  doEdit = (params) => {
-  changeTitle=(e)=>{
-    console.log(e.target.value.length);
-    this.setState({
-      title_num: parseInt(e.target.value.length)
-    })
-  }
-  handleSubmit = () => {
-    const courseId = this.state.course_id || this.props.match.params.coursesId ;
-    
-    this.props.form.validateFieldsAndScroll((err, values) => {
-      console.log(values)
-      const mdContnet = this.contentMdRef.current.getValue().trim();
-      console.log(mdContnet)
-      values.description = mdContnet;
-      // return;
-      
-      {/* max={has_commit ? init_min_num : null } */}
-      {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
-      // 已有提交作品，人数范围只能扩大
-      const { has_commit, max_num, init_max_num, min_num, init_min_num } = this.state;
-      if (has_commit) {
-        if (max_num < init_max_num || min_num > init_min_num) {
-          this.props.showNotification(`已有提交作品，人数范围只能扩大(原设置为：${init_min_num} - ${init_max_num})`)
-          return;
-        }
-      }
-
-      // const errKeys = Object.keys(err);  // || errKeys.length == 1 && errKeys[0] == 'content' && mdContnet
-      if (!err) {
-        if (this.isEdit) {
-          this.doEdit(courseId, values)
-        } else {
-          this.doNew(courseId, values)
-        }
-       
-      } else {
-        $("html").animate({ scrollTop: $('html').scrollTop() - 100 })
-      }
-    })
-  }
-  doEdit = (courseId, values) => {
     const workId = this.props.match.params.workId
     const newUrl = `/homework_commons/${workId}.json`
 
-    let attachment_ids = this.state.contentFileList.map(item => {
-      return item.response ? item.response.id : item.id
-    })
-    let reference_attachment_ids = this.state.answerFileList.map(item => {
-      return item.response ? item.response.id : item.id
-    })
-
-    const { min_num, max_num, base_on_project, category } = this.state
     const isGroup = this.props.isGroup()
-    axios.put(newUrl, {
+    axios.put(newUrl, params)
-      type: isGroup ? 3 : 1,
-      name: values.title,
-      description: values.description,
-      reference_answer: values.reference_answer, 
-      attachment_ids,
-      reference_attachment_ids,
-
-      min_num,
-      max_num,
-      base_on_project
-    })
     .then((response) => {
       if (response.data.status == 0) {
         this.props.showNotification('保存成功')
@@ -198,30 +85,11 @@ class NewWork extends Component{
       console.log(error);
     });
   }
-  doNew = (courseId, values) => {
+  doNew = (params) => {
+    const courseId = this.props.match.params.coursesId ;    
     const newUrl = `/courses/${courseId}/homework_commons.json`
 
-    let attachment_ids = this.state.contentFileList.map(item => {
+    axios.post(newUrl, params)
-      return item.response ? item.response.id : item.id
-    })
-    let reference_attachment_ids = this.state.answerFileList.map(item => {
-      return item.response ? item.response.id : item.id
-    })
-    const isGroup = this.props.isGroup()
-    const { min_num, max_num, base_on_project, category } = this.state
-    
-    axios.post(newUrl, {
-      type: isGroup ? 3 : 1,
-      name: values.title,
-      description: values.description,
-      reference_answer: values.reference_answer, 
-      attachment_ids,
-      reference_attachment_ids,
-
-      min_num,
-      max_num,
-      base_on_project
-    })
     .then((response) => {
       if (response.data.status == 0) {
         this.props.showNotification('保存成功')
@@ -233,143 +101,25 @@ class NewWork extends Component{
     });
   }
   
-  handleContentUploadChange = (info) => {
-    let contentFileList = info.fileList;
-    this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
-  }
-  handleAnswerUploadChange = (info) => {
-    let answerFileList = info.fileList;
-    this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
-  }
-  
-  onAttachmentRemove = (file, stateName) => {
-    this.props.confirm({
-      content: '是否确认删除?',
-      
-      onOk: () => {
-        this.deleteAttachment(file, stateName)
-      },
-      onCancel() {
-        console.log('Cancel');
-      },
-    });
-
-    
-    return false;
-  }
-  deleteAttachment = (file, stateName) => {
-    // 初次上传不能直接取uid
-    const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
-    axios.delete(url, {
-    })
-      .then((response) => {
-        if (response.data) {
-          const { status } = response.data;
-          if (status == 0) {
-            console.log('--- success')
-            
-            this.setState((state) => {
-              const index = state[stateName].indexOf(file);
-              const newFileList = state[stateName].slice();
-              newFileList.splice(index, 1);
-              return {
-                [stateName]: newFileList,
-              };
-            });
-          }
-        }
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-  }
-  max_num_change = (val) => {
-    if (val < 2) {
-      this.setState({ 
-        max_num: 2,
-      })
-      return;
-    }
-    const { min_num } = this.state;
-    this.setState({ 
-      max_num: val,
-      min_num: val <= min_num ? val - 1 : min_num
-    })
-  }
-  min_num_change = (val) => {
-    this.setState({ min_num: val })
-  }
-  base_on_project_change = () => {
-    this.setState({ base_on_project: !this.state.base_on_project })
-  }
 
   render(){
     let {typeId,coursesId,pageType}=this.props.match.params;
-    const { getFieldDecorator } = this.props.form;
+    
     const isGroup = this.props.isGroup()
     const moduleName = !isGroup? "普通作业":"分组作业";
     const moduleEngName = this.props.getModuleName()
     let{
-      title_value, contentFileList, answerFileList, max_num, min_num, base_on_project,
+      category
-      init_max_num, init_min_num,
-      title_num, course_name, category, has_commit, has_project
     }=this.state
     const { current_user } = this.props
 
-    const courseId = this.state.course_id || this.props.match.params.coursesId ;    
+    const courseId = this.props.match.params.coursesId ;    
     const isEdit = this.isEdit;
-    if ((isEdit == undefined ||  isEdit) && !this.state.workLoaded) {
-      return ''
-    } 
-    const uploadProps = {
-      width: 600,
-      fileList: contentFileList,
-      multiple: true,
-      // https://github.com/ant-design/ant-design/issues/15505
-      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
-      // showUploadList: false,
-      action: `${getUrl()}/api/attachments.json`,
-      onChange: this.handleContentUploadChange,
-      onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
-      beforeUpload: (file) => {
-        console.log('beforeUpload', file.name);
-        const isLt150M = file.size / 1024 / 1024 < 150;
-        if (!isLt150M) {
-          message.error('文件大小必须小于150MB!');
-        }
-        return isLt150M;
-      },
-    };
-    const answerUploadProps = {
-      width: 600,
-      fileList: answerFileList,
-      multiple: true,
-      // https://github.com/ant-design/ant-design/issues/15505
-      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
-      // showUploadList: false,
-      action: `${getUrl()}/api/attachments.json`,
-      onChange: this.handleAnswerUploadChange,
-      onRemove: (file) => this.onAttachmentRemove(file, 'answerFileList'),
-      beforeUpload: (file) => {
-        console.log('beforeUpload', file.name);
-        const isLt150M = file.size / 1024 / 1024 < 150;
-        if (!isLt150M) {
-          message.error('文件大小必须小于150MB!');
-        }
-        return isLt150M;
-      },
-    };
     
     return(
       <div className="newMain">
         <div className="educontent mt20 mb50">
-          {/* <p className="clearfix">
+
-            <WordsBtn style="grey" className="fl">{course_name}</WordsBtn>
-            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
-            <WordsBtn style="grey" className="fl">{typeId==1 ?"普通作业":"分组作业"}</WordsBtn>
-            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
-            <span>{pageType==="new"?"新建":"编辑"}</span>
-          </p> */}
           <CBreadcrumb items={[
             { to: current_user && current_user.first_category_url, name: this.state.course_name},
             { to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
@@ -388,161 +138,16 @@ class NewWork extends Component{
             </a>
           </p>
           <div>
-            {/* onSubmit={this.handleSubmit} */}
+            <NewWorkForm wrappedComponentRef={(ref) => {this.newWorkFormRef = ref}}
-            <style>
+              {...this.props}
-              {
+              onSave={this.onSave}
-                `
+              doNew={this.doNew}
-                .yslnewworkinputaddonAfter .ant-input{
+              doEdit={this.doEdit}
-																		border-right: none !important;
+            ></NewWorkForm>
-																		height: 40px !important;
-																		}
-                
-                `
-              }
-            </style>
-            <Form className="courseForm">
-              <Form.Item
-                label="标题"
-                className="AboutInputForm"
-              > 
-              {getFieldDecorator('title', {
-                  rules: [{
-                    required: true, message: '请输入标题'
-                  }],
-                })(
-                  <Input placeholder="请输入作业标题，最大限制60个字符" onInput={this.changeTitle} className="searchView yslnewworkinputaddonAfter searchViewAfter" style={{"width":"100%"}} maxLength={MAX_TITLE_LENGTH} addonAfter={`${String(title_num)}/${MAX_TITLE_LENGTH}`}/>
-                )}
-              </Form.Item>
-              <style>{`
-                .uploadBtn.ant-btn {
-                  border: none;
-                  color: #4CACFF;
-                  box-shadow: none;
-                  background: transparent;
-                  padding: 0 6px;
-                }
-                .ant-upload-list-item:hover .ant-upload-list-item-info{
-                  background-color:#fff;
-                }
-                .upload_1 .ant-upload-list {
-                  width: 350px;
-                }
-                
-                .ant-input-number {
-                  height: 40px;
-                  line-height: 40px;
-                }
-
-                .workContent.AboutInputForm.ant-form-item {
-                  border-bottom: none;
-                  padding-bottom: 0px !important;
-                }
-                .newWorkUpload {
-                  padding: 0px 30px 30px 30px!important;
-                  background: #fff;
-                  width: 100%;
-                  display: inline-block;
-                  border-bottom: 1px solid #EDEDED;
-                }
-                
-              `}</style>
-
-
-              {  <Form.Item
-                label="内容"
-                className="AboutInputForm workContent mdInForm"
-              > 
-                {getFieldDecorator('description', {
-                  rules: [{
-                    required: true, message: '请输入作业内容和要求'
-                  }],
-                })(
-                  <TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入作业内容和要求,最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500} 
-                    className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
-                )}
-              </Form.Item> }
-              <Upload {...uploadProps} className="upload_1 newWorkUpload">
-                <Button className="uploadBtn">
-                  <Icon type="upload" /> 上传附件
-                </Button>
-                (单个文件150M以内)
-              </Upload>
-              
-
-              { isGroup && 
-                <Form.Item
-                  label="分组设置"
-                  className="AboutInputForm"
-                > 
-                {getFieldDecorator('personNum', {
-                    rules: [{
-                      required: false
-                      // required: true, message: '请输入最小人数和最大人数'
-                    }],
-                  })(
-                    <div>
-                      <p className="clearfix">
-                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
-                        {/* max={has_commit ? init_min_num : null } */}
-                          <InputNumber placeholder="请填写每组最小人数" min={1} className="winput-240-40" value={min_num} 
-                              
-                              onChange={this.min_num_change} style={{width:'180px'}} />
-                        </ConditionToolTip>
-                        
-                        <span className="ml15 mr15">~</span>
-                        {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
-                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
-                          <InputNumber className="winput-240-40" placeholder="请填写每组最大人数" value={max_num} max={10}
-                              onChange={this.max_num_change} style={{width:'180px'}} />
-                        </ConditionToolTip>
-                        <label className="color-grey-9 ml20 font-14">（项目管理员角色的成员都可以提交作品，提交作品时需要关联同组成员，组内成员作品共享）</label>
-                      </p>
-                      <p className="mt20">
-                        <ConditionToolTip condition={has_commit || has_project} title={'已有关联项目或作品，不能修改'}>
-                          <Checkbox checked={base_on_project} onChange={this.base_on_project_change}
-                              disabled={has_project || has_commit}
-                          >基于项目实施</Checkbox>
-                        </ConditionToolTip>
-                        
-                        <label className="color-grey-9 ml12 font-14">（勾选后各小组必须在educoder平台创建项目，教师可随时观察平台对各小组最新进展的实时统计）</label>
-                      </p>
-                    </div>
-                  )}
-                </Form.Item>
-              }
-              <Form.Item
-                label="参考答案"
-                className="AboutInputForm"
-                style={{"borderBottom":"none"}}
-              > 
-                {getFieldDecorator('reference_answer', {
-                  rules: [{
-                    required: false
-                  }],
-                })(
-                  <TPMMDEditor ref={this.answerMdRef} placeholder="请在此输入作业的参考答案,最大限制5000个字符" mdID={'workAnswerMD'} 
-                      className="courseMessageMD" refreshTimeout={1500} initValue={this.state.reference_answer || ''}></TPMMDEditor>
-                )}
-                <Upload {...answerUploadProps} className="upload_1">
-                  <Button className="uploadBtn">
-                    <Icon type="upload" /> 上传附件
-                  </Button>
-                  (单个文件150M以内)
-                </Upload>
-              </Form.Item>
-              <Form.Item>
-                <div className="clearfix mt30 mb30">
-                {/*  htmlType="submit"   */}
-                  <Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
-                  <a className="defalutCancelbtn fl" onClick={() => this.props.toListPage(this.props.match.params, category.category_id)}>取消</ a>
-                </div>
-              </Form.Item>
-            </Form>
           </div>
         </div>
       </div>
     )
   }
 }
-const WrappedBoardsNew = Form.create({ name: 'NewWork' })(NewWork);
+export default NewWork;
-export default WrappedBoardsNew;

public/react/src/modules/courses/busyWork/NewWorkForm.js

@@ -0,0 +1,466 @@
+import React,{ Component } from "react";
+import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd";
+import axios from 'axios'
+import '../css/busyWork.css'
+import '../css/Courses.css'
+import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder'
+import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
+import CBreadcrumb from '../common/CBreadcrumb'
+
+const confirm = Modal.confirm;
+const $ = window.$
+const MAX_TITLE_LENGTH = 60;
+class NewWorkForm extends Component{
+  constructor(props){
+    super(props);
+    this.contentMdRef = React.createRef();
+    this.answerMdRef = React.createRef();
+    
+    this.state={
+      title_value:"",
+      title_num: 0,
+      contentFileList: [],
+      answerFileList: [],
+      workLoaded: false,
+      base_on_project: true,
+      category: {},
+      min_num: 2,
+      max_num: 10,
+    }
+  }
+  initValue = (data) => {
+      if (data.isEdit) {
+        const contentFileList = data.attachments.map(item => {
+          return {
+            id: item.id,
+            uid: item.id,
+            name: appendFileSizeToUploadFile(item),
+            url: item.url,
+            filesize: item.filesize,
+            status: 'done'
+          }
+        })
+        const answerFileList = data.ref_attachments.map(item => {
+          return {
+            id: item.id,
+            uid: item.id,
+            name: appendFileSizeToUploadFile(item),
+            url: item.url,
+            filesize: item.filesize,
+            status: 'done'
+          }
+        })
+
+        this.setState({
+          ...data,
+          // course_id: data.course_id,
+          // course_name: data.course_name,
+          // category: data.category,
+          title_num: parseInt(data.name.length),
+          workLoaded: true,
+          init_min_num: data.min_num,
+          init_max_num: data.max_num,
+          // description: data.description,
+          reference_answer: data.reference_answer,
+          contentFileList,
+          answerFileList,
+        }, () => {
+          setTimeout(() => {
+            this.contentMdRef.current.setValue(data.description || '')
+            this.answerMdRef.current.setValue(data.reference_answer || '')
+          
+          }, 2000)
+          
+          this.props.form.setFieldsValue({
+            title: data.name,
+            description: data.description || '',
+            reference_answer: data.reference_answer || '',
+          });
+          
+        })
+      } else { // new
+
+      }
+  }
+  
+
+  // 输入title
+  changeTitle=(e)=>{
+    console.log(e.target.value.length);
+    this.setState({
+      title_num: parseInt(e.target.value.length)
+    })
+  }
+  handleSubmit = () => {
+    const courseId = this.state.course_id || this.props.match.params.coursesId ;
+    
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      console.log(values)
+      const mdContnet = this.contentMdRef.current.getValue().trim();
+      console.log(mdContnet)
+      values.description = mdContnet;
+      // return;
+      
+      {/* max={has_commit ? init_min_num : null } */}
+      {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
+      // 已有提交作品，人数范围只能扩大
+      const { has_commit, max_num, init_max_num, min_num, init_min_num } = this.state;
+      if (has_commit) {
+        if (max_num < init_max_num || min_num > init_min_num) {
+          this.props.showNotification(`已有提交作品，人数范围只能扩大(原设置为：${init_min_num} - ${init_max_num})`)
+          return;
+        }
+      }
+
+      // const errKeys = Object.keys(err);  // || errKeys.length == 1 && errKeys[0] == 'content' && mdContnet
+      if (!err) {
+        if (this.isEdit) {
+          this.doEdit(courseId, values)
+        } else {
+          this.doNew(courseId, values)
+        }
+       
+      } else {
+        $("html").animate({ scrollTop: $('html').scrollTop() - 100 })
+      }
+    })
+  }
+  doEdit = (courseId, values) => {
+    let attachment_ids = this.state.contentFileList.map(item => {
+      return item.response ? item.response.id : item.id
+    })
+    let reference_attachment_ids = this.state.answerFileList.map(item => {
+      return item.response ? item.response.id : item.id
+    })
+
+    const { min_num, max_num, base_on_project, category } = this.state
+    const isGroup = this.props.isGroup()
+
+    const params = {
+      type: isGroup ? 3 : 1,
+      name: values.title,
+      description: values.description,
+      reference_answer: values.reference_answer, 
+      attachment_ids,
+      reference_attachment_ids,
+
+      min_num,
+      max_num,
+      base_on_project
+    }
+    this.props.doEdit && this.props.doEdit(params)
+  }
+  doNew = (courseId, values) => {
+    let attachment_ids = this.state.contentFileList.map(item => {
+      return item.response ? item.response.id : item.id
+    })
+    let reference_attachment_ids = this.state.answerFileList.map(item => {
+      return item.response ? item.response.id : item.id
+    })
+    const isGroup = this.props.isGroup()
+    const { min_num, max_num, base_on_project, category } = this.state
+    
+    const params = {
+      type: isGroup ? 3 : 1,
+      name: values.title,
+      description: values.description,
+      reference_answer: values.reference_answer, 
+      attachment_ids,
+      reference_attachment_ids,
+
+      min_num,
+      max_num,
+      base_on_project
+    }
+    this.props.doNew && this.props.doNew(params)
+    
+  }
+
+  handleContentUploadChange = (info) => {
+    let contentFileList = info.fileList;
+    this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
+  }
+  handleAnswerUploadChange = (info) => {
+    let answerFileList = info.fileList;
+    this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
+  }
+  
+  onAttachmentRemove = (file, stateName) => {
+    this.props.confirm({
+      content: '是否确认删除?',
+      
+      onOk: () => {
+        this.deleteAttachment(file, stateName)
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+
+    
+    return false;
+  }
+  deleteAttachment = (file, stateName) => {
+    // 初次上传不能直接取uid
+    const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
+    axios.delete(url, {
+    })
+      .then((response) => {
+        if (response.data) {
+          const { status } = response.data;
+          if (status == 0) {
+            console.log('--- success')
+            
+            this.setState((state) => {
+              const index = state[stateName].indexOf(file);
+              const newFileList = state[stateName].slice();
+              newFileList.splice(index, 1);
+              return {
+                [stateName]: newFileList,
+              };
+            });
+          }
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  }
+  max_num_change = (val) => {
+    if (val < 2) {
+      this.setState({ 
+        max_num: 2,
+      })
+      return;
+    }
+    const { min_num } = this.state;
+    this.setState({ 
+      max_num: val,
+      min_num: val <= min_num ? val - 1 : min_num
+    })
+  }
+  min_num_change = (val) => {
+    this.setState({ min_num: val })
+  }
+  base_on_project_change = () => {
+    this.setState({ base_on_project: !this.state.base_on_project })
+  }
+
+  render(){
+    let {typeId,coursesId,pageType}=this.props.match.params;
+    const { getFieldDecorator } = this.props.form;
+    const isGroup = this.props.isGroup()
+    const moduleName = !isGroup? "普通作业":"分组作业";
+    const moduleEngName = this.props.getModuleName()
+    let{
+      title_value, contentFileList, answerFileList, max_num, min_num, base_on_project,
+      init_max_num, init_min_num, 
+      title_num, course_name, category, has_commit, has_project,
+
+      isEdit
+    }=this.state
+    const { current_user } = this.props
+
+    const courseId = this.state.course_id || this.props.match.params.coursesId ;    
+    
+    if ((isEdit) && !this.state.workLoaded) {
+      return ''
+    } 
+    const uploadProps = {
+      width: 600,
+      fileList: contentFileList,
+      multiple: true,
+      // https://github.com/ant-design/ant-design/issues/15505
+      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
+      // showUploadList: false,
+      action: `${getUrl()}/api/attachments.json`,
+      onChange: this.handleContentUploadChange,
+      onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
+      beforeUpload: (file) => {
+        console.log('beforeUpload', file.name);
+        const isLt150M = file.size / 1024 / 1024 < 150;
+        if (!isLt150M) {
+          message.error('文件大小必须小于150MB!');
+        }
+        return isLt150M;
+      },
+    };
+    const answerUploadProps = {
+      width: 600,
+      fileList: answerFileList,
+      multiple: true,
+      // https://github.com/ant-design/ant-design/issues/15505
+      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
+      // showUploadList: false,
+      action: `${getUrl()}/api/attachments.json`,
+      onChange: this.handleAnswerUploadChange,
+      onRemove: (file) => this.onAttachmentRemove(file, 'answerFileList'),
+      beforeUpload: (file) => {
+        console.log('beforeUpload', file.name);
+        const isLt150M = file.size / 1024 / 1024 < 150;
+        if (!isLt150M) {
+          message.error('文件大小必须小于150MB!');
+        }
+        return isLt150M;
+      },
+    };
+
+    return(
+      <React.Fragment>
+          
+            <style>
+              {
+                `
+                .yslnewworkinputaddonAfter .ant-input{
+																		border-right: none !important;
+																		height: 40px !important;
+																		}
+                
+                `
+              }
+            </style>
+            <Form className="courseForm">
+              <Form.Item
+                label="标题"
+                className="AboutInputForm"
+              > 
+              {getFieldDecorator('title', {
+                  rules: [{
+                    required: true, message: '请输入标题'
+                  }],
+                })(
+                  <Input placeholder="请输入作业标题，最大限制60个字符" onInput={this.changeTitle} className="searchView yslnewworkinputaddonAfter searchViewAfter" style={{"width":"100%"}} maxLength={MAX_TITLE_LENGTH} addonAfter={`${String(title_num)}/${MAX_TITLE_LENGTH}`}/>
+                )}
+              </Form.Item>
+              <style>{`
+                .uploadBtn.ant-btn {
+                  border: none;
+                  color: #4CACFF;
+                  box-shadow: none;
+                  background: transparent;
+                  padding: 0 6px;
+                }
+                .ant-upload-list-item:hover .ant-upload-list-item-info{
+                  background-color:#fff;
+                }
+                .upload_1 .ant-upload-list {
+                  width: 350px;
+                }
+                
+                .ant-input-number {
+                  height: 40px;
+                  line-height: 40px;
+                }
+
+                .workContent.AboutInputForm.ant-form-item {
+                  border-bottom: none;
+                  padding-bottom: 0px !important;
+                }
+                .newWorkUpload {
+                  padding: 0px 30px 30px 30px!important;
+                  background: #fff;
+                  width: 100%;
+                  display: inline-block;
+                  border-bottom: 1px solid #EDEDED;
+                }
+                
+              `}</style>
+
+
+              {  <Form.Item
+                label="内容"
+                className="AboutInputForm workContent mdInForm"
+              > 
+                {getFieldDecorator('description', {
+                  rules: [{
+                    required: true, message: '请输入作业内容和要求'
+                  }],
+                })(
+                  <TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入作业内容和要求,最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500} 
+                    className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
+                )}
+              </Form.Item> }
+              <Upload {...uploadProps} className="upload_1 newWorkUpload">
+                <Button className="uploadBtn">
+                  <Icon type="upload" /> 上传附件
+                </Button>
+                (单个文件150M以内)
+              </Upload>
+              
+
+              { isGroup && 
+                <Form.Item
+                  label="分组设置"
+                  className="AboutInputForm"
+                > 
+                {getFieldDecorator('personNum', {
+                    rules: [{
+                      required: false
+                      // required: true, message: '请输入最小人数和最大人数'
+                    }],
+                  })(
+                    <div>
+                      <p className="clearfix">
+                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
+                        {/* max={has_commit ? init_min_num : null } */}
+                          <InputNumber placeholder="请填写每组最小人数" min={1} className="winput-240-40" value={min_num} 
+                              
+                              onChange={this.min_num_change} style={{width:'180px'}} />
+                        </ConditionToolTip>
+                        
+                        <span className="ml15 mr15">~</span>
+                        {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
+                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
+                          <InputNumber className="winput-240-40" placeholder="请填写每组最大人数" value={max_num} max={10}
+                              onChange={this.max_num_change} style={{width:'180px'}} />
+                        </ConditionToolTip>
+                        <label className="color-grey-9 ml20 font-14">（项目管理员角色的成员都可以提交作品，提交作品时需要关联同组成员，组内成员作品共享）</label>
+                      </p>
+                      <p className="mt20">
+                        <ConditionToolTip condition={has_commit || has_project} title={'已有关联项目或作品，不能修改'}>
+                          <Checkbox checked={base_on_project} onChange={this.base_on_project_change}
+                              disabled={has_project || has_commit}
+                          >基于项目实施</Checkbox>
+                        </ConditionToolTip>
+                        
+                        <label className="color-grey-9 ml12 font-14">（勾选后各小组必须在educoder平台创建项目，教师可随时观察平台对各小组最新进展的实时统计）</label>
+                      </p>
+                    </div>
+                  )}
+                </Form.Item>
+              }
+              <Form.Item
+                label="参考答案"
+                className="AboutInputForm"
+                style={{"borderBottom":"none"}}
+              > 
+                {getFieldDecorator('reference_answer', {
+                  rules: [{
+                    required: false
+                  }],
+                })(
+                  <TPMMDEditor ref={this.answerMdRef} placeholder="请在此输入作业的参考答案,最大限制5000个字符" mdID={'workAnswerMD'} 
+                      className="courseMessageMD" refreshTimeout={1500} initValue={this.state.reference_answer || ''}></TPMMDEditor>
+                )}
+                <Upload {...answerUploadProps} className="upload_1">
+                  <Button className="uploadBtn">
+                    <Icon type="upload" /> 上传附件
+                  </Button>
+                  (单个文件150M以内)
+                </Upload>
+              </Form.Item>
+              <Form.Item>
+                <div className="clearfix mt30 mb30">
+                {/*  htmlType="submit"   */}
+                  <Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
+                  <a className="defalutCancelbtn fl" onClick={() => this.props.toListPage(this.props.match.params, category.category_id)}>取消</ a>
+                </div>
+              </Form.Item>
+            </Form>
+            
+      </React.Fragment>
+    )
+  }
+}
+const WrappedWorkForm = Form.create({ name: 'NewWorkForm' })(NewWorkForm);
+export default WrappedWorkForm;