m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

setting init

Browse Source
dev_ec
hjm 5 years ago
parent 1c358a4c6a
commit 8aab67c920
4 changed files with 993 additions and 0 deletions
Show Stats Download Patch File Download Diff File

475
public/react/src/modules/ecs/subroute/ecCourseSupportSetting/EditableCourseSupportSetting.js
Unescape View File

@ -0,0 +1,475 @@
import React, { Component } from 'react';
import moment from 'moment'
import { getUrl } from 'educoder'
import { Form, Input, Icon, Button, Select, InputNumber } from 'antd';
const { TextArea } = Input;
const { Option } = Select;
let _url_origin = getUrl()
const $ = window.$
// https://www.educoder.net/stylesheets/css/common.css?1546618720
if (!window['EcLoaded']) {
$('head').append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/css/common.css?1525440977`) );
window['EcLoaded'] = true
}
let id = 0;
/**
target_id
position
target_weight
target_contents
subitem_id
index
subitem_contents
*/
const data =
[{"position":0,"target_weight":0.02,"target_contents":"12","standard_grade":2,"subitem_id":"65"},{"position":3,"target_id":"0","target_weight":0.1,"target_contents":"理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。","standard_grade":60,"subitem_id":"66"},{"position":4,"target_weight":1,"target_contents":"22","standard_grade":33,"subitem_id":"66"},{"position":11,"target_id":"1","target_weight":0.1,"target_contents":"理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。","standard_grade":61,"subitem_id":"65"}]
;
let _data = [
{
target_id: 0,
position: 1,
target_weight: 0.1,
target_contents: '理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。',
standard_grade: 60,
// biyeYaoqiuZhibiaodian: '<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题',
"subitem_id": 64,
"index": "1-1",
"subitem_contents": "能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题"
},
{
target_id: 1,
position: 2,
target_weight: 0.1,
target_contents: '理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。',
standard_grade: 61,
// biyeYaoqiuZhibiaodian: '<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题',
"subitem_id": 65,
"index": "1-2",
"subitem_contents": "222能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题"
}
]
const item = {}
class EditableCourseSupportSetting extends Component {
constructor(props) {
super(props)
this.state = {
addOrDeleting: false,
errorMsg: ''
}
}
onRemove = (k) => {
let fValues = this.props.form.getFieldsValue();
if (
// fValues.standard_grade[k] && fValues.standard_grade[k] != 75
// || fValues.subitem_id[k]
// ||
fValues.target_contents[k]
// || fValues.target_weight[k]
) {
this.props.showModal('提示', '确定要删除吗？', () => {
this.remove(k)
})
} else {
this.remove(k)
}
}
remove = (k) => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
// We need at least one passenger
// if (keys.length === 1) {
// return;
// }
if (keys.length === 1) {
this.setState({ errorMsg: '至少得保留一条数据' })
return;
}
// 清除悬浮tip
window.$('.data-tip-down').hide()
console.log('remove :' , k , this.position2Target_idMap[k])
delete this.position2Target_idMap[k]
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});
}
_reverseMap = (map) => {
let newMap = {}
for (var k in map) {
newMap[map[k]] = k;
}
return newMap
}
addIfNewKeyExist = (newKey, index_arg) => {
this.setState({ addOrDeleting: true })
const { form } = this.props;
const keys = form.getFieldValue('keys');
/**
[0,1,2,3]
['11', '22', '33', '44']
->
[0,1,2,3,4]
['11', '22', empty, '33', '44']
*/
const target_weight = form.getFieldValue('target_weight');
const target_contents = form.getFieldValue('target_contents');
const standard_grade = form.getFieldValue('standard_grade');
const subitem_id = form.getFieldValue('subitem_id');
keys.splice(index_arg, 0, newKey);
// position2Target_idMap
// {1:2, 2:3, 3:4, 4:6 } --> {1:2, 2:3, 3:7, 4:4, 5:6 }
// 更新key/position 映射到target_id的map
// 两次revers，用这个结构，达到给position加1的效果
let reverseMap = this._reverseMap(this.position2Target_idMap);
for (let i = index_arg ; i < keys.length; i++) {
if(keys[i] === keys[i+1]) { // 找到开始+1的行
continue;
}
let target_id = this.position2Target_idMap[keys[i]];
reverseMap[target_id] = parseInt(reverseMap[target_id]) + 1;
keys[i] = keys[i] + 1;
}
for (let i = 0 ; i < keys.length - 1; i++) {
if (keys[i] == keys[i + 1]) {
debugger;
}
}
this.position2Target_idMap = this._reverseMap(reverseMap);
target_weight.splice(newKey, 0, undefined);
target_contents.splice(newKey, 0, undefined);
standard_grade.splice(newKey, 0, undefined);
subitem_id.splice(newKey, 0, undefined);
setTimeout(() => {
form.setFieldsValue({
target_weight,
target_contents,
standard_grade,
subitem_id
});
window.$('.data-tip-down').hide()
this.setState({ addOrDeleting: false })
}, 300)
form.setFieldsValue({
keys: keys
});
}
add = (k, index) => {
this.setState({ errorMsg: '' })
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
let nextKeys ;
let newKey = k + 1;
const newKeyIndex = keys.indexOf(newKey)
if (newKeyIndex != -1) {
// 新key存在，将新key位置及以后的row后移，直到找到一个之后的空位置
this.addIfNewKeyExist(newKey, index)
} else { // 如果这个新key不存在
// keys[newIndex] = newKey
keys.splice(index === 0 && k === -1 ? 0 : index, 0, newKey);
}
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: keys,
});
}
handleSubmit = (e) => {
if (!this.props.is_manager) {
this.props.showModal('提示', '您没权限编辑，请联系管理员。')
return;
}
this.setState({ errorMsg: '' })
e.preventDefault && e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
let keysLen = values.keys.length
if (keysLen < 1) {
this.setState({ errorMsg: '至少得保留一条数据' })
}
var data = []
while( keysLen-- ) {
data.push({})
}
for (var valKey in values) {
let dataIndex = 0
values[valKey].forEach( (item,index) => {
let _val = values[valKey][index];
if (_val || _val == 0) {
data[dataIndex][valKey === 'keys' ? 'position' : valKey] = _val
if (valKey === 'keys' && (this.position2Target_idMap[_val] || this.position2Target_idMap[_val] === 0) ) {
data[dataIndex].target_id = this.position2Target_idMap[_val]
}
dataIndex++;
}
})
}
console.log('Received values of form: ', values, data);
let totalWeight = 0;
values.target_weight.forEach(item => {
if (item) {
totalWeight += item
}
})
// 精度问题 0.2 + 0.7 = 0.8999999999
if (parseInt((totalWeight * 100).toFixed(1)) != 100) {
this.setState({ errorMsg: '请先保证权重和等于1' })
return;
}
this.props.updateCourseTargets(data)
} else {
const keyRowNumMap = {}
let rowNum = 1;
for (var key in values.target_contents) {
keyRowNumMap[key] = rowNum;
rowNum++;
}
// err.target_contents[1].errors[0]
// {message: "请填入目标内容", field: "target_contents[1]"}
for (var key in err) {
for (var _k in err[key]) {
let errorObj = err[key][_k].errors[0];
let _key = errorObj.field.match(`[(0-9)]`)
this.setState({ errorMsg: `第${keyRowNumMap[_key]}行，${errorObj.message}` })
return;
// console.log(`第${keyRowNumMap[_key]}行，${errorObj.message}`);
}
}
}
});
}
componentDidMount = () => {
this.position2Target_idMap = {}
const { form } = this.props;
const data = this.props.course_targets
let target_weight = []
let target_contents = []
let standard_grade = []
// let biyeYaoqiuZhibiaodian = []
let subitem_id = []
let keys = []
data.forEach(item => {
keys.push(item.position);
target_weight[item.position] = (item.target_weight)
target_contents[item.position] = (item.target_contents);
standard_grade[item.position] = (item.standard_grade);
// biyeYaoqiuZhibiaodian[item.position] = (item.biyeYaoqiuZhibiaodian);
subitem_id[item.position] = item.subitem_id ? (item.subitem_id).toString() : item.subitem_id;
this.position2Target_idMap[item.position] = item.target_id
})
form.setFieldsValue({
keys
});
setTimeout(() => {
form.setFieldsValue({
target_weight,
target_contents,
standard_grade,
// biyeYaoqiuZhibiaodian,
subitem_id,
});
// this.forceUpdate()
}, 300)
}
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
const { requirements } = this.props;
const { addOrDeleting } = this.state;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
};
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
<li className="clearfix" key={ k }>
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
// label={index === 0 ? 'Passengers' : ''}
required={false}
key={k}
style={{ 'display': 'flex' }}
>
<span className="column-1">{ index + 1 }</span>
<span className="column-1">
{getFieldDecorator(`target_weight[${k}]`, {
// validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
type: 'number',
message: "请填入权重",
}],
})(
<InputNumber placeholder="权重" precision={2} step={0.01} min={0.01} max={1} style={{ width: '100%', marginRight: 8 }} />
)}
</span>
<span className="column-3">
{getFieldDecorator(`target_contents[${k}]`, {
// validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
// whitespace: true,
message: "请填入目标内容",
}],
})(
<TextArea autosize placeholder="" style={{ width: '100%', marginRight: 8 }} />
)}
</span>
<span className="column-2 edu-txt-center">
{getFieldDecorator(`standard_grade[${k}]`, {
initialValue: 75,
// validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
// whitespace: true,
// type: 'integer',
message: "请先填写达成标准分",
}],
})(
<InputNumber placeholder="" step={1} min={0} max={100} style={{ width: '80%', marginRight: 8 }} />
)}
</span>
{/* <Input placeholder="" style={{ width: '80%', marginRight: 8 }} /> */}
<span className="column-3">
{ getFieldDecorator(`subitem_id[${k}]`, {
// validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
// whitespace: true,
// type: 'array',
message: "请先选择毕业要求指标点",
}],
})(
<Select
// mode="multiple"
// dropdownMatchSelectWidth={ false }
style={{ width: '100%', marginRight: 8 }}
>
{ requirements.map((item, index) => {
return ( <Option value={item.subitem_id.toString()} title={item.subitem_contents}>
{item.index} : {item.subitem_contents}
</Option> )
}) }
</Select>
)}
</span>
<span className="column-1 edu-txt-right">
{ !addOrDeleting && <a href="javascript:void(0)"
onClick={() => { this.onRemove(k) }}
className="color-grey-c mr15" data-tip-down="删除">
<i className="iconfont icon-shanchu font-15"></i>
</a> }
{ !addOrDeleting && <a href="javascript:void(0)"
onClick={() => { this.add(k, index + 1) }}
className="color-green show-FillTable"
data-tip-down="添加">
<i className="iconfont icon-tianjiafangda"
></i>
</a> }
</span>
</Form.Item>
</li>
));
return (
<Form onSubmit={this.handleSubmit}>
<div className="ListTableLine" id="show-Target-table">
<p className="clearfix">
<span className="column-1">项</span>
<span className="column-1">权重</span>
<span className="column-3">课程目标内容</span>
<span className="column-2 edu-txt-center">达成标准(分)</span>
<span className="column-3">对应毕业要求指标点</span>
{ !addOrDeleting && <span className="column-1 edu-txt-right"
>
<a href="javascript:void(0)" className="color-green show-FillTable"
onClick={ () => { this.add(-1, 0) }} data-tip-down="添加">
<i className="iconfont icon-tianjiafangda"></i></a>
</span> }
</p>
{formItems}
</div>
{/* <Form.Item {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={ () => { this.add(keys.length === 0 ? -1 : keys[keys.length - 1], keys.length - 1) }}
style={{ width: '60%' }}>
<Icon type="plus" /> Add field
</Button>
</Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit">Submit</Button>
</Form.Item> */}
<p class="clearfix" style={{ marginTop: '10px'}}>
{ this.state.errorMsg && <span class="c_red none ml30" id="error_tip" style={{ display: 'inline'}}>
{this.state.errorMsg}
</span> }
<a href="javascript:void(0)" class="defalutSubmitbtn mr20 fr" onClick={this.handleSubmit}>保存</a>
<a href="javascript:void(0)" class="defalutCancelbtn mr20 fr" onClick={() => { this.props.setEditableMode(false) } }>取消</a>
</p>
</Form>
);
}
}
const WrappedEditableCourseSupportSetting = Form.create({ name: 'dynamic_form_item' })(EditableCourseSupportSetting);
export default WrappedEditableCourseSupportSetting;

150
public/react/src/modules/ecs/subroute/ecCourseSupportSetting/ShowTableCourseSupportSetting.js
Unescape View File

@ -0,0 +1,150 @@
import React, { Component } from 'react';
import moment from 'moment'
import EditableCourseSupportSetting from './EditableCourseSupportSetting'
import { Form, Input, Icon, Button, Select } from 'antd';
const { Option } = Select;
const data = [
{
id: 0,
ecPosition: 1,
target_weight: 0.1,
target_contents: '理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。',
standard_grade: 60,
subitem_contents: '<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题'
},
{
id: 1,
ecPosition: 2,
target_weight: 0.1,
target_contents: '理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。',
standard_grade: 60,
subitem_contents: '<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题'
}
]
class ShowTableCourseSupportSetting extends Component {
componentDidMount = () => {
const course_targets = this.props.course_targets;
}
render() {
const course_targets = this.props.course_targets;
const is_manager = this.props.is_manager;
return (
<div className="ListTableLine" id="show-Target-table">
<p className="clearfix">
<span className="column-1">项</span>
<span className="column-1">权重</span>
<span className="column-3">课程目标内容</span>
<span className="column-2 edu-txt-center">达成标准(分)</span>
<span className="column-3">对应毕业要求指标点</span>
<span className="column-1 edu-txt-right">
{/* <a href="javascript:void(0)" className="color-green show-FillTable" data-tip-down="添加">
<i className="iconfont icon-tianjiafangda"></i>
</a> */}
{ is_manager && <a href="javascript:void(0)"
onClick={() => { this.props.setEditableMode(true)} }
class="color-green EditCourse" data-id="5" data-tip-down="编辑">
<i class="iconfont icon-bianjidaibeijing"></i>
</a> }
</span>
</p>
<div id="course_targets_list">
{ course_targets.map((item, index) => {
return ( <li className="clearfix" key={index}>
<span className="column-1">{ index + 1 }</span>
<span className="column-1">{ item.target_weight}</span>
<span className="column-3">{ item.target_contents}</span>
<span className="column-2 edu-txt-center">{ item.standard_grade }</span>
<span className="column-3">
<input type="hidden" value="70"></input>
{/* { item.subitem_id } */}
{item.index} : {item.subitem_contents}
</span>
{/* <span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/26', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="26" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span> */}
</li> )
})}
{/* <li className="clearfix">
<span className="column-1">1</span>
<span className="column-1">0.1</span>
<span className="column-3">理解数据管理技术和数据库技术的发展，区分不同数据模型的作用和特点，描述数据库系统的类型、结构、数据独立性。</span>
<span className="column-2 edu-txt-center">75</span>
<span className="column-3">
<input type="hidden" value="70"></input>
<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题
</span>
<span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/26', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="26" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span>
</li>
<li className="clearfix">
<span className="column-1">2</span>
<span className="column-1">0.1</span>
<span className="column-3">理解数据库系统管理和保护的基本概念和技术、应用系统提供的数据库管理方法和保护功能。</span>
<span className="column-2 edu-txt-center">75</span>
<span className="column-3">
<input type="hidden" value="70"></input>
<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题
</span>
<span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/27', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="27" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span>
</li>
<li className="clearfix">
<span className="column-1">3</span>
<span className="column-1">0.1</span>
<span className="column-3">理解关系模型的概念和特点，应用关系代数表达式描述数据的查询操作。</span>
<span className="column-2 edu-txt-center">75</span>
<span className="column-3">
<input type="hidden" value="70"></input>
<label>1-2</label>：能够运用相关的工程基础和专业知识辨别材料生产中出现的技术、工艺、质量等问题
</span>
<span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/28', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="28" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span>
</li>
<li className="clearfix">
<span className="column-1">4</span>
<span className="column-1">0.35</span>
<span className="column-3">安装、配置和选择主流的数据库管理系统，运用SQL语言实施数据库解决方案，包括数据定义、数据更新和数据查询等。</span>
<span className="column-2 edu-txt-center">75</span>
<span className="column-3">
<input type="hidden" value="84"></input>
<label>5-1</label>：能够选择、使用或开发恰当的技术、资源和工具
</span>
<span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/29', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="29" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span>
</li>
<li className="clearfix">
<span className="column-1">5</span>
<span className="column-1">0.35</span>
<span className="column-3">针对计算机工程问题，综合运用数据库设计知识，设计规范的数据库解决方案。</span>
<span className="column-2 edu-txt-center">75</span>
<span className="column-3">
<input type="hidden" value="76"></input>
<label>3-1</label>：能够分析材料应用的特定需求确定具体的研发目标
</span>
<span className="column-1 edu-txt-right">
<a href="javascript:void(0)" onclick="delete_confirm_box_2('/ec_course_targets/30', '确定要删除该课程目标吗')" className="color-grey-c mr15" data-tip-down="删除"><i className="iconfont icon-shanchu font-15"></i></a>
<a href="javascript:void(0)" className="color-green EditCourse" data-id="30" data-tip-down="编辑"><i className="iconfont icon-bianjidaibeijing"></i></a>
</span>
</li> */}
</div>
</div>
);
}
}
export default ShowTableCourseSupportSetting;

324
public/react/src/modules/ecs/subroute/ecCourseSupportSetting/index.js
Unescape View File

@ -0,0 +1,324 @@
import React, { Component } from 'react';
import moment from 'moment'
import EditableCourseSupportSetting from './EditableCourseSupportSetting'
import ShowTableCourseSupportSetting from './ShowTableCourseSupportSetting'
import { Form, Input, Icon, Button, Select } from 'antd';
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'
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
}
class EcCourseSupportSetting extends Component {
constructor(props) {
super(props)
this.state = {
editableMode: false
}
}
updateCourseTargets = (course_targets) => {
const ec_course_id = this.props.match.params.ec_course_id;
const url = `/ec_courses/${ec_course_id}/crud_targets`
// 后台数据存的weigths
course_targets.forEach( (item,index) => {
course_targets[index].weigths = item.target_weight
delete course_targets[index].target_weight
})
axios.post(url, {
"targets": course_targets
}
).then((response) => {
if (!response.data || response.data.status == -1) {
this.props.showModal('提示', '接口异常或无数据')
return ;
}
let map = this.getSubitemIdMap()
course_targets.forEach( (item,index) => {
course_targets[index].target_weight = item.weigths
course_targets[index].index = map[item.subitem_id].index
course_targets[index].subitem_contents = map[item.subitem_id].subitem_contents
delete course_targets[index].weigths
})
// subitem_contents
this.setState({ course_targets })
this.setEditableMode(false)
}).catch((error) => {
console.log(error)
})
}
getSubitemIdMap = () => {
if (!this.state.requirements) {
return {}
}
let map = {}
this.state.requirements.forEach( (item,index) => {
map[item.subitem_id] = item
})
return map;
}
fetchCourseTargets = () => {
const ec_course_id = this.props.match.params.ec_course_id;
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 })
} else {
this.props.showModal('提示', '接口异常或无数据')
// 服务端返回的数据有误
}
})
.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)=>{
// 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, {
// withCredentials: true,
})
.then((response) => {
if(response.status===200){
// if(response.data.allow_visit===false){
// window.location.href="/403"
// }
this.setState({
schooldata:response.data
})
}
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount = () => {
this.fetchCourseTargets();
const ec_course_id = this.props.match.params.ec_course_id;
this.getNavigationData(ec_course_id)
}
setEditableMode = (mode) => {
this.setState({ editableMode: mode })
}
render() {
let { editableMode, schooldata, is_manager } = this.state;
if (!schooldata) schooldata = {}
const course_targets = this.state.course_targets;
return (
<div className="newMain clearfix courseSupport">
<div className="educontent mb50 mt60">
<EcTitleCourseEvaluations
{...this.props}
schooldata={schooldata}
ecComponentState={'ecCompletion'}
ecpath={"ec_course_support_setting"}
></EcTitleCourseEvaluations>
{/* <p class="clearfix padding20-30 bor-bottom-greyE">
<span class="fl font-18">
<a href="/ec_major_schools/1/academic_years/1/ec_course_setting" class="color-grey-9">课程体系</a>
<span class="color-grey-9"> &gt; </span>
{schooldata && ( schooldata.ec_course_name || '')}
</span>
<a href="/ec_courses/1/export_ec_course_targets.xls" class="white-btn edu-blueback-btn fr"
style={{ 'marginTop': '4px' }}
>导出课程目标</a>
</p> */}
<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> >
<a className="TrainingTheory major_name"> {schooldata.ec_course_name}</a>
<span className="Importclassroomdata" style={{top: '22px'}}>
<a className="white-btn edu-blueback-btn fr mb10 mr10"
href={`/ec_courses/${this.props.match.params.ec_course_id}/export_ec_course_targets?format=xls`}
>导出课程目标</a>
</span>
</p>
<div style={{padding: '20px 21px'}} id="SystemParameters" className={"SystemParameters"}>
<a className="fl SystemParameters color4CACFF" style={{display:schooldata.ec_course_support_setting_url===null?"none":"block",marginLeft: '8px' }}
href={schooldata.ec_course_support_setting_url}>1.课程目标</a>
<a className="fl SystemParameters4CACFF ml40 color4D4D4D"
style={{display:schooldata.ec_course_reach_setting_url===null?"none":"block"}}
href={schooldata.ec_course_reach_setting_url}>2.课程考核方式与数据来源</a>
<a className="fl SystemParameters4CACFF ml40 color4D4D4D"
href={schooldata.score_level_setting_url}
>3.成绩等级设置</a>
<a className="fl SystemParameters4CACFF ml40 color4D4D4D"
style={{display:schooldata.evaluation_methods_url===null?"none":"block"}}
href={schooldata.evaluation_methods_url}>4.课程目标评价方法</a>
<a className="fl SystemParameters ml40 color4D4D4D"
style={{display:schooldata.competition_calculation_info_url===null?"none":"block"}}
href={schooldata.competition_calculation_info_url}>5.课程达成评价结果</a>
</div>
</div>
{/* && is_manager */}
{ course_targets&&course_targets.length>=0 ? (editableMode ?
<EditableCourseSupportSetting
setEditableMode={this.setEditableMode}
{...this.props}
{...this.state}
updateCourseTargets={this.updateCourseTargets}
></EditableCourseSupportSetting>
: <ShowTableCourseSupportSetting
setEditableMode={this.setEditableMode}
{...this.state}
></ShowTableCourseSupportSetting> ) : ''
}
{/* <EditableCourseSupportSetting
setEditableMode={this.setEditableMode}
></EditableCourseSupportSetting>
<ShowTableCourseSupportSetting
setEditableMode={this.setEditableMode}
></ShowTableCourseSupportSetting> */}
</div>
</div>
);
}
}
export default ECModalHOC() ( SnackbarHOC() ( TPMIndexHOC ( EcCourseSupportSetting ) ) );

44
public/react/src/modules/ecs/subroute/ecCourseSupportSetting/style.css
Unescape View File

@ -0,0 +1,44 @@
.courseSupport .ant-form-item-children {
display: flex;
}
/* @media (min-width: 576px) */
.courseSupport .ant-col-sm-offset-4 {
margin-left: 0;
}
.courseSupport .ant-form-explain {
display: none;
}
.courseSupport .ant-form-item {
margin-bottom: 6px;
}
.courseSupport textarea.ant-input {
min-height: 35px;
}
.courseSupport .ListTableLine .column-1 {
flex: 0 0 100px;
}
.courseSupport .ListTableLine .column-2 {
flex: 0 0 180px;
}
.courseSupport .ListTableLine .column-3 {
flex: 0 0 330px;
}
.SystemParameters {
min-height: 60px;
}
p {
margin-bottom: 0px;
}
div#show-Target-table {
background: #fff;
}
/* 火狐select宽度会根据长度变 */
.courseSupport .ant-select-selection--single {
max-width: 317px
}
Write Preview
Loading…
Cancel
Save