fix: merge next

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

@@ -13,12 +13,15 @@ interface FilterProps {
   action?: number;
   data: TermsType;
   isLast: boolean;
-  onChange: (value: TermsType) => void;
+  onChange?: (value: TermsType | any) => void;
+  onValueChange: (value: TermsType) => void;
   onLabelChange: (lb: any[]) => void;
   options: any[];
   label?: any[];
   onAdd: () => void;
   onDelete: () => void;
+  onColumns: (columns: string[]) => void;
+  columns?: string[];
 }
 
 const handleName = (_data: any) => (
@@ -46,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: '',
@@ -55,7 +59,7 @@ export default observer((props: FilterProps) => {
 
   const valueChange = useCallback(
     (_value: any) => {
-      props.onChange?.({ ..._value });
+      props.onValueChange?.({ ..._value });
     },
     [column, termType, value],
   );
@@ -71,17 +75,27 @@ export default observer((props: FilterProps) => {
     [column, termType],
   );
 
-  const convertLabelValue = (columnValue?: string) => {
-    if (columnValue) {
-      const labelOptions = columnOptionsMap.get(columnValue);
-      if (!labelOptions) return;
-
-      const _termTypeOptions: any[] =
-        labelOptions?.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) || [];
-      setTtOptions(_termTypeOptions);
-      setValueType(labelOptions?.type);
-    }
-  };
+  const convertLabelValue = useCallback(
+    (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 })) ||
+            [];
+          setTtOptions(_termTypeOptions);
+          setValueType(labelOptions?.type);
+          props.onChange?.(props.data);
+        } else {
+          props.onChange?.({});
+          setTtOptions([]);
+          setValueType('');
+        }
+      }
+    },
+    [props.data],
+  );
 
   const handleTreeData = (data: any): any[] => {
     if (data.length > 0) {
@@ -116,6 +130,7 @@ export default observer((props: FilterProps) => {
   }, [props.data]);
 
   useEffect(() => {
+    columnOptionsMap.clear();
     const newOptions = handleTreeData(props.options || []);
     convertLabelValue(props.data?.column);
     setBuiltInOptions(newOptions);
@@ -126,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
@@ -160,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) {
@@ -201,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,
@@ -219,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,
@@ -228,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);
               }}
@@ -241,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,
@@ -250,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);
               }}
@@ -264,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]}
@@ -57,6 +72,9 @@ export default observer((props: TermsProps) => {
                     {
                       validator(_, v) {
                         if (v) {
+                          if (!Object.keys(v).length) {
+                            return Promise.reject(new Error('该数据已发生变更，请重新配置'));
+                          }
                           if (!v.column) {
                             return Promise.reject(new Error('请选择参数'));
                           }
@@ -88,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}
@@ -101,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()}`;
@@ -116,17 +137,21 @@ export default observer((props: TermsProps) => {
                         terms: terms,
                       });
                     }}
-                    onChange={(data) => {
-                      terms[index] = {
-                        ...terms[index],
+                    onValueChange={(data) => {
+                      const newList = [...listRef.current];
+                      newList[index] = {
+                        ...item,
                         ...data,
                       };
-
                       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[] => {
@@ -375,13 +379,20 @@ 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;
-                props.onUpdate(props.data, optionsRef.current);
+                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={() => {
                 const newThenTerms = [...thenTerms];
@@ -398,13 +409,12 @@ export default (props: ItemProps) => {
                     },
                   ],
                 });
-                const _data = props.data;
+                const _data = cacheValueRef.current;
                 set(_data, 'terms', newThenTerms);
                 props.onUpdate(_data, optionsRef.current);
               }}
               onValueChange={(termsData) => {
-                const _data = props.data;
-                console.log('update-onValueChange', termsData, optionsRef.current);
+                const _data = cacheValueRef.current;
                 set(_data, ['terms', index], termsData);
                 // cacheValueRef.current = _data;
                 props.onUpdate(_data, {
@@ -415,14 +425,22 @@ export default (props: ItemProps) => {
                 const newLabel: any[] = props.options?.terms || [];
                 newLabel.splice(index, 1, lb);
                 optionsRef.current['terms'] = newLabel;
-                props.onUpdate(props.data, optionsRef.current);
+                props.onUpdate(cacheValueRef.current, optionsRef.current);
               }}
               onDelete={() => {
                 const _data = thenTerms.filter((a) => a.key !== termsItem.key);
-                console.log(_data, thenTerms, termsItem);
+                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(
                   {
-                    ...props.data,
+                    ...cacheValueRef.current,
                     terms: _data,
                   },
                   optionsRef.current,
@@ -435,7 +453,7 @@ export default (props: ItemProps) => {
             className="filter-add-button"
             onClick={() => {
               getParams();
-              let _data = props.data;
+              let _data = cacheValueRef.current;
               optionsRef.current['terms'] = [];
               if (!_data.terms) {
                 _data = {

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,12 +43,12 @@ export default (props: ListProps) => {
                 props.onDelete(item.key!);
               }}
               onUpdate={(data, options) => {
+                const olData = pick(item, ['terms']);
                 props.onAdd({
-                  ...item,
+                  ...olData,
                   ...data,
                   options,
                 });
-                console.log('update-options', options);
                 setVisible(false);
               }}
             />
@@ -82,6 +83,7 @@ export default (props: ListProps) => {
               key: data.key,
               options,
             };
+            console.log('addModel', item);
             props.onAdd(item);
             setVisible(false);
           }}

src/pages/rule-engine/Scene/Save/action/ListItem/index.less

@@ -13,7 +13,8 @@
 
   .filter-add-button {
     display: inline-block;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
+    margin-left: 8px;
     color: #2f54eb;
     cursor: pointer;
   }
@@ -105,7 +106,7 @@
     position: relative;
     display: flex;
     padding: 4px;
-    border: 1px dashed rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(#000, 0.1);
     border-radius: 2px;
     transition: border 0.3s;
 
@@ -148,16 +149,18 @@
 
 .actions-item-filter-warp {
   display: flex;
+  margin-bottom: 24px;
   padding-top: 10px;
   overflow-x: auto;
   overflow-y: visible;
+  border: 1px dashed #999;
+  border-radius: 2px;
   row-gap: 16px;
 
   .terms-params {
     // display: inline-block;
     display: flex;
     flex-shrink: 0;
-    margin-bottom: 24px;
 
     // &:not(:first-child) {
     //   margin-bottom: 16px;
@@ -165,7 +168,7 @@
 
     .terms-params-warp {
       display: flex;
-      align-items: center;
+      align-items: baseline;
     }
 
     .terms-params-content {
@@ -174,7 +177,7 @@
       // flex-wrap: wrap;
       padding: 8px;
       padding-bottom: 0;
-      background-color: #fafafa;
+      background-color: #fff;
       row-gap: 16px;
 
       .terms-params-item {

src/pages/rule-engine/Scene/Save/action/index.tsx

@@ -90,6 +90,7 @@ export default (props: ActionsProps) => {
                 parallel={false}
                 actions={serialArray.length ? serialArray[0].actions : []}
                 onAdd={(actionItem) => {
+                  console.log('addModel', serialArray);
                   if (serialArray.length) {
                     const indexOf = serialArray[0].actions?.findIndex(
                       (aItem) => aItem.key === actionItem.key,

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

@@ -22,7 +22,6 @@ interface DropdownButtonProps {
   type: 'param' | 'termType' | 'value' | 'type';
   fieldNames?: any;
   showLabelKey?: string;
-  onVailChange?: (vail: boolean) => void;
 }
 
 const TypeStyle = {
@@ -46,14 +45,11 @@ const DropdownButton = (props: DropdownButtonProps) => {
     (key?: string) => {
       if (key && paramOptions.length) {
         const labelOptions = valueOptions.get(key);
-        console.log('dropdown', key, labelOptions);
         if (labelOptions) {
           const nameKey = props.showLabelKey || 'title';
           setLabel(labelOptions[nameKey]);
-          props.onVailChange?.(true);
         } else {
           setLabel(key);
-          props.onVailChange?.(false);
         }
       } else {
         setLabel(key!);
@@ -145,7 +141,6 @@ const DropdownButton = (props: DropdownButtonProps) => {
       <div
         className={classNames(styles['dropdown-button'], props.className, typeClassName)}
         onClick={() => {
-          console.log(props.options);
           if (props.options.length === 0 && props.type !== 'termType') {
             onlyMessage('请先配置设备触发规则', 'warning');
           }

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

src/pages/rule-engine/Scene/Save/terms/branchItem.tsx

@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { set } from 'lodash';
 import { Store } from 'jetlinks-store';
 import { Form, FormInstance, Popconfirm } from 'antd';
-import { BranchesThen } from '@/pages/rule-engine/Scene/typings';
 
 interface BranchesItemProps {
   name: number;
@@ -24,7 +23,6 @@ interface BranchesItemProps {
 
 export default observer((props: BranchesItemProps) => {
   const [when, setWhen] = useState<TermsType[]>([]);
-  const [actions, setActions] = useState<BranchesThen[]>([]);
   const [error, setError] = useState(false);
   const [deleteVisible, setDeleteVisible] = useState(false);
 
@@ -40,9 +38,6 @@ export default observer((props: BranchesItemProps) => {
     if (props.data.when) {
       setWhen(props.data.when);
     }
-    if (props.data.then) {
-      setActions(props.data.then);
-    }
   }, [props.data]);
 
   const addWhen = (index: number) => {
@@ -162,7 +157,7 @@ export default observer((props: BranchesItemProps) => {
                   <Actions
                     openShakeLimit={true}
                     name={props.name}
-                    thenOptions={actions}
+                    thenOptions={FormModel.current.branches?.[props.name].then || []}
                     onAdd={(data) => {
                       if (FormModel.current.branches && data) {
                         const newThen = [...FormModel.current.branches[props.name].then, data];

src/pages/rule-engine/Scene/Save/terms/index.less

@@ -104,7 +104,7 @@
 
   .terms-params-warp {
     display: flex;
-    align-items: center;
+    align-items: baseline;
   }
 
   .terms-params-content {

src/pages/rule-engine/Scene/Save/terms/paramsItem.tsx

@@ -20,7 +20,7 @@ interface ParamsItemProps {
   isDelete: boolean;
   options: any[];
   onValueChange?: (value: TermsType) => void;
-  onChange?: (value: TermsType) => void;
+  onChange?: (value: TermsType | any) => void;
   onLabelChange?: (label: string[]) => void;
   label?: any[];
   onAdd: () => void;
@@ -159,6 +159,7 @@ const ParamsItem = observer((props: ParamsItemProps) => {
             setMetricsOptions(_metrics);
           }
         } else {
+          props.onChange?.({});
           setTtOptions([]);
           setValueType('');
         }
@@ -210,9 +211,6 @@ const ParamsItem = observer((props: ParamsItemProps) => {
           }}
           showLabelKey="fullName"
           isTree={true}
-          onVailChange={(v) => {
-            console.log('onVailChange', v);
-          }}
           onChange={(_value, item) => {
             setValue({
               value: undefined,