From f0d664bd9ac307ffc140458f1f6438c80a3e4e9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=9E=97?= <904079904@qq.com>
Date: Mon, 9 Sep 2019 20:18:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=AB=A0=E8=8A=82=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../courses/coursesDetail/CoursesLeftNav.js   |  17 ++-
 .../coursesDetail/MyEduChapterupdate.js       | 107 +++++++++++++++++-
 .../courses/coursesDetail/chapterupdate.css   |   1 +
 3 files changed, 118 insertions(+), 7 deletions(-)

diff --git a/public/react/src/modules/courses/coursesDetail/CoursesLeftNav.js b/public/react/src/modules/courses/coursesDetail/CoursesLeftNav.js
index 166dc5da5..a03d4e522 100644
--- a/public/react/src/modules/courses/coursesDetail/CoursesLeftNav.js
+++ b/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>
                :
                ""
            }
diff --git a/public/react/src/modules/courses/coursesDetail/MyEduChapterupdate.js b/public/react/src/modules/courses/coursesDetail/MyEduChapterupdate.js
index 7a17a9ad3..eeb0bc199 100644
--- a/public/react/src/modules/courses/coursesDetail/MyEduChapterupdate.js
+++ b/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>
diff --git a/public/react/src/modules/courses/coursesDetail/chapterupdate.css b/public/react/src/modules/courses/coursesDetail/chapterupdate.css
index 8e9dd4db0..7d0853148 100644
--- a/public/react/src/modules/courses/coursesDetail/chapterupdate.css
+++ b/public/react/src/modules/courses/coursesDetail/chapterupdate.css
@@ -5,4 +5,5 @@
 .yslcheckbox2{
         display: flex;
         flex-direction: row-reverse;
+
 }
\ No newline at end of file