feat: 执行动作中对columns添加删除操作

src/pages/rule-engine/Scene/Save/action/ListItem/FilterCondition.tsx

@@ -20,6 +20,8 @@ interface FilterProps {
   label?: any[];
   onAdd: () => void;
   onDelete: () => void;
+  onColumns: (columns: string[]) => void;
+  columns?: string[];
 }
 
 const handleName = (_data: any) => (
@@ -47,6 +49,7 @@ export default observer((props: FilterProps) => {
   const labelCache = useRef<any[]>([undefined, undefined, {}, 'and']);
 
   const [deleteVisible, setDeleteVisible] = useState(false);
+  const columnsRef = useRef<string[]>([]);
 
   const ValueRef = useRef<Partial<TermsType>>({
     column: '',
@@ -76,6 +79,7 @@ export default observer((props: FilterProps) => {
     (columnValue?: string) => {
       if (columnValue) {
         const labelOptions = columnOptionsMap.get(columnValue);
+        console.log('filter-convertLabelValue', labelOptions);
         if (labelOptions) {
           const _termTypeOptions: any[] =
             labelOptions?.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) ||
@@ -126,6 +130,7 @@ export default observer((props: FilterProps) => {
   }, [props.data]);
 
   useEffect(() => {
+    columnOptionsMap.clear();
     const newOptions = handleTreeData(props.options || []);
     convertLabelValue(props.data?.column);
     setBuiltInOptions(newOptions);
@@ -136,6 +141,10 @@ export default observer((props: FilterProps) => {
     labelCache.current = props.label || [undefined, undefined, {}, 'and'];
   }, [props.label]);
 
+  useEffect(() => {
+    columnsRef.current = props.columns || [];
+  }, [props.columns]);
+
   return (
     <div className="filter-condition-warp">
       <div
@@ -170,6 +179,11 @@ export default observer((props: FilterProps) => {
             const _termTypeOptions: any[] =
               node.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) || [];
             setTtOptions(_termTypeOptions);
+            if (!node.metadata) {
+              columnsRef.current = [node.column];
+            } else {
+              columnsRef.current = [];
+            }
             // 默认选中第一个
             let _termTypeValue = undefined;
             if (_termTypeOptions.length) {
@@ -211,6 +225,7 @@ export default observer((props: FilterProps) => {
 
             labelCache.current[1] = v;
             ValueRef.current.termType = v;
+            columnsRef.current.length = 1;
             valueChange({
               column: props.data!.column,
               value: _value as TermsVale,
@@ -229,7 +244,7 @@ export default observer((props: FilterProps) => {
               BuiltInOptions={BuiltInOptions}
               showLabelKey="fullName"
               name={0}
-              onChange={(v, lb) => {
+              onChange={(v, lb, node) => {
                 const _myValue = {
                   value: [v.value, ValueRef.current.value?.value?.[1]],
                   source: v.source,
@@ -238,6 +253,17 @@ export default observer((props: FilterProps) => {
                 setValue(_myValue);
                 labelCache.current[2] = { ...labelCache.current[2], 0: lb };
                 labelCache.current[3] = props.data.type;
+
+                if (v.source === 'upper') {
+                  if (!node.metadata) {
+                    columnsRef.current[1] = node.column;
+                  } else {
+                    columnsRef.current.splice(1, 1);
+                  }
+                } else {
+                  columnsRef.current.length = 1;
+                }
+                props.onColumns(columnsRef.current);
                 props.onLabelChange?.(labelCache.current);
                 valueEventChange(_myValue);
               }}
@@ -251,7 +277,7 @@ export default observer((props: FilterProps) => {
               BuiltInOptions={BuiltInOptions}
               showLabelKey="fullName"
               name={1}
-              onChange={(v, lb) => {
+              onChange={(v, lb, node) => {
                 const _myValue = {
                   value: [ValueRef.current.value?.value?.[0], v.value],
                   source: v.source,
@@ -260,6 +286,17 @@ export default observer((props: FilterProps) => {
                 setValue(_myValue);
                 labelCache.current[2] = { ...labelCache.current[2], 1: lb };
                 labelCache.current[3] = props.data.type;
+
+                if (v.source === 'upper') {
+                  if (!node.metadata) {
+                    columnsRef.current[2] = node.column;
+                  } else {
+                    columnsRef.current.splice(2, 1);
+                  }
+                } else {
+                  columnsRef.current.length = 1;
+                }
+                props.onColumns(columnsRef.current);
                 props.onLabelChange?.(labelCache.current);
                 valueEventChange(_myValue);
               }}
@@ -274,10 +311,21 @@ export default observer((props: FilterProps) => {
             value={value}
             BuiltInOptions={BuiltInOptions}
             showLabelKey="fullName"
-            onChange={(v, lb) => {
+            onChange={(v, lb, node) => {
               setValue({
                 ...v,
               });
+
+              if (v.source === 'upper') {
+                if (!node.metadata) {
+                  columnsRef.current[1] = node.column;
+                } else {
+                  columnsRef.current.splice(1, 1);
+                }
+              } else {
+                columnsRef.current.length = 1;
+              }
+              props.onColumns(columnsRef.current);
               labelCache.current[2] = { 0: lb };
               labelCache.current[3] = props.data.type;
               props.onLabelChange?.(labelCache.current);

src/pages/rule-engine/Scene/Save/action/ListItem/FilterGroup.tsx

@@ -5,7 +5,7 @@ import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
 import { DropdownButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
 import classNames from 'classnames';
 import type { TermsType } from '@/pages/rule-engine/Scene/typings';
-import { isArray } from 'lodash';
+import { isArray, set } from 'lodash';
 import './index.less';
 import { Form, Popconfirm } from 'antd';
 
@@ -24,17 +24,32 @@ interface TermsProps {
   onDelete: () => void;
   onAddGroup: () => void;
   onColumnsChange: (columns: any[]) => void;
+  columns: string[][];
 }
 
 export default observer((props: TermsProps) => {
   const [deleteVisible, setDeleteVisible] = useState(false);
   const _name = [props.branchesName, 'then', props.branchGroup, 'actions', props.action, 'terms'];
+  const [filterList, setFilterList] = useState<TermsType[]>([]);
   const labelRef = useRef<any>({});
+  const listRef = useRef<any[]>([]);
+  const optionsColumnsRef = useRef<any[]>([]);
+  const [columns, setColumns] = useState<any[]>([]);
 
   useEffect(() => {
     labelRef.current = props.label || {};
   }, [props.label]);
 
+  useEffect(() => {
+    setFilterList(props.data?.terms || []);
+    listRef.current = props.data?.terms || [];
+  }, [props.data]);
+
+  useEffect(() => {
+    optionsColumnsRef.current = props.columns;
+    setColumns(props.columns);
+  }, [props.columns]);
+
   return (
     <div className="terms-params">
       <div className="terms-params-warp">
@@ -49,7 +64,7 @@ export default observer((props: TermsProps) => {
         >
           <Observer>
             {() => {
-              const terms = props.data.terms || [];
+              const terms = filterList || [];
               return terms.map((item, index) => (
                 <Form.Item
                   name={['branches', ..._name, props.name, 'terms', index]}
@@ -91,6 +106,7 @@ export default observer((props: TermsProps) => {
                     action={props.action}
                     data={item}
                     key={item.key}
+                    columns={columns?.[props.name]?.[index]}
                     options={props.paramsOptions}
                     label={labelRef.current?.terms?.[index]}
                     isLast={index === props.data.terms!.length - 1}
@@ -104,6 +120,8 @@ export default observer((props: TermsProps) => {
                           terms: terms,
                         });
                       }
+                      set(optionsColumnsRef.current, [props.name, index], []);
+                      props.onColumnsChange(optionsColumnsRef.current);
                     }}
                     onAdd={() => {
                       const key = `params_${new Date().getTime()}`;
@@ -120,16 +138,20 @@ export default observer((props: TermsProps) => {
                       });
                     }}
                     onValueChange={(data) => {
-                      terms[index] = {
+                      const newList = [...listRef.current];
+                      newList[index] = {
                         ...item,
                         ...data,
                       };
-                      debugger;
                       props.onValueChange({
                         ...props.data,
-                        terms: terms,
+                        terms: newList,
                       });
                     }}
+                    onColumns={(_columns) => {
+                      set(optionsColumnsRef.current, [props.name, index], _columns);
+                      props.onColumnsChange(optionsColumnsRef.current);
+                    }}
                     onLabelChange={(options) => {
                       let newLabel: any = [];
                       const typeLabel = props.data.type === 'and' ? '并且' : '或者';

src/pages/rule-engine/Scene/Save/action/ListItem/Item.tsx

@@ -6,7 +6,7 @@ import './index.less';
 import TriggerAlarm from '../TriggerAlarm';
 import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
 import FilterGroup from './FilterGroup';
-import { cloneDeep, set } from 'lodash';
+import { cloneDeep, flattenDeep, set } from 'lodash';
 import { Popconfirm, Space } from 'antd';
 import { TermsType } from '@/pages/rule-engine/Scene/typings';
 import { FormModel } from '@/pages/rule-engine/Scene/Save';
@@ -65,12 +65,16 @@ export default (props: ItemProps) => {
   const [actionType, setActionType] = useState<string>('');
   const [thenTerms, setThenTerms] = useState<TermsType[] | undefined>([]);
   const [paramsOptions, setParamsOptions] = useState<any[]>([]);
+  const [optionsColumns, setOptionsColumns] = useState<string[][]>([]);
 
-  const optionsRef = useRef<any[]>([]);
+  const optionsRef = useRef<any>({});
 
   useEffect(() => {
     // setOp(props.options);
     optionsRef.current = props.options;
+    if (props.options?.termsColumns) {
+      setOptionsColumns(props.options?.termsColumns || []);
+    }
   }, [props.options]);
 
   const handleTreeData = (data: any): any[] => {
@@ -333,7 +337,6 @@ export default (props: ItemProps) => {
   useEffect(() => {
     cacheValueRef.current = props.data;
     setThenTerms(props.data.terms);
-    console.log('optionsRef.current-change', props.data);
   }, [props.data]);
 
   useEffect(() => {
@@ -376,12 +379,19 @@ export default (props: ItemProps) => {
               branchesName={props.branchesName}
               name={index}
               data={termsItem}
+              columns={optionsColumns}
               isLast={index === thenTerms.length - 1}
               paramsOptions={paramsOptions}
               label={props.options?.terms?.[index]}
               actionColumns={props.options?.otherColumns}
               onColumnsChange={(columns) => {
-                optionsRef.current['columns'] = columns;
+                const filterColumns = new Set(flattenDeep(columns)); // 平铺去重
+                let newColumns = [...filterColumns.values()];
+                if (optionsRef.current?.otherColumns) {
+                  newColumns = [...optionsRef.current.otherColumns, ...newColumns];
+                }
+                optionsRef.current['columns'] = newColumns;
+                optionsRef.current['termsColumns'] = columns;
                 props.onUpdate(cacheValueRef.current, optionsRef.current);
               }}
               onAddGroup={() => {
@@ -407,7 +417,6 @@ export default (props: ItemProps) => {
                 const _data = cacheValueRef.current;
                 set(_data, ['terms', index], termsData);
                 // cacheValueRef.current = _data;
-                console.log('optionsRef.current', _data, cacheValueRef.current);
                 props.onUpdate(_data, {
                   ...optionsRef.current,
                 });
@@ -416,11 +425,19 @@ export default (props: ItemProps) => {
                 const newLabel: any[] = props.options?.terms || [];
                 newLabel.splice(index, 1, lb);
                 optionsRef.current['terms'] = newLabel;
-                console.log('optionsRef.current2', props.data);
                 props.onUpdate(cacheValueRef.current, optionsRef.current);
               }}
               onDelete={() => {
                 const _data = thenTerms.filter((a) => a.key !== termsItem.key);
+                if (optionsRef.current?.termsColumns) {
+                  optionsRef.current.termsColumns[index] = [];
+                  const filterColumns = new Set(flattenDeep(optionsRef.current.termsColumns)); // 平铺去重
+                  let newColumns = [...filterColumns.values()];
+                  if (optionsRef.current?.otherColumns) {
+                    newColumns = [...optionsRef.current.otherColumns, ...newColumns];
+                  }
+                  optionsRef.current['columns'] = newColumns;
+                }
                 props.onUpdate(
                   {
                     ...cacheValueRef.current,

src/pages/rule-engine/Scene/Save/action/ListItem/List.tsx

@@ -6,6 +6,7 @@ import type { ActionsType } from '@/pages/rule-engine/Scene/typings';
 import Item from './Item';
 import type { ParallelType } from './Item';
 import { Observer } from '@formily/react';
+import { pick } from 'lodash';
 
 interface ListProps {
   branchesName: number;
@@ -42,7 +43,9 @@ export default (props: ListProps) => {
                 props.onDelete(item.key!);
               }}
               onUpdate={(data, options) => {
+                const olData = pick(item, ['terms']);
                 props.onAdd({
+                  ...olData,
                   ...data,
                   options,
                 });

src/pages/rule-engine/Scene/Save/components/Buttons/ParamsDropdown.tsx

@@ -11,7 +11,7 @@ export interface ParamsDropdownProps {
   value?: any;
   source?: string;
   placeholder?: string;
-  onChange?: (value: any, lb?: any) => void;
+  onChange?: (value: any, lb?: any, node?: any) => void;
   isMetric?: boolean;
   metricOptions?: any[];
   type?: string;
@@ -64,14 +64,14 @@ export default (props: ParamsDropdownProps) => {
   const [open, setOpen] = useState(false);
 
   const onValueChange = useCallback(
-    (value: any, _label: any) => {
+    (value: any, _label: any, item?: any) => {
       setMyValue(value);
       setLabel(_label);
       const changeValue = {
         value: value,
         source: activeKey,
       };
-      props.onChange?.(changeValue, _label);
+      props.onChange?.(changeValue, _label, item);
     },
     [activeKey],
   );
@@ -144,7 +144,7 @@ export default (props: ParamsDropdownProps) => {
                   if (props.showLabelKey) {
                     titleKey = props.showLabelKey;
                   }
-                  onValueChange(selectedKeys[0], e.node[titleKey]);
+                  onValueChange(selectedKeys[0], e.node[titleKey], e.node);
                   setOpen(false);
                 }}
                 style={{ width: 300 }}