|
|
import React,{ Component } from "react";
|
|
|
|
|
|
import {
|
|
|
Form, Input, InputNumber, Switch, Radio,
|
|
|
Slider, Button, Upload, Icon, Rate, Checkbox, message,
|
|
|
Row, Col, Select, Modal,Cascader
|
|
|
} from 'antd';
|
|
|
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
|
|
|
import axios from 'axios'
|
|
|
import {getUrl} from 'educoder';
|
|
|
import "../../common/formCommon.css"
|
|
|
import '../style.css'
|
|
|
import '../../css/Courses.css'
|
|
|
import { WordsBtn, City } from 'educoder'
|
|
|
|
|
|
import {Link} from 'react-router-dom'
|
|
|
// import City from './City'
|
|
|
|
|
|
// import './board.css'
|
|
|
// import { RouteHOC } from './common.js'
|
|
|
|
|
|
const confirm = Modal.confirm;
|
|
|
const $ = window.$
|
|
|
const { Option } = Select;
|
|
|
const NAME_COUNT=60;
|
|
|
// 新建毕设选题
|
|
|
// https://lanhuapp.com/web/#/item/project/board/detail?pid=a3bcd4b1-99ce-4e43-8ead-5b8b0a410807&project_id=a3bcd4b1-99ce-4e43-8ead-5b8b0a410807&image_id=c6d9b36f-7701-4035-afdb-62404681108c
|
|
|
class GraduateTopicNew extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
|
|
|
this.mdRef = React.createRef();
|
|
|
|
|
|
this.state = {
|
|
|
fileList: [],
|
|
|
boards: [],
|
|
|
teacherList:[],
|
|
|
topic_property_first:[],
|
|
|
topic_property_second:[],
|
|
|
topic_repeat:[],
|
|
|
topic_source:[],
|
|
|
topic_type:[],
|
|
|
attachments:undefined,
|
|
|
addonAfter:0,
|
|
|
left_banner_id:undefined,
|
|
|
course_name:undefined
|
|
|
}
|
|
|
}
|
|
|
// 获取老师列表
|
|
|
getTeacherList=()=>{
|
|
|
const cid = this.props.match.params.coursesId
|
|
|
let url=`/courses/${cid}/graduation_topics/new.json`;
|
|
|
axios.get((url)).then((result)=>{
|
|
|
if(result.status==200){
|
|
|
this.setState({
|
|
|
teacherList:result.data.teacher_list,
|
|
|
left_banner_id:result.data.left_banner_id,
|
|
|
course_name:result.data.course_name,
|
|
|
left_banner_name:result.data.left_banner_name,
|
|
|
topic_property_first:result.data.topic_property_first,
|
|
|
topic_property_second:result.data.topic_property_second,
|
|
|
topic_repeat:result.data.topic_repeat,
|
|
|
topic_source:result.data.topic_source,
|
|
|
topic_type:result.data.topic_type
|
|
|
})
|
|
|
console.log("sdfds");
|
|
|
console.log(this.props.current_user && this.props.current_user.user_id);
|
|
|
this.props.form.setFieldsValue({
|
|
|
tea_id:this.props.current_user && this.props.current_user.user_id
|
|
|
})
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
componentDidMount = () => {
|
|
|
//新建or编辑
|
|
|
let topicId=this.props.match.params.topicId;
|
|
|
|
|
|
if(topicId==undefined){
|
|
|
this.getTeacherList();
|
|
|
}else{
|
|
|
this.getEditInfo();
|
|
|
|
|
|
}
|
|
|
}
|
|
|
//编辑，信息显示
|
|
|
getEditInfo=()=>{
|
|
|
const cid = this.props.match.params.coursesId
|
|
|
let topicId=this.props.match.params.topicId
|
|
|
let url=`/courses/${cid}/graduation_topics/${topicId}/edit.json`;
|
|
|
axios.get((url)).then((result)=>{
|
|
|
if(result){
|
|
|
this.setState({
|
|
|
left_banner_id:result.data.left_banner_id,
|
|
|
course_name:result.data.course_name,
|
|
|
left_banner_name:result.data.left_banner_name,
|
|
|
teacherList:result.data.teacher_list,
|
|
|
topic_property_first:result.data.topic_property_first,
|
|
|
topic_property_second:result.data.topic_property_second,
|
|
|
topic_repeat:result.data.topic_repeat,
|
|
|
topic_source:result.data.topic_source,
|
|
|
topic_type:result.data.topic_type,
|
|
|
attachments:result.data.attachments,
|
|
|
addonAfter:parseInt(result.data.selected_data.name.length)
|
|
|
})
|
|
|
this.props.form.setFieldsValue({
|
|
|
tea_id:result.data.selected_data.tea_id,
|
|
|
name:result.data.selected_data.name,
|
|
|
city: [result.data.selected_data.province,result.data.selected_data.city],
|
|
|
topic_type:result.data.selected_data.topic_type || undefined,
|
|
|
topic_source:result.data.selected_data.topic_source || undefined,
|
|
|
topic_property_first:result.data.selected_data.topic_property_first || undefined,
|
|
|
topic_property_second:result.data.selected_data.topic_property_second || undefined,
|
|
|
source_unit:result.data.selected_data.source_unit,
|
|
|
topic_repeat:result.data.selected_data.topic_repeat || undefined
|
|
|
});
|
|
|
this.mdRef.current.setValue(result.data.selected_data.description)
|
|
|
const _fileList = result.data.attachments.map(item => {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
uid: item.id,
|
|
|
name: item.title,
|
|
|
url: item.url,
|
|
|
status: 'done'
|
|
|
}
|
|
|
})
|
|
|
this.setState({ fileList: _fileList, cityDefaultValue: [result.data.selected_data.province,result.data.selected_data.city] })
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleSubmit = (e) => {
|
|
|
e.preventDefault();
|
|
|
const cid = this.props.match.params.coursesId
|
|
|
const topicId = this.props.match.params.topicId
|
|
|
// console.log(this.props);
|
|
|
|
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
if (!err) {
|
|
|
console.log('Received values of form: ', values);
|
|
|
if (topicId !=undefined) {
|
|
|
const editTopic = this.editTopic
|
|
|
const editUrl = `/courses/${cid}/graduation_topics/${topicId}.json`
|
|
|
|
|
|
let attachment_ids = undefined
|
|
|
if (this.state.fileList) {
|
|
|
attachment_ids = this.state.fileList.map(item => {
|
|
|
return item.response ? item.response.id : item.id
|
|
|
})
|
|
|
}
|
|
|
axios.put(editUrl, {
|
|
|
graduation_topic:{
|
|
|
...values,
|
|
|
province: values.city==undefined?"":values.city[0],
|
|
|
city: values.city==undefined?"":values.city[1],
|
|
|
},
|
|
|
attachment_ids
|
|
|
}).then((response) => {
|
|
|
if (response.status == 200) {
|
|
|
const { id } = response.data;
|
|
|
if (id) {
|
|
|
this.props.showNotification('保存成功！');
|
|
|
this.props.history.push(`/courses/${cid}/graduation_topics/${this.state.left_banner_id}`);
|
|
|
}
|
|
|
}
|
|
|
}).catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
} else {
|
|
|
const url = `/courses/${cid}/graduation_topics.json`
|
|
|
let attachment_ids = undefined
|
|
|
if (this.state.fileList) {
|
|
|
attachment_ids = this.state.fileList.map(item => {
|
|
|
return item.response.id
|
|
|
})
|
|
|
}
|
|
|
|
|
|
axios.post(url, {
|
|
|
graduation_topic:{
|
|
|
...values,
|
|
|
province: values.city==undefined?"":values.city[0],
|
|
|
city: values.city==undefined?"":values.city[1],
|
|
|
},
|
|
|
attachment_ids,
|
|
|
}).then((response) => {
|
|
|
if (response.data) {
|
|
|
const { id } = response.data;
|
|
|
if (id) {
|
|
|
this.props.showNotification('提交成功！');
|
|
|
this.props.history.push(`/courses/${cid}/graduation_topics/${this.state.left_banner_id}`);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
$("html").animate({ scrollTop: $('html').scrollTop() - 100 })
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 选择省市
|
|
|
ChangeCity=(value, selectedOptions)=>{
|
|
|
console.log(selectedOptions);
|
|
|
}
|
|
|
|
|
|
// 附件相关 START
|
|
|
handleChange = (info) => {
|
|
|
let fileList = info.fileList;
|
|
|
this.setState({ fileList });
|
|
|
}
|
|
|
onAttachmentRemove = (file) => {
|
|
|
confirm({
|
|
|
title: '确定要删除这个附件吗?',
|
|
|
okText: '确定',
|
|
|
cancelText: '取消',
|
|
|
// content: 'Some descriptions',
|
|
|
onOk: () => {
|
|
|
this.deleteAttachment(file)
|
|
|
},
|
|
|
onCancel() {
|
|
|
console.log('Cancel');
|
|
|
},
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
deleteAttachment = (file) => {
|
|
|
console.log(file);
|
|
|
let id=file.response ==undefined ? file.id : file.response.id
|
|
|
const url = `/attachments/${id}.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.fileList.indexOf(file);
|
|
|
const newFileList = state.fileList.slice();
|
|
|
newFileList.splice(index, 1);
|
|
|
return {
|
|
|
fileList: newFileList,
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 附件相关 ------------ END
|
|
|
|
|
|
changeTopicName=(e)=>{
|
|
|
// let num= 60 - parseInt(e.target.value.length);
|
|
|
this.setState({
|
|
|
addonAfter:e.target.value.length
|
|
|
})
|
|
|
}
|
|
|
render() {
|
|
|
let {
|
|
|
fileList,
|
|
|
teacherList,
|
|
|
topic_property_first,
|
|
|
topic_property_second,
|
|
|
topic_repeat,
|
|
|
topic_source,
|
|
|
topic_type,
|
|
|
addonAfter,
|
|
|
left_banner_id,
|
|
|
course_name,
|
|
|
left_banner_name
|
|
|
} = this.state;
|
|
|
const { current_user } = this.props
|
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
let{ topicId,coursesId }=this.props.match.params
|
|
|
// console.log(this.props);
|
|
|
|
|
|
const formItemLayout = {
|
|
|
labelCol: {
|
|
|
xs: { span: 24 },
|
|
|
// sm: { span: 8 },
|
|
|
sm: { span: 24 },
|
|
|
},
|
|
|
wrapperCol: {
|
|
|
xs: { span: 24 },
|
|
|
// sm: { span: 16 },
|
|
|
sm: { span: 24 },
|
|
|
},
|
|
|
};
|
|
|
const uploadProps = {
|
|
|
width: 600,
|
|
|
fileList,
|
|
|
multiple: true,
|
|
|
// https://github.com/ant-design/ant-design/issues/15505
|
|
|
// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
|
|
|
// showUploadList: false,
|
|
|
action: `${getUrl()}/api/attachments.json`,
|
|
|
onChange: this.handleChange,
|
|
|
onRemove: this.onAttachmentRemove,
|
|
|
beforeUpload: (file) => {
|
|
|
console.log('beforeUpload', file.name);
|
|
|
const isLt150M = file.size / 1024 / 1024 < 150;
|
|
|
if (!isLt150M) {
|
|
|
message.error('文件大小必须小于150MB!');
|
|
|
}
|
|
|
return isLt150M;
|
|
|
},
|
|
|
};
|
|
|
// console.log("dfsf");
|
|
|
// console.log(this.props);
|
|
|
return(
|
|
|
<div className="newMain ">
|
|
|
<style>{`
|
|
|
.courseForm .ant-form-item-label{
|
|
|
margin-left:unset!important
|
|
|
}
|
|
|
`}</style>
|
|
|
<div className="edu-class-container edu-position courseForm">
|
|
|
<p className="clearfix mb20 mt10">
|
|
|
<WordsBtn style="grey" className="fl" to={current_user&¤t_user.first_category_url}>{course_name}</WordsBtn>
|
|
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
|
|
<WordsBtn style="grey" className="fl" to={`/courses/${coursesId}/graduation_topics/${left_banner_id}`}>{left_banner_name}</WordsBtn>
|
|
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
|
|
<span>{topicId==undefined?"新建":"编辑"}</span>
|
|
|
</p>
|
|
|
<div className="clearfix mb20 lineh-25">
|
|
|
<p className="fl color-black summaryname">{topicId==undefined?"新建":"编辑"}毕设选题</p>
|
|
|
<Link to={`/courses/${coursesId}/graduation_topics/${left_banner_id}`} className="color-grey-6 fr font-16">返回</Link>
|
|
|
</div>
|
|
|
|
|
|
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
|
|
|
<div className="createPage">
|
|
|
<Form.Item
|
|
|
label="指导老师"
|
|
|
>
|
|
|
{getFieldDecorator('tea_id', {
|
|
|
rules: [{
|
|
|
required: true, message: '请选择指导老师'
|
|
|
}],
|
|
|
})(
|
|
|
<Select style={{"width":"20%"}} placeholder="请选择指导老师">
|
|
|
{
|
|
|
teacherList && teacherList.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} id={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item
|
|
|
label="选题名称"
|
|
|
className="mt15"
|
|
|
>
|
|
|
{getFieldDecorator('name', {
|
|
|
rules: [{
|
|
|
required: true, message: '请输入选题名称',
|
|
|
}, {
|
|
|
max: 60, message: '最大限制为60个字符',
|
|
|
}],
|
|
|
})(
|
|
|
<Input placeholder="请输入帖子选题名称，最大限制60个字符" maxLength="60" onInput={this.changeTopicName} autoComplete="off" suffix={`${String(addonAfter)}/${NAME_COUNT}`} className="searchViewAfter" />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
|
|
|
<style>{`
|
|
|
.courseMessageMD {
|
|
|
width: 1140px;
|
|
|
}
|
|
|
|
|
|
.uploadBtn.ant-btn {
|
|
|
border: none;
|
|
|
color: #4CACFF;
|
|
|
box-shadow: none;
|
|
|
background: transparent;
|
|
|
padding: 0 6px;
|
|
|
}
|
|
|
.upload_1 .ant-upload-list {
|
|
|
width: 350px;
|
|
|
margin-bottom:10px;
|
|
|
}
|
|
|
.ant-upload-list-item{
|
|
|
margin-top:0px!important;
|
|
|
}
|
|
|
|
|
|
.ant-form-item-children{
|
|
|
position:unset
|
|
|
}
|
|
|
.rememberTip{
|
|
|
position:absolute;
|
|
|
right:0px;
|
|
|
bottom:-10px;
|
|
|
}
|
|
|
.chooseDes .ant-form-explain{
|
|
|
position:absolute;
|
|
|
bottom:-10px;
|
|
|
left:0px;
|
|
|
}
|
|
|
.setUploadStyle .uploadBtn{
|
|
|
height:20px;
|
|
|
line-height:20px;
|
|
|
}
|
|
|
.setUploadStyle .ant-form-item-control{
|
|
|
margin-top:15px!important;
|
|
|
line-height:22px!important;
|
|
|
}
|
|
|
.setUploadStyle .ant-upload-list{
|
|
|
margin-top:5px;
|
|
|
}
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
<div className="createPage">
|
|
|
|
|
|
<Form.Item
|
|
|
label="选题简介"
|
|
|
style={{"borderBottom":'none'}}
|
|
|
className="chooseDes pr"
|
|
|
>
|
|
|
{getFieldDecorator('description', {
|
|
|
rules: [{
|
|
|
required: true, message: '请输入选题简介',
|
|
|
}, {
|
|
|
max: 10000, message: '最大限制为10000个字符',
|
|
|
}],
|
|
|
})(
|
|
|
<TPMMDEditor ref={this.mdRef} placeholder={'请简要说明选题内容，最大限制5000个字符'}
|
|
|
mdID={'courseMessageMD'} initValue={this.editTopic ? this.editTopic.content : ''} className="courseMessageMD"></TPMMDEditor>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item
|
|
|
className="setUploadStyle"
|
|
|
>
|
|
|
{
|
|
|
getFieldDecorator('file',{
|
|
|
rules:[{
|
|
|
required:false
|
|
|
}]
|
|
|
})(
|
|
|
<Upload {...uploadProps} className="upload_1 ">
|
|
|
<Button className="uploadBtn">
|
|
|
<Icon type="upload" /> 上传附件
|
|
|
</Button>
|
|
|
<span className="color-grey-c">(单个文件150M以内)</span>
|
|
|
</Upload>
|
|
|
)
|
|
|
}
|
|
|
</Form.Item>
|
|
|
<div className="clearfix">
|
|
|
<Form.Item className="fl mr20 with20" style={{"marginRight":"20px"}}>
|
|
|
{getFieldDecorator('topic_type', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Select placeholder="请选择选题类型">
|
|
|
{
|
|
|
topic_type && topic_type.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} key={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item className="fl mr20 with20" style={{"marginRight":"20px"}}>
|
|
|
{getFieldDecorator('topic_source', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Select placeholder="请输入选题来源">
|
|
|
{
|
|
|
topic_source && topic_source.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} key={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item className="fl mr20 with20" style={{"marginRight":"20px"}}>
|
|
|
{getFieldDecorator('topic_property_first', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Select placeholder="请输入选题性质1">
|
|
|
{
|
|
|
topic_property_first && topic_property_first.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} key={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item className="fl mr20 with20" style={{"marginRight":"20px"}}>
|
|
|
{getFieldDecorator('topic_property_second', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Select placeholder="请输入选题性质2">
|
|
|
{
|
|
|
topic_property_second && topic_property_second.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} key={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<style>{`
|
|
|
.courseForm .flexBlock.formBlock {
|
|
|
align-items: flex-end;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.courseForm .flexBlock .tag {
|
|
|
margin-left: 8px;
|
|
|
margin-right: 6px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.flexBlock .ant-row.ant-form-item {
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
.ant-cascader-menu{
|
|
|
min-width:125px!important;
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
<div className="createPage" style={{"borderBottom":"none"}}>
|
|
|
<Form.Item
|
|
|
label="选题来源单位"
|
|
|
className="with22"
|
|
|
>
|
|
|
{getFieldDecorator('source_unit', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Input placeholder="请填写来源单位" autoComplete="off" className="searchView"/>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item
|
|
|
label="选择重复情况"
|
|
|
className="mt15 with22"
|
|
|
>
|
|
|
{getFieldDecorator('topic_repeat', {
|
|
|
rules: [{
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<Select placeholder="请选择选题重复情况">
|
|
|
{
|
|
|
topic_repeat && topic_repeat.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item.id} key={key}>{item.name}</Option>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item
|
|
|
label="调研或实习地点"
|
|
|
className="mt15 with22 setAreaStyle"
|
|
|
>
|
|
|
{getFieldDecorator('city', {
|
|
|
rules: [{
|
|
|
initialValue: this.state.cityDefaultValue,
|
|
|
type: 'array',
|
|
|
required: false, message: '',
|
|
|
}],
|
|
|
})(
|
|
|
<City ></City>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
|
|
|
<Form.Item>
|
|
|
<div className="clearfix mt30 mb30">
|
|
|
<Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20">{topicId==undefined?"提交":"保存"}</Button>
|
|
|
<a className="defalutCancelbtn fl" onClick={()=>this.props.history.goBack()}>取消</ a>
|
|
|
</div>
|
|
|
</Form.Item>
|
|
|
</Form>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const WrappedGraduateTopicNew = Form.create({ name: 'topicPostWorksNew' })(GraduateTopicNew);
|
|
|
// RouteHOC()
|
|
|
export default (WrappedGraduateTopicNew); |
