合并

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

@@ -4,250 +4,125 @@ import axios from 'axios'
 import '../css/busyWork.css'
 import '../css/Courses.css'
 import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll
-    , getUploadActionUrl } from 'educoder'
+	, getUploadActionUrl } 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{
-  constructor(props){
+	constructor(props){
-    super(props);
+		super(props);
-    this.contentMdRef = React.createRef();
+		this.contentMdRef = React.createRef();
-    this.answerMdRef = React.createRef();
+		this.answerMdRef = React.createRef();
-    
+
-    this.state={
+		this.state={
-      title_value:"",
+			category: {},
-      title_num: 0,
+			course_name: ''
-      contentFileList: [],
+		}
-      answerFileList: [],
+	}
-      workLoaded: false,
+	componentDidMount () {
-      base_on_project: true,
+		let {typeId, coursesId, pageType, workId}=this.props.match.params;
-      category: {},
+		const isEdit = pageType === "edit"
-      min_num: 2,
+		this.isEdit = isEdit;
-      max_num: 10,
+		if (isEdit) {
-    }
+			this.fetchWork(workId)
-  }
+		} else {
-  componentDidMount () {
+			this.fetchCourseData(coursesId)
-    let {typeId, coursesId, pageType, workId}=this.props.match.params;           
+		}
-    const isEdit = pageType === "edit"
+	}
-    this.isEdit = isEdit;
+	fetchCourseData = (courseId) => {
-    if (isEdit) {
+		const isGroup = this.props.isGroup()
-      this.fetchWork(workId)
+		const url = `/courses/${courseId}/homework_commons/new.json?type=${isGroup ? 3 : 1}`
-    } else {
+		axios.get(url, {
-      this.fetchCourseData(coursesId)
+			})
-    }
+			.then((response) => {
-  }
+				if (response.data.course_name) {
-  fetchCourseData = (courseId) => {
+					const data = response.data;
-    const isGroup = this.props.isGroup()
+					this.setState({
-    const url = `/courses/${courseId}/homework_commons/new.json?type=${isGroup ? 3 : 1}`
+						course_id: data.course_id,
-    axios.get(url, {
+						course_name: data.course_name,
-    })
+						category: data.category,
-    .then((response) => {
+
-      if (response.data.course_name) {
+					})
-        const data = response.data;
+				}
-        this.setState({
+			})
-          course_id: data.course_id,
+			.catch(function (error) {
-          course_name: data.course_name,
+				console.log(error);
-          category: data.category,
+			});
-
+	}
-        })
+	fetchWork = (workId) => {
-      }
+		const url = `/homework_commons/${workId}/edit.json`
-    })
+		axios.get(url, {
-    .catch(function (error) {
+			})
-      console.log(error);
+			.then((response) => {
-    });
+				if (response.data.name) {
-  }
+					const data = response.data;
-  fetchWork = (workId) => {
+					data.isEdit = this.isEdit
-    const url = `/homework_commons/${workId}/edit.json`
+					this.setState({
-    axios.get(url, {
+						course_id: data.course_id,
-    })
+						course_name: data.course_name,
-    .then((response) => {
+						category: data.category,
-      if (response.data.name) {
+					})
-        const data = response.data;
+					this.newWorkFormRef.initValue(response.data)
-        
+				}
-        const contentFileList = data.attachments.map(item => {
+			})
-          return {
+			.catch(function (error) {
-            id: item.id,
+				console.log(error);
-            uid: item.id,
+			});
-            name: appendFileSizeToUploadFile(item),
+	}
-            url: item.url,
+
-            filesize: item.filesize,
+	onCancel = () => {
-            status: 'done'
+		this.props.toListPage(this.props.match.params, this.state.category.category_id)
-          }
+	}
-        })
+
-        const answerFileList = data.ref_attachments.map(item => {
+	doEdit = (params) => {
-          return {
+		const workId = this.props.match.params.workId
-            id: item.id,
+		const newUrl = `/homework_commons/${workId}.json`
-            uid: item.id,
+
-            name: appendFileSizeToUploadFile(item),
+		axios.put(newUrl, params)
-            url: item.url,
+			.then((response) => {
-            filesize: item.filesize,
+				if (response.data.status == 0) {
-            status: 'done'
+					this.props.showNotification('保存成功')
-          }
+					this.props.toWorkListPage(this.props.match.params, workId)
-        })
+				}
-
+			})
-        this.setState({
+			.catch(function (error) {
-          ...data,
+				console.log(error);
-          // course_id: data.course_id,
+			});
-          // course_name: data.course_name,
+	}
-          // category: data.category,
+	doNew = (params) => {
-          title_num: parseInt(data.name.length),
+		const coursesId = this.props.match.params.coursesId
-          workLoaded: true,
+		const newUrl = `/courses/${coursesId}/homework_commons.json`
-          init_min_num: data.min_num,
+
-          init_max_num: data.max_num,
+		axios.post(newUrl, params)
-          // description: data.description,
+			.then((response) => {
-          reference_answer: data.reference_answer,
+				if (response.data.status == 0) {
-          contentFileList,
+					this.props.showNotification('保存成功')
-          answerFileList,
+					this.props.toWorkListPage(this.props.match.params, response.data.homework_id)
-        }, () => {
+				}
-          setTimeout(() => {
+			})
-            this.contentMdRef.current.setValue(data.description || '')
+			.catch(function (error) {
-            this.answerMdRef.current.setValue(data.reference_answer || '')
+				console.log(error);
-          
+			});
-          }, 2000)
+	}
-          
-          this.props.form.setFieldsValue({
-            title: data.name,
-            description: data.description || '',
-            reference_answer: data.reference_answer || '',
-          });
-          
-        })
-
-      }
-    })
-    .catch(function (error) {
-      console.log(error);
-    });
-  }
-
-  // 输入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) => {
-    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, {
-      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('保存成功')
-        this.props.toWorkListPage(this.props.match.params, workId)
-      }
-    })
-    .catch(function (error) {
-      console.log(error);
-    });
-  }
-  doNew = (courseId, values) => {
-    const newUrl = `/courses/${courseId}/homework_commons.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 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,
+	handleContentUploadChange = (info) => {
-      max_num,
+		if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
-      base_on_project
+			let contentFileList = info.fileList;
-    })
+			this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
-    .then((response) => {
+		}
-      if (response.data.status == 0) {
+	}
-        this.props.showNotification('保存成功')
+	handleAnswerUploadChange = (info) => {
-        this.props.toWorkListPage(this.props.match.params, response.data.homework_id)
+		if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
-      }
+			let answerFileList = info.fileList;
-    })
+			this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
-    .catch(function (error) {
+		}
-      console.log(error);
+	}
-    });
-  }
 
-  handleContentUploadChange = (info) => {
+	onAttachmentRemove = (file, stateName) => {
-    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
-      let contentFileList = info.fileList;
-      this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
-    }
-  }
-  handleAnswerUploadChange = (info) => {
-    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
-      let answerFileList = info.fileList;
-      this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
-    }
-  }
-  
-  onAttachmentRemove = (file, stateName) => {
 		if(!file.percent || file.percent == 100){
 			this.props.confirm({
 				content: '是否确认删除?',
@@ -264,293 +139,69 @@ class NewWork extends Component{
 			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(){
+	render(){
-    let {typeId,coursesId,pageType}=this.props.match.params;
+		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
-    }=this.state
-    const { current_user } = this.props
 
-    const courseId = this.state.course_id || this.props.match.params.coursesId ;    
+		const isGroup = this.props.isGroup()
-    const isEdit = this.isEdit;
+		const moduleName = !isGroup? "普通作业":"分组作业";
-    if ((isEdit == undefined ||  isEdit) && !this.state.workLoaded) {
+		const moduleEngName = this.props.getModuleName()
-      return ''
+		let{
-    } 
+			course_name, category
-    const uploadProps = {
+		}=this.state
-      width: 600,
+		const { current_user } = this.props
-      fileList: contentFileList,
-      multiple: true,
-      // https://github.com/ant-design/ant-design/issues/15505
-      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
-      // showUploadList: false,
-      action: `${getUploadActionUrl()}`,
-      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) {
-          this.props.showNotification('文件大小必须小于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) {
-          this.props.showNotification('文件大小必须小于150MB!');
-        }
-        return isLt150M;
-      },
-    };
 
-    return(
+		const courseId = this.state.course_id || coursesId ;
-      <div className="newMain">
+		const isEdit = this.isEdit;
-        <div className="educontent mt20 mb50">
+
-          {/* <p className="clearfix">
+		const common = {
-            <WordsBtn style="grey" className="fl">{course_name}</WordsBtn>
+			onCancel:this.onCancel,
-            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
+			isGroup: this.props.isGroup,
-            <WordsBtn style="grey" className="fl">{typeId==1 ?"普通作业":"分组作业"}</WordsBtn>
+			doNew: this.doNew,
-            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
+			doEdit: this.doEdit,
-            <span>{pageType==="new"?"新建":"编辑"}</span>
+		}
-          </p> */}
+
-          <CBreadcrumb items={[
+		return(
-            { to: current_user && current_user.first_category_url, name: this.state.course_name},
+			<div className="newMain">
-            { to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
+				<div className="educontent mt20 mb50">
-              , name: category && category.category_name },
+					<CBreadcrumb items={[
-            { name: `${ this.isEdit ? '编辑' : '新建'}` }
+						{ to: current_user && current_user.first_category_url, name: this.state.course_name},
-          ]}></CBreadcrumb>
+						{ to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
-          
+							, name: category && category.category_name },
-          <p className="clearfix mt20 mb20">
+						{ name: `${ this.isEdit ? '编辑' : '新建'}` }
-            <span className="fl font-24 color-grey-3">{this.isEdit ?"编辑":"新建"}{ moduleName }</span>
+					]}></CBreadcrumb>
-            {/* history.goBack() 
+
-                this.props.toListPage(this.props.match.params, category.category_id)}
+					<p className="clearfix mt20 mb20">
-            */}
+						<span className="fl font-24 color-grey-3">{this.isEdit ?"编辑":"新建"}{ moduleName }</span>
-            <a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2" 
+						<a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2"
-                onClick={() => this.props.history.goBack()}>
+							 onClick={() => this.props.history.goBack()}>
-              返回
+							返回
-            </a>
+						</a>
-          </p>
+					</p>
-          <div>
+					<div>
-            {/* onSubmit={this.handleSubmit} */}
+						<style>
-            <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>
 
-              {/* TpmQuestionEdit  这个没出现抖动 */}
+                `
-              {  <Form.Item
+							}
-                label="内容"
+						</style>
-                className="AboutInputForm workContent mdInForm"
+						<NewWorkForm
-              > 
+							{...this.props}
-                {getFieldDecorator('description', {
+							{...this.state}
-                  rules: [{
+							{...common}
-                    required: true, message: '请输入作业内容和要求'
+							wrappedComponentRef={(ref) => {this.newWorkFormRef = ref}}
-                  }],
+						></NewWorkForm>
-                })(
+					</div>
-                  <TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入作业内容和要求,最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500} 
+				</div>
-                    className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
+			</div>
-                )}
+		)
-              </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 WrappedBoardsNew;
+export default NewWork;