add selector

dev_new_shixunsrepository
tangjiang 5 years ago
parent 7412f779ad
commit 8ac904a82d

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-11-20 23:10:48 * @Date: 2019-11-20 23:10:48
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-30 09:19:52 * @LastEditTime : 2019-12-30 14:44:45
*/ */
const CONST = { const CONST = {
jcLabel: { jcLabel: {
@ -15,7 +15,7 @@ const CONST = {
category: '课程', category: '课程',
openOrNot: '公开程序', openOrNot: '公开程序',
timeLimit: '时间限制', timeLimit: '时间限制',
// knowledge: '知识点' knowledge: '知识点'
}, },
fontSetting: { fontSetting: {
title: '代码格式', title: '代码格式',

@ -4,12 +4,14 @@
* @Github: * @Github:
* @Date: 2019-12-30 13:51:19 * @Date: 2019-12-30 13:51:19
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-30 14:28:17 * @LastEditTime : 2019-12-30 16:54:30
*/ */
import './index.scss'; import './index.scss';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Select } from 'antd'; import { Select } from 'antd';
const { Option } = Select;
function KnowLedge (props) { function KnowLedge (props) {
const { const {
@ -23,8 +25,11 @@ function KnowLedge (props) {
const [selectValue, setSelectValue] = useState(values); const [selectValue, setSelectValue] = useState(values);
// 渲染下拉选项 // 渲染下拉选项
const renderOptions = () => { const renderOptions = (options = []) => {
console.log('下拉选择: ', options);
return options.map((opt, i) => (
<Option key={`opt_${i}`} value={opt}>{opt}</Option>
));
} }
const handleSelectChange = (value) => { const handleSelectChange = (value) => {
console.log(value); console.log(value);
@ -34,9 +39,12 @@ function KnowLedge (props) {
const renderSelect = (options, values) => { const renderSelect = (options, values) => {
return ( return (
<Select <Select
mode="multiple"
placeholder="请选择" placeholder="请选择"
style={{ width: '100%' }} style={{ width: '100%' }}
onChange={handleSelectChange} onChange={handleSelectChange}
autoClearSearchValue={true}
maxTagCount={0}
> >
{renderOptions(options)} {renderOptions(options)}
</Select> </Select>

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-11-20 10:35:40 * @Date: 2019-11-20 10:35:40
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-30 11:05:14 * @LastEditTime : 2019-12-30 16:42:36
*/ */
import './index.scss'; import './index.scss';
// import 'katex/dist/katex.css'; // import 'katex/dist/katex.css';
@ -18,6 +18,7 @@ import CONST from '../../../../../constants';
import { toStore } from 'educoder'; // 保存和读取store值 import { toStore } from 'educoder'; // 保存和读取store值
// import Wrapper from '../../../../../common/reactQuill'; // import Wrapper from '../../../../../common/reactQuill';
import QuillForEditor from '../../../../../common/quillForEditor'; import QuillForEditor from '../../../../../common/quillForEditor';
import KnowLedge from '../../../components/knowledge';
const scrollIntoView = require('scroll-into-view'); const scrollIntoView = require('scroll-into-view');
const {jcLabel} = CONST; const {jcLabel} = CONST;
const FormItem = Form.Item; const FormItem = Form.Item;
@ -59,7 +60,8 @@ class EditTab extends React.Component {
scrollHeight: 0, // 滚动元素的高度 scrollHeight: 0, // 滚动元素的高度
top: 500, top: 500,
bottom: 20, bottom: 20,
offsetTop: 0 offsetTop: 0,
knowledges: ['HTML', 'CSS', 'JS', 'REACT']
} }
} }
@ -131,8 +133,21 @@ class EditTab extends React.Component {
} }
// 改变分类 // 改变分类
handleChangeCategory = (value) => { handleChangeCategory = (value) => {
console.log(value); // 课程下拉值变化时, 同步更新知识点
// this.props.validateOjCategory(value); const { courseQuestions } = this.props;
courseQuestions.forEach(item => {
if (value[0] && item.id === value[0]) {
item.sub_disciplines && item.sub_disciplines.forEach(c => {
if (value[1] && c.id === value[1]) {
// tempArr = c.tag_disciplines || [];
console.log('+++++', c.tag_disciplines);
this.setState({
knowledges: c.tag_disciplines || []
});
}
});
}
});
} }
// 改变公开程序 // 改变公开程序
handleChangeOpenOrNot = (value) => { handleChangeOpenOrNot = (value) => {
@ -154,6 +169,7 @@ class EditTab extends React.Component {
openTestCodeIndex = [], openTestCodeIndex = [],
courseQuestions courseQuestions
} = this.props; } = this.props;
const {knowledges} = this.state;
// 表单label // 表单label
const myLabel = (name, subTitle) => { const myLabel = (name, subTitle) => {
if (subTitle) { if (subTitle) {
@ -259,8 +275,8 @@ class EditTab extends React.Component {
obj.value = item.id; obj.value = item.id;
obj.label = item.name; obj.label = item.name;
// 当item下还有子元素时递归调用 // 当item下还有子元素时递归调用
if (item.sub_disciplines || item.tag_disciplines) { if (item.sub_disciplines) {
arrs = item.sub_disciplines || item.tag_disciplines; arrs = item.sub_disciplines;
obj.children = []; obj.children = [];
loop(arrs, obj.children); loop(arrs, obj.children);
} }
@ -297,7 +313,6 @@ class EditTab extends React.Component {
return ( return (
<Cascader <Cascader
options={tempArr} options={tempArr}
value={[1,1,1]}
expandTrigger="hover" expandTrigger="hover"
onChange={this.handleChangeCategory} onChange={this.handleChangeCategory}
/> />
@ -337,8 +352,14 @@ class EditTab extends React.Component {
{ renderCourseQuestion(courseQuestions)} { renderCourseQuestion(courseQuestions)}
</FormItem> </FormItem>
<FormItem> <FormItem
colon={ false }
className='input_area flex_100'
label={<span>{myLabel(jcLabel['knowledge'])}</span>}
>
<KnowLedge
options={knowledges}
/>
</FormItem> </FormItem>
<FormItem <FormItem

Loading…
Cancel
Save