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;
|
||
}
|
||
}
|