289 lines
11 KiB
JavaScript
289 lines
11 KiB
JavaScript
|
import React from 'react';
|
|||
|
|
import {Button, Popover} from 'antd';
|
|||
|
|
import {WeaSelect, WeaLocaleProvider} from 'ecCom';
|
|||
|
|
import {inject, observer} from 'mobx-react';
|
|||
|
|
import {toJS} from 'mobx';
|
|||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|||
|
|
|
|||
|
|
import ApiSet from '../ApiSet';
|
|||
|
|
import WeesoSearchSet from '../weesoSearchSet';
|
|||
|
|
|
|||
|
|
const store = [
|
|||
|
|
'weesoStore',
|
|||
|
|
'weesoSetStore',
|
|||
|
|
'routing',
|
|||
|
|
'weesoSeachSetStore'
|
|||
|
|
]
|
|||
|
|
@inject(...store)
|
|||
|
|
@observer
|
|||
|
|
export default class WeesoTop extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
setMaskClosable: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillUnmount() {
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const {weesoStore} = this.props;
|
|||
|
|
let {
|
|||
|
|
setVisible, sysVisible, perVisible, sysadminVisible,
|
|||
|
|
numberValue, searchValue, sortValue, baseDadas,
|
|||
|
|
addSubdomainUrl
|
|||
|
|
} = weesoStore;
|
|||
|
|
baseDadas = toJS(baseDadas);
|
|||
|
|
let
|
|||
|
|
sysBtn = baseDadas.sysBtn || [],
|
|||
|
|
hotKeyPer = baseDadas.hotKey && baseDadas.hotKey.per || [],
|
|||
|
|
hotKeySys = baseDadas.hotKey && baseDadas.hotKey.sys || [],
|
|||
|
|
numperpage = baseDadas.searchSet && baseDadas.searchSet.numperpage || [],
|
|||
|
|
searchField = baseDadas.searchSet && baseDadas.searchSet.searchField || [],
|
|||
|
|
sortField = baseDadas.searchSet && baseDadas.searchSet.sortField || [];
|
|||
|
|
let hasPer = true, hasSys = true;
|
|||
|
|
if(baseDadas.hotKey) {
|
|||
|
|
baseDadas.hotKey.hasPer !== undefined && (hasPer = baseDadas.hotKey.hasPer);
|
|||
|
|
baseDadas.hotKey.hasSys !== undefined && (hasSys = baseDadas.hotKey.hasSys);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const {setMaskClosable} = this.state;
|
|||
|
|
const sysadminContent = (
|
|||
|
|
<ul className="wea-top-hot-content">
|
|||
|
|
{sysBtn && sysBtn.length != 0 && sysBtn.map(item => {
|
|||
|
|
return (
|
|||
|
|
<li className="weeso-systop-link" title={item.title}><a target="_blank" href={item.link}>{item.title}</a></li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)
|
|||
|
|
const sysContent = (
|
|||
|
|
<ul className="wea-top-hot-content">
|
|||
|
|
{ hotKeySys.length ===0 && <li>{getLabel('391116','暂无热点')}</li>}
|
|||
|
|
{hotKeySys && hotKeySys.length!==0 && hotKeySys.map(item => {
|
|||
|
|
return (
|
|||
|
|
<li title={item} onClick={() => {
|
|||
|
|
weesoStore.sysVisible = false;
|
|||
|
|
this.hotCommonClick(item);
|
|||
|
|
}}>{item}</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)
|
|||
|
|
const perContent = (
|
|||
|
|
<ul className="wea-top-hot-content">
|
|||
|
|
{ hotKeyPer.length ===0 && <li>{getLabel('391116','暂无热点')}</li>}
|
|||
|
|
{hotKeyPer && hotKeyPer.length!==0 && hotKeyPer.map(item => {
|
|||
|
|
return (
|
|||
|
|
<li title={item} onClick={() => {
|
|||
|
|
weesoStore.perVisible = false;
|
|||
|
|
this.hotCommonClick(item);
|
|||
|
|
}}>{item}</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)
|
|||
|
|
const searchContent = (
|
|||
|
|
<div className="wea-top-set-content">
|
|||
|
|
<p className="set-content-search">
|
|||
|
|
{getLabel(384226, "搜索设置")}
|
|||
|
|
</p>
|
|||
|
|
<div className="set-content-advanced" ref="contentWrapper">
|
|||
|
|
<div className="set-content-count">
|
|||
|
|
<span title={getLabel(17491, "每页显示记录数")}>{getLabel(17491, "每页显示记录数")}：</span>
|
|||
|
|
<span className="set-select">
|
|||
|
|
<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7aubcb`}
|
|||
|
|
value={numberValue}
|
|||
|
|
options={this.opt(numperpage)}
|
|||
|
|
onChange={(v) => {
|
|||
|
|
weesoStore.setState({numberValue: v})
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
onFocus={() => {
|
|||
|
|
this.setState({setMaskClosable: false})
|
|||
|
|
}}
|
|||
|
|
onBlur={() => {
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
layout={this.refs.contentWrapper}
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
<span>{getLabel(18256, "条")}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span title={getLabel(19332, "高级设置")}>{getLabel(19332, "高级设置")}：</span>
|
|||
|
|
<span className="set-select">
|
|||
|
|
<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2gt090`}
|
|||
|
|
value={searchValue}
|
|||
|
|
options={this.opt(searchField)}
|
|||
|
|
onChange={(v) => {
|
|||
|
|
weesoStore.setState({searchValue: v})
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
layout={this.refs.contentWrapper}
|
|||
|
|
onFocus={() => {
|
|||
|
|
this.setState({setMaskClosable: false})
|
|||
|
|
}}
|
|||
|
|
onBlur={() => {
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
style={{maxWidth:'120px'}}
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
<span className="set-select">
|
|||
|
|
<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6uba9a`}
|
|||
|
|
value={sortValue}
|
|||
|
|
options={this.opt(sortField)}
|
|||
|
|
onChange={(v) => {
|
|||
|
|
weesoStore.setState({sortValue: v})
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
layout={this.refs.contentWrapper}
|
|||
|
|
onFocus={() => {
|
|||
|
|
this.setState({setMaskClosable: false})
|
|||
|
|
}}
|
|||
|
|
onBlur={() => {
|
|||
|
|
this.setState({setMaskClosable: true})
|
|||
|
|
}}
|
|||
|
|
style={{maxWidth:'120px'}}
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="set-content-btn">
|
|||
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0t2fim`} type="primary" onClick={() => {
|
|||
|
|
weesoStore.setState({setVisible: false});
|
|||
|
|
weesoStore.saveSearchSet();
|
|||
|
|
}}>{getLabel(826, "确定")}</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
return (
|
|||
|
|
<div className="weeso-topbox">
|
|||
|
|
<ul className="weeso-top">
|
|||
|
|
<li className="top-set">
|
|||
|
|
<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@8ggo1s`} visible={setVisible} placement="bottomRight" content={searchContent} trigger="click"
|
|||
|
|
onVisibleChange={(v) => {
|
|||
|
|
weesoStore.setState({setVisible: v})
|
|||
|
|
}}
|
|||
|
|
mask={true}
|
|||
|
|
maskClosable={setMaskClosable}
|
|||
|
|
overlayClassName="weeso-style-popover"
|
|||
|
|
>
|
|||
|
|
<span className={weesoStore.setVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
|
|||
|
|
onClick={() => {
|
|||
|
|
weesoStore.setState({setVisible: !setVisible})
|
|||
|
|
}}>{getLabel(30747, "设置")}</span>
|
|||
|
|
</Popover>
|
|||
|
|
</li>
|
|||
|
|
{hasPer && <li className="top-hot">
|
|||
|
|
<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@ouftc1`} visible={perVisible} placement="bottomLeft" content={perContent} trigger="click"
|
|||
|
|
onVisibleChange={(v) => {
|
|||
|
|
weesoStore.setState({perVisible: v})
|
|||
|
|
}}
|
|||
|
|
overlayClassName="weeso-style-popover"
|
|||
|
|
>
|
|||
|
|
<span className={weesoStore.perVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
|
|||
|
|
onClick={() => {
|
|||
|
|
weesoStore.setState({perVisible: !perVisible})
|
|||
|
|
}}>{getLabel(81784, "个人热点")}</span>
|
|||
|
|
</Popover>
|
|||
|
|
</li>}
|
|||
|
|
{hasSys && <li className="top-hot">
|
|||
|
|
<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@5nn803`} visible={sysVisible} placement="bottomLeft" content={sysContent} trigger="click"
|
|||
|
|
onVisibleChange={(v) => {
|
|||
|
|
weesoStore.setState({sysVisible: v})
|
|||
|
|
}}
|
|||
|
|
overlayClassName="weeso-style-popover"
|
|||
|
|
>
|
|||
|
|
<span className={weesoStore.sysVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
|
|||
|
|
onClick={() => {
|
|||
|
|
weesoStore.setState({sysVisible: !sysVisible})
|
|||
|
|
}}>{getLabel(81783, "系统热点")}</span>
|
|||
|
|
</Popover>
|
|||
|
|
</li>}
|
|||
|
|
|
|||
|
|
{weesoStore.showAdmin && sysBtn && sysBtn.length != 0 && sysBtn.length > 4 &&
|
|||
|
|
<li className="top-hot">
|
|||
|
|
<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@bdott7`} visible={sysadminVisible} placement="bottomLeft" content={sysadminContent} trigger="click"
|
|||
|
|
onVisibleChange={(v) => {
|
|||
|
|
weesoStore.setState({sysadminVisible: v})
|
|||
|
|
}}
|
|||
|
|
overlayClassName="weeso-style-popover"
|
|||
|
|
>
|
|||
|
|
<span className={weesoStore.sysadminVisible ? 'topbox-li-focus' : 'topbox-li-blur'}
|
|||
|
|
onClick={() => {
|
|||
|
|
weesoStore.setState({sysadminVisible: !sysadminVisible})
|
|||
|
|
}}>{getLabel(25433, "管理")}</span>
|
|||
|
|
</Popover>
|
|||
|
|
</li>
|
|||
|
|
}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<ul className="weeso-systop">
|
|||
|
|
{weesoStore.showAdmin && sysBtn && sysBtn.length != 0 && sysBtn.map((item,index) => {
|
|||
|
|
if(item.id == 0){
|
|||
|
|
return <li className='weeso-systop-link'>
|
|||
|
|
<div className="systop-link-searchset" onClick={() => {
|
|||
|
|
const { setState, getCusPageSetList } = this.props.weesoSeachSetStore;
|
|||
|
|
setState({ dialogVisible: true }, () => {
|
|||
|
|
getCusPageSetList();
|
|||
|
|
});
|
|||
|
|
}}> {item.title} </div>
|
|||
|
|
</li>
|
|||
|
|
}
|
|||
|
|
if(item.id == 1){
|
|||
|
|
return <li className='weeso-systop-link'><a target="_blank" href={item.link}>{item.title}</a></li>
|
|||
|
|
}
|
|||
|
|
if(item.id == 2) {
|
|||
|
|
return <li className='weeso-systop-link' onClick={() => window.open(addSubdomainUrl('/spa/esearch/static/index.html#/main/esearch/robot'))}><a>{item.title}</a></li>
|
|||
|
|
}
|
|||
|
|
if(item.id == 3){
|
|||
|
|
return <li className='weeso-systop-link' onClick={() => this.props.weesoSetStore.setState({showDialog: true})}><a>{item.title}</a></li>
|
|||
|
|
}
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<ApiSet ecId={`${this && this.props && this.props.ecId || ''}_ApiSet@d7208b`} isDialog={true}></ApiSet>
|
|||
|
|
<WeesoSearchSet ecId={`${this && this.props && this.props.ecId || ''}_WeesoSearchSet@84tb20`} />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//系统热点、个人热点--共有方法
|
|||
|
|
hotCommonClick = (item) => {
|
|||
|
|
const {weesoStore, routing} = this.props;
|
|||
|
|
const { search } = routing.location;
|
|||
|
|
weesoStore.setState({
|
|||
|
|
inputValue: item,
|
|||
|
|
isHotkeySearch: true,
|
|||
|
|
selectionStart: item.length,
|
|||
|
|
selectionEnd: item.length
|
|||
|
|
});
|
|||
|
|
const { filterParams } = this.props.weesoSeachSetStore;
|
|||
|
|
let p = { page_search_json: JSON.stringify(filterParams())};
|
|||
|
|
weesoStore.preSearch(p);
|
|||
|
|
if(!weesoStore.isSearch){
|
|||
|
|
weesoStore.changeKey(weesoStore.defalutMoreKey, false);
|
|||
|
|
weesoStore.baseDadas.FLAG != -1 && routing.push(`/main/esearch/result${search}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
opt = (datas) => {
|
|||
|
|
let options = [];
|
|||
|
|
datas = toJS(datas);
|
|||
|
|
datas && datas.length!==0 && datas.map(item => {
|
|||
|
|
options.push({
|
|||
|
|
key: item.key,
|
|||
|
|
selected: item.selected,
|
|||
|
|
showname: item.showname,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return options;
|
|||
|
|
}
|
|||
|
|
}
|