题库毕设任务完成

public/react/config/webpack.config.dev.js

@@ -32,7 +32,7 @@ module.exports = {
   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.s
 	// devtool: "cheap-module-eval-source-map",
   // 开启调试
-  //  devtool: "source-map",  // 开启调试
+  devtool: "eval",  // 开启调试
   // These are the "entry points" to our application.
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.

public/react/src/modules/user/usersInfo/banks/BanksIndex.js

@@ -60,7 +60,7 @@ const PollNewQuestbank =Loadable({
 });
 
 const GtaskBanksEdit = Loadable({
-	loader: () => import('./GtaskBanksEditEdit'),
+	loader: () => import('./GtaskBanksEdit'),
 	loading: Loading,
 })
 
@@ -108,8 +108,15 @@ class BanksIndex extends Component{
           </p> }
 
           <Switch {...this.props}>
+						{/*毕设任务编辑*/}
+						<Route path='/banks/gtask/:workId/edit'
+									 render={
+										 (props) => {
+											 return (<GtaskBanksEdit {...this.props} {...props} {...this.state} {...common}/>)
+										 }
+									 }></Route>
 
-            <Route path='/banks/normal/:workId/edit'
+						<Route path='/banks/normal/:workId/edit'
               render={
                 (props) => {
                   return (<HomeworkBanksEdit {...this.props} {...props} {...this.state} {...common}
@@ -134,14 +141,7 @@ class BanksIndex extends Component{
                 }
             }></Route>
 
-						{/*毕设任务编辑*/}
-						<Route path='/banks/gtask/:workId/edit'
-									 render={
-										 (props) => {
-											 return (<GtaskBanksEdit {...this.props} {...props} {...this.state} {...common}/>)
-										 }
-									 }></Route>
-						
+
 						{/*题库问卷编辑详情*/}
 						<Route path="/banks/poll/:workid/edit"
 									 render={

public/react/src/modules/user/usersInfo/banks/GtaskBanksEdit.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import axios from 'axios'
-import NewWorkForm from '../../../courses/busyWork/NewWorkForm';
+import NewGtaskForm from './NewGtaskForm';
+import NewWorkForm from "./HomeworkBanksEdit";
 
-class GtaskBanksEditEdit extends Component {
+class GtaskBanksEdit extends Component {
 	constructor(props){
 		super(props);
 		this.state = {
@@ -24,14 +25,13 @@ class GtaskBanksEditEdit extends Component {
 					title:'编辑',
 					is_public:result && result.data && result.data.is_public,
 					crumbArray:[
-						{to:`/banks/task/${workId}/edit`,content:'详情'},
+						{to:`/banks/gtask/${workId}/edit`,content:'详情'},
 						{content:'编辑'}
 					]
 				}
 				this.props.initPublic(crumbData);
 				result.data.isEdit = true;
-				result.data.ref_attachments = result.data.reference_attachments
-				this.setState({ isGroup: result.data.min_num || result.data.max_num })
+				this.setState({ data:result.data})
 				this.newWorkFormRef.initValue(result.data);
 			}
 		}).catch((error)=>{
@@ -69,7 +69,7 @@ class GtaskBanksEditEdit extends Component {
 		return this.state.isGroup;
 	}
 	render(){
-		let { bankId } = this.props.match.params
+
 		const common = {
 			onCancel:this.onCancel,
 			isGroup: this.isGroup,
@@ -85,15 +85,15 @@ class GtaskBanksEditEdit extends Component {
             }
           `}
 				</style>
-				<NewWorkForm
+				<NewGtaskForm
 					{...this.props}
 					{...this.state}
 					{...common}
 					wrappedComponentRef={(ref) => this.newWorkFormRef = ref}
-					topicId={bankId}
-				></NewWorkForm>
+					topicId={this.props.match.params.workId}
+				></NewGtaskForm>
 			</div>
 		)
 	}
 }
-export default GtaskBanksEditEdit;
+export default GtaskBanksEdit;

public/react/src/modules/user/usersInfo/banks/NewGtaskForm.js

@@ -0,0 +1,358 @@
+import React,{ Component } from "react";
+import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd";
+import axios from 'axios'
+import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder'
+import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
+
+
+const MAX_TITLE_LENGTH = 60;
+class NewGtaskForms extends Component{
+	constructor(props){
+		super(props);
+		this.contentMdRef = React.createRef();
+		this.state={
+			title_num:0,
+			description:"",
+			contentFileList: [],
+		}
+	}
+
+
+	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'
+				}
+			})
+			this.setState({
+				...data,
+				base_on_project: data.group_info.base_on_project,
+				title_num: parseInt(data.name.length),
+				min_num: data.group_info.min_number,
+				max_num: data.group_info.max_number,
+				contentFileList,
+			}, () => {
+				setTimeout(() => {
+					this.contentMdRef.current.setValue(data.description || '')
+				}, 2000)
+
+				this.props.form.setFieldsValue({
+					title: data.name,
+					description: data.description || '',
+				});
+
+			})
+		} else { // new
+
+		}
+	}
+
+
+	// 输入title
+	changeTitle=(e)=>{
+		console.log(e.target.value.length);
+		this.setState({
+			title_num: parseInt(e.target.value.length)
+		})
+	}
+	handleContentUploadChange = (info) => {
+		let contentFileList = info.fileList;
+		this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
+	}
+	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);
+			});
+	}
+
+	onAttachmentRemove = (file, stateName) => {
+		if(file.response!=undefined){
+			this.props.confirm({
+				content: '是否确认删除?',
+
+				onOk: () => {
+					this.deleteAttachment(file, stateName)
+				},
+				onCancel() {
+					console.log('Cancel');
+				},
+			});
+			return false;
+		}
+
+	}
+
+	handleSubmit = () => {
+
+    let {contentFileList,min_num,max_num,base_on_project}=this.state;
+    let {data}=this.props;
+    let task_type=data.task_type
+		let topicId=this.props.topicId
+		this.props.form.validateFieldsAndScroll((err, values) => {
+
+			const mdContnet = this.contentMdRef.current.getValue().trim();
+
+			values.description = mdContnet;
+
+			if (!err) {
+				if (this.state.isEdit) {
+					let url="/task_banks/"+topicId+".json";
+					axios.put(url, {
+						gtask_bank: {
+							name: values.title,
+							description: values.description,
+							min_num:task_type===1?undefined:min_num,
+							max_num:task_type===1?undefined:max_num,
+							base_on_project: task_type===1?undefined:base_on_project===true?1:0
+						},
+						attachment_ids:contentFileList
+						}
+					).then((response) => {
+           if(response.data.status===0){
+						 this.props.showNotification(response.data.message)
+					 }else{
+						 this.props.showNotification(response.data.message)
+					 }
+					}).catch((error) => {
+						console.log(error)
+					})
+
+				} else {
+
+				}
+
+			} else {
+				$("html").animate({ scrollTop: $('html').scrollTop() - 100 })
+			}
+		})
+	}
+
+	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(){
+		const { getFieldDecorator } = this.props.form;
+		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 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;
+			},
+		};
+
+
+		return(
+				<div>
+					<style>
+						{
+							`
+							.newAboutInputForm.ant-form-item, .newAboutInputForm .ant-form-item{padding:20px 30px 20px 30px!important}
+							.margin0{margin: 0px!important}
+							.tasktypes{width:64px;
+							height:22px;
+							font-size:16px;
+							font-family:Microsoft YaHei;
+							font-weight:400;
+							line-height:25px;
+							color:rgba(51,51,51,1);
+							opacity:1;}
+							`
+						}
+					</style>
+					<Form className="courseForm">
+						<div className={"ant-row ant-form-item AboutInputForm newAboutInputForm "}>
+							<div className="ant-col ant-form-item-label margin0">
+								<label htmlFor="coursesNew_course" className="ant-form-item-required ">类型</label>  <span className={"tasktypes"}>{this.props.data&&this.props.data.task_type===1?"普通作业":this.props.data&&this.props.data.task_type===2?"分组作业":""}</span>
+							</div>
+						</div>
+						<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>
+						{this.props.data&&this.props.data.task_type===2?
+						<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 mr10" 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 mr10" placeholder="请填写每组最大人数" value={max_num} max={10}
+																	 onChange={this.max_num_change} style={{width:'180px'}} />   人
+										</ConditionToolTip>
+										<div className="color-grey-9 mt20 font-14">学生提交作品时需要关联同组成员，组内成员作品共享</div>
+									</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}
+																className="color-grey-9 font-14"
+											>基于项目（选中，则必须在本平台创建项目，项目管理员可以提交作品；不选中，无需在平台创建项目，任意小组成员均可以提交作品）</Checkbox>
+										</ConditionToolTip>
+									</p>
+								</div>
+							)}
+						</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.onCancel()}>取消</ a>
+							</div>
+						</Form.Item>
+					</Form>
+				</div>
+		)
+	}
+}
+
+
+const NewGtaskForm = Form.create({ name: 'NewGtaskForm' })(NewGtaskForms);
+export default NewGtaskForm;