519 lines
19 KiB
JavaScript
519 lines
19 KiB
JavaScript
import React from 'react';
|
|
import {Popover, Row, Modal, QueueAnim, Button, message} from 'antd';
|
|
import {WeaInput, WeaButton, WeaSelect, WeaInputSearch, WeaDatePicker, WeaBrowser, WeaTools, WeaFormItem, WeaLocaleProvider,
|
|
WeaSearchGroup, WeaDialog } from 'ecCom';
|
|
import {WeaTableNew, WeaSwitch} from 'comsMobx';
|
|
import AboutTime from '../childComponents/aboutTime2';
|
|
import AboutBrowser from '../childComponents/aboutBrowser2';
|
|
import AboutSelsect from '../childComponents/aboutSelect2';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const types = WeaTools.types;
|
|
const getKey = WeaTools.getKey;
|
|
import {inject, observer} from 'mobx-react';
|
|
import {toJS} from 'mobx';
|
|
|
|
const store = ['routing', 'weesoStore', 'weesoSeachSetStore']
|
|
@inject(...store)
|
|
@observer
|
|
export default class SearchTools extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
setTimeout(() => {
|
|
const toolTip = $('.tool-icon-tip');
|
|
if(toolTip){
|
|
toolTip.fadeIn(300, () => {
|
|
setTimeout(() => {
|
|
toolTip.fadeOut(500);
|
|
},1500)
|
|
})
|
|
}
|
|
}, 3000);
|
|
this.addStyle();
|
|
document.addEventListener("click", this.maskFun,false);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
const { setState } = this.props.weesoStore;
|
|
setState({ showToolPopover: false });
|
|
$('#esearch-propver-mask').remove();
|
|
document.removeEventListener("click", this.maskFun,false);
|
|
const { adSearchFormReset } = this.props.weesoSeachSetStore;
|
|
adSearchFormReset();
|
|
}
|
|
|
|
maskFun = (e) => {
|
|
const { setState } = this.props.weesoStore;
|
|
if(e.target) {
|
|
if(!$(e.target).hasClass('tool-right') && $(e.target).closest('.wesult-top-container').length > 0) {
|
|
setState({ showToolPopover: false });
|
|
}
|
|
if($(e.target).hasClass('ant-popover-mask')) {
|
|
setState({ showToolPopover: false });
|
|
}
|
|
}
|
|
}
|
|
|
|
addStyle = () => {
|
|
const style = document.createElement('style');
|
|
style.id = 'esearch-propver-mask';
|
|
style.type = 'text/css';
|
|
style.innerHTML = `.ant-popover-mask {
|
|
position: fixed;
|
|
top: 115px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
}`;
|
|
document.getElementsByTagName('head')[0].appendChild(style);
|
|
const style2 = document.createElement('style');
|
|
style2.id = 'esearch-propver-mask-hidden';
|
|
style2.type = 'text/css';
|
|
style2.innerHTML = `.ant-popover-mask-hidden {
|
|
display: none;
|
|
}`;
|
|
document.getElementsByTagName('head')[0].appendChild(style2);
|
|
}
|
|
|
|
adOnChange = () => {
|
|
const { setState } = this.props.weesoSeachSetStore;
|
|
setState({ searchTagParams: {} });
|
|
}
|
|
|
|
getSearchs() {
|
|
const { adSearchForm, adSearchFormConditions } = this.props.weesoSeachSetStore;
|
|
const { isFormInit } = adSearchForm;
|
|
let group = [];
|
|
|
|
isFormInit && adSearchFormConditions &&
|
|
toJS(adSearchFormConditions).map((c, _index) => {
|
|
let items = [];
|
|
c.items.map(field => {
|
|
let col = 1;
|
|
|
|
items.push({
|
|
com: (
|
|
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@crpx99@${field.domkey[0]}`}
|
|
label={`${field.label}`}
|
|
labelCol={{ span: `${field.labelcol}` }}
|
|
ratio1to2
|
|
error={adSearchForm.getError(field)}
|
|
tipPosition="bottom"
|
|
wrapperCol={{ span: `${field.fieldcol}` }}
|
|
>
|
|
<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tz45a7@${field.domkey[0]}`}
|
|
fieldConfig={field}
|
|
form={adSearchForm}
|
|
onChange={this.adOnChange}
|
|
/>
|
|
</WeaFormItem>
|
|
),
|
|
col: col,
|
|
hide: adSearchForm.isHide(field, (keys, allParams) => {
|
|
return false;
|
|
})
|
|
});
|
|
});
|
|
group.push(
|
|
<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@t6v5qa@${_index}`}
|
|
needTigger={false}
|
|
title={c.title}
|
|
showGroup={c.defaultshow}
|
|
items={items}
|
|
/>
|
|
);
|
|
});
|
|
return group;
|
|
}
|
|
|
|
saveCommonCondition = () => {
|
|
const { setState } = this.props.weesoSeachSetStore;
|
|
const { inputValue } = this.props.weesoStore;
|
|
setState({ commonDialogVisible: true, commonDialogInputVal: inputValue });
|
|
}
|
|
|
|
filterParams = () => {
|
|
let { browserKeyArr, adSearchForm } = this.props.weesoSeachSetStore;
|
|
const formParams = adSearchForm.getFormParams();
|
|
let search_json = { ...formParams };
|
|
delete search_json.showorder;
|
|
delete search_json.tagName;
|
|
delete search_json.tagTitle;
|
|
browserKeyArr = toJS(browserKeyArr);
|
|
Object.keys(search_json).forEach(key => {
|
|
if(browserKeyArr.some(v => v === key)) {
|
|
if(search_json[key] !== '') {
|
|
search_json[key] = search_json[key].split(',');
|
|
} else {
|
|
delete search_json[key];
|
|
}
|
|
}
|
|
});
|
|
return search_json;
|
|
}
|
|
|
|
adSearchToolContent = () => {
|
|
const {weesoStore} = this.props;
|
|
let {searchDatas, showToolPopover, maskClosable, searchForm, getTypeDatas} = weesoStore;
|
|
const { adSearchForm, searchTagParams, adSearchFormReset, setState } = this.props.weesoSeachSetStore;
|
|
|
|
//高级搜索是否显示图标处理
|
|
let searchParamsArray = [];
|
|
const searchParams = adSearchForm.getFormParams();
|
|
return(
|
|
<div className="weeso-tool-popover" ref="contentWrapper">
|
|
{ this.getSearchs() }
|
|
<div className="tool-btn">
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@080v5e`} className="btn-left" type="primary" size="large"
|
|
onClick={() => {
|
|
const { adSearchForm } = this.props.weesoSeachSetStore;
|
|
if(this.filterParams && this.filterParams() && (this.filterParams().CREATEDATE_date_select === '5')) {
|
|
if(this.filterParams().CREATEDATE_range_picker_start === undefined || this.filterParams().CREATEDATE_range_picker_start === ''
|
|
|| this.filterParams().CREATEDATE_range_picker_end === undefined || this.filterParams().CREATEDATE_range_picker_end === ''
|
|
) {
|
|
adSearchForm.showError("CREATEDATE_date_select", getLabel('524259','必填项未填写!'))
|
|
return;
|
|
}
|
|
}
|
|
if(searchParamsArray.length!==0) {
|
|
weesoStore.isShowSearchIcon = true //控制是否显示图标
|
|
}else {
|
|
weesoStore.isShowSearchIcon = false
|
|
}
|
|
weesoStore.setState({
|
|
showToolPopover: false,
|
|
skipSearchParams: {
|
|
currentPage: 0,
|
|
lastRealNumber: 0,
|
|
},
|
|
});
|
|
weesoStore.toolChangeInit();
|
|
weesoStore.preSearch({
|
|
searchTagId: searchTagParams.key || '',
|
|
page_search_json: JSON.stringify(this.filterParams())
|
|
});
|
|
}}
|
|
text={getLabel(197,"搜索")}
|
|
/>
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@vzkvqd`} className="btn-left" type="primary" size="large"
|
|
onClick={this.saveCommonCondition}
|
|
text={getLabel('524258','存为常用条件') }
|
|
/>
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@h6v2bu`} size="large"
|
|
onClick={() => {
|
|
setState({ searchTagParams: {} });
|
|
adSearchFormReset();
|
|
}}
|
|
text={getLabel(2022,"重置")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
filterAdParams = (form, browserKeyArr) => {
|
|
if(form === undefined || browserKeyArr === undefined) return;
|
|
const formParams = form.getFormParams();
|
|
let search_json = { ...formParams };
|
|
|
|
delete search_json.showorder;
|
|
delete search_json.tagName;
|
|
delete search_json.tagTitle;
|
|
browserKeyArr = toJS(browserKeyArr);
|
|
|
|
Object.keys(search_json).forEach(key => {
|
|
let json = toJS(search_json[key]);
|
|
if(typeof json === 'object') { // 过滤obj
|
|
let objA = { ...search_json[key] };
|
|
search_json = {
|
|
...search_json,
|
|
...objA
|
|
};
|
|
}
|
|
if(browserKeyArr.some(v => v === key)) {
|
|
if(search_json[key] !== '') {
|
|
search_json[key] = search_json[key].split(',');
|
|
} else {
|
|
delete search_json[key];
|
|
}
|
|
}
|
|
|
|
browserKeyArr.forEach(v => {// 过滤浏览按钮span
|
|
if(key.indexOf('span') > -1 && key.indexOf(v) > -1) {
|
|
delete search_json[key];
|
|
}
|
|
});
|
|
|
|
if(search_json[key] === '') {// 过滤''值
|
|
delete search_json[key];
|
|
}
|
|
});
|
|
if(search_json.CREATERID !== undefined && search_json.CREATERID !== '') {
|
|
search_json = {
|
|
...search_json,
|
|
CREATERID_select: '2'
|
|
};
|
|
}
|
|
|
|
return search_json;
|
|
}
|
|
|
|
addCommonSaveBtn = () => {
|
|
const { inputValue, defalutMoreKey } = this.props.weesoStore;
|
|
let { setState, commonDialogInputVal, adSearchForm, browserKeyArr, doSaveSearchTag } = this.props.weesoSeachSetStore;
|
|
const formParams = adSearchForm.getFormParams();
|
|
if(commonDialogInputVal === '') {
|
|
message.error(getLabel('524259','必填项未填写!') );
|
|
} else {
|
|
let search_json = this.filterAdParams(adSearchForm, browserKeyArr);
|
|
|
|
let p = {
|
|
id: '',
|
|
search_type: defalutMoreKey,
|
|
tagTitle: commonDialogInputVal,
|
|
tagName: inputValue || commonDialogInputVal,
|
|
search_json: JSON.stringify(search_json)
|
|
};
|
|
doSaveSearchTag(p, () => {
|
|
setState({ commonDialogVisible: false, commonDialogInputVal: '' });
|
|
});
|
|
}
|
|
}
|
|
|
|
addCommonBtns = () => {
|
|
let btns = [];
|
|
btns.push(
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s0i8mx@save`} type="primary" key={'save'} onClick={this.addCommonSaveBtn}>
|
|
{ getLabel('30986','保存') }
|
|
</Button>,
|
|
);
|
|
return btns;
|
|
}
|
|
|
|
getDialog = () => {
|
|
const dialogW = 600, dialogH = 140;
|
|
const { collectParams, commonDialogVisible, setState, stepForm, stepConditions, commonDialogInputVal } = this.props.weesoSeachSetStore;
|
|
return(<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jfe8da`}
|
|
className="weeso-search-add-common-conditions"
|
|
visible={commonDialogVisible}
|
|
title={getLabel('524258','存为常用条件') }
|
|
icon={'icon-coms-ws'}
|
|
iconBgcolor='#A0B0BA'
|
|
style={{ width: dialogW, height: dialogH }}
|
|
buttons={this.addCommonBtns()}
|
|
onCancel={() => { setState({ commonDialogVisible: false }) }}
|
|
>
|
|
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4x6thl`}
|
|
label={getLabel('23240','条件名称')}
|
|
labelCol={{offset: 4, span: 4}}
|
|
wrapperCol={{span: 12}}
|
|
>
|
|
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@yhtdo4`} value={commonDialogInputVal} viewAttr={3} onChange={(val) => {setState({commonDialogInputVal: val});}}/>
|
|
<div className="tip-message">{getLabel('524260','举例：一周内张三创建的文档') }</div>
|
|
</WeaFormItem>
|
|
</WeaDialog>);
|
|
}
|
|
|
|
adIconVisible = () => {
|
|
let { searchTagParams } = this.props.weesoSeachSetStore;
|
|
let { defalutMoreKey } = this.props.weesoStore;
|
|
let bool = false;
|
|
let formP = this.filterParams();
|
|
if(searchTagParams.key && searchTagParams.key !== '') {
|
|
bool = true;
|
|
}
|
|
if(formP) {
|
|
Object.keys(formP).forEach(key => {
|
|
if(key === 'CREATEDATE_date_select') {
|
|
} else {
|
|
if(typeof formP[key] === 'string') {
|
|
formP[key] !== '' && (bool = true);
|
|
}
|
|
if(Array.isArray(formP[key]) && formP[key].length > 0) {
|
|
bool = true;
|
|
}
|
|
}
|
|
});
|
|
if(formP.CREATEDATE_date_select && formP.CREATEDATE_date_select !== '0') {
|
|
bool = true;
|
|
}
|
|
if(defalutMoreKey === 'WKP') {
|
|
if(formP.BEGINDATE_date_select === '0' && formP.CREATEDATE_date_select === '0') {
|
|
bool = false;
|
|
if(formP.RESOURCEID && formP.RESOURCEID.length > 0) {
|
|
bool = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(defalutMoreKey === 'FAQ') {
|
|
if(String(formP.updatedate_date_select) === '0') {
|
|
bool = false;
|
|
}
|
|
}
|
|
return bool;
|
|
}
|
|
|
|
render() {
|
|
const {weesoStore} = this.props;
|
|
let {searchDatas, showToolPopover, maskClosable, searchForm, getTypeDatas} = weesoStore;
|
|
searchDatas = toJS(searchDatas);
|
|
getTypeDatas = toJS(getTypeDatas);
|
|
let key1 = searchDatas.key1 || '', pagese = searchDatas.pagese || '';
|
|
const { getAdConditions, searchTagParams } = this.props.weesoSeachSetStore;
|
|
//高级搜索是否显示图标处理
|
|
let searchParamsArray = [];
|
|
const searchParams = searchForm.getFormParams();
|
|
for(let key in searchParams){
|
|
let val = searchParams[key].toString();
|
|
if(val !== '' && val !==','){
|
|
searchParamsArray.push(val)
|
|
}
|
|
}
|
|
|
|
const toolContent = (
|
|
<div className="weeso-tool-popover" ref="contentWrapper">
|
|
{this.getType()}
|
|
<div className="tool-btn">
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@1o5iat`} className="btn-left" type="primary" size="large"
|
|
onClick={() => {
|
|
if(searchParamsArray.length!==0) {
|
|
weesoStore.isShowSearchIcon = true //控制是否显示图标
|
|
}else {
|
|
weesoStore.isShowSearchIcon = false
|
|
}
|
|
weesoStore.setState({
|
|
showToolPopover: false,
|
|
skipSearchParams: {
|
|
currentPage: 0,
|
|
lastRealNumber: 0,
|
|
},
|
|
});
|
|
weesoStore.toolChangeInit();
|
|
const { filterParams } = this.props.weesoSeachSetStore;
|
|
let p = { page_search_json: JSON.stringify(filterParams())};
|
|
weesoStore.preSearch(p);
|
|
}}
|
|
text={getLabel(197,"搜索")}
|
|
/>
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@xyjtg6`} className="btn-left" type="primary" size="large"
|
|
onClick={() => {
|
|
}}
|
|
text={getLabel('524258','存为常用条件') }
|
|
/>
|
|
<WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@0p9lxk`} size="large"
|
|
onClick={() => {
|
|
weesoStore.resetForm();
|
|
}}
|
|
text={getLabel(2022,"重置")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
let isChina = true;
|
|
if(localStorage.languageidweaver === '8') {// 英文模式
|
|
isChina = false;
|
|
}
|
|
|
|
return (
|
|
<div className="result-tool">
|
|
<p className="tool-left" style={{ width: isChina ? `calc(100% - 90px)` : `calc(100% - 160px)` }} >
|
|
<span className="tool-left-desc" title={key1&&key1.replace(/<\/?b.*?>/g, '')}>
|
|
<span dangerouslySetInnerHTML={{__html: key1}}></span>
|
|
{pagese}
|
|
</span>
|
|
{(key1 && weesoStore.showSubmitIcon) &&
|
|
<span className="tool-icon">
|
|
<i className='icon-coms-Service'
|
|
onClick={() => weesoStore.doSubmit()}
|
|
onMouseOver={() => $('.tool-icon-tip') && $('.tool-icon-tip').show()}
|
|
onMouseOut={() => $('.tool-icon-tip') && $('.tool-icon-tip').hide()}
|
|
/>
|
|
|
|
<div className='tool-icon-tip'>
|
|
<p className="tool-tip-triangle"><span/></p>
|
|
<p className="tool-tip-content">{getLabel(384972,'当前结果不满意？请点击这里')}</p>
|
|
</div>
|
|
|
|
</span>}
|
|
</p>
|
|
|
|
|
|
{this.getType().length != 0 &&
|
|
<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@i2g6o7`} visible={showToolPopover} placement="bottom" content={this.adSearchToolContent()} trigger="click"
|
|
// onVisibleChange={(v) => {weesoStore.setState({showToolPopover: v})}}
|
|
mask={showToolPopover}
|
|
maskClosable={maskClosable}
|
|
zIndex={1000}
|
|
overlayClassName="weeso-style-popover weeso-ad-search-popver"
|
|
|
|
>
|
|
<p className={`tool-right ${this.adIconVisible() ? 'tool-right-show' : ''}`}
|
|
onClick={() => {
|
|
weesoStore.setState({showToolPopover: !showToolPopover});
|
|
// getAdConditions({ id: searchTagParams.key||'', search_json: JSON.stringify(this.filterParams()) });
|
|
}}
|
|
style={{ width: isChina ? 90 : 160 }}
|
|
>
|
|
{getLabel(347,"高级搜索")}
|
|
{this.adIconVisible() && <em className=" tool-right-icon icon-coms-screen2"></em>}
|
|
</p>
|
|
</Popover>
|
|
}
|
|
{ this.getDialog() }
|
|
</div>
|
|
)
|
|
}
|
|
|
|
//处理搜索工具
|
|
getSearchInfo = (type, item, bindObj) => {
|
|
if (type == types.BROWSER) {
|
|
return <AboutBrowser ecId={`${this && this.props && this.props.ecId || ''}_AboutBrowser@5e0ujb`} values={item} bindObj={bindObj}/>
|
|
} else if (type == types.RANGEPICKER) {
|
|
return <AboutTime ecId={`${this && this.props && this.props.ecId || ''}_AboutTime@mzuf37`} values={item} bindObj={bindObj}/>
|
|
} else if (type == types.SELECT) {
|
|
return <AboutSelsect ecId={`${this && this.props && this.props.ecId || ''}_AboutSelsect@p46jb7`} values={item} bindObj={bindObj} container={this.refs.contentWrapper}/>
|
|
} else if (type == types.INPUT) {
|
|
return (
|
|
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@86n046`}
|
|
{...item}
|
|
{...bindObj.bind()}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
getType = () => {
|
|
const {weesoStore} = this.props;
|
|
let {searchConditions, searchForm} = weesoStore;
|
|
const {isFormInit} = searchForm;
|
|
searchConditions = toJS(searchConditions);
|
|
const arr = [];
|
|
searchConditions && isFormInit && searchConditions.length!==0 && searchConditions.map(field => {
|
|
const type = field.conditionType.toUpperCase();
|
|
const key = getKey(field);
|
|
const bindObj = searchForm.$(key);
|
|
const searchParams = searchForm.getFormParams();
|
|
if(type != types.RANGEPICKER || (key=='CREATEDATE_range_picker'&&type == types.RANGEPICKER && searchParams.CREATEDATE_date_select == '5')|| (key=='BEGINDATE_range_picker'&&type == types.RANGEPICKER && searchParams.BEGINDATE_date_select
|
|
== '5')){
|
|
arr.push(
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7jfviq@${key}`}>
|
|
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hafqbp@${key}`}
|
|
label={`${field.label}`}
|
|
labelCol={{span: `${field.labelcol}`}}
|
|
wrapperCol={{span: `${field.fieldcol}`}}
|
|
hideLabel = {type == types.RANGEPICKER}
|
|
>
|
|
{this.getSearchInfo(type, field, bindObj)}
|
|
</WeaFormItem>
|
|
</Row>)
|
|
}
|
|
})
|
|
return arr;
|
|
}
|
|
}
|