editableMode

dev_ec
hjm 5 years ago
parent 7d031142a5
commit 4a8b9dd0ab

@ -0,0 +1,91 @@
import React, { Component } from 'react';
import { Modal } from 'antd';
export function ECModalHOC(options = {}) {
return function wrap(WrappedComponent) {
return class Wrapper extends Component {
constructor(props) {
super(props);
this.state = {
titlemessage: '',
Modallist: false,
Modallisttype: false,
singleButton: false
}
}
// 全局的modal this.props.showModal 调用即可
showModal = (title, content, okCallback) => {
this.okCallback = okCallback;
this.setState({
titlemessage: title,
Modallist: content,
Modallisttype: true,
singleButton: false,
})
}
showSingleButtonModal = (title, content) => {
this.setState({
titlemessage: title,
Modallist: content,
Modallisttype: true,
singleButton: true,
})
}
onCancel = () => {
this.setState({
Modallisttype:false
})
}
hidemodeldelete = () => {
if (this.okCallback) {
this.okCallback()
}
this.onCancel()
}
render() {
const { titlemessage, Modallisttype, Modallist, singleButton } = this.state;
return (
<React.Fragment>
<Modal
title={titlemessage}
// visible={modeldelet===true&&listid===list.id?true:false}
visible={Modallisttype}
className={"ecmodeldelet"}
closable={false}
footer={null}
>
<div className="task-popup-content" >
<div className="task-popup-text-center font-14">{Modallist}</div>
</div>
{ singleButton ? <div className="task-popup-submit clearfix"
style={{ textAlign: 'center' }}>
<a className="task-btn task-btn-orange"
onClick={this.onCancel}
>知道啦</a>
</div> : <div className="task-popup-submit clearfix">
<a onClick={this.onCancel} className="task-btn fl">取消</a>
<a className="task-btn task-btn-orange fr"
onClick={this.hidemodeldelete}
>确定</a>
</div> }
</Modal>
<WrappedComponent {...this.props}
showModal={ this.showModal }
showSingleButtonModal={ this.showSingleButtonModal }
>
</WrappedComponent>
</React.Fragment>
)
}
}
}
}

@ -36,7 +36,10 @@ const EcCompletionCalculation =Loadable({
loader: () => import('../subroute/ecCompletion_calculation/EcCompletionCalculation'),
loading: Loading,
});
const EcCourseSupportSetting =Loadable({
loader: () => import('../subroute/ecCourseSupportSetting/index'),
loading: Loading,
});
class Curriculum extends Component {
//课程体系
@ -231,7 +234,7 @@ class Curriculum extends Component {
{/*Curriculumtwo 测试用*/}
{/*课程目标*/}
<Route extra path='/ecs/major_schools/:majorId/years/:yearId/courses/:type/1'
render={ (props) => (<Curriculumtwo {...this.props} {...props} {...this.state} Ontitine={(i)=>this.Ontitine(i)} />) }></Route>
render={ (props) => (<EcCourseSupportSetting {...this.props} {...props} {...this.state} Ontitine={(i)=>this.Ontitine(i)} />) }></Route>
{/*课程考核方式与数据来源*/}
<Route extra path='/ecs/major_schools/:majorId/years/:yearId/courses/:type/2'
render={ (props) => (<Curriculumtwo {...this.props} {...props} {...this.state} Ontitine={(i)=>this.Ontitine(i)}/>) }></Route>

@ -33,7 +33,7 @@ class ShowTableCourseSupportSetting extends Component {
render() {
const course_targets = this.props.course_targets;
const is_manager = this.props.is_manager;
const is_manager = this.props.year && this.props.year.can_manager;
return (
<div className="ListTableLine" id="show-Target-table">
<p className="clearfix">

@ -7,26 +7,25 @@ import ShowTableCourseSupportSetting from './ShowTableCourseSupportSetting'
import { Form, Input, Icon, Button, Select } from 'antd';
import EcTitleCourseEvaluations from '../ecTitle/ecTitle'
// import EcTitleCourseEvaluations from '../ecTitle/ecTitle'
import { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
import { SnackbarHOC, getUrl } from 'educoder'
import axios from 'axios'
import 'antd/dist/antd.css';
import '../css/ecCourseEvaluations.css'
import './style.css'
import { ECModalHOC } from '../common/ECModalHOC'
// import '../css/ecCourseEvaluations.css'
import './style.scss'
import { ECModalHOC } from '../../common/ECModalHOC'
const { Option } = Select;
// TODO 公共方法 或 抽取到顶层组件
let _url_origin = getUrl()
const $ = window.$
// https://www.educoder.net/stylesheets/educoder/edu-all.css?1546618720
if (!window['EcCourseSupportSettingLoaded']) {
$('head').append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?1525440977`) );
window['EcCourseSupportSettingLoaded'] = true
}
// if (!window['EcCourseSupportSettingLoaded']) {
// $('head').append( $('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?1525440977`) );
// window['EcCourseSupportSettingLoaded'] = true
// }
@ -83,128 +82,55 @@ class EcCourseSupportSetting extends Component {
}
fetchCourseTargets = () => {
const ec_course_id = this.props.match.params.ec_course_id;
const course_id = 706
const url = `/ec_courses/${course_id}/course_targets.json`
// `/ec_courses/${ec_course_id}/ec_course_support_setting_data`
const url = `/ec_courses/${ec_course_id}/ec_course_support_setting_data`
axios.get(url, {
})
.then((response) => {
if (response.data && response.data.ec_year_id) {
if (response.data.course_targets.length === 0) {
response.data.course_targets = [
{"target_contents":"","target_weight":'',"position": 1,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
{"target_contents":"","target_weight":'',"position": 2,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
{"target_contents":"","target_weight":'',"position": 3,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
]
this.setEditableMode(true)
}
this.setState({ ...response.data })
axios.get(url, {
})
.then((response) => {
if (response.data && response.data.course_targets) {
if (response.data.course_targets.length === 0) {
response.data.course_targets = [
{"target_contents":"","target_weight":'',"position": 1,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
{"target_contents":"","target_weight":'',"position": 2,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
{"target_contents":"","target_weight":'',"position": 3,"standard_grade":75,"subitem_id":"","index":"","subitem_contents":""},
]
this.setEditableMode(true)
} else {
this.props.showModal('提示', '接口异常或无数据')
// 服务端返回的数据有误
response.data.course_targets = response.data.course_targets.map((item, index) => {
const graduation_subitem = item.graduation_subitem
return {
index: `${graduation_subitem.position}-${graduation_subitem.graduation_requirement_position}`,
position: index + 1,
standard_grade: item.standard_grade,
subitem_contents: graduation_subitem.content,
subitem_id: graduation_subitem.id,
target_contents: item.content,
target_id: item.id,
target_weight: item.weight
}
})
}
this.setState({ ...response.data })
} else {
this.props.showModal('提示', '接口异常或无数据')
// 服务端返回的数据有误
}
})
.catch(function (error) {
console.log(error);
});
})
.catch(function (error) {
console.log(error);
});
const fake_data = {
"ec_year_id": 1,
"ec_course_id": 1,
"course_targets": [
{
target_id: 0,
position: 1,
target_weight: 0.1,
target_contents: '理解数据管理技术和数据库技术的发展,区分不同数据模型的作用和特点,描述数据库系统的类型、结构、数据独立性。',
standard_grade: 60,
// biyeYaoqiuZhibiaodian: '<label>1-2</label>:能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题',
"subitem_id": 52,
"index": "1-1",
"subitem_contents": "能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题"
},
{
target_id: 1,
position: 2,
target_weight: 0.2,
target_contents: '理解数据管理技术和数据库技术的发展,区分不同数据模型的作用和特点,描述数据库系统的类型、结构、数据独立性。',
standard_grade: 61,
// biyeYaoqiuZhibiaodian: '<label>1-2</label>:能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题',
"subitem_id": 53,
"index": "1-2",
"subitem_contents": "222能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题"
}
],
"requirements": [
{
"subitem_id": 52,
"subitem_contents": "1-子项1",
"index": "1-1"
},
{
"subitem_id": 53,
"subitem_contents": "1-子项2",
"index": "1-2"
},
{
"subitem_id": 54,
"subitem_contents": "2-子项1",
"index": "2-1"
},
{
"subitem_id": 55,
"subitem_contents": "2-子项2",
"index": "2-2"
},
{
"subitem_id": 56,
"subitem_contents": "2-子项3",
"index": "2-3"
},
{
"subitem_id": 57,
"subitem_contents": "3-1子项",
"index": "3-1"
},
{
"subitem_id": 58,
"subitem_contents": "4-子项1",
"index": "4-1"
},
{
"subitem_id": 59,
"subitem_contents": "4-子项2",
"index": "4-2"
},
{
"subitem_id": 60,
"subitem_contents": "4-子项3",
"index": "4-3"
},
{
"subitem_id": 61,
"subitem_contents": "4-子项4",
"index": "4-4"
},
{
"subitem_id": 62,
"subitem_contents": "5-子项1",
"index": "5-1"
},
{
"subitem_id": 63,
"subitem_contents": "5-子项2",
"index": "5-2"
}
]
}
// test data
// this.setState({ ...fake_data })
}
getNavigationData=(ec_course_id)=>{
return;
// const jol =`/ec_major_schools/get_navigation_data?ec_year_id=`+ec_year_id+"&ec_course_id="+ec_course_id;
const jol =`/ec_major_schools/get_navigation_data?ec_course_id=`+ec_course_id;
axios.get(jol, {
@ -226,6 +152,7 @@ class EcCourseSupportSetting extends Component {
});
}
componentDidMount = () => {
console.log('componentDidMount ' + this.props)
this.fetchCourseTargets();
const ec_course_id = this.props.match.params.ec_course_id;
@ -242,14 +169,18 @@ class EcCourseSupportSetting extends Component {
const course_targets = this.state.course_targets;
return (
<div className="newMain clearfix courseSupport">
<div className="educontent mb50 mt60">
<EcTitleCourseEvaluations
<React.Fragment>
{/* <div className="newMain clearfix courseSupport">
<div className="educontent mb50 mt60">
</div>
</div> */}
{/* <EcTitleCourseEvaluations
{...this.props}
schooldata={schooldata}
ecComponentState={'ecCompletion'}
ecpath={"ec_course_support_setting"}
></EcTitleCourseEvaluations>
></EcTitleCourseEvaluations> */}
{/* <p class="clearfix padding20-30 bor-bottom-greyE">
<span class="fl font-18">
@ -262,7 +193,7 @@ class EcCourseSupportSetting extends Component {
>导出课程目标</a>
</p> */}
<div className="edu-back-white eacourse">
{/* <div className="edu-back-white eacourse">
<p className="clearfix padding20-30 bor-bottom-greyE" id="SystemParametersP">
<a href={schooldata.course_setting_url} className="TrainingLecturer color-grey-9">课程体系 </a> >
@ -293,7 +224,7 @@ class EcCourseSupportSetting extends Component {
href={schooldata.competition_calculation_info_url}>5.课程达成评价结果</a>
</div>
</div>
</div> */}
{/* && is_manager */}
{ course_targets&&course_targets.length>=0 ? (editableMode ?
@ -305,6 +236,7 @@ class EcCourseSupportSetting extends Component {
></EditableCourseSupportSetting>
: <ShowTableCourseSupportSetting
setEditableMode={this.setEditableMode}
{...this.props}
{...this.state}
></ShowTableCourseSupportSetting> ) : ''
}
@ -315,10 +247,9 @@ class EcCourseSupportSetting extends Component {
<ShowTableCourseSupportSetting
setEditableMode={this.setEditableMode}
></ShowTableCourseSupportSetting> */}
</div>
</div>
</React.Fragment>
);
}
}
export default ECModalHOC() ( SnackbarHOC() ( TPMIndexHOC ( EcCourseSupportSetting ) ) );
export default ECModalHOC() ( SnackbarHOC() ( ( EcCourseSupportSetting ) ) );

Loading…
Cancel
Save