实践增加搜索功能

public/react/src/modules/paths/ShixunPathSearch.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import axios from 'axios';
-import { Pagination, Dropdown, Menu } from 'antd';
+import { Dropdown, Menu } from 'antd';
 import { getImageUrl } from 'educoder';
 import PathCard from "./ShixunPathCard";
 import UpgradeModals from '../modals/UpgradeModals';
 import './ShixunPaths.css';
+import KeywordList from '../tpm/shixuns/shixun-keyword-list';
+import btnUrl from '../tpm/shixuns/btn-new.png';
 
 class ShixunPathSearch extends Component {
   constructor(props) {
@@ -23,18 +25,18 @@ class ShixunPathSearch extends Component {
       sub_discipline_id: undefined
     }
   }
-  //切换列表状态
-  changeStatus = (value) => {
 
+  //适配器
+  onChangeLabel(value) {
+    let rs = value === 'new' ? 'updated_at' : 'myshixuns_scount'
     let { discipline_id, sub_discipline_id } = this.state;
     this.setState({
-      order: value,
+      order: rs,
       page: 1
     })
-    this.getList(value, discipline_id, sub_discipline_id, 1);
+    this.getList(rs, discipline_id, sub_discipline_id, 1)
   }
 
-
   //选择页数
   onChange = (pageNumber) => {
 
@@ -95,7 +97,16 @@ class ShixunPathSearch extends Component {
     })
   }
 
-  getList = (order, discipline_id, sub_discipline_id, page) => {
+  OnSearchInput = (value, type) => {
+    this.setState({
+      search: value,
+      page: 1
+    })
+    const { order, discipline_id, sub_discipline_id } = this.state
+    this.getList(order, discipline_id, sub_discipline_id, 1, value)
+  }
+
+  getList = (order, discipline_id, sub_discipline_id, page, keyword = '') => {
 
     let url = '/paths.json';
     axios.get(url, {
@@ -103,6 +114,7 @@ class ShixunPathSearch extends Component {
         sort: "desc",
         limit: 16,
         order: order,
+        keyword,
         page: page,
         discipline_id: discipline_id,
         sub_discipline_id: sub_discipline_id
@@ -120,7 +132,7 @@ class ShixunPathSearch extends Component {
   }
 
   //头部获取是否已经登录了
-  getUser = (url, type) => {
+  getUser = (url) => {
     if (this.props.checkIfLogin() === false) {
       this.props.showLoginDialog()
       return
@@ -238,26 +250,8 @@ class ShixunPathSearch extends Component {
             </ul>
           </div>
         </div>
-        <div className="mt20 educontent mb20 clearfix mainPageArray">
-          {/*<a href="javascript:void(0)" className={ order == "publish_time" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("publish_time")}>全部</a>*/}
-          {/*<a href="javascript:void(0)" className={ order == "mine" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("mine")}>我的</a>*/}
-          <span className={order == "updated_at" ? "active" : ""} onClick={() => this.changeStatus("updated_at")}>最新</span>
-          <span className={order == "myshixuns_count" ? "active" : ""} onClick={() => this.changeStatus("myshixuns_count")}>最热</span>
-          {this.props.user && this.props.user.main_site === false ? "" : this.props.Headertop === undefined ? "" : <a className={"fr font-16 bestChoose color-blue"} onClick={(url) => this.getUser("/paths/new")}>+新建实践课程</a>}
-          {this.props.user && this.props.user.main_site === true ? "" : this.props.Headertop === undefined ? "" :
-            pathstype === true ? "" : this.props.user && this.props.user.admin === true || this.props.user && this.props.user.is_teacher === true || this.props.user && this.props.user.business === true ? <a className={"fr font-16 bestChoose color-blue"} onClick={(url) => this.getUser("/paths/new")}>+新建实践课程</a> : ""
-          }
-          {/*<div className="fr mr5 search-new">*/}
-          {/*/!* <Search*/}
-          {/*placeholder="请输入路径名称进行搜索"*/}
-          {/*id="subject_search_input"*/}
-          {/*value={search}*/}
-          {/*onInput={this.inputSearchValue}*/}
-          {/*onSearch={this.searchValue}*/}
-          {/*autoComplete="off"*/}
-          {/*></Search> *!/*/}
-          {/*</div>*/}
-        </div>
+        <KeywordList btnUrl={btnUrl} onChangeLabel={this.onChangeLabel.bind(this)} OnSearchInput={this.OnSearchInput.bind(this)} onNewHandler={this.getUser.bind(this, '/paths/new')} btnStyle={{ top: '92px' }} />
+
         <PathCard {...this.props} {...this.state}></PathCard>
         {
           this.state.pathList === null ? "" : total_count > 16 &&

public/react/src/modules/tpm/shixuns/ShixunsIndex.js

@@ -6,6 +6,7 @@ import ShixunCardList from './shixun-keyword-list';
 import ShixunSearchBar from './shixun-search-bar';
 import ShixunCard from './shixun-card';
 import UpgradeModals from '../../modals/UpgradeModals';
+import GotoQQgroup from '../../../modal/GotoQQgroup'
 const queryString = require('query-string');
 import btnUrl from './btn-new.png'
 class ShixunsIndex extends Component {
@@ -13,6 +14,7 @@ class ShixunsIndex extends Component {
         super(props)
         this.state = {
             order_by: "new",
+            showQQ: false,
             page: 1,
             limit: 16,
             keyword: "",
@@ -278,7 +280,7 @@ class ShixunsIndex extends Component {
             console.log(error)
         });
     }
-    ShixunsState = (val, type, sorts) => {
+    ShixunsState = (type, sorts) => {
         // sort,
         let { tag_level, tag_id, page, limit, keyword, status, diff, sort } = this.state;
         let newsort = sorts ? sorts : sort;
@@ -341,8 +343,30 @@ class ShixunsIndex extends Component {
         this.shixunresultend(params)
     }
 
+    onNewHandler() {
+        const { checkIfLogin, showLoginDialog, checkIfProfileCompleted, showProfileCompleteDialog, current_user } = this.props
+        if (!checkIfLogin()) {
+            showLoginDialog()
+            return
+        }
+        if (!checkIfProfileCompleted()) {
+            showProfileCompleteDialog()
+            return
+        }
+        if (current_user && current_user.is_shixun_marker === false) {
+            this.setState(
+                { showQQ: true }
+            )
+            return
+        }
+        window.location.href = '/shixuns/new'
+    }
 
-
+    setShowQQ(v) {
+        this.setState({
+            showQQ: v
+        })
+    }
 
     shixunresultend = (params) => {
         let Url = `/shixuns.json`;
@@ -363,7 +387,7 @@ class ShixunsIndex extends Component {
         });
     }
     render() {
-        let { middleshixundata, typepvisible, pages, search_tags, keyword, parsedid, newtag_level, newpalce } = this.state;
+        let { middleshixundata, typepvisible, pages, search_tags, keyword, parsedid, newtag_level, newpalce, showQQ } = this.state;
 
         // console.log(this.state.updata)
         return (
@@ -413,14 +437,16 @@ class ShixunsIndex extends Component {
                     {...this.state}
                 />
 
+                {
+                    showQQ ? <GotoQQgroup goshowqqgtounp={showQQ} setgoshowqqgtounp={this.setShowQQ.bind(this)}></GotoQQgroup> :
+                        ""
+                }
                 <ShixunCardList
                     onChangeLabel={this.ShixunsState.bind(this)}
                     ShixunsSwitch={this.ShixunsSwitch.bind(this)}
                     Shixunsupcircles={this.Shixunsupcircles.bind(this)}
-                    allUpdatashixunlist={this.allUpdatashixunlist}
+                    onNewHandler={this.onNewHandler.bind(this)}
                     btnUrl={btnUrl}
-                    {...this.props}
-                    {...this.state}
                     OnSearchInput={this.OnSearchInput.bind(this)}
                 />
                 {/*下方图片*/}

public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx

@@ -1,5 +1,4 @@
 import React, { useState, Fragment } from 'react';
-import GotoQQgroup from '../../../modal/GotoQQgroup'
 import { Input, Icon } from 'antd'
 import './shixun-keyword-list.scss'
 
@@ -9,17 +8,17 @@ function AddonAfter({ callback }) {
 		<span>搜索</span>
 	</a>
 }
-export default ({ onChangeLabel, btnUrl, OnSearchInput, checkIfLogin, showLoginDialog, checkIfProfileCompleted, showProfileCompleteDialog, current_user }) => {
+export default ({ onChangeLabel, btnUrl, OnSearchInput, onNewHandler, btnStyle =
+	{} }) => {
 	const [data, setData] = useState({
 		type: 'new',
-		showQQ: false,
 		keyword: '',
 	})
 
 	function onChangeTag(e) {
 		const id = e.target.id
 		setData({ ...data, type: id })
-		onChangeLabel(false, id, "desc")
+		onChangeLabel(id, "desc")
 	}
 	function onSetKeyword(e) {
 		setData({ ...data, keyword: e.target.value })
@@ -31,27 +30,14 @@ export default ({ onChangeLabel, btnUrl, OnSearchInput, checkIfLogin, showLoginD
 		}
 	}
 
-	function setShowQQ(v) {
-		setData({ ...data, showQQ: v })
-	}
-
 	function onNewShiXun() {
-		if (!checkIfLogin()) {
-			showLoginDialog()
-			return
-		}
-		if (!checkIfProfileCompleted()) {
-			showProfileCompleteDialog()
-			return
-		}
-		if (current_user && current_user.is_shixun_marker === false) {
-			setShowQQ(true)
+		if (onNewHandler) {
+			onNewHandler()
 			return
 		}
-		window.location.href = '/shixuns/new'
 	}
 
-	const { type, keyword, showQQ } = data
+	const { type, keyword } = data
 	return (
 		<Fragment>
 			<div className="wrapper">
@@ -64,17 +50,11 @@ export default ({ onChangeLabel, btnUrl, OnSearchInput, checkIfLogin, showLoginD
 						<Input onChange={onSetKeyword} value={keyword} addonAfter={<AddonAfter callback={callback} />} defaultValue="" placeholder='请输入课程名称进行搜索' />
 					</div>
 				</div>
-				<a className="btn-new" onClick={onNewShiXun}>
+				<a className="btn-new" onClick={onNewShiXun} style={btnStyle}>
 					<img src={btnUrl} width={40} alt="创建实训" />
 				</a>
 			</div>
 
-			{
-				showQQ ?
-					<GotoQQgroup goshowqqgtounp={showQQ} setgoshowqqgtounp={setShowQQ}></GotoQQgroup>
-					:
-					""
-			}
 		</Fragment>
 
 	)