实践增加搜索功能

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

@@ -7,6 +7,8 @@ import UpgradeModals from '../modals/UpgradeModals';
 import Pagination from '@icedesign/base/lib/pagination';
 import '@icedesign/base/lib/pagination/style.js';
 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) {
@@ -26,19 +28,17 @@ class ShixunPathSearch extends Component{
     }
   }
 
-
-  //切换列表状态
-  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) => {
 
@@ -83,9 +83,11 @@ class ShixunPathSearch extends Component{
 
   getdisciplines = () => {
     let url = '/disciplines.json';
-    axios.get(url,{params:{
+    axios.get(url, {
+      params: {
         source: "subject"
-      }}).then((result)=>{
+      }
+    }).then((result) => {
       if (result.status == 200) {
         // console.log(result.data.disciplines)
         this.setState({
@@ -97,17 +99,29 @@ 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,{params:{
+    axios.get(url, {
+      params: {
         sort: "desc",
         limit: 16,
         order: order,
+        keyword,
         page: page,
         discipline_id: discipline_id,
         sub_discipline_id: sub_discipline_id
-			}}).then((result)=>{
+      }
+    }).then((result) => {
       if (result.status == 200) {
         this.setState({
           pathList: result.data.subjects,
@@ -120,7 +134,7 @@ class ShixunPathSearch extends Component{
   }
 
   //头部获取是否已经登录了
-  getUser=(url,type)=>{
+  getUser = (url) => {
     if (this.props.checkIfLogin() === false) {
       this.props.showLoginDialog()
       return
@@ -238,26 +252,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()
+		if (onNewHandler) {
+			onNewHandler()
 			return
 		}
-		if (!checkIfProfileCompleted()) {
-			showProfileCompleteDialog()
-			return
-		}
-		if (current_user && current_user.is_shixun_marker === false) {
-			setShowQQ(true)
-			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>
 
 	)