From 6fa97b3d93cb9860a52ef991ec6013cbc080dc26 Mon Sep 17 00:00:00 2001 From: caicai8 <1149225589@qq.com> Date: Thu, 29 Aug 2019 09:50:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=BC=80=E5=92=8C=E7=A7=81=E6=9C=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graduation/topics/GraduateTopicNew.js | 560 ++---------------- .../graduation/topics/GraduateTopicNewFrom.js | 520 ++++++++++++++++ .../user/usersInfo/banks/BanksIndex.js | 18 +- .../user/usersInfo/banks/BanksTabIndex.js | 3 - .../user/usersInfo/banks/GtopicBanksEdit.js | 53 ++ 5 files changed, 641 insertions(+), 513 deletions(-) create mode 100644 public/react/src/modules/courses/graduation/topics/GraduateTopicNewFrom.js create mode 100644 public/react/src/modules/user/usersInfo/banks/GtopicBanksEdit.js diff --git a/public/react/src/modules/courses/graduation/topics/GraduateTopicNew.js b/public/react/src/modules/courses/graduation/topics/GraduateTopicNew.js index 329cd169b..8eeae8095 100644 --- a/public/react/src/modules/courses/graduation/topics/GraduateTopicNew.js +++ b/public/react/src/modules/courses/graduation/topics/GraduateTopicNew.js @@ -1,28 +1,19 @@ 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 { Select, Modal } from 'antd'; + 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 { WordsBtn } from 'educoder' import {Link} from 'react-router-dom' -// import City from './City' -// import './board.css' -// import { RouteHOC } from './common.js' +import GraduateTopicNewFrom from './GraduateTopicNewFrom' -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{ @@ -33,14 +24,12 @@ class GraduateTopicNew extends Component{ 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 @@ -53,21 +42,11 @@ class GraduateTopicNew extends Component{ 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 + left_banner_name:result.data.left_banner_name }) + this.GraduateTopicNewFromRef.initNewInfo(result); } }).catch((error)=>{ console.log(error); @@ -94,229 +73,64 @@ class GraduateTopicNew extends Component{ 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' - } + left_banner_name:result.data.left_banner_name }) - this.setState({ fileList: _fileList, cityDefaultValue: [result.data.selected_data.province,result.data.selected_data.city] }) + this.GraduateTopicNewFromRef.initValue(result); + } }).catch((error)=>{ console.log(error); }) } - handleSubmit = (e) => { - e.preventDefault(); + // 编辑保存 + editSave = (params,topicId) =>{ 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); - }); + const editUrl = `/courses/${cid}/graduation_topics/${topicId}.json` + axios.put(editUrl, params).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}`); } - } else { - $("html").animate({ scrollTop: $('html').scrollTop() - 100 }) } + }).catch(function (error) { + console.log(error); }); } - // 选择省市 - 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, - }; - }); - } + // 新建提交 + newSubmit = (params,topicId) =>{ + const cid = this.props.match.params.coursesId + const url = `/courses/${cid}/graduation_topics.json` + axios.post(url, params).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); - }); + } + }).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); + const common={ + handleSubmit:this.handleSubmit, + editSave:this.editSave, + newSubmit:this.newSubmit + } return(
- - {getFieldDecorator('name', { - rules: [{ - required: true, message: '请输入选题名称', - }, { - max: 60, message: '最大限制为60个字符', - }], - })( - - )} - -
- - - -
- - - {getFieldDecorator('description', { - rules: [{ - required: true, message: '请输入选题简介', - }, { - max: 10000, message: '最大限制为10000个字符', - }], - })( - - )} - - - { - getFieldDecorator('file',{ - rules:[{ - required:false - }] - })( - - - (单个文件150M以内) - - ) - } - -
- - {getFieldDecorator('topic_type', { - rules: [{ - required: false, message: '', - }], - })( - - )} - - - {getFieldDecorator('topic_source', { - rules: [{ - required: false, message: '', - }], - })( - - )} - - - {getFieldDecorator('topic_property_first', { - rules: [{ - required: false, message: '', - }], - })( - - )} - - - {getFieldDecorator('topic_property_second', { - rules: [{ - required: false, message: '', - }], - })( - - )} - -
-
- - - - - -
- - {getFieldDecorator('source_unit', { - rules: [{ - required: false, message: '', - }], - })( - - )} - - - {getFieldDecorator('topic_repeat', { - rules: [{ - required: false, message: '', - }], - })( - - )} - - - {getFieldDecorator('city', { - rules: [{ - initialValue: this.state.cityDefaultValue, - type: 'array', - required: false, message: '', - }], - })( - - )} - -
- - -
- - this.props.history.goBack()}>取消 -
- - + this.GraduateTopicNewFromRef = ref} + topicId={topicId} + > + ) } } -const WrappedGraduateTopicNew = Form.create({ name: 'topicPostWorksNew' })(GraduateTopicNew); +// const WrappedGraduateTopicNew = Form.create({ name: 'topicPostWorksNew' })(GraduateTopicNew); // RouteHOC() -export default (WrappedGraduateTopicNew); \ No newline at end of file +export default GraduateTopicNew; \ No newline at end of file diff --git a/public/react/src/modules/courses/graduation/topics/GraduateTopicNewFrom.js b/public/react/src/modules/courses/graduation/topics/GraduateTopicNewFrom.js new file mode 100644 index 000000000..9802084fc --- /dev/null +++ b/public/react/src/modules/courses/graduation/topics/GraduateTopicNewFrom.js @@ -0,0 +1,520 @@ +import React,{ Component } from "react"; + +import { + Form, Input, Button, Upload, Icon , message, Select +} from 'antd'; +import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'; +import axios from 'axios' +import {getUrl} from 'educoder'; + +import { City } from 'educoder' + +const NAME_COUNT=60; +class GraduateTopicNewForm extends Component{ + constructor(props){ + super(props); + + this.mdRef = React.createRef(); + + this.state = { + fileList: [], + teacherList:[], + topic_property_first:[], + topic_property_second:[], + topic_repeat:[], + topic_source:[], + topic_type:[], + addonAfter:0, + cityDefaultValue:undefined + } + } + // init编辑信息 + initValue=(result)=>{ + this.setState({ + 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, + 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] }) + } + //init新建信息 + initNewInfo=(result)=>{ + this.setState({ + 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 + }) + + this.props.form.setFieldsValue({ + tea_id:this.props.current_user && this.props.current_user.user_id + }) + } + + // 附件相关 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); + }); + } + + changeTopicName=(e)=>{ + // let num= 60 - parseInt(e.target.value.length); + this.setState({ + addonAfter:e.target.value.length + }) + } + + + handleSubmit = (e) => { + e.preventDefault(); + const topicId = this.props.match.params.topicId + this.props.form.validateFieldsAndScroll((err, values) => { + if (!err) { + if (topicId !=undefined) { + // 编辑 + // const editTopic = this.editTopic + let attachment_ids = undefined + if (this.state.fileList) { + attachment_ids = this.state.fileList.map(item => { + return item.response ? item.response.id : item.id + }) + } + const param = { + graduation_topic:{ + ...values, + province: values.city==undefined?"":values.city[0], + city: values.city==undefined?"":values.city[1], + }, + attachment_ids + } + this.props.editSave(param,topicId); + } else { + // 新建 + let attachment_ids = undefined + if (this.state.fileList) { + attachment_ids = this.state.fileList.map(item => { + return item.response.id + }) + } + const param = { + graduation_topic:{ + ...values, + province: values.city==undefined?"":values.city[0], + city: values.city==undefined?"":values.city[1], + }, + attachment_ids, + } + this.props.newSubmit(param,topicId); + } + } else { + $("html").animate({ scrollTop: $('html').scrollTop() - 100 }) + } + }); + } + + // 附件相关 ------------ END + render(){ + let{ + fileList, + teacherList, + topic_property_first, + topic_property_second, + topic_repeat, + topic_source, + topic_type, + addonAfter, + cityDefaultValue + }=this.state; + const { getFieldDecorator } = this.props.form; + 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; + }, + }; + let { topicId }=this.props; + return( + +
+
+ + {getFieldDecorator('tea_id', { + rules: [{ + required: true, message: '请选择指导老师' + }], + })( + + )} + + + + {getFieldDecorator('name', { + rules: [{ + required: true, message: '请输入选题名称', + }, { + max: 60, message: '最大限制为60个字符', + }], + })( + + )} + +
+ + + +
+ + + {getFieldDecorator('description', { + rules: [{ + required: true, message: '请输入选题简介', + }, { + max: 10000, message: '最大限制为10000个字符', + }], + })( + // initValue={this.editTopic ? this.editTopic.content : ''} + + )} + + + { + getFieldDecorator('file',{ + rules:[{ + required:false + }] + })( + + + (单个文件150M以内) + + ) + } + +
+ + {getFieldDecorator('topic_type', { + rules: [{ + required: false, message: '', + }], + })( + + )} + + + {getFieldDecorator('topic_source', { + rules: [{ + required: false, message: '', + }], + })( + + )} + + + {getFieldDecorator('topic_property_first', { + rules: [{ + required: false, message: '', + }], + })( + + )} + + + {getFieldDecorator('topic_property_second', { + rules: [{ + required: false, message: '', + }], + })( + + )} + +
+
+ + + + + +
+ + {getFieldDecorator('source_unit', { + rules: [{ + required: false, message: '', + }], + })( + + )} + + + {getFieldDecorator('topic_repeat', { + rules: [{ + required: false, message: '', + }], + })( + + )} + + + {getFieldDecorator('city', { + rules: [{ + initialValue: cityDefaultValue, + type: 'array', + required: false, message: '', + }], + })( + + )} + +
+ + +
+ + this.props.history.goBack()}>取消 +
+ + + + ) + } +} + +const WrappedGraduateTopicNewForm = Form.create({ name: 'topicPostWorksNew' })(GraduateTopicNewForm); +// RouteHOC() +export default (WrappedGraduateTopicNewForm); \ No newline at end of file diff --git a/public/react/src/modules/user/usersInfo/banks/BanksIndex.js b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js index 16e99438e..b5c269681 100644 --- a/public/react/src/modules/user/usersInfo/banks/BanksIndex.js +++ b/public/react/src/modules/user/usersInfo/banks/BanksIndex.js @@ -7,6 +7,11 @@ import { SnackbarHOC } from 'educoder'; import { TPMIndexHOC } from '../../../tpm/TPMIndexHOC'; import { CNotificationHOC } from '../../../courses/common/CNotificationHOC' + +import "../usersInfo.css" +import "../../../courses/css/members.css" +import "../../../courses/css/Courses.css" + import Loadable from 'react-loadable'; import Loading from '../../../../Loading'; @@ -20,6 +25,10 @@ const BanksTabIndex = Loadable({ loader: () => import('./BanksTabIndex'), loading: Loading, }) +const GtopicBanksEdit = Loadable({ + loader: () => import('./GtopicBanksEdit'), + loading: Loading, +}) class BanksIndex extends Component{ constructor(props){ @@ -59,11 +68,18 @@ class BanksIndex extends Component{

{crumbData && crumbData.title} { - crumbData && crumbData.is_public && 公开 + crumbData && crumbData.is_public && {crumbData.is_public == true ? '公开':'私有'} }

+ + { + return () + } + }> { + let bankId = this.props.match.params.bankId + const crumbData={ + title:'编辑', + is_public:true, + crumbArray:[ + {to:`/banks/gtopic/${bankId}/edit`,content:'详情'}, + {content:'编辑'} + ] + } + this.props.initPublic(crumbData); + this.initData(bankId); + } + + initData = (bankId) =>{ + let url = `/gtopic_banks/${bankId}/edit.json`; + axios.get(url).then((result)=>{ + if(result){ + this.GraduateTopicNewFromRef.initValue(result); + } + }).catch((error)=>{ + console.log(error) + }) + } + + render(){ + let { bankId } = this.props.match.params + const common = { + + } + return( +
+ this.GraduateTopicNewFromRef = ref} + topicId={bankId} + > +
+ ) + } +} +export default GtopicBanksEdit; \ No newline at end of file