题库-公用组件

public/react/src/modules/user/usersInfo/banks/BanksIndex.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
 
+import { Breadcrumb } from 'antd';
 import { SnackbarHOC } from 'educoder';
 import { TPMIndexHOC } from '../../../tpm/TPMIndexHOC';
 import { CNotificationHOC } from '../../../courses/common/CNotificationHOC'
@@ -19,31 +20,62 @@ const GtopicBanksAnswer = Loadable({
 	loading: Loading,
 })
 
+const BanksTabIndex = Loadable({
+	loader: () => import('./BanksTabIndex'),
+	loading: Loading,
+})
+
 class BanksIndex extends Component{
   constructor(props){
     super(props);
+    this.state={
+      crumbData:undefined
+    }
   }
+
+  initPublic = (crumbData) =>{
+    this.setState({
+      crumbData
+    })
+  }
+
   render(){
+    let { crumbData }=this.state
+    const common = {
+      initPublic:this.initPublic
+    }
     return(
       <div className="educontent">
+        {
+           crumbData &&
+           <Breadcrumb separator=">" className="breadcrumb">
+            <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
+            {
+              crumbData.crumbArray && crumbData.crumbArray.map((item,key)=>{
+                return(
+                  <Breadcrumb.Item href={item.to || ""}>{item.content}</Breadcrumb.Item>
+                )
+              })
+            }          
+          </Breadcrumb>
+        }
         
-        <Switch {...this.props}>
+        <p className="clearfix mt20 mb20">
+          <span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{crumbData && crumbData.title}</span>
+          {
+            crumbData && crumbData.is_public && <span className="bank_is_public">公开</span>
+          }
+        </p>
 
-          <Route path='/banks/gtopic/:bankId/answer' 
+        <Switch {...this.props}>
-            render={
-              (props) => {
-                return (<GtopicBanksAnswer {...this.props} {...props} {...this.state} />)
-              }
-          }></Route>
 
           <Route path='/banks/gtopic/:bankId' 
             render={
               (props) => {
-                return (<GtopicBanks {...this.props} {...props} {...this.state} />)
+                return (<BanksTabIndex {...this.props} {...props} {...this.state} {...common}/>)
               }
           }></Route>
           
-          
         </Switch>
 
       </div>

public/react/src/modules/user/usersInfo/banks/BanksTabIndex.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+
+import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+
+import { SnackbarHOC } from 'educoder';
+import { TPMIndexHOC } from '../../../tpm/TPMIndexHOC';
+import { CNotificationHOC } from '../../../courses/common/CNotificationHOC'
+
+import Loadable from 'react-loadable';
+import Loading from '../../../../Loading';
+
+import BanksMenu from './banksMenu'
+// 毕设选题
+const GtopicBanks = Loadable({
+	loader: () => import('./GtopicBanks'),
+	loading: Loading,
+})
+const GtopicBanksAnswer = Loadable({
+	loader: () => import('./GtopicBanksAnswer'),
+	loading: Loading,
+})
+
+class BanksTabIndex extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      banksMenu:undefined
+    }
+  }
+
+  initPublic = (crumbData,menuData) =>{
+    this.setState({
+      banksMenu:menuData
+    })
+    this.props.initPublic(crumbData);
+  }
+
+  render(){
+    let{
+      banksMenu      
+    }=this.state
+
+    const common={
+      initPublic:this.initPublic,
+    }
+    return(
+      <React.Fragment>
+        {
+          banksMenu && 
+          <BanksMenu 
+            banksMenu={banksMenu}
+            {...this.props}
+            {...this.state} 
+            {...common}
+          ></BanksMenu>
+        }
+        <Switch {...this.props}>
+
+          <Route path='/banks/gtopic/:bankId/answer' 
+            render={
+              (props) => {
+                return (<GtopicBanksAnswer {...this.props} {...props} {...this.state} {...common} />)
+              }
+          }></Route>
+
+          <Route path='/banks/gtopic/:bankId' 
+            render={
+              (props) => {
+                return (<GtopicBanks {...this.props} {...props} {...this.state} {...common} />)
+              }
+          }></Route>
+
+        </Switch>
+      </React.Fragment>
+    )
+  }
+}
+export default (BanksTabIndex);

public/react/src/modules/user/usersInfo/banks/GtopicBanks.js

@@ -1,40 +1,37 @@
 import React, { Component } from 'react';
 
-import { Breadcrumb } from 'antd';
-
 import "../usersInfo.css"
 import "../../../courses/css/members.css"
 import "../../../courses/css/Courses.css"
 
-import BanksMenu from './banksMenu'
 
 class GtopicBanks extends Component{
   constructor(props){
     super(props);
   }
+  componentDidMount = () =>{
+    let bankId = this.props.match.params.bankId
+    const crumbData={
+      title:'MySQL数据库编程开发实训（基础篇）111',
+      is_public:true,
+      crumbArray:[
+        {content:'详情'},
+      ]
+    }
+    const menuData={
+      tab:'0',
+      menuArray:[
+        {to:'/banks/gtopic/1',content:'内容详情'},
+        {to:'/banks/gtopic/1/answer',content:'参考答案'},
+      ],
+      category:'topic',
+      id:bankId
+    }
+    this.props.initPublic(crumbData,menuData);
+  }
   render(){
-    const menuArray=[
-      {content:'内容详情',to:'/banks/gtopic/1'},
-      {content:'参考答案',to:'/banks/gtopic/1/answer'}
-    ]
-    let {bankId}=this.props.match.params;
-    console.log(bankId)
     return(
       <div>
-        <Breadcrumb separator=">" className="breadcrumb">
-          <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
-          <Breadcrumb.Item>详情</Breadcrumb.Item>
-        </Breadcrumb>
-
-        <BanksMenu 
-        id={bankId}
-        tab={0}
-        title={'MySQL数据库编程开发实训（基础篇）'}
-        is_public={true}
-        menuArray={menuArray}
-        {...this.props}
-        ></BanksMenu>
-
         
       </div>
     )

public/react/src/modules/user/usersInfo/banks/GtopicBanksAnswer.js

@@ -1,38 +1,35 @@
 import React, { Component } from 'react';
 
-import { Breadcrumb } from 'antd';
-
 import "../usersInfo.css"
-import "../../../courses/css/members.css"
-import "../../../courses/css/Courses.css"
-
-import BanksMenu from './banksMenu'
 
 class GtopicBanksAnswer extends Component{
   constructor(props){
     super(props);
   }
+  componentDidMount = () =>{
+    let bankId = this.props.match.params.bankId
+    const crumbData={
+      title:'MySQL数据库编程开发实训（基础篇）111',
+      is_public:true,
+      crumbArray:[
+        {content:'详情'},
+      ]
+    }
+    const menuData={
+      tab:'1',
+      menuArray:[
+        {to:'/banks/gtopic/1',content:'内容详情'},
+        {to:'/banks/gtopic/1/answer',content:'参考答案'},
+      ],
+      category:'topic',
+      id:bankId
+    }
+    this.props.initPublic(crumbData,menuData);
+  }
   render(){
-    const menuArray=[
-      {content:'内容详情',to:'/banks/gtopic/1'},
-      {content:'参考答案',to:'/banks/gtopic/1/answer'}
-    ]
     return(
       <div>
-        <Breadcrumb separator=">" className="breadcrumb">
+        answer
-          <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
-          <Breadcrumb.Item>详情</Breadcrumb.Item>
-        </Breadcrumb>
-
-        <BanksMenu 
-        tab={1}
-        title={'MySQL数据库编程开发实训（基础篇）'}
-        is_public={true}
-        menuArray={menuArray}
-        {...this.props}
-        ></BanksMenu>
-
-
       </div>
     )
   }

public/react/src/modules/user/usersInfo/banks/banksMenu.js

@@ -12,21 +12,15 @@ class BanksMenu extends Component{
     super(props);
   }
   render(){
-    let { menuArray , title , is_public , tab } = this.props;
+    let { banksMenu } = this.props;
     return(
-      <div>
+      <div className="clearfix bor-bottom-greyE edu-back-white" style={{padding:"2px 30px"}}>
-        <p className="clearfix mt20 mb20">
+        {
-          <span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{title}</span>
+          banksMenu &&
-          {
-            is_public && <span className="bank_is_public">公开</span>
-          }
-        </p>
-
-        <div className="clearfix bor-bottom-greyE edu-back-white" style={{padding:"2px 30px"}}>
           <div className="task_menu_ul fl">
-            <Menu mode="horizontal" defaultSelectedKeys={`${tab}`}>
+            <Menu mode="horizontal" selectedKeys={[`${banksMenu && banksMenu.tab}`]}>
               {
-                menuArray && menuArray.map((item,key)=>{
+                banksMenu.menuArray && banksMenu.menuArray.map((item,key)=>{
                   return(
                     <Menu.Item key={key}><Link to={`${item.to}`}>{item.content}</Link></Menu.Item>
                   )
@@ -34,12 +28,13 @@ class BanksMenu extends Component{
               }
             </Menu>
           </div>
-          <span className="fr mt18">
+        }
-            <WordsBtn to={''} style="blue" className="ml20 font-16">删除</WordsBtn>
+        
-            <WordsBtn to={''} style="blue" className="ml20 font-16">编辑</WordsBtn>
+        <span className="fr mt18">
-            <WordsBtn to={''} style="blue" className="ml20 font-16">发送</WordsBtn>
+          <WordsBtn to={''} style="blue" className="ml20 font-16">删除</WordsBtn>
-          </span>
+          <WordsBtn to={''} style="blue" className="ml20 font-16">编辑</WordsBtn>
-        </div>
+          <WordsBtn to={''} style="blue" className="ml20 font-16">发送</WordsBtn>
+        </span>
       </div>
     )
   }