fix: bug#15019

src/views/rule-engine/Scene/Save/components/Terms/Branches.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class='["actions-terms-warp", isFirst ? "first-children" : ""]'>
+  <div :class='WarpClass'>
     <div class='actions-terms-title'>
       {{ isFirst ? '当' : '否则' }}
     </div>
@@ -30,21 +30,28 @@
 
         <div class='actions-terms-list-content'>
           <template v-if='showWhen'>
-            <WhenItem
-              v-for='(item, index) in whenData'
-              :key='item.key'
-              :name='index'
-              :showDeleteBtn='whenData.length !== 1'
-              :isFirst='index === 0'
-              :isLast='index === whenData.length -1'
-              :branchName='name'
-              :data='item'
-            />
+            <j-scrollbar>
+              <div style="display: flex; padding-top: 10px;">
+                <WhenItem
+                  v-for='(item, index) in whenData'
+                  :key='item.key'
+                  :name='index'
+                  :showDeleteBtn='whenData.length !== 1'
+                  :isFirst='index === 0'
+                  :isLast='index === whenData.length -1'
+                  :branchName='name'
+                  :data='item'
+                />
+
+              </div>
+            </j-scrollbar>
           </template>
-          <span v-else class='when-add' @click='addWhen' :style='{ padding: isFirst ? "16px 0" : 0 }'>
-            <AIcon type='PlusCircleOutlined' style='padding: 4px' />
-            添加过滤条件
-          </span>
+          <div v-else style="display: flex; padding-top: 10px;">
+            <span class='when-add' @click='addWhen' :style='{ padding: isFirst ? "16px 0" : 0 }'>
+              <AIcon type='PlusCircleOutlined' style='padding: 4px' />
+              添加过滤条件
+            </span>
+          </div>
         </div>
       </div>
       <div class='actions-branches'>
@@ -109,6 +116,14 @@ const whenData = computed(() => {
   return props.data.when
 })
 
+const WarpClass = computed(() => {
+  return {
+    'actions-terms-warp': true,
+    'first-children': props.isFirst,
+    'terms-items': (FormModel.value.branches?.length || 0) > 0
+  }
+})
+
 const onDelete = () => {
   if (FormModel.value.branches?.length == 2) {
     FormModel.value.branches?.splice(props.name, 1, null)

src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue

@@ -1,23 +1,9 @@
 <template>
-  <div
-    class='terms-params-content'
-    @mouseover='mouseover'
-    @mouseout='mouseout'
-  >
-    <j-popconfirm
-      title='确认删除？'
-      :overlayStyle='{minWidth: "180px"}'
-      @confirm='onDelete'
-    >
-      <div v-show='showDelete' class='terms-params-delete'>
-        <AIcon type='CloseOutlined' />
-      </div>
-    </j-popconfirm>
-    <j-form-item
+  <j-form-item
       :name='["branches", branchName, "when", whenName, "terms", props.name]'
       :rules='rules'
-    >
-      <ParamsItem
+  >
+    <ParamsItem
         v-model:value='formModel.branches[branchName].when[whenName].terms[props.name]'
         :isFirst='isFirst'
         :isLast='isLast'
@@ -25,9 +11,8 @@
         :termsName='name'
         :whenName='whenName'
         :branchName='branchName'
-      />
-    </j-form-item>
-  </div>
+    />
+  </j-form-item>
 </template>
 
 <script setup lang='ts' name='TermsItem'>
@@ -114,50 +99,6 @@ const rules = [
   }
 ]
 
-const showDelete = ref(false)
-
-const termsData = computed(() => {
-  return props.data.terms
-})
-
-const mouseover = () => {
-  if (props.showDeleteBtn){
-    showDelete.value = true
-  }
-}
-
-const mouseout = () => {
-  if (props.showDeleteBtn){
-    showDelete.value = false
-  }
-}
-
-const onDelete = () => {
-  formModel.value.branches?.[props.branchName]?.when?.splice(props.whenName, 1)
-  formModel.value.options!.when[props.branchName].terms.splice(props.whenName, 1)
-}
-
-const addTerms = () => {
-  const terms = {
-    type: 'and',
-    terms: [
-      {
-        column: undefined,
-        value: {
-          source: 'fixed',
-          value: undefined
-        },
-        termType: undefined,
-        key: `params_${randomString()}`,
-        type: 'and',
-      }
-    ],
-    key: `terms_${randomString()}`
-  }
-  formModel.value.branches?.[props.branchName]?.when?.[props.whenName].terms?.push(terms)
-  formModel.value.options!.when[props.branchName].terms[props.whenName].terms.push(['','eq','','and'])
-}
-
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue

@@ -12,17 +12,32 @@
           @select='typeChange'
         />
       </div>
-      <TermsItem
-        v-for='(item, index) in termsData'
-        :key='item.key'
-        :branchName='branchName'
-        :whenName='props.name'
-        :name='index'
-        :showDeleteBtn='termsData.length > 1'
-        :isFirst='index === 0'
-        :isLast='index === termsData.length -1'
-        :data='item'
-      />
+      <div
+          class='terms-params-content'
+          @mouseover='mouseover'
+          @mouseout='mouseout'
+      >
+        <j-popconfirm
+            title='确认删除？'
+            :overlayStyle='{minWidth: "180px"}'
+            @confirm='onDelete'
+        >
+          <div v-show='showDelete' class='terms-params-delete'>
+            <AIcon type='CloseOutlined' />
+          </div>
+        </j-popconfirm>
+        <TermsItem
+          v-for='(item, index) in termsData'
+          :key='item.key'
+          :branchName='branchName'
+          :whenName='props.name'
+          :name='index'
+          :showDeleteBtn='termsData.length > 1'
+          :isFirst='index === 0'
+          :isLast='index === termsData.length -1'
+          :data='item'
+        />
+      </div>
       <div class='terms-group-add' @click='addWhen' v-if='isLast'>
         <div class='terms-content'>
           <AIcon type='PlusOutlined' />
@@ -80,6 +95,20 @@ const props = defineProps({
   }
 })
 
+const showDelete = ref(false)
+
+const mouseover = () => {
+  if (props.showDeleteBtn){
+    showDelete.value = true
+  }
+}
+
+const mouseout = () => {
+  if (props.showDeleteBtn){
+    showDelete.value = false
+  }
+}
+
 const termsData = computed(() => {
   return props.data.terms
 })
@@ -88,6 +117,11 @@ const typeChange = (e: any) => {
   formModel.value.options!.when[props.name].terms[props.name].termType = e.label
 }
 
+const onDelete = () => {
+  formModel.value.branches?.[props.branchName]?.when?.splice(props.name, 1)
+  formModel.value.options!.when[props.branchName].terms.splice(props.name, 1)
+}
+
 const addWhen = () => {
   const terms = {
     type: 'and',

src/views/rule-engine/Scene/Save/components/Terms/index.less

@@ -56,6 +56,10 @@
       margin-bottom: 0;
     }
 
+    &.terms-items:last-child {
+      margin-bottom: 24px;
+    }
+
     .when-add-button {
       .add-button();
     }
@@ -96,11 +100,7 @@
         }
 
         .actions-terms-list-content {
-          display: flex;
-          padding-top: 10px;
-          overflow-x: auto;
-          overflow-y: visible;
-          row-gap: 16px;
+
 
         }
       }