调整章节选择

public/react/src/modules/courses/coursesDetail/CoursesLeftNav.js

@@ -839,10 +839,25 @@ class Coursesleftnav extends Component{
 						 antIcon={this.state.antIcon}
            >
            </Modals>
+
            {
              this.state.chapterupdate===true?
-               <MyEduChapterupdate {...this.props} {...this.state} chapterupdate={this.state.chapterupdate} setchapterupdatefalse={this.setchapterupdatefalse}>
+               <div>
+                 <style>
+                   {
+                     `
+                 .ant-modal-body{
+                    padding-left: 33px !important;
+                    padding-right: 33px !important;
+                    padding-top: 27px !important;
+                    padding-bottom: 21px !important;
+                   }
+               `
+                   }
+                 </style>
+               <MyEduChapterupdate  {...this.props} {...this.state} chapterupdate={this.state.chapterupdate} setchapterupdatefalse={this.setchapterupdatefalse}>
                </MyEduChapterupdate>
+               </div>
                :
                ""
            }

public/react/src/modules/courses/coursesDetail/MyEduChapterupdate.js

@@ -1,15 +1,63 @@
 import React, { Component } from 'react';
 import {getImageUrl} from 'educoder';
-import { Modal,Checkbox} from 'antd';
+import { Modal,Checkbox,Tree} from 'antd';
 import axios from 'axios';
 import './chapterupdate.css'
+const { TreeNode } = Tree;
 //立即章节选择
+const treeData = [
+	{
+		title: '0-0',
+		key: '0-0',
+		children: [
+			{
+				title: '0-0-0',
+				key: '0-0-0',
+				children: [
+					{ title: '0-0-0-0', key: '0-0-0-0' },
+					{ title: '0-0-0-1', key: '0-0-0-1' },
+					{ title: '0-0-0-2', key: '0-0-0-2' },
+				],
+			},
+			{
+				title: '0-0-1',
+				key: '0-0-1',
+				children: [
+					{ title: '0-0-1-0', key: '0-0-1-0' },
+					{ title: '0-0-1-1', key: '0-0-1-1' },
+					{ title: '0-0-1-2', key: '0-0-1-2' },
+				],
+			},
+			{
+				title: '0-0-2',
+				key: '0-0-2',
+			},
+		],
+	},
+	{
+		title: '0-1',
+		key: '0-1',
+		children: [
+			{ title: '0-1-0-0', key: '0-1-0-0' },
+			{ title: '0-1-0-1', key: '0-1-0-1' },
+			{ title: '0-1-0-2', key: '0-1-0-2' },
+		],
+	},
+	{
+		title: '0-2',
+		key: '0-2',
+	},
+];
 class MyEduChapterupdate extends Component {
 
 	constructor(props) {
 		super(props);
 		this.state={
 			myeduchecked:false,
+			expandedKeys: ['0-0-0', '0-0-1'],
+			autoExpandParent: true,
+			checkedKeys: ['0-0','0-1','0-2'],
+			selectedKeys: [],
 		}
 	}
 
@@ -28,11 +76,43 @@ class MyEduChapterupdate extends Component {
 	//点击了选项
 	onChange=(e)=> {
 		this.setState({
-			myeduchecked:true,
+			myeduchecked:e.target.checked,
 		})
 		// console.log(`checked = ${e.target.checked}`);
 	}
 
+	onExpand =(expandedKeys) => {
+		console.log('onExpand', expandedKeys);
+		// if not set autoExpandParent to false, if children expanded, parent can not collapse.
+		// or, you can remove all expanded children keys.
+		this.setState({
+			expandedKeys,
+			autoExpandParent: false,
+		});
+	};
+
+	onCheck = (checkedKeys) => {
+		console.log('onCheck', checkedKeys);
+		this.setState({ checkedKeys });
+	};
+
+	onSelect = (selectedKeys, info) => {
+		console.log('onSelect', info);
+		this.setState({ selectedKeys });
+	};
+
+	renderTreeNodes = (data) =>
+		data.map(item => {
+			if (item.children) {
+				return (
+					<TreeNode title={item.title} key={item.key} dataRef={item}>
+						{this.renderTreeNodes(item.children)}
+					</TreeNode>
+				);
+			}
+			return <TreeNode key={item.key} {...item} />;
+		});
+
 	render() {
 
 		return(
@@ -55,12 +135,27 @@ class MyEduChapterupdate extends Component {
 						heigth:"459px",
 						width:"100%"
 					}}>
-						<p style={{fontSize: "16px"}}>内容</p></div>
+						<Tree
+							checkable
+							onExpand={this.onExpand}
+							expandedKeys={this.state.expandedKeys}
+							autoExpandParent={this.state.autoExpandParent}
+							onCheck={this.onCheck}
+							checkedKeys={this.state.checkedKeys}
+							onSelect={this.onSelect}
+							selectedKeys={this.state.selectedKeys}
+						>
+							{this.renderTreeNodes(treeData)}
+						</Tree>
+
+					</div>
 				</div>
-				<div className="yslcheckbox">
+				<div className="yslcheckbox mt40">
 					<div className="mr15"><Checkbox  onChange={(e) => this.onChange(e)}  checked={this.state.myeduchecked}></Checkbox></div>
-					<div><span style={{color:"#999999"}}>已选择</span><span style={{color:"#E65656"}}>3</span><span style={{color:"#999999"}}> 个章节 </span><span style={{color:"#E65656"}}>5</span><span style={{color:"#999999"}}>个实训</span></div>
-					<div className="yslcheckbox2"><span className="font-14" style={{
+					<div style={{
+						width:"100%"
+					}}><span style={{color:"#999999"}}>已选择</span><span style={{color:"#E65656"}}>3</span><span style={{color:"#999999"}}> 个章节 </span><span style={{color:"#E65656"}}>5</span><span style={{color:"#999999"}}>个实训</span></div>
+					<div className="yslcheckbox2" style={{	width:"100%"}}><span className="font-14" style={{
 						color:"#A3A3A3",
 					}}>勾选则在课堂中显示，否则不显示</span></div>
 				</div>

public/react/src/modules/courses/coursesDetail/chapterupdate.css

@@ -5,4 +5,5 @@
 .yslcheckbox2{
         display: flex;
         flex-direction: row-reverse;
+
 }