m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

实践增加搜索功能

Browse Source
video_transcode
harry 5 years ago
parent a190075fc5
commit a85f6ef423
3 changed files with 188 additions and 186 deletions
Show Stats Download Patch File Download Diff File

302
public/react/src/modules/paths/ShixunPathSearch.js
Unescape View File

@ -1,164 +1,178 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from 'axios'; import axios from 'axios';
import {Dropdown,Menu} from 'antd'; import { Dropdown, Menu } from 'antd';
import {getImageUrl} from 'educoder'; import { getImageUrl } from 'educoder';
import PathCard from "./ShixunPathCard"; import PathCard from "./ShixunPathCard";
import UpgradeModals from '../modals/UpgradeModals'; import UpgradeModals from '../modals/UpgradeModals';
import Pagination from '@icedesign/base/lib/pagination'; import Pagination from '@icedesign/base/lib/pagination';
import '@icedesign/base/lib/pagination/style.js'; import '@icedesign/base/lib/pagination/style.js';
import './ShixunPaths.css'; import './ShixunPaths.css';
import KeywordList from '../tpm/shixuns/shixun-keyword-list';
import btnUrl from '../tpm/shixuns/btn-new.png';
class ShixunPathSearch extends Component{ class ShixunPathSearch extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
order:"updated_at", order: "updated_at",
select:undefined, select: undefined,
search:"", search: "",
page:1, page: 1,
pathList:null, pathList: null,
sortList:'', sortList: '',
total_count:0, total_count: 0,
sort:"desc", sort: "desc",
limit:16, limit: 16,
discipline_id:undefined, discipline_id: undefined,
sub_discipline_id:undefined sub_discipline_id: undefined
} }
} }
//适配器
//切换列表状态 onChangeLabel(value) {
changeStatus=(value)=>{ let rs = value === 'new' ? 'updated_at' : 'myshixuns_scount'
let { discipline_id, sub_discipline_id } = this.state;
let {discipline_id,sub_discipline_id }=this.state;
this.setState({ this.setState({
order:value, order: rs,
page:1 page: 1
}) })
this.getList(value,discipline_id,sub_discipline_id,1); this.getList(rs, discipline_id, sub_discipline_id, 1)
} }
//选择页数 //选择页数
onChange=(pageNumber)=> { onChange = (pageNumber) => {
let { order,discipline_id,sub_discipline_id }=this.state; let { order, discipline_id, sub_discipline_id } = this.state;
this.setState({ this.setState({
page:pageNumber page: pageNumber
}) })
this.getList(order,discipline_id,sub_discipline_id,pageNumber); this.getList(order, discipline_id, sub_discipline_id, pageNumber);
} }
//顶部分类 //顶部分类
changeSelect=(e,tag_id,sum)=>{ changeSelect = (e, tag_id, sum) => {
this.setState({ this.setState({
order:"updated_at", order: "updated_at",
discipline_id:tag_id, discipline_id: tag_id,
page:1, page: 1,
sub_discipline_id:undefined sub_discipline_id: undefined
}) })
let { order }=this.state; let { order } = this.state;
this.getList(order,tag_id,undefined,1 ); this.getList(order, tag_id, undefined, 1);
e.stopPropagation(); e.stopPropagation();
} }
componentDidMount(){ componentDidMount() {
document.title="实践课程"; document.title = "实践课程";
const upsystem=`/users/system_update.json`; const upsystem = `/users/system_update.json`;
axios.get(upsystem).then((response)=>{ axios.get(upsystem).then((response) => {
let updata=response.data; let updata = response.data;
this.setState({ this.setState({
updata:updata updata: updata
}) })
}).catch((error)=>{ }).catch((error) => {
console.log(error); console.log(error);
}) })
this.getdisciplines() this.getdisciplines()
let { order,discipline_id,sub_discipline_id,page }=this.state; let { order, discipline_id, sub_discipline_id, page } = this.state;
this.getList(order,discipline_id,sub_discipline_id,page ); this.getList(order, discipline_id, sub_discipline_id, page);
} }
getdisciplines=()=>{ getdisciplines = () => {
let url='/disciplines.json'; let url = '/disciplines.json';
axios.get(url,{params:{ axios.get(url, {
source:"subject" params: {
}}).then((result)=>{ source: "subject"
if(result.status==200){ }
// console.log(result.data.disciplines) }).then((result) => {
if (result.status == 200) {
// console.log(result.data.disciplines)
this.setState({ this.setState({
sortList:result.data.disciplines sortList: result.data.disciplines
}) })
} }
}).catch((error)=>{ }).catch((error) => {
console.log(error); console.log(error);
}) })
} }
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)
}
let url='/paths.json'; getList = (order, discipline_id, sub_discipline_id, page, keyword = '') => {
axios.get(url,{params:{
sort:"desc", let url = '/paths.json';
limit:16, axios.get(url, {
order:order, params: {
page:page, sort: "desc",
discipline_id:discipline_id, limit: 16,
sub_discipline_id:sub_discipline_id order: order,
}}).then((result)=>{ keyword,
if(result.status==200){ page: page,
discipline_id: discipline_id,
sub_discipline_id: sub_discipline_id
}
}).then((result) => {
if (result.status == 200) {
this.setState({ this.setState({
pathList:result.data.subjects, pathList: result.data.subjects,
total_count:result.data.total_count total_count: result.data.total_count
}) })
} }
}).catch((error)=>{ }).catch((error) => {
console.log(error); console.log(error);
}) })
} }
//头部获取是否已经登录了 //头部获取是否已经登录了
getUser=(url,type)=>{ getUser = (url) => {
if(this.props.checkIfLogin()===false){ if (this.props.checkIfLogin() === false) {
this.props.showLoginDialog() this.props.showLoginDialog()
return return
} }
if(this.props.checkIfProfileCompleted()===false){ if (this.props.checkIfProfileCompleted() === false) {
this.props.showProfileCompleteDialog() this.props.showProfileCompleteDialog()
return return
} }
if(url !== undefined || url!==""){ if (url !== undefined || url !== "") {
this.props.history.push(url); this.props.history.push(url);
} }
} }
getshixunchildValues=(e,id,item)=>{ getshixunchildValues = (e, id, item) => {
this.setState({ this.setState({
discipline_id:item.id, discipline_id: item.id,
sub_discipline_id:id, sub_discipline_id: id,
}) })
let { order,page }=this.state; let { order, page } = this.state;
this.getList(order,item.id,id,page ); this.getList(order, item.id, id, page);
e.stopPropagation(); e.stopPropagation();
} }
getmenu=(list,item)=>{ getmenu = (list, item) => {
return( return (
<Menu> <Menu>
<Menu.Item> <Menu.Item>
<div className="mt5 subshaicontent-part"> <div className="mt5 subshaicontent-part">
<div className="sub-Item clearfix"> <div className="sub-Item clearfix">
{ {
list.map((tag,e)=>{ list.map((tag, e) => {
return( return (
<a className={parseInt(this.state.sub_discipline_id)===tag.id?"shixun_repertoire mr20 color-blue":"shixun_repertoire mr20"} <a className={parseInt(this.state.sub_discipline_id) === tag.id ? "shixun_repertoire mr20 color-blue" : "shixun_repertoire mr20"}
key={e} id={tag.id} name={tag.id} rel="subshaicontent" onClick={(e)=>this.getshixunchildValues(e,tag.id,item)}>{tag.name}</a> key={e} id={tag.id} name={tag.id} rel="subshaicontent" onClick={(e) => this.getshixunchildValues(e, tag.id, item)}>{tag.name}</a>
) )
}) })
} }
@ -166,18 +180,18 @@ class ShixunPathSearch extends Component{
</div> </div>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
) )
} }
render() { render() {
let { order,sortList,search,page,total_count,discipline_id }=this.state; let { order, sortList, search, page, total_count, discipline_id } = this.state;
let pathstype=false; let pathstype = false;
if(this.props&&this.props.mygetHelmetapi!=null){ if (this.props && this.props.mygetHelmetapi != null) {
let paths="/paths"; let paths = "/paths";
this.props.mygetHelmetapi.navbar.map((item,key)=>{ this.props.mygetHelmetapi.navbar.map((item, key) => {
var reg = RegExp(item.link); var reg = RegExp(item.link);
if(paths.match(reg)){ if (paths.match(reg)) {
if(item.hidden===true){ if (item.hidden === true) {
pathstype=true pathstype = true
} }
} }
@ -185,21 +199,21 @@ class ShixunPathSearch extends Component{
} }
return ( return (
<div> <div>
{this.state.updata===undefined?"":<UpgradeModals {this.state.updata === undefined ? "" : <UpgradeModals
{...this.state} {...this.state}
/>} />}
<style> <style>
{ {
` `
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px !important; width: 0px !important;
} }
.pathImg{ .pathImg{
width: 100%; width: 100%;
height: 300px; height: 300px;
background-image: url(${getImageUrl(this.props.mygetHelmetapi&&this.props.mygetHelmetapi.subject_banner_url===null?`images/path/path.png`:this.props.mygetHelmetapi&&this.props.mygetHelmetapi.subject_banner_url)}); background-image: url(${getImageUrl(this.props.mygetHelmetapi && this.props.mygetHelmetapi.subject_banner_url === null ? `images/path/path.png` : this.props.mygetHelmetapi && this.props.mygetHelmetapi.subject_banner_url)});
background-color: #000a4f; background-color: #000a4f;
/* background-size: cover; */ /* background-size: cover; */
background-position: center; background-position: center;
@ -217,57 +231,39 @@ class ShixunPathSearch extends Component{
} }
a{text-decoration:none !important;} a{text-decoration:none !important;}
` `
} }
</style> </style>
<div className="pr"> <div className="pr">
<div className="pathImg"></div> <div className="pathImg"></div>
<div className="edu-back-white padding20 pathIndexNav"> <div className="edu-back-white padding20 pathIndexNav">
<ul className="educontent clearfix"> <ul className="educontent clearfix">
<li className={discipline_id > 0 ? "" : "active"}><a onClick={(e)=>this.changeSelect(e,undefined)}>全部</a></li> <li className={discipline_id > 0 ? "" : "active"}><a onClick={(e) => this.changeSelect(e, undefined)}>全部</a></li>
{ {
sortList && sortList.map((item,key)=>{ sortList && sortList.map((item, key) => {
return( return (
<li className={discipline_id == `${item.id}` ? "active" : ""} onClick={(e)=>this.changeSelect(e,`${item.id}`,item.sub_disciplines.length)} key={key}> <li className={discipline_id == `${item.id}` ? "active" : ""} onClick={(e) => this.changeSelect(e, `${item.id}`, item.sub_disciplines.length)} key={key}>
<Dropdown disabled={item.sub_disciplines.length===0} overlay={()=>this.getmenu(item.sub_disciplines,item)} placement="bottomCenter"> <Dropdown disabled={item.sub_disciplines.length === 0} overlay={() => this.getmenu(item.sub_disciplines, item)} placement="bottomCenter">
<a value={item.id}>{item.name}</a> <a value={item.id}>{item.name}</a>
</Dropdown> </Dropdown>
</li> </li>
) )
}) })
} }
</ul> </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> </div>
<PathCard {...this.props} {...this.state}></PathCard> </div>
{ <KeywordList btnUrl={btnUrl} onChangeLabel={this.onChangeLabel.bind(this)} OnSearchInput={this.OnSearchInput.bind(this)} onNewHandler={this.getUser.bind(this, '/paths/new')} btnStyle={{ top: '92px' }} />
this.state.pathList===null?"":total_count > 16 &&
<PathCard {...this.props} {...this.state}></PathCard>
{
this.state.pathList === null ? "" : total_count > 16 &&
<div className="educontent mb80 edu-txt-center mt10"> <div className="educontent mb80 edu-txt-center mt10">
<Pagination current={page} total={ total_count || 1299 } type="mini" pageSize={16} onChange={this.onChange} /> <Pagination current={page} total={total_count || 1299} type="mini" pageSize={16} onChange={this.onChange} />
</div> </div>
} }
</div> </div>
) )
} }
} }
export default ShixunPathSearch; export default ShixunPathSearch;

38
public/react/src/modules/tpm/shixuns/ShixunsIndex.js
Unescape View File

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

34
public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save