|
|
@@ -17,7 +17,7 @@ import type {Field, FieldDataSource} from '@formily/core';
|
|
|
import {createForm, onFieldReact} from '@formily/core';
|
|
|
import GroupNameControl from '@/components/SearchComponent/GroupNameControl';
|
|
|
import {DeleteOutlined, DoubleRightOutlined, ReloadOutlined, SaveOutlined, SearchOutlined,} from '@ant-design/icons';
|
|
|
-import {Button, Card, Dropdown, Empty, Menu, message, Popover, Typography,} from 'antd';
|
|
|
+import {Button, Card, Dropdown, Empty, Menu, message, Popover, Typography} from 'antd';
|
|
|
import {useEffect, useMemo, useRef, useState} from 'react';
|
|
|
import type {ProColumns} from '@jetlinks/pro-table';
|
|
|
import type {EnumData} from '@/utils/typings';
|
|
|
@@ -29,8 +29,8 @@ import classnames from 'classnames';
|
|
|
import {randomString} from '@/utils/util';
|
|
|
|
|
|
const ui2Server = (source: SearchTermsUI): SearchTermsServer => [
|
|
|
- {terms: source.terms1},
|
|
|
- {terms: source.terms2, type: source.type},
|
|
|
+ { terms: source.terms1 },
|
|
|
+ { terms: source.terms2, type: source.type },
|
|
|
];
|
|
|
|
|
|
const server2Ui = (source: SearchTermsServer): SearchTermsUI => ({
|
|
|
@@ -59,20 +59,20 @@ interface Props<T> {
|
|
|
defaultParam?: SearchTermsServer | Term[];
|
|
|
// pattern?: 'simple' | 'advance';
|
|
|
enableSave?: boolean;
|
|
|
- initParam?: SearchTermsServer
|
|
|
+ initParam?: SearchTermsServer;
|
|
|
}
|
|
|
|
|
|
const termType = [
|
|
|
- {label: '=', value: 'eq'},
|
|
|
- {label: '!=', value: 'not'},
|
|
|
- {label: '包含', value: 'like'},
|
|
|
- {label: '不包含', value: 'nlike'},
|
|
|
- {label: '>', value: 'gt'},
|
|
|
- {label: '>=', value: 'gte'},
|
|
|
- {label: '<', value: 'lt'},
|
|
|
- {label: '<=', value: 'lte'},
|
|
|
- {label: '属于', value: 'in'},
|
|
|
- {label: '不属于', value: 'nin'},
|
|
|
+ { label: '=', value: 'eq' },
|
|
|
+ { label: '!=', value: 'not' },
|
|
|
+ { label: '包含', value: 'like' },
|
|
|
+ { label: '不包含', value: 'nlike' },
|
|
|
+ { label: '>', value: 'gt' },
|
|
|
+ { label: '>=', value: 'gte' },
|
|
|
+ { label: '<', value: 'lt' },
|
|
|
+ { label: '<=', value: 'lte' },
|
|
|
+ { label: '属于', value: 'in' },
|
|
|
+ { label: '不属于', value: 'nin' },
|
|
|
];
|
|
|
|
|
|
const service = new Service();
|
|
|
@@ -117,7 +117,7 @@ const sortField = (field: ProColumns[]) => {
|
|
|
};
|
|
|
|
|
|
const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
- const {field, target, onSearch, defaultParam, enableSave = true, initParam} = props;
|
|
|
+ const { field, target, onSearch, defaultParam, enableSave = true, initParam } = props;
|
|
|
|
|
|
/**
|
|
|
* 过滤不参与搜索的数据
|
|
|
@@ -130,14 +130,15 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
|
|
|
// 处理后的搜索条件
|
|
|
const processedField = sortField(filterSearchTerm());
|
|
|
- const defaultTerms = (index: number) => ({
|
|
|
- termType: 'like',
|
|
|
- column: (processedField[index]?.dataIndex as string) || null,
|
|
|
- type: 'or'
|
|
|
- } as Partial<Term>);
|
|
|
+ const defaultTerms = (index: number) =>
|
|
|
+ ({
|
|
|
+ termType: 'like',
|
|
|
+ column: (processedField[index]?.dataIndex as string) || null,
|
|
|
+ type: 'or',
|
|
|
+ } as Partial<Term>);
|
|
|
const intl = useIntl();
|
|
|
const [expand, setExpand] = useState<boolean>(true);
|
|
|
- const initForm = server2Ui(initParam || [{terms: [defaultTerms(0)]}]);
|
|
|
+ const initForm = server2Ui(initParam || [{ terms: [defaultTerms(0)] }]);
|
|
|
const [aliasVisible, setAliasVisible] = useState<boolean>(false);
|
|
|
|
|
|
const [initParams, setInitParams] = useState<SearchTermsUI>(initForm);
|
|
|
@@ -188,7 +189,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
} else if (_field?.valueType === 'dateTime') {
|
|
|
f.setFieldState(typeFiled.query('.value'), async (state) => {
|
|
|
state.componentType = 'DatePicker';
|
|
|
- state.componentProps = {showTime: true};
|
|
|
+ state.componentProps = { showTime: true };
|
|
|
});
|
|
|
f.setFieldState(typeFiled.query('.termType'), async (state) => {
|
|
|
state.value = 'gt';
|
|
|
@@ -220,7 +221,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
},
|
|
|
'x-component': 'ArrayItems',
|
|
|
type: 'array',
|
|
|
- 'x-value': new Array(expand ? 1 : 3).fill({termType: 'like'}),
|
|
|
+ 'x-value': new Array(expand ? 1 : 3).fill({ termType: 'like' }),
|
|
|
items: {
|
|
|
type: 'object',
|
|
|
'x-component': 'FormGrid',
|
|
|
@@ -253,7 +254,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
'x-component-props': {
|
|
|
placeholder: '请选择',
|
|
|
},
|
|
|
- enum: filterSearchTerm().map((i) => ({label: i.title, value: i.dataIndex} as EnumData)),
|
|
|
+ enum: filterSearchTerm().map((i) => ({ label: i.title, value: i.dataIndex } as EnumData)),
|
|
|
},
|
|
|
termType: {
|
|
|
type: 'enum',
|
|
|
@@ -302,8 +303,8 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
},
|
|
|
default: 'and',
|
|
|
enum: [
|
|
|
- {label: '并且', value: 'and'},
|
|
|
- {label: '或者', value: 'or'},
|
|
|
+ { label: '并且', value: 'and' },
|
|
|
+ { label: '或者', value: 'or' },
|
|
|
],
|
|
|
},
|
|
|
terms2: createGroup('第二组'),
|
|
|
@@ -326,7 +327,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
uiParam?.[0]?.terms?.[0] || _terms1 || defaultTerms(0),
|
|
|
uiParam?.[0]?.terms?.[1] || defaultTerms(1),
|
|
|
uiParam?.[0]?.terms?.[2] || defaultTerms(2),
|
|
|
- ]
|
|
|
+ ];
|
|
|
value.terms2 = [
|
|
|
uiParam?.[1]?.terms?.[0] || defaultTerms(3),
|
|
|
uiParam?.[1]?.terms?.[1] || defaultTerms(4),
|
|
|
@@ -337,7 +338,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
value.terms2 = [];
|
|
|
}
|
|
|
setInitParams(value);
|
|
|
- }
|
|
|
+ };
|
|
|
const handleExpand = () => {
|
|
|
handleForm();
|
|
|
setExpand(!expand);
|
|
|
@@ -354,7 +355,6 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
if (initParam && initParam[0].terms && initParam[0].terms.length > 1) {
|
|
|
handleExpand();
|
|
|
}
|
|
|
-
|
|
|
}, []);
|
|
|
const simpleSchema: ISchema = {
|
|
|
type: 'object',
|
|
|
@@ -364,10 +364,13 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
};
|
|
|
const handleHistory = (item: SearchHistory) => {
|
|
|
const log = JSON.parse(item.content) as SearchTermsUI;
|
|
|
- setLogVisible(false)
|
|
|
+ setLogVisible(false);
|
|
|
uiParamRef.current = ui2Server(log);
|
|
|
- const _expand = (log.terms1 && log.terms1?.length > 1) || (log.terms2 && log.terms2?.length > 1);
|
|
|
- _expand && setExpand(false)
|
|
|
+ const _expand =
|
|
|
+ (log.terms1 && log.terms1?.length > 1) || (log.terms2 && log.terms2?.length > 1);
|
|
|
+ if (_expand) {
|
|
|
+ setExpand(false);
|
|
|
+ }
|
|
|
handleForm(_expand);
|
|
|
};
|
|
|
|
|
|
@@ -377,16 +380,18 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
history.map((item: SearchHistory) => (
|
|
|
<Menu.Item onClick={() => handleHistory(item)} key={item.id || randomString(9)}>
|
|
|
<div className={styles.list}>
|
|
|
- <Typography.Text ellipsis={{tooltip: item.name}}>{item.name}</Typography.Text>
|
|
|
- <DeleteOutlined onClick={async (e) => {
|
|
|
- e?.stopPropagation();
|
|
|
- const response = await service.history.remove(`${target}-search`, item.key);
|
|
|
- if (response.status === 200) {
|
|
|
- message.success('操作成功');
|
|
|
- const temp = history.filter((h: any) => h.key !== item.key);
|
|
|
- setHistory(temp);
|
|
|
- }
|
|
|
- }}/>
|
|
|
+ <Typography.Text ellipsis={{ tooltip: item.name }}>{item.name}</Typography.Text>
|
|
|
+ <DeleteOutlined
|
|
|
+ onClick={async (e) => {
|
|
|
+ e?.stopPropagation();
|
|
|
+ const response = await service.history.remove(`${target}-search`, item.key);
|
|
|
+ if (response.status === 200) {
|
|
|
+ message.success('操作成功');
|
|
|
+ const temp = history.filter((h: any) => h.key !== item.key);
|
|
|
+ setHistory(temp);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
</div>
|
|
|
</Menu.Item>
|
|
|
))
|
|
|
@@ -400,7 +405,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
width: '148px',
|
|
|
}}
|
|
|
>
|
|
|
- <Empty/>
|
|
|
+ <Empty />
|
|
|
</div>
|
|
|
</Menu.Item>
|
|
|
)}
|
|
|
@@ -414,7 +419,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
if ('terms' in defaultParam[0]) {
|
|
|
_value = _value.concat(defaultParam as SearchTermsServer);
|
|
|
} else if ('value' in defaultParam[0]) {
|
|
|
- _value = _value.concat([{terms: defaultParam}]);
|
|
|
+ _value = _value.concat([{ terms: defaultParam }]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -440,7 +445,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
_terms.terms1 = filterTerms(_terms.terms1);
|
|
|
_terms.terms2 = filterTerms(_terms.terms2);
|
|
|
|
|
|
- onSearch({terms: formatValue(_terms)});
|
|
|
+ onSearch({ terms: formatValue(_terms) });
|
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
|
@@ -467,8 +472,8 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
const resetForm = async () => {
|
|
|
const value = form.values;
|
|
|
if (!expand) {
|
|
|
- value.terms1 = [defaultTerms(0), defaultTerms(1), defaultTerms(2)]
|
|
|
- value.terms2 = [defaultTerms(3), defaultTerms(4), defaultTerms(5)]
|
|
|
+ value.terms1 = [defaultTerms(0), defaultTerms(1), defaultTerms(2)];
|
|
|
+ value.terms2 = [defaultTerms(3), defaultTerms(4), defaultTerms(5)];
|
|
|
} else {
|
|
|
value.terms1 = [defaultTerms(0)];
|
|
|
value.terms2 = [];
|
|
|
@@ -479,13 +484,13 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
|
|
|
const SearchBtn = {
|
|
|
simple: (
|
|
|
- <Button icon={<SearchOutlined/>} onClick={handleSearch} type="primary">
|
|
|
+ <Button icon={<SearchOutlined />} onClick={handleSearch} type="primary">
|
|
|
搜索
|
|
|
</Button>
|
|
|
),
|
|
|
advance: (
|
|
|
<Dropdown.Button
|
|
|
- icon={<SearchOutlined/>}
|
|
|
+ icon={<SearchOutlined />}
|
|
|
placement={'bottomLeft'}
|
|
|
destroyPopupOnHide
|
|
|
onClick={handleSearch}
|
|
|
@@ -507,7 +512,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
const SaveBtn = (
|
|
|
<Popover
|
|
|
content={
|
|
|
- <Form style={{width: '217px'}} form={historyForm}>
|
|
|
+ <Form style={{ width: '217px' }} form={historyForm}>
|
|
|
<SchemaField
|
|
|
schema={{
|
|
|
type: 'object',
|
|
|
@@ -522,8 +527,8 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
},
|
|
|
{
|
|
|
required: true,
|
|
|
- message: '请输入名称'
|
|
|
- }
|
|
|
+ message: '请输入名称',
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
@@ -539,7 +544,7 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
title="搜索名称"
|
|
|
trigger="click"
|
|
|
>
|
|
|
- <Button icon={<SaveOutlined/>} block>
|
|
|
+ <Button icon={<SaveOutlined />} block>
|
|
|
{intl.formatMessage({
|
|
|
id: 'pages.data.option.save',
|
|
|
defaultMessage: '保存',
|
|
|
@@ -552,19 +557,19 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
|
|
|
<Card bordered={false} className={styles.container}>
|
|
|
<Form form={form} className={styles.form} labelCol={4} wrapperCol={18}>
|
|
|
<div className={expand && styles.simple}>
|
|
|
- <SchemaField schema={expand ? simpleSchema : schema}/>
|
|
|
- <div className={styles.action} style={{marginTop: expand ? 0 : -12}}>
|
|
|
+ <SchemaField schema={expand ? simpleSchema : schema} />
|
|
|
+ <div className={styles.action} style={{ marginTop: expand ? 0 : -12 }}>
|
|
|
<Space>
|
|
|
{enableSave ? SearchBtn.advance : SearchBtn.simple}
|
|
|
{enableSave && SaveBtn}
|
|
|
- <Button icon={<ReloadOutlined/>} block onClick={resetForm}>
|
|
|
+ <Button icon={<ReloadOutlined />} block onClick={resetForm}>
|
|
|
重置
|
|
|
</Button>
|
|
|
</Space>
|
|
|
<div className={classnames(styles.more, !expand ? styles.simple : styles.advance)}>
|
|
|
<Button type="link" onClick={handleExpand}>
|
|
|
更多筛选
|
|
|
- <DoubleRightOutlined style={{marginLeft: 32}} rotate={expand ? 90 : -90}/>
|
|
|
+ <DoubleRightOutlined style={{ marginLeft: 32 }} rotate={expand ? 90 : -90} />
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|