update: 优化过滤条件回显

src/components/Search/Search.vue

@@ -4,6 +4,7 @@
     :type='type'
     :request='saveSearchHistory'
     :historyRequest='getSearchHistory'
+    :deleteRequest='deleteSearchHistory'
     :columns='columns'
     :class='props.class'
     @search='searchSubmit'
@@ -13,7 +14,7 @@
 <script setup lang='ts' name='ProSearch'>
 import { PropType } from 'vue'
 import { JColumnsProps } from 'components/Table/types'
-import { saveSearchHistory, getSearchHistory } from '@/api/comm'
+import { saveSearchHistory, getSearchHistory, deleteSearchHistory } from '@/api/comm'
 
 interface Emit {
   (e: 'search', data: any): void

src/components/ValueItem/index.vue

@@ -196,7 +196,7 @@ const timeChange = (e: any) => {
 }
 
 const inputChange = (e: any) => {
-  emit('change', e.target.value)
+  emit('change', e.target ? e.target.value : e)
 }
 
 const dateChange = (e: any) => {

src/views/rule-engine/Scene/Save/action/ListItem/FilterCondition.vue

@@ -19,7 +19,7 @@
         :options='columnOptions'
         icon='icon-zhihangdongzuoxie-1'
         type='column'
-        value-name='column'
+        value-name='id'
         label-name='fullName'
         placeholder='请选择参数'
         v-model:value='paramsValue.column'
@@ -144,7 +144,7 @@ const paramsValue = reactive<TermsType>({
 })
 
 const showDelete = ref(false)
-const columnOptions: any = inject(ContextKey) //
+const columnOptions: any = inject('filter-params') //
 const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
 const valueOptions = ref<any[]>([]) // 默认手动输入下拉
 const metricOption = ref<any[]>([])  //
@@ -183,7 +183,8 @@ const handOptionByColumn = (option: any) => {
 }
 
 watchEffect(() => {
-  const option = getOption(columnOptions.value, paramsValue.column, 'column')
+  const option = getOption(columnOptions.value, paramsValue.column, 'id')
+  console.log(option)
   handOptionByColumn(option)
 })
 

src/views/rule-engine/Scene/Save/action/ListItem/FilterGroup.vue

@@ -1,11 +1,180 @@
 <template>
-
+  <div class='terms-params filter-group'>
+    <div class='terms-params-warp'>
+      <div v-if='!isFirst' class='term-type-warp'>
+        <DropdownButton
+          :options='[
+              { label: "并且", value: "and" },
+              { label: "或者", value: "or" },
+            ]'
+          type='type'
+          v-model:value='formModel.branches[branchName].then[thenName].actions[actionName].terms[name].type'
+        />
+      </div>
+      <div
+        class='terms-params-content'
+        @mouseover='mouseover'
+        @mouseout='mouseout'
+      >
+        <j-popconfirm
+          title='确认删除？'
+          @confirm='onDelete'
+        >
+          <div v-show='showDelete' class='terms-params-delete'>
+            <AIcon type='CloseOutlined' />
+          </div>
+        </j-popconfirm>
+        <j-form-item
+          v-for='(item, index) in termsOptions'
+          :name='["branches", branchName, "then", thenName, "actions", actionName, "terms", name, "terms", index]'
+          :rules='rules'
+        >
+          <FilterItem
+            v-model:value='formModel.branches[branchName].then[thenName].actions[actionName].terms[name].terms[index]'
+            :isFirst='index === 0'
+            :isLast='index === termsOptions.length - 1'
+            :showDeleteBtn='termsOptions.length !== 1'
+            :name='index'
+            :termsName='name'
+            :actionName='actionName'
+            :thenName='thenName'
+            :branchName='branchName'
+          />
+        </j-form-item>
+      </div>
+      <div v-if='isLast' class='terms-group-add'>
+        <div class='terms-content'>
+          <AIcon type='PlusOutlined' style='font-size: 12px;padding-right: 4px;' />
+          <span>分组</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang='ts' name='FilterGroup'>
-export default {
-  name: 'FilterGroup'
+import { storeToRefs } from 'pinia';
+import { useSceneStore } from 'store/scene'
+import DropdownButton from '../../components/DropdownButton'
+import FilterItem from './FilterCondition.vue'
+import { isArray } from 'lodash-es'
+import { queryBuiltInParams } from '@/api/rule-engine/scene'
+import { provide } from 'vue'
+
+const sceneStore = useSceneStore()
+const { data: formModel } = storeToRefs(sceneStore)
+
+const columnOptions = ref<any>([])
+
+
+provide('filter-params', columnOptions)
+
+const props = defineProps({
+  isFirst: {
+    type: Boolean,
+    default: true
+  },
+  isLast: {
+    type: Boolean,
+    default: true
+  },
+  showDeleteBtn: {
+    type: Boolean,
+    default: true
+  },
+  name: {
+    type: Number,
+    default: 0
+  },
+  branchName: {
+    type: Number,
+    default: 0
+  },
+  thenName: {
+    type: Number,
+    default: 0
+  },
+  actionName: {
+    type: Number,
+    default: 0
+  }
+})
+
+const termsOptions = computed(() => {
+  return formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName].terms?.[props.name].terms
+})
+
+const showDelete = ref(false)
+
+const mouseover = () => {
+  showDelete.value = true
 }
+
+const mouseout = () => {
+  showDelete.value = false
+}
+
+const onDelete = () => {
+
+}
+
+const getParams = () => {
+  const params = {
+    branch: props.branchName,
+    branchGroup: props.thenName,
+    action: props.actionName
+  }
+  const data = formModel.value.branches!.filter(item => !!item)
+  queryBuiltInParams({
+    ...formModel.value,
+    branches: data,
+  }, params).then(res => {
+    if (res.success) {
+      columnOptions.value = res.result
+    }
+  })
+}
+
+const rules = [
+  {
+    validator(_: any, v?: Record<string, any>) {
+      // console.log('-----v',v)
+      if (v !== undefined) {
+        if (!Object.keys(v).length) {
+          return Promise.reject(new Error('该数据已发生变更，请重新配置'));
+        }
+        if (!v.column) {
+          return Promise.reject(new Error('请选择参数'));
+        }
+
+        if (!v.termType) {
+          return Promise.reject(new Error('请选择操作符'));
+        }
+
+        if (v.value === undefined) {
+          return Promise.reject(new Error('请选择或输入参数值'));
+        } else {
+          if (
+            isArray(v.value.value) &&
+            v.value.value.some((_v: any) => _v === undefined)
+          ) {
+            return Promise.reject(new Error('请选择或输入参数值'));
+          } else if (v.value.value === undefined) {
+            return Promise.reject(new Error('请选择或输入参数值'));
+          }
+        }
+      } else {
+        return Promise.reject(new Error('请选择参数'));
+      }
+      return Promise.resolve();
+    },
+  },
+]
+
+nextTick(() => {
+  getParams()
+})
+
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/action/ListItem/Item.vue

@@ -324,7 +324,15 @@
                   满足此条件后执行后续动作
                 </div>
                 <div class='actions-item-filter-overflow'>
-
+                  <FilterGroup
+                    v-for='(item, index) in termsOptions'
+                    :branchName='branchesName'
+                    :thenName='thenName'
+                    :actionName='name'
+                    :name='index'
+                    :isLast='index === termsOptions.length - 1'
+                    :isFirst='index === 0'
+                  />
                 </div>
               </template>
               <div v-else class='filter-add-button'>
@@ -371,6 +379,7 @@ import TriggerAlarm from '../TriggerAlarm/index.vue';
 import { useSceneStore } from '@/store/scene';
 import { storeToRefs } from 'pinia';
 import { iconMap, itemNotifyIconMap, typeIconMap } from './util'
+import FilterGroup from './FilterGroup.vue'
 
 const sceneStore = useSceneStore();
 const { data: _data } = storeToRefs(sceneStore);
@@ -454,6 +463,12 @@ const onPropsCancel = () => {
     actionType.value = '';
 };
 
+watch(() => props.data, () => {
+  if (props.data) {
+
+  }
+}, { immediate: true, deep: true})
+
 </script>
 
 <style lang="less" scoped>
@@ -615,27 +630,31 @@ const onPropsCancel = () => {
             align-items: baseline;
         }
 
-        .terms-params-content {
-            position: relative;
-            display: flex;
-            background-color: #fafafa;
-            border: unset;
-            row-gap: 16px;
-
-            .terms-params-item {
-                display: flex;
-                align-items: center;
-            }
-
-            .ant-form-item {
-                margin-bottom: 8px;
-                &:not(:first-child) {
-                    .ant-form-item-explain-error {
-                        padding-left: 80px !important;
-                    }
-                }
-            }
-        }
+        //.terms-params-content {
+        //    position: relative;
+        //    display: flex;
+        //    background-color: #fafafa;
+        //    border: unset;
+        //    row-gap: 16px;
+        //
+        //    &.no-border {
+        //      border: none;
+        //    }
+        //
+        //    .terms-params-item {
+        //        display: flex;
+        //        align-items: center;
+        //    }
+        //
+        //    .ant-form-item {
+        //        margin-bottom: 8px;
+        //        &:not(:first-child) {
+        //            .ant-form-item-explain-error {
+        //                padding-left: 80px !important;
+        //            }
+        //        }
+        //    }
+        //}
 
         .term-type-warp {
             // display: inline-block;

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

@@ -33,6 +33,19 @@
   }
 }
 
+.terms-params-delete {
+  .deleteBtn();
+
+  &.danger {
+    color: #e50012;
+    background-color: rgba(229, 0, 18, 0.1);
+  }
+
+  &.filter-terms-params-delete {
+    transform: translateY(6px);
+  }
+}
+
 .actions-terms {
   .actions-terms-warp {
     display: flex;
@@ -115,11 +128,8 @@
   .terms-params-content {
     position: relative;
     display: flex;
-    // flex-wrap: wrap;
-    padding: 8px;
-    padding-bottom: 0;
+    padding: 8px 8px 0px 8px;
     border: 1px dashed #e0e0e0;
-    //background-color: #fafafa;
     border-radius: 6px;
     row-gap: 16px;
     .terms-params-item {
@@ -162,6 +172,19 @@
       border-radius: 2px;
     }
   }
+
+
+
+  &.filter-group {
+    .terms-params-content {
+      background-color: #fafafa;
+      border: none;
+    }
+
+    .terms-params-delete {
+      transform: translateY(6px);
+    }
+  }
 }
 
 .terms-params-item {
@@ -189,15 +212,4 @@
   }
 }
 
-.terms-params-delete {
-  .deleteBtn();
 
-  &.danger {
-    color: #e50012;
-    background-color: rgba(229, 0, 18, 0.1);
-  }
-
-  &.filter-terms-params-delete {
-    transform: translateY(6px);
-  }
-}