|
@@ -9,7 +9,8 @@ import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
import classNames from 'classnames';
|
|
import classNames from 'classnames';
|
|
|
import { observer } from '@formily/react';
|
|
import { observer } from '@formily/react';
|
|
|
import './index.less';
|
|
import './index.less';
|
|
|
-import { Space } from 'antd';
|
|
|
|
|
|
|
+import { Popconfirm, Space } from 'antd';
|
|
|
|
|
+import { isArray, isObject } from 'lodash';
|
|
|
|
|
|
|
|
interface ParamsItemProps {
|
|
interface ParamsItemProps {
|
|
|
data: TermsType;
|
|
data: TermsType;
|
|
@@ -19,7 +20,8 @@ interface ParamsItemProps {
|
|
|
isDelete: boolean;
|
|
isDelete: boolean;
|
|
|
options: any[];
|
|
options: any[];
|
|
|
onValueChange?: (value: TermsType) => void;
|
|
onValueChange?: (value: TermsType) => void;
|
|
|
- onLabelChange?: (label: string) => void;
|
|
|
|
|
|
|
+ onLabelChange?: (label: string[]) => void;
|
|
|
|
|
+ label?: any[];
|
|
|
onAdd: () => void;
|
|
onAdd: () => void;
|
|
|
onDelete: () => void;
|
|
onDelete: () => void;
|
|
|
}
|
|
}
|
|
@@ -52,6 +54,44 @@ const handleOptions = (options: any[]): any[] => {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const DoubleFilter = ['nbtw', 'btw', 'in', 'nin'];
|
|
const DoubleFilter = ['nbtw', 'btw', 'in', 'nin'];
|
|
|
|
|
+
|
|
|
|
|
+export const handleOptionsLabel = (data: any, type?: string) => {
|
|
|
|
|
+ if (isArray(data)) {
|
|
|
|
|
+ const c = data[0];
|
|
|
|
|
+ const t = data[1];
|
|
|
|
|
+ const v = data[2];
|
|
|
|
|
+ const termsTypeKey = {
|
|
|
|
|
+ eq: '等于_value',
|
|
|
|
|
+ neq: '不等于_value',
|
|
|
|
|
+ gt: '大于_value',
|
|
|
|
|
+ gte: '大于等于_value',
|
|
|
|
|
+ lt: '小于_value',
|
|
|
|
|
+ lte: '小于等于_value',
|
|
|
|
|
+ btw: '在_value和_value2之间',
|
|
|
|
|
+ nbtw: '不在_value和_value2之间',
|
|
|
|
|
+ time_gt_now: '距离当前时间大于_value秒',
|
|
|
|
|
+ time_lt_now: '距离当前时间小于_value秒',
|
|
|
|
|
+ in: '在_value,_value2之中',
|
|
|
|
|
+ nin: '不在_value,_value2之中',
|
|
|
|
|
+ like: '包含_value',
|
|
|
|
|
+ nlike: '不包含_value',
|
|
|
|
|
+ };
|
|
|
|
|
+ const typeKey = {
|
|
|
|
|
+ and: '并且',
|
|
|
|
|
+ or: '或者',
|
|
|
|
|
+ };
|
|
|
|
|
+ const _value = isObject(v) ? Object.values(v) : [v];
|
|
|
|
|
+ const typeStr = type ? typeKey[type] : '';
|
|
|
|
|
+ if (DoubleFilter.includes(t)) {
|
|
|
|
|
+ const str = termsTypeKey[t].replace('_value', _value[0]).replace('_value2', _value[1]);
|
|
|
|
|
+ return `${c} ${str} ${typeStr}`;
|
|
|
|
|
+ }
|
|
|
|
|
+ const str = termsTypeKey[t].replace('_value', _value[0]);
|
|
|
|
|
+ return `${c} ${str} ${typeStr}`;
|
|
|
|
|
+ }
|
|
|
|
|
+ return data;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
const ParamsItem = observer((props: ParamsItemProps) => {
|
|
const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
const [deleteVisible, setDeleteVisible] = useState(false);
|
|
const [deleteVisible, setDeleteVisible] = useState(false);
|
|
|
const [ttOptions, setTtOptions] = useState<any[]>([]);
|
|
const [ttOptions, setTtOptions] = useState<any[]>([]);
|
|
@@ -67,7 +107,7 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
});
|
|
});
|
|
|
const [termType, setTermType] = useState('');
|
|
const [termType, setTermType] = useState('');
|
|
|
const [column, setColumn] = useState('');
|
|
const [column, setColumn] = useState('');
|
|
|
- const [label, setLabel] = useState<any[]>([undefined, undefined, {}]);
|
|
|
|
|
|
|
+ const labelCache = useRef<any[]>([undefined, undefined, {}, 'and']);
|
|
|
|
|
|
|
|
const ValueRef = useRef<Partial<TermsType>>({
|
|
const ValueRef = useRef<Partial<TermsType>>({
|
|
|
column: '',
|
|
column: '',
|
|
@@ -77,7 +117,6 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
|
|
|
|
|
const valueChange = useCallback(
|
|
const valueChange = useCallback(
|
|
|
(_value: any) => {
|
|
(_value: any) => {
|
|
|
- console.log({ ..._value });
|
|
|
|
|
props.onValueChange?.({ ..._value });
|
|
props.onValueChange?.({ ..._value });
|
|
|
},
|
|
},
|
|
|
[column, termType, value],
|
|
[column, termType, value],
|
|
@@ -85,8 +124,6 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
|
|
|
|
|
const valueEventChange = useCallback(
|
|
const valueEventChange = useCallback(
|
|
|
(_v: any) => {
|
|
(_v: any) => {
|
|
|
- console.log('valueEventChange', column, termType);
|
|
|
|
|
-
|
|
|
|
|
valueChange({
|
|
valueChange({
|
|
|
column: ValueRef.current.column,
|
|
column: ValueRef.current.column,
|
|
|
termType: ValueRef.current.termType,
|
|
termType: ValueRef.current.termType,
|
|
@@ -99,20 +136,22 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
const convertLabelValue = useCallback(
|
|
const convertLabelValue = useCallback(
|
|
|
(columnValue?: string) => {
|
|
(columnValue?: string) => {
|
|
|
if (columnValue && paramOptions.length) {
|
|
if (columnValue && paramOptions.length) {
|
|
|
- console.log('paramsValueOptions ===>>', paramsValueOptions);
|
|
|
|
|
|
|
+ console.log('paramsValueOptions ===>>', paramsValueOptions, columnValue);
|
|
|
const labelOptions = paramsValueOptions.get(columnValue);
|
|
const labelOptions = paramsValueOptions.get(columnValue);
|
|
|
- const _termTypeOptions: any[] =
|
|
|
|
|
- labelOptions?.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) ||
|
|
|
|
|
- [];
|
|
|
|
|
- setTtOptions(_termTypeOptions);
|
|
|
|
|
- setValueType(labelOptions.dataType);
|
|
|
|
|
- if (labelOptions.metrics) {
|
|
|
|
|
- // 指标值
|
|
|
|
|
- const _metrics = labelOptions.metrics.map((mItem: any) => ({
|
|
|
|
|
- title: mItem.name,
|
|
|
|
|
- key: mItem.id,
|
|
|
|
|
- }));
|
|
|
|
|
- setMetricsOptions(_metrics);
|
|
|
|
|
|
|
+ if (labelOptions) {
|
|
|
|
|
+ const _termTypeOptions: any[] =
|
|
|
|
|
+ labelOptions?.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) ||
|
|
|
|
|
+ [];
|
|
|
|
|
+ setTtOptions(_termTypeOptions);
|
|
|
|
|
+ setValueType(labelOptions.dataType);
|
|
|
|
|
+ if (labelOptions.metrics) {
|
|
|
|
|
+ // 指标值
|
|
|
|
|
+ const _metrics = labelOptions.metrics.map((mItem: any) => ({
|
|
|
|
|
+ title: mItem.name,
|
|
|
|
|
+ key: mItem.id,
|
|
|
|
|
+ }));
|
|
|
|
|
+ setMetricsOptions(_metrics);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -131,46 +170,10 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
convertLabelValue(props.data.column);
|
|
convertLabelValue(props.data.column);
|
|
|
}, [props.options]);
|
|
}, [props.options]);
|
|
|
|
|
|
|
|
- const handleOptionsLabel = useCallback(
|
|
|
|
|
- (c: string, t: string, v: any) => {
|
|
|
|
|
- const termsTypeKey = {
|
|
|
|
|
- eq: '等于_value',
|
|
|
|
|
- neq: '不等于_value',
|
|
|
|
|
- gt: '大于_value',
|
|
|
|
|
- gte: '大于等于_value',
|
|
|
|
|
- lt: '小于_value',
|
|
|
|
|
- lte: '小于等于_value',
|
|
|
|
|
- btw: '在_value和_value2之间',
|
|
|
|
|
- nbtw: '不在_value和_value2之间',
|
|
|
|
|
- time_gt_now: '距离当前时间大于_value秒',
|
|
|
|
|
- time_lt_now: '距离当前时间小于_value秒',
|
|
|
|
|
- in: '在_value,_value2之中',
|
|
|
|
|
- nin: '不在_value,_value2之中',
|
|
|
|
|
- like: '包含_value',
|
|
|
|
|
- nlike: '不包含_value',
|
|
|
|
|
- };
|
|
|
|
|
- const typeKey = {
|
|
|
|
|
- and: '并且',
|
|
|
|
|
- or: '或者',
|
|
|
|
|
- };
|
|
|
|
|
- const typeStr = props.isLast ? '' : typeKey[props.data.type!];
|
|
|
|
|
- if (DoubleFilter.includes(t)) {
|
|
|
|
|
- const str = termsTypeKey[t].replace('_value', v[0]).replace('_value2', v[1]);
|
|
|
|
|
- return `${c} ${str} ${typeStr}`;
|
|
|
|
|
- }
|
|
|
|
|
- const str = termsTypeKey[t].replace('_value', v);
|
|
|
|
|
- return `${c} ${str} ${typeStr}`;
|
|
|
|
|
- },
|
|
|
|
|
- [props.isLast, props.data.type],
|
|
|
|
|
- );
|
|
|
|
|
-
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- const _v = Object.values(label[2]);
|
|
|
|
|
- if (_v.length && label[1]) {
|
|
|
|
|
- const _l = handleOptionsLabel(label[0], label[1], _v.length > 1 ? _v : _v[0]);
|
|
|
|
|
- props.onLabelChange?.(_l);
|
|
|
|
|
- }
|
|
|
|
|
- }, [label]);
|
|
|
|
|
|
|
+ console.log('params-effect', props.label);
|
|
|
|
|
+ labelCache.current = props.label || [undefined, undefined, {}, 'and'];
|
|
|
|
|
+ }, [props.label]);
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<div className="terms-params-item">
|
|
<div className="terms-params-item">
|
|
@@ -210,13 +213,12 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
let _termTypeValue = undefined;
|
|
let _termTypeValue = undefined;
|
|
|
if (_termTypeOptions.length) {
|
|
if (_termTypeOptions.length) {
|
|
|
_termTypeValue = _termTypeOptions[0].key;
|
|
_termTypeValue = _termTypeOptions[0].key;
|
|
|
- label[1] = _termTypeValue;
|
|
|
|
|
|
|
+ labelCache.current[1] = _termTypeValue;
|
|
|
setTermType(_termTypeValue);
|
|
setTermType(_termTypeValue);
|
|
|
} else {
|
|
} else {
|
|
|
setTermType('');
|
|
setTermType('');
|
|
|
}
|
|
}
|
|
|
- label[0] = node.fullName;
|
|
|
|
|
- setLabel([...label]);
|
|
|
|
|
|
|
+ labelCache.current[0] = node.fullName;
|
|
|
valueChange({
|
|
valueChange({
|
|
|
column: _value,
|
|
column: _value,
|
|
|
value: {
|
|
value: {
|
|
@@ -244,8 +246,7 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
setValue(_value);
|
|
setValue(_value);
|
|
|
setTermType(v!);
|
|
setTermType(v!);
|
|
|
|
|
|
|
|
- label[1] = v;
|
|
|
|
|
- setLabel([...label]);
|
|
|
|
|
|
|
+ labelCache.current[1] = v;
|
|
|
ValueRef.current.termType = v;
|
|
ValueRef.current.termType = v;
|
|
|
valueChange({
|
|
valueChange({
|
|
|
column: props.data.column,
|
|
column: props.data.column,
|
|
@@ -271,8 +272,8 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
};
|
|
};
|
|
|
ValueRef.current.value = _myValue;
|
|
ValueRef.current.value = _myValue;
|
|
|
setValue(_myValue);
|
|
setValue(_myValue);
|
|
|
- label[2] = { ...label[2], 0: lb };
|
|
|
|
|
- setLabel([...label]);
|
|
|
|
|
|
|
+ labelCache.current[2] = { ...labelCache.current[2], 0: lb };
|
|
|
|
|
+ props.onLabelChange?.([...labelCache.current, props.data.type]);
|
|
|
valueEventChange(_myValue);
|
|
valueEventChange(_myValue);
|
|
|
}}
|
|
}}
|
|
|
/>
|
|
/>
|
|
@@ -291,8 +292,8 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
};
|
|
};
|
|
|
ValueRef.current.value = _myValue;
|
|
ValueRef.current.value = _myValue;
|
|
|
setValue(_myValue);
|
|
setValue(_myValue);
|
|
|
- label[2] = { ...label[2], 1: lb };
|
|
|
|
|
- setLabel([...label]);
|
|
|
|
|
|
|
+ labelCache.current[2] = { ...labelCache.current[2], 1: lb };
|
|
|
|
|
+ props.onLabelChange?.([...labelCache.current, props.data.type]);
|
|
|
valueEventChange(_myValue);
|
|
valueEventChange(_myValue);
|
|
|
}}
|
|
}}
|
|
|
/>
|
|
/>
|
|
@@ -309,18 +310,18 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
setValue({
|
|
setValue({
|
|
|
...v,
|
|
...v,
|
|
|
});
|
|
});
|
|
|
- label[2] = { 0: lb };
|
|
|
|
|
ValueRef.current.value = v;
|
|
ValueRef.current.value = v;
|
|
|
- setLabel([...label]);
|
|
|
|
|
|
|
+ labelCache.current[2] = { 0: lb };
|
|
|
|
|
+ console.log('valueChange', labelCache.current);
|
|
|
|
|
+ props.onLabelChange?.([...labelCache.current, props.data.type]);
|
|
|
valueEventChange(v);
|
|
valueEventChange(v);
|
|
|
}}
|
|
}}
|
|
|
/>
|
|
/>
|
|
|
)}
|
|
)}
|
|
|
- <div
|
|
|
|
|
- className={classNames('button-delete', { show: deleteVisible })}
|
|
|
|
|
- onClick={props.onDelete}
|
|
|
|
|
- >
|
|
|
|
|
- <CloseOutlined />
|
|
|
|
|
|
|
+ <div className={classNames('button-delete', { show: deleteVisible })}>
|
|
|
|
|
+ <Popconfirm title={'确认删除?'} onConfirm={props.onDelete}>
|
|
|
|
|
+ <CloseOutlined />
|
|
|
|
|
+ </Popconfirm>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
{!props.isLast ? (
|
|
{!props.isLast ? (
|
|
@@ -335,6 +336,7 @@ const ParamsItem = observer((props: ParamsItemProps) => {
|
|
|
value={props.data.type}
|
|
value={props.data.type}
|
|
|
onChange={(v) => {
|
|
onChange={(v) => {
|
|
|
props.data.type = v;
|
|
props.data.type = v;
|
|
|
|
|
+ props.onLabelChange?.([...labelCache.current, v]);
|
|
|
}}
|
|
}}
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|