fix: 修复触发条件无法删除问题

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

@@ -70,13 +70,15 @@ const DropdownButton = (props: DropdownButtonProps) => {
 
   const DropdownRender = useMemo(() => {
     return (
-      <Tree
-        selectedKeys={myValue ? [myValue] : []}
-        onSelect={treeSelect}
-        treeData={props.options}
-        fieldNames={props.fieldNames}
-        height={500}
-      />
+      <div className={styles['dropdown-content']}>
+        <Tree
+          selectedKeys={myValue ? [myValue] : []}
+          onSelect={treeSelect}
+          treeData={props.options}
+          fieldNames={props.fieldNames}
+          height={500}
+        />
+      </div>
     );
   }, [props.options, myValue]);
 

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

@@ -33,8 +33,6 @@ const Menus = (props: MenusProps) => {
   const [value, setValue] = useState(props.value);
 
   useEffect(() => {
-    console.log('menus-useEffect', props.value);
-
     setValue(props.value);
   }, [props.value]);
 
@@ -78,8 +76,6 @@ export default (props: ParamsDropdownProps) => {
     [activeKey],
   );
 
-  console.log('activeKey', activeKey);
-
   const renderNode = useCallback(
     (type: string, _v: any, config: any) => {
       let _value = _v;
@@ -121,8 +117,9 @@ export default (props: ParamsDropdownProps) => {
         case 'date':
           return (
             <MTimePicker
-              value={moment(_value, 'HH:mm:ss')}
+              value={_value ? moment(_value, 'HH:mm:ss') : undefined}
               onChange={(_: any, timeString: string) => {
+                console.log('timeString', timeString);
                 onValueChange(timeString, timeString);
               }}
             />
@@ -177,8 +174,6 @@ export default (props: ParamsDropdownProps) => {
   };
 
   useEffect(() => {
-    console.log('params-dropdown', props.value, props);
-
     if (props.value?.value === undefined || props.value?.value === '') {
       setLabel('');
     } else if (props.valueType === 'boolean') {
@@ -266,7 +261,7 @@ export default (props: ParamsDropdownProps) => {
       }}
       tabKey={activeKey}
       itemList={_itemList}
-      style={{ width: 'auto', display: 'inline-block' }}
+      style={{ width: 'auto' }}
       bodyStyle={{ width: 'auto' }}
       type={props.valueType}
       open={open}

src/pages/rule-engine/Scene/Save/components/Buttons/index.less

@@ -72,3 +72,8 @@
     }
   }
 }
+
+.dropdown-content {
+  padding-top: 4px;
+  box-shadow: 0 4px 18px #f3f3f3;
+}

src/pages/rule-engine/Scene/Save/components/ParamsSelect/components/MTimePicker/index.tsx

@@ -1,14 +1,25 @@
 import { TimePicker } from 'antd';
 import './index.less';
-import { TimePickerProps } from 'antd/lib/time-picker';
+import type { TimePickerProps } from 'antd/lib/time-picker';
+import { useEffect, useState } from 'react';
 
 export default (props: TimePickerProps) => {
+  const [myValue, setMyValue] = useState<any>(props.value || undefined);
+
+  useEffect(() => {
+    setMyValue(props.value);
+  }, [props.value]);
+
   return (
     <div id={'manual-box'} className={'manual-box'}>
       <TimePicker
         {...props}
-        value={props.value}
-        onChange={props.onChange}
+        value={myValue}
+        onChange={(value, timeString) => {
+          console.log('MTime', value);
+          setMyValue(value);
+          props.onChange?.(value, timeString);
+        }}
         className={'manual-time-picker'}
         popupClassName={'my-manual-time-picker'}
         open

src/pages/rule-engine/Scene/Save/components/ParamsSelect/index.less

@@ -19,39 +19,50 @@
     background-color: white;
     border-radius: 2px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.27);
-    .select-box {
-      padding: 4px;
-      .select-box-header-top {
-        width: 100%;
-        overflow-x: auto;
-        border-bottom: 1px solid #f0f0f0;
-        .select-box-header {
-          display: flex;
-          justify-content: flex-start;
-          justify-items: center;
-          width: max-content;
-          .select-header-title {
-            padding: 7px 14px;
-            overflow: hidden;
-            color: #999;
-            font-weight: 500;
-            font-size: 16px;
-            white-space: nowrap;
-            cursor: pointer;
-            &.active {
-              color: #323130;
-              border-bottom: 2px solid #2f54eb;
-            }
-          }
-        }
+  }
+}
 
-        &::-webkit-scrollbar {
-          width: 0;
+.select-box {
+  position: relative;
+  min-width: 220px;
+  padding: 4px;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 4px 18px #f3f3f3;
+
+  .select-box-header-top {
+    width: 100%;
+    overflow-x: auto;
+    border-bottom: 1px solid #f0f0f0;
+    .select-box-header {
+      display: flex;
+      justify-content: flex-start;
+      justify-items: center;
+      width: max-content;
+      .select-header-title {
+        padding: 7px 14px;
+        overflow: hidden;
+        color: #999;
+        font-weight: 500;
+        font-size: 16px;
+        white-space: nowrap;
+        cursor: pointer;
+        &.active {
+          color: #323130;
+          border-bottom: 2px solid #2f54eb;
         }
       }
-      .select-box-content {
-        width: 100%;
-      }
     }
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+  }
+  .select-box-content {
+    width: 100%;
+  }
+
+  #manual-box {
+    height: 275px;
   }
 }

src/pages/rule-engine/Scene/Save/components/ParamsSelect/index.tsx

@@ -1,6 +1,6 @@
 import { DownOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
-import { useState, useEffect, useRef, ReactNode } from 'react';
+import { Dropdown, Input } from 'antd';
+import { useState, useEffect, ReactNode } from 'react';
 import './index.less';
 import classNames from 'classnames';
 import { InputProps } from 'antd/lib/input/Input';
@@ -28,10 +28,10 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const [visible, setVisible] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [tabKey, setTabKey] = useState<string>(props?.tabKey || props.itemList[0]?.key);
-  const wrapperRef = useRef<any>(null);
-  const nodeRef = useRef<any>(null);
+  // const wrapperRef = useRef<any>(null);
+  // const nodeRef = useRef<any>(null);
   const [value, setValue] = useState<any>(props.value);
 
   useEffect(() => {
@@ -44,33 +44,60 @@ export default (props: Props) => {
 
   useEffect(() => {
     if (props.open !== undefined) {
-      setVisible(props.open);
+      setOpen(props.open);
     }
   }, [props.open]);
 
-  const handleClick = (e: any) => {
-    if (visible && e.target) {
-      if (!(wrapperRef.current && wrapperRef.current.contains(e.target))) {
-        setVisible(false);
-        props.openChange?.(false);
-      }
-    }
-  };
+  // const handleClick = (e: any) => {
+  //   if (open && e.target) {
+  //     if (!(wrapperRef.current && wrapperRef.current.contains(e.target))) {
+  //       setOpen(false);
+  //       props.openChange?.(false);
+  //     }
+  //   }
+  // };
 
-  useEffect(() => {
-    window.addEventListener('click', handleClick);
-    return () => {
-      window.removeEventListener('click', handleClick);
-    };
-  });
+  // useEffect(() => {
+  //   window.addEventListener('click', handleClick);
+  //   return () => {
+  //     window.removeEventListener('click', handleClick);
+  //   };
+  // });
 
   // useEffect(() => {
   //   props.onChange(value, tabKey);
   // }, [value, tabKey]);
-  const _bosyStyle = props.bodyStyle || {};
+  // const _bosyStyle = props.bodyStyle || {};
 
   return (
-    <div className={'select-wrapper'} ref={wrapperRef} style={props.style}>
+    <Dropdown
+      trigger={['click']}
+      open={open}
+      onOpenChange={setOpen}
+      dropdownRender={() => (
+        <div className="select-box">
+          <div className={'select-box-header-top'}>
+            <div className={'select-box-header'}>
+              {(props.itemList || []).map((item) => (
+                <div
+                  key={item.key}
+                  className={classNames('select-header-title', item.key === tabKey ? 'active' : '')}
+                  onClick={() => {
+                    setTabKey(item.key);
+                    props.onChange(value, item.key);
+                  }}
+                >
+                  {item.label}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={'select-box-content'}>
+            {(props?.itemList || []).find((item) => item.key === tabKey)?.content || ''}
+          </div>
+        </div>
+      )}
+    >
       {props.children ? (
         props.children
       ) : (
@@ -82,46 +109,11 @@ export default (props: Props) => {
             setValue(e.target.value);
           }}
           onFocus={() => {
-            setVisible(true);
+            setOpen(true);
             props.openChange?.(true);
           }}
         />
       )}
-      {visible && (
-        <div
-          className={'select-container'}
-          ref={nodeRef}
-          style={props.type !== 'date' ? { minHeight: 100, ..._bosyStyle } : _bosyStyle}
-        >
-          <div className={'select-box'}>
-            <div className={'select-box-header-top'}>
-              <div className={'select-box-header'}>
-                {(props.itemList || []).map((item) => (
-                  <div
-                    key={item.key}
-                    className={classNames(
-                      'select-header-title',
-                      item.key === tabKey ? 'active' : '',
-                    )}
-                    onClick={() => {
-                      setTabKey(item.key);
-                      props.onChange(value, item.key);
-                    }}
-                  >
-                    {item.label}
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className={'select-box-content'}>
-              {
-                (props?.itemList || []).find((item) => item.key === tabKey)?.content || ''
-                // contentRender((props?.itemList || []).find(item => item.key === tabKey))
-              }
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
+    </Dropdown>
   );
 };

src/pages/rule-engine/Scene/Save/device/addModel.tsx

@@ -78,8 +78,6 @@ export default observer((props: AddProps) => {
         props.value.selector === 'custom'
           ? props.value.selectorValues?.map((item) => item.value) || []
           : [];
-      // Object.assign(DeviceModel, props.value);
-      console.log('addModel', DeviceModel, props.value);
     }
   }, [props.value]);
 

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

@@ -45,8 +45,6 @@ export default observer(() => {
     return _label;
   };
 
-  console.log(FormModel.current);
-
   return (
     <div>
       <div style={{ marginBottom: 16 }}>

src/pages/rule-engine/Scene/Save/device/product.tsx

@@ -244,6 +244,13 @@ export default observer(() => {
               DeviceModel.productId = selectedRows.map((item) => item.id)[0];
               DeviceModel.productDetail = selectedRows?.[0];
               handleMetadata(DeviceModel.productDetail.metadata);
+              // 初始化选择设备类型以及触发类型
+              DeviceModel.deviceKeys = [];
+              DeviceModel.orgId = '';
+              DeviceModel.selector = 'custom';
+              DeviceModel.operation = {
+                operator: 'online',
+              };
             },
           }}
           request={(params) =>

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

@@ -14,6 +14,7 @@ import './index.less';
 import { onlyMessage } from '@/utils/util';
 import { useHistory } from 'umi';
 import { getMenuPathByCode } from '@/utils/menu';
+import { cloneDeep } from 'lodash';
 
 const defaultBranches = [
   {
@@ -34,20 +35,9 @@ const defaultBranches = [
     ],
     key: 'branckes_1',
     shakeLimit: {
-      enabled: true,
-      time: 1,
-      threshold: 1,
-      alarmFirst: false,
-    },
-    then: [],
-  },
-  {
-    when: [],
-    key: 'branckes_2',
-    shakeLimit: {
-      enabled: true,
-      time: 1,
-      threshold: 1,
+      enabled: false,
+      time: 0,
+      threshold: 0,
       alarmFirst: false,
     },
     then: [],
@@ -56,9 +46,13 @@ const defaultBranches = [
 
 const defaultOptions = {
   trigger: {},
-  terms: [
+  when: [
     {
-      terms: [],
+      terms: [
+        {
+          terms: [],
+        },
+      ],
     },
   ],
 };
@@ -85,7 +79,20 @@ export default observer(() => {
         type: '',
       },
       options: defaultOptions,
-      branches: defaultBranches,
+      branches: [
+        ...defaultBranches,
+        {
+          when: [],
+          key: 'branckes_2',
+          shakeLimit: {
+            enabled: false,
+            time: 0,
+            threshold: 0,
+            alarmFirst: false,
+          },
+          then: [],
+        },
+      ],
     };
   };
 
@@ -125,12 +132,23 @@ export default observer(() => {
               return bItem;
             });
           }
+          branches.push({
+            when: [],
+            key: 'branckes_2',
+            shakeLimit: {
+              enabled: false,
+              time: 0,
+              threshold: 0,
+              alarmFirst: false,
+            },
+            then: [],
+          });
           FormModel.current = {
             ...resp.result,
-            options: resp.result.options || defaultOptions,
-            branches,
           };
-          console.log('FormModel', FormModel);
+          FormModel.current.options = { ...defaultOptions, ...resp.result.options };
+          FormModel.current.trigger = resp.result.trigger || {};
+          FormModel.current.branches = branches;
         }
       });
     }
@@ -163,7 +181,22 @@ export default observer(() => {
   };
 
   const submit = useCallback(() => {
-    service.updateScene(FormModel.current).then((res) => {
+    const FormData = cloneDeep(FormModel.current);
+    const { options, branches } = FormData;
+    if (options?.terms) {
+      options.when = options.when.filter((item: any) => {
+        const terms = item.terms.filter((tItem: any) => !!tItem.length);
+        return !!terms.length;
+      });
+      if (!options.terms.length) {
+        delete options.terms;
+      }
+    }
+
+    if (branches) {
+      FormData.branches = branches.filter((item) => !!item.then.length || !!item.when.length);
+    }
+    service.updateScene(FormData).then((res) => {
       if (res.status === 200) {
         onlyMessage('操作成功', 'success');
         const url = getMenuPathByCode('rule-engine/Scene');

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

@@ -1,4 +1,4 @@
-import { observer } from '@formily/react';
+import { observer, Observer } from '@formily/react';
 import { useState, useEffect } from 'react';
 import { FormModel } from '@/pages/rule-engine/Scene/Save';
 import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -6,6 +6,7 @@ import type { ActionBranchesProps, TermsType } from '@/pages/rule-engine/Scene/t
 import Term from './term';
 import Actions from '@/pages/rule-engine/Scene/Save/action';
 import classNames from 'classnames';
+import { set } from 'lodash';
 
 interface BranchesItemProps {
   name: number;
@@ -16,10 +17,11 @@ interface BranchesItemProps {
 }
 
 export default observer((props: BranchesItemProps) => {
-  const [deleteVisible, setDeleteVisible] = useState(false);
   const [when, setWhen] = useState<TermsType[]>([]);
 
   useEffect(() => {
+    console.log('branchItem', props.data.when);
+
     if (props.data.when) {
       setWhen(props.data.when);
     }
@@ -27,12 +29,14 @@ export default observer((props: BranchesItemProps) => {
 
   const addWhen = (index: number) => {
     const lastBranch = FormModel.current.branches![index].when;
-    FormModel.current.options?.terms.push({
-      terms: [],
+    FormModel.current.options?.when.push({
+      terms: [{ terms: [] }],
     });
+
     lastBranch.push({
       terms: [
         {
+          type: 'and',
           column: undefined,
           value: undefined,
           key: 'params_1',
@@ -47,9 +51,9 @@ export default observer((props: BranchesItemProps) => {
         when: [],
         key: `branch_${new Date().getTime()}`,
         shakeLimit: {
-          enabled: true,
-          time: 1,
-          threshold: 1,
+          enabled: false,
+          time: 0,
+          threshold: 0,
           alarmFirst: false,
         },
         then: [],
@@ -60,57 +64,57 @@ export default observer((props: BranchesItemProps) => {
   return (
     <div className="actions-terms-warp">
       <div className="actions-terms-title">{props.isFrist ? '当' : '否则'}</div>
-      <div
-        className={classNames('actions-terms-options', { border: !props.isFrist })}
-        onMouseOver={() => setDeleteVisible(true)}
-        onMouseOut={() => setDeleteVisible(false)}
-      >
-        {!props.isFrist && props.data.when?.length ? (
-          <div
-            className={classNames('terms-params-delete denger', { show: deleteVisible })}
-            onClick={props.onDelete}
-          >
+      <div className={classNames('actions-terms-options', { border: !props.isFrist })}>
+        {!props.isFrist && props.data.when.length ? (
+          <div className={classNames('terms-params-delete denger show')} onClick={props.onDelete}>
             <DeleteOutlined />
           </div>
         ) : null}
         <div className="actions-terms-list">
-          {when.length ? (
-            when.map((item, dIndex) => (
-              <Term
-                pName={[props.name, 'when']}
-                name={dIndex}
-                data={item}
-                key={item.key}
-                paramsOptions={props.paramsOptions}
-                isLast={dIndex === when!.length - 1}
-                onValueChange={(data) => {
-                  FormModel.current.branches![props.name].when[dIndex] = {
-                    ...FormModel.current.branches![props.name].when[dIndex],
-                    ...data,
-                  };
-                }}
-                onLabelChange={(options) => {
-                  FormModel.current.options!.terms[props.name] = options;
-                }}
-                onDelete={() => {
-                  FormModel.current.branches![props.name].when.splice(dIndex, 1);
-                }}
-              />
-            ))
-          ) : (
-            <span
-              style={{
-                fontSize: 14,
-                color: '#2F54EB',
-                cursor: 'pointer',
-                padding: props.isFrist ? '16px 0' : 0,
-              }}
-              onClick={() => addWhen(props.name)}
-            >
-              {' '}
-              <PlusCircleOutlined style={{ padding: 4 }} /> 添加过滤条件
-            </span>
-          )}
+          <Observer>
+            {() =>
+              when.length ? (
+                when.map((item, dIndex) => (
+                  <Term
+                    whenName={props.name}
+                    pName={[props.name, 'when']}
+                    name={dIndex}
+                    data={item}
+                    key={item.key}
+                    paramsOptions={props.paramsOptions}
+                    isLast={dIndex === when!.length - 1}
+                    onValueChange={(data) => {
+                      console.log('onValueChange2', data);
+                      // FormModel.current.branches![props.name].when[dIndex] = {
+                      //   ...FormModel.current.branches![props.name].when[dIndex],
+                      //   ...data,
+                      // };
+                      set(FormModel.current.branches!, [props.name, 'when', dIndex], data);
+                    }}
+                    onLabelChange={(options) => {
+                      FormModel.current.options!.terms[props.name] = options;
+                    }}
+                    onDelete={() => {
+                      FormModel.current.branches![props.name].when.splice(dIndex, 1);
+                    }}
+                  />
+                ))
+              ) : (
+                <span
+                  style={{
+                    fontSize: 14,
+                    color: '#2F54EB',
+                    cursor: 'pointer',
+                    padding: props.isFrist ? '16px 0' : 0,
+                  }}
+                  onClick={() => addWhen(props.name)}
+                >
+                  {' '}
+                  <PlusCircleOutlined style={{ padding: 4 }} /> 添加过滤条件
+                </span>
+              )
+            }
+          </Observer>
         </div>
         <div className="actions-branchs">
           <Actions openShakeLimit={true} name={props.name} thenOptions={props.data.then} />

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

@@ -45,14 +45,17 @@
       width: 0;
 
       &.border {
-        padding: 18px;
+        padding: 10px 18px 18px 18px;
         border: 1px dashed #999;
         border-radius: 2px;
       }
 
       .actions-terms-list {
         display: flex;
-        flex-wrap: wrap;
+        padding-top: 10px;
+        overflow-x: auto;
+        overflow-y: visible;
+        // flex-wrap: wrap;
         row-gap: 16px;
       }
     }
@@ -69,7 +72,9 @@
 }
 
 .terms-params {
-  display: inline-block;
+  // display: inline-block;
+  display: flex;
+  flex-shrink: 0;
 
   // &:not(:first-child) {
   //   margin-bottom: 16px;
@@ -83,14 +88,18 @@
   .terms-params-content {
     position: relative;
     display: flex;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
     padding: 8px;
     background-color: #fafafa;
     row-gap: 16px;
+    .terms-params-item {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .terms-add {
-    display: inline-block;
+    // display: inline-block;
     width: 66px;
     margin-left: 16px;
     padding: 2px 8px;
@@ -99,10 +108,15 @@
     border: 1px dashed rgba(0, 0, 0, 0.3);
     border-radius: 30px;
     cursor: pointer;
+
+    .terms-content {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .term-type-warp {
-    display: inline-block;
+    // display: inline-block;
     width: 50px;
     margin: 0 16px;
     .term-type {
@@ -115,7 +129,7 @@
 
 .terms-params-item {
   .params-button {
-    display: inline-block;
+    // display: inline-block;
     padding: 6px 8px;
     border: 1px solid #d9d9d9;
     border-radius: 8px;
@@ -124,18 +138,23 @@
 
   .params-item_button {
     position: relative;
-    display: inline-block;
+    // display: inline-block;
+    display: flex;
     padding: 4px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 2px;
 
+    // > div {
+    //   flex-shrink: 0;
+    // }
+
     .button-delete {
       .deleteBtn();
     }
   }
 
   .term-add {
-    display: inline-block;
+    // display: inline-block;
     width: 66px;
     margin-left: 16px;
     padding: 4px 8px;

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

@@ -43,6 +43,7 @@ export default observer(() => {
                 paramsOptions={TermsModel.columnOptions}
                 onDelete={() => {
                   FormModel.current.branches?.splice(index, 1);
+                  FormModel.current.options?.when?.splice(index, 1);
                 }}
               />
             );

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import type { TermsType, TermsVale } from '@/pages/rule-engine/Scene/typings';
 import { DropdownButton, ParamsDropdown } from '@/pages/rule-engine/Scene/Save/components/Buttons';
 import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
@@ -12,6 +12,7 @@ interface ParamsItemProps {
   pName: (number | string)[];
   name: number;
   isLast: boolean;
+  isDelete: boolean;
   options: any[];
   onValueChange?: (value: TermsType) => void;
   onLableChange?: (label: string) => void;
@@ -33,8 +34,15 @@ const ParasmItem = observer((props: ParamsItemProps) => {
   const [column, setColumn] = useState('');
   const [label, setLabel] = useState<any[]>([undefined, undefined, {}]);
 
+  const ValueRef = useRef<Partial<TermsType>>({
+    column: '',
+    termType: '',
+    value: undefined,
+  });
+
   const valueChange = useCallback(
     (_value: any) => {
+      console.log({ ..._value });
       props.onValueChange?.({ ..._value });
     },
     [column, termType, value],
@@ -42,9 +50,11 @@ const ParasmItem = observer((props: ParamsItemProps) => {
 
   const valueEventChange = useCallback(
     (_v: any) => {
+      console.log('valueEventChange', column, termType);
+
       valueChange({
-        column,
-        termType,
+        column: ValueRef.current.column,
+        termType: ValueRef.current.termType,
         value: _v,
       });
     },
@@ -108,9 +118,12 @@ const ParasmItem = observer((props: ParamsItemProps) => {
   };
 
   useEffect(() => {
+    console.log('paramsChange', props.data);
+
     setTermType(props.data.termType || '');
     setValue(props.data.value);
     setColumn(props.data.column || '');
+    ValueRef.current = props.data || {};
   }, [props.data]);
 
   useEffect(() => {
@@ -175,8 +188,12 @@ const ParasmItem = observer((props: ParamsItemProps) => {
     <div className="terms-params-item">
       <div
         className="params-item_button"
-        onMouseOver={() => setDeleteVisible(true)}
-        onMouseOut={() => setDeleteVisible(false)}
+        onMouseOver={() => {
+          if (props.isDelete) setDeleteVisible(true);
+        }}
+        onMouseOut={() => {
+          if (props.isDelete) setDeleteVisible(false);
+        }}
       >
         <DropdownButton
           options={paramOptions}
@@ -196,6 +213,7 @@ const ParasmItem = observer((props: ParamsItemProps) => {
             });
             paramChange(item);
             setColumn(_value!);
+            ValueRef.current.column = _value!;
             const node = item.node;
             const _termTypeOptions: any[] =
               node.termTypes?.map((tItem: any) => ({ title: tItem.name, key: tItem.id })) || [];
@@ -240,7 +258,7 @@ const ParasmItem = observer((props: ParamsItemProps) => {
 
             label[1] = v;
             setLabel([...label]);
-
+            ValueRef.current.termType = v;
             valueChange({
               column: props.data.column,
               value: value as TermsVale,
@@ -298,6 +316,8 @@ const ParasmItem = observer((props: ParamsItemProps) => {
                 ...v,
               });
               label[2] = { 0: lb };
+              console.log('onchange', ValueRef.current, termType, props.data.column);
+
               setLabel([...label]);
               valueEventChange(v);
             }}
@@ -324,8 +344,10 @@ const ParasmItem = observer((props: ParamsItemProps) => {
         </div>
       ) : (
         <div className="term-add" onClick={props.onAdd}>
-          <PlusOutlined style={{ fontSize: 12, paddingRight: 4 }} />
-          <span>条件</span>
+          <div className="terms-content">
+            <PlusOutlined style={{ fontSize: 12, paddingRight: 4 }} />
+            <span>条件</span>
+          </div>
         </div>
       )}
     </div>

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

@@ -1,16 +1,17 @@
-import { observer } from '@formily/react';
+import { observer, Observer } from '@formily/react';
 import { FormModel } from '@/pages/rule-engine/Scene/Save';
 import ParamsItem from './paramsItem';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 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 { get } from 'lodash';
+import { get, set } from 'lodash';
 import './index.less';
 interface TermsProps {
   data: TermsType;
   pName: (number | string)[];
+  whenName: number;
   name: number;
   isLast: boolean;
   paramsOptions: any[];
@@ -21,19 +22,12 @@ interface TermsProps {
 
 export default observer((props: TermsProps) => {
   const [deleteVisible, setDeleteVisible] = useState(false);
-  const [terms, setTerms] = useState<TermsType[]>([]);
-
-  useEffect(() => {
-    if (props.data.terms) {
-      setTerms(props.data.terms);
-    } else {
-      setTerms([]);
-    }
-  }, [props.data.terms]);
 
   const addTerms = () => {
     const data = get(FormModel.current.branches, [...props.pName]);
-    FormModel.current.options!.terms[props.name].terms.push('');
+    FormModel.current.options!.when[props.whenName].terms.push({
+      terms: [],
+    });
     const key = `terms_${new Date().getTime()}`;
     const defaultValue = {
       type: 'and',
@@ -48,6 +42,8 @@ export default observer((props: TermsProps) => {
       key,
     };
     data?.push(defaultValue);
+    set(FormModel.current.branches!, [...props.pName], data);
+    // setTerms([...terms])
   };
 
   return (
@@ -55,58 +51,71 @@ export default observer((props: TermsProps) => {
       <div className="terms-params-warp">
         <div
           className="terms-params-content"
-          onMouseOver={() => setDeleteVisible(true)}
-          onMouseOut={() => setDeleteVisible(false)}
+          onMouseOver={() => {
+            if (props.name !== 0) setDeleteVisible(true);
+          }}
+          onMouseOut={() => {
+            if (props.name !== 0) setDeleteVisible(false);
+          }}
         >
-          {terms.map((item, index) => (
-            <ParamsItem
-              pName={[...props.pName, props.name]}
-              name={index}
-              data={item}
-              key={item.key}
-              isLast={index === props.data.terms!.length - 1}
-              options={props.paramsOptions}
-              onDelete={() => {
-                terms.splice(index, 1);
-                setTerms([...terms]);
-                props.onValueChange({
-                  terms: terms,
-                });
-              }}
-              onAdd={() => {
-                const key = `params_${new Date().getTime()}`;
-                terms.push({
-                  type: 'and',
-                  column: undefined,
-                  value: undefined,
-                  termType: undefined,
-                  key,
-                });
-                console.log('onAdd', terms);
+          <Observer>
+            {() => {
+              const _when = get(FormModel.current.branches, [...props.pName, props.name]);
+              const terms: TermsType[] = _when.terms;
+              return terms.map((item, index) => (
+                <ParamsItem
+                  pName={[...props.pName, props.name]}
+                  isDelete={terms.length > 1}
+                  name={index}
+                  data={item}
+                  key={item.key}
+                  isLast={index === props.data.terms!.length - 1}
+                  options={props.paramsOptions}
+                  onDelete={() => {
+                    terms.splice(index, 1);
+                    // setTerms([...terms]);
+                    // props.onValueChange({
+                    //   terms: terms,
+                    // });
+                  }}
+                  onAdd={() => {
+                    const key = `params_${new Date().getTime()}`;
+                    terms.push({
+                      type: 'and',
+                      column: undefined,
+                      value: undefined,
+                      termType: undefined,
+                      key,
+                    });
 
-                setTerms([...terms]);
-                props.onValueChange({
-                  terms: terms,
-                });
-              }}
-              onValueChange={(data) => {
-                terms[index] = {
-                  ...terms[index],
-                  ...data,
-                };
-                setTerms([...terms]);
-                props.onValueChange({
-                  terms: terms,
-                });
-              }}
-              onLableChange={(options) => {
-                console.log(options, FormModel.current.options!.terms);
-                FormModel.current.options!.terms[props.name].terms[index] = options;
-                FormModel.current.options!.terms[props.name].termType =
-                  props.data.type === 'and' ? '并且' : '或者';
-              }}
-            />
-          ))}
+                    // setTerms([...terms]);
+                    props.onValueChange({
+                      ..._when,
+                      terms: terms,
+                    });
+                  }}
+                  onValueChange={(data) => {
+                    terms[index] = {
+                      ...terms[index],
+                      ...data,
+                    };
+
+                    // setTerms([...terms]);
+                    props.onValueChange({
+                      ..._when,
+                      terms: terms,
+                    });
+                  }}
+                  onLableChange={(options) => {
+                    FormModel.current.options!.when[props.whenName].terms[props.name].terms[index] =
+                      options;
+                    FormModel.current.options!.when[props.whenName].terms[props.name].termType =
+                      props.data.type === 'and' ? '并且' : '或者';
+                  }}
+                />
+              ));
+            }}
+          </Observer>
           <div
             className={classNames('terms-params-delete', { show: deleteVisible })}
             onClick={props.onDelete}
@@ -128,8 +137,10 @@ export default observer((props: TermsProps) => {
           </div>
         ) : (
           <div className="terms-add" onClick={addTerms}>
-            <PlusOutlined style={{ fontSize: 12, paddingRight: 4 }} />
-            <span>分组</span>
+            <div className="terms-content">
+              <PlusOutlined style={{ fontSize: 12, paddingRight: 4 }} />
+              <span>分组</span>
+            </div>
           </div>
         )}
       </div>