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 axios from 'axios';
import {Dropdown,Menu} from 'antd';
import {getImageUrl} from 'educoder';
import { Dropdown, Menu } from 'antd';
import { getImageUrl } from 'educoder';
import PathCard from "./ShixunPathCard";
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{
class ShixunPathSearch extends Component {
constructor(props) {
super(props)
this.state = {
order:"updated_at",
select:undefined,
search:"",
page:1,
pathList:null,
sortList:'',
total_count:0,
sort:"desc",
limit:16,
discipline_id:undefined,
sub_discipline_id:undefined
}
super(props)
this.state = {
order: "updated_at",
select: undefined,
search: "",
page: 1,
pathList: null,
sortList: '',
total_count: 0,
sort: "desc",
limit: 16,
discipline_id: undefined,
sub_discipline_id: undefined
}
}
//切换列表状态
changeStatus=(value)=>{
let {discipline_id,sub_discipline_id }=this.state;
//适配器
onChangeLabel(value) {
let rs = value === 'new' ? 'updated_at' : 'myshixuns_scount'
let { discipline_id, sub_discipline_id } = this.state;
this.setState({
order:value,
page:1
order: rs,
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({
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({
order:"updated_at",
discipline_id:tag_id,
page:1,
sub_discipline_id:undefined
order: "updated_at",
discipline_id: tag_id,
page: 1,
sub_discipline_id: undefined
})
let { order }=this.state;
this.getList(order,tag_id,undefined,1 );
let { order } = this.state;
this.getList(order, tag_id, undefined, 1);
e.stopPropagation();
}
componentDidMount(){
document.title="实践课程";
const upsystem=`/users/system_update.json`;
axios.get(upsystem).then((response)=>{
let updata=response.data;
this.setState({
updata:updata
})
}).catch((error)=>{
console.log(error);
})
componentDidMount() {
document.title = "实践课程";
const upsystem = `/users/system_update.json`;
axios.get(upsystem).then((response) => {
let updata = response.data;
this.setState({
updata: updata
})
}).catch((error) => {
console.log(error);
})
this.getdisciplines()
let { order,discipline_id,sub_discipline_id,page }=this.state;
this.getList(order,discipline_id,sub_discipline_id,page );
let { order, discipline_id, sub_discipline_id, page } = this.state;
this.getList(order, discipline_id, sub_discipline_id, page);
}
getdisciplines=()=>{
let url='/disciplines.json';
axios.get(url,{params:{
source:"subject"
}}).then((result)=>{
if(result.status==200){
// console.log(result.data.disciplines)
getdisciplines = () => {
let url = '/disciplines.json';
axios.get(url, {
params: {
source: "subject"
}
}).then((result) => {
if (result.status == 200) {
// console.log(result.data.disciplines)
this.setState({
sortList:result.data.disciplines
sortList: result.data.disciplines
})
}
}).catch((error)=>{
}).catch((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';
axios.get(url,{params:{
sort:"desc",
limit:16,
order:order,
page:page,
discipline_id:discipline_id,
sub_discipline_id:sub_discipline_id
}}).then((result)=>{
if(result.status==200){
getList = (order, discipline_id, sub_discipline_id, page, keyword = '') => {
let url = '/paths.json';
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) => {
if (result.status == 200) {
this.setState({
pathList:result.data.subjects,
total_count:result.data.total_count
pathList: result.data.subjects,
total_count: result.data.total_count
})
}
}).catch((error)=>{
}).catch((error) => {
console.log(error);
})
}
//头部获取是否已经登录了
getUser=(url,type)=>{
if(this.props.checkIfLogin()===false){
getUser = (url) => {
if (this.props.checkIfLogin() === false) {
this.props.showLoginDialog()
return
}
if(this.props.checkIfProfileCompleted()===false){
if (this.props.checkIfProfileCompleted() === false) {
this.props.showProfileCompleteDialog()
return
}
if(url !== undefined || url!==""){
if (url !== undefined || url !== "") {
this.props.history.push(url);
}
}
getshixunchildValues=(e,id,item)=>{
getshixunchildValues = (e, id, item) => {
this.setState({
discipline_id:item.id,
sub_discipline_id:id,
discipline_id: item.id,
sub_discipline_id: id,
})
let { order,page }=this.state;
this.getList(order,item.id,id,page );
let { order, page } = this.state;
this.getList(order, item.id, id, page);
e.stopPropagation();
}
getmenu=(list,item)=>{
return(
getmenu = (list, item) => {
return (
<Menu>
<Menu.Item>
<div className="mt5 subshaicontent-part">
<div className="sub-Item clearfix">
{
list.map((tag,e)=>{
return(
<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>
list.map((tag, e) => {
return (
<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>
)
})
}
@ -166,18 +180,18 @@ class ShixunPathSearch extends Component{
</div>
</Menu.Item>
</Menu>
)
)
}
render() {
let { order,sortList,search,page,total_count,discipline_id }=this.state;
let pathstype=false;
if(this.props&&this.props.mygetHelmetapi!=null){
let paths="/paths";
this.props.mygetHelmetapi.navbar.map((item,key)=>{
render() {
let { order, sortList, search, page, total_count, discipline_id } = this.state;
let pathstype = false;
if (this.props && this.props.mygetHelmetapi != null) {
let paths = "/paths";
this.props.mygetHelmetapi.navbar.map((item, key) => {
var reg = RegExp(item.link);
if(paths.match(reg)){
if(item.hidden===true){
pathstype=true
if (paths.match(reg)) {
if (item.hidden === true) {
pathstype = true
}
}
@ -185,21 +199,21 @@ class ShixunPathSearch extends Component{
}
return (
<div>
{this.state.updata===undefined?"":<UpgradeModals
{...this.state}
/>}
<div>
{this.state.updata === undefined ? "" : <UpgradeModals
{...this.state}
/>}
<style>
{
`
<style>
{
`
::-webkit-scrollbar {
width: 0px !important;
}
.pathImg{
width: 100%;
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-size: cover; */
background-position: center;
@ -217,57 +231,39 @@ class ShixunPathSearch extends Component{
}
a{text-decoration:none !important;}
`
}
</style>
<div className="pr">
<div className="pathImg"></div>
<div className="edu-back-white padding20 pathIndexNav">
<ul className="educontent clearfix">
<li className={discipline_id > 0 ? "" : "active"}><a onClick={(e)=>this.changeSelect(e,undefined)}>全部</a></li>
{
sortList && sortList.map((item,key)=>{
return(
<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">
<a value={item.id}>{item.name}</a>
</Dropdown>
</li>
)
})
}
</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>*/}
}
</style>
<div className="pr">
<div className="pathImg"></div>
<div className="edu-back-white padding20 pathIndexNav">
<ul className="educontent clearfix">
<li className={discipline_id > 0 ? "" : "active"}><a onClick={(e) => this.changeSelect(e, undefined)}>全部</a></li>
{
sortList && sortList.map((item, key) => {
return (
<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">
<a value={item.id}>{item.name}</a>
</Dropdown>
</li>
)
})
}
</ul>
</div>
<PathCard {...this.props} {...this.state}></PathCard>
{
this.state.pathList===null?"":total_count > 16 &&
</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 &&
<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>
)
}
}
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 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)}
/>
{/*下方图片*/}

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 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>
)

Write Preview
Loading…
Cancel
Save