update: 优化场景联动过滤条件

src/components/Layout/BasicLayoutPage.vue

@@ -14,7 +14,7 @@
             >
               {{ slotProps.route.breadcrumbName }}
             </a>
-            <span v-else >{{ slotProps.route.breadcrumbName }}</span>
+            <span v-else style='cursor: pointer' >{{ slotProps.route.breadcrumbName }}</span>
         </template>
         <template #rightContentRender>
             <div class="right-content">

src/store/scene.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { BranchesType, FormModelType, SceneItem } from '@/views/rule-engine/Scene/typings'
+import type { FormModelType, SceneItem } from '@/views/rule-engine/Scene/typings'
 import { detail } from '@/api/rule-engine/scene'
 import { cloneDeep, isArray } from 'lodash-es'
 import { randomString } from '@/utils/utils'

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

@@ -39,21 +39,27 @@
         v-if='showDouble'
         icon='icon-canshu'
         placeholder='参数值'
+        value-name='id'
+        label-name='name'
         :options='valueOptions'
-        :metricOptions='metricOption'
+        :metricOptions='columnOptions'
         :tabsOptions='tabsOptions'
         v-model:value='paramsValue.value.value'
         v-model:source='paramsValue.value.source'
+        @select='valueSelect'
       />
       <ParamsDropdown
         v-else
         icon='icon-canshu'
         placeholder='参数值'
+        value-name='id'
+        label-name='name'
         :options='valueOptions'
-        :metricOptions='metricOption'
+        :metricOptions='columnOptions'
         :tabsOptions='tabsOptions'
         v-model:value='paramsValue.value.value'
         v-model:source='paramsValue.value.source'
+        @select='valueSelect'
       />
       <j-popconfirm title='确认删除？' @confirm='onDelete'>
         <div v-show='showDelete' class='button-delete'> <AIcon type='CloseOutlined' /></div>
@@ -74,7 +80,6 @@ import DropdownButton from '../../components/DropdownButton'
 import { getOption } from '../../components/DropdownButton/util'
 import ParamsDropdown, { DoubleParamsDropdown } from '../../components/ParamsDropdown'
 import { inject } from 'vue'
-import { ContextKey } from '../../components/Terms/util'
 import { useSceneStore } from 'store/scene'
 import { storeToRefs } from 'pinia';
 
@@ -112,7 +117,7 @@ const props = defineProps({
     type: Number,
     default: 0
   },
-  branchName: {
+  actionName: {
     type: Number,
     default: 0
   },
@@ -120,6 +125,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  branchName: {
+    type: Number,
+    default: 0
+  },
   value: {
     type: Object as PropType<TermsType>,
     default: () => ({
@@ -147,24 +156,19 @@ const showDelete = ref(false)
 const columnOptions: any = inject('filter-params') //
 const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
 const valueOptions = ref<any[]>([]) // 默认手动输入下拉
-const metricOption = ref<any[]>([])  //
+const arrayParamsKey = ['nbtw', 'btw', 'in', 'nin']
-const tabsOptions = ref<Array<TabsOption>>([{ label: '内置参数', key: 'upper', component: 'tree' }])
-// { label: '手动输入', key: 'fixed', component: 'string' },
 
+const tabsOptions = ref<Array<TabsOption>>(
+  [
+    { label: '手动输入', key: 'fixed', component: 'string' },
+    { label: '内置参数', key: 'upper', component: 'tree' }
+  ]
+)
 
 const handOptionByColumn = (option: any) => {
   if (option) {
     termTypeOptions.value = option.termTypes || []
-    metricOption.value = option.metrics || []
-    tabsOptions.value.length = 1
     tabsOptions.value[0].component = option.dataType
-
-    if (option.metrics && option.metrics.length) {
-      tabsOptions.value.push(
-        { label: '指标值', key: 'metric', component: 'select' }
-      )
-    }
-
     if (option.dataType === 'boolean') {
       valueOptions.value = [
         { label: '是', value: true },
@@ -177,24 +181,17 @@ const handOptionByColumn = (option: any) => {
     }
   } else {
     termTypeOptions.value = []
-    metricOption.value = []
     valueOptions.value = []
   }
 }
 
 watchEffect(() => {
   const option = getOption(columnOptions.value, paramsValue.column, 'id')
-  console.log(option)
   handOptionByColumn(option)
 })
 
 const showDouble = computed(() => {
-  const isRange = paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
+  const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
-  if (metricOption.value.length) {
-    metricOption.value = metricOption.value.filter(item => isRange ? item.range : !item.range)
-  } else {
-    metricOption.value = []
-  }
   return isRange
 })
 
@@ -219,14 +216,19 @@ const columnSelect = () => {
   emit('update:value', { ...paramsValue })
 }
 
-const termsTypeSelect = () => {
+const termsTypeSelect = (e: { key: string }) => {
+  const value = arrayParamsKey.includes(e.key) ? [ undefined, undefined ] : undefined
   paramsValue.value = {
     source: tabsOptions.value[0].key,
-    value: undefined
+    value: value
   }
   emit('update:value', { ...paramsValue })
 }
 
+const valueSelect = () => {
+  emit('update:value', { ...paramsValue })
+}
+
 const termAdd = () => {
   const terms = {
     column: undefined,
@@ -238,11 +240,11 @@ const termAdd = () => {
     type: 'and',
     key: `params_${new Date().getTime()}`
   }
-  formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.name].terms?.push(terms)
+  formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.actionName].terms?.[props.termsName].terms?.push(terms)
 }
 
 const onDelete = () => {
-  formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.name].terms?.splice(props.name, 1)
+  formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.actionName].terms?.[props.termsName].terms?.splice(props.name, 1)
 }
 
 nextTick(() => {

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

@@ -42,7 +42,7 @@
           />
         </j-form-item>
       </div>
-      <div v-if='isLast' class='terms-group-add'>
+      <div v-if='isLast' class='terms-group-add' @click='addTerms'>
         <div class='terms-content'>
           <AIcon type='PlusOutlined' style='font-size: 12px;padding-right: 4px;' />
           <span>分组</span>
@@ -53,22 +53,20 @@
 </template>
 
 <script setup lang='ts' name='FilterGroup'>
-import { storeToRefs } from 'pinia';
+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'
+import { randomString } from '@/utils/utils'
+import { useParams } from '@/views/rule-engine/Scene/Save/util'
 
 const sceneStore = useSceneStore()
 const { data: formModel } = storeToRefs(sceneStore)
 
-const columnOptions = ref<any>([])
 
 
-provide('filter-params', columnOptions)
-
 const props = defineProps({
   isFirst: {
     type: Boolean,
@@ -100,6 +98,16 @@ const props = defineProps({
   }
 })
 
+const { columnOptions } = useParams({
+  branch: props.branchName,
+  branchGroup: props.thenName,
+  action: props.actionName
+}, [
+  formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName]
+])
+
+provide('filter-params', columnOptions)
+
 const termsOptions = computed(() => {
   return formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName].terms?.[props.name].terms
 })
@@ -114,66 +122,80 @@ const mouseout = () => {
   showDelete.value = false
 }
 
-const onDelete = () => {
+const addTerms = () => {
+  const item: any = {
+    type: 'and',
+    key: randomString(),
+    terms: [
+      {
+        column: undefined,
+        value: {
+          type: 'fixed',
+          value: undefined
+        },
+        termType: undefined,
+        type: 'and',
+        key: randomString()
+      }
+    ]
+  }
 
+  formModel.value
+    .branches![props.branchName]
+    .then[props.thenName]
+    .actions[props.actionName]
+    .terms?.push(item)
 }
 
-const getParams = () => {
+const onDelete = () => {
-  const params = {
+  formModel.value
-    branch: props.branchName,
+    .branches![props.branchName]
-    branchGroup: props.thenName,
+    .then[props.thenName]
-    action: props.actionName
+    .actions[props.actionName]
-  }
+    .terms?.splice(props.name, 1)
-  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)
+      console.log('-----v',v)
       if (v !== undefined) {
         if (!Object.keys(v).length) {
-          return Promise.reject(new Error('该数据已发生变更，请重新配置'));
+          return Promise.reject(new Error('该数据已发生变更，请重新配置'))
         }
         if (!v.column) {
-          return Promise.reject(new Error('请选择参数'));
+          return Promise.reject(new Error('请选择参数'))
         }
 
         if (!v.termType) {
-          return Promise.reject(new Error('请选择操作符'));
+          return Promise.reject(new Error('请选择操作符'))
         }
 
         if (v.value === undefined) {
-          return Promise.reject(new Error('请选择或输入参数值'));
+          return Promise.reject(new Error('请选择或输入参数值'))
         } else {
           if (
             isArray(v.value.value) &&
             v.value.value.some((_v: any) => _v === undefined)
           ) {
-            return Promise.reject(new Error('请选择或输入参数值'));
+            return Promise.reject(new Error('请选择或输入参数值'))
           } else if (v.value.value === undefined) {
-            return Promise.reject(new Error('请选择或输入参数值'));
+            return Promise.reject(new Error('请选择或输入参数值'))
           }
         }
       } else {
-        return Promise.reject(new Error('请选择参数'));
+        return Promise.reject(new Error('请选择参数'))
       }
-      return Promise.resolve();
+      return Promise.resolve()
-    },
+    }
-  },
+  }
 ]
 
-nextTick(() => {
+// watchEffect(() => {
-  getParams()
+//   if (formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName]) {
-})
+//     getParams()
+//   }
+// })
 
 </script>
 

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

@@ -630,32 +630,6 @@ watch(() => props.data, () => {
             align-items: baseline;
         }
 
-        //.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;
             width: 50px;

src/views/rule-engine/Scene/Save/components/ParamsDropdown/Double.vue

@@ -2,6 +2,8 @@
   <ParamsDropdown
     v-model:value='myValue[0]'
     v-model:source='mySource'
+    :valueName='valueName'
+    :labelName='labelName'
     :options='options'
     :icon='icon'
     :placeholder='placeholder'
@@ -12,6 +14,8 @@
   <ParamsDropdown
     v-model:value='myValue[1]'
     v-model:source='mySource'
+    :valueName='valueName'
+    :labelName='labelName'
     :icon='icon'
     :placeholder='placeholder'
     :tabs-options='tabsOptions'

src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue

@@ -81,7 +81,7 @@ import ValueItem from '@/components/ValueItem/index.vue'
 import type { ValueType } from './typings'
 import { defaultSetting } from './typings'
 import { DropdownMenus, DropdownTimePicker} from '../DropdownButton'
-import { getComponent, getOption } from '../DropdownButton/util'
+import { getOption } from '../DropdownButton/util'
 
 type Emit = {
   (e: 'update:value', data: ValueType): void
@@ -109,29 +109,26 @@ nextTick(() => {
 const tabsChange = (e: string) => {
   mySource.value = e
   myValue.value = undefined
-}
-
-const updateValue = () => {
   emit('update:source', mySource.value)
-  emit('update:value', myValue.value)
+  emit('update:value', undefined)
+  emit('select', {})
 }
 
-const treeSelect = (e: any) => {
+const treeSelect = (v: any, option: any) => {
+  const node = option.node
   visible.value = false
-  label.value = e.fullname || e.name
+  label.value = node.fullname || node.name
-  emit('update:value', e[props.valueName])
+  emit('update:value', node[props.valueName])
-  emit('select', e)
+  emit('select', node)
 }
 
 const valueItemChange = (e: string) => {
-  console.log('valueItemSelect', e)
   label.value = e
   emit('update:value', e)
   emit('select', e)
 }
 
 const onSelect = (e: string, option: any) => {
-  console.log(e, option)
   visible.value = false
   label.value = option.label
   emit('update:value', e)
@@ -150,7 +147,8 @@ const visibleChange = (v: boolean) => {
 }
 
 watchEffect(() => {
-  const option = getOption(props.options, props.value as string, props.valueName) // 回显label值
+  const _options = props.source === 'upper' ? props.metricOptions : props.options
+  const option = getOption(_options, props.value as string, props.valueName) // 回显label值
   myValue.value = props.value
   mySource.value = props.source
   if (option) {

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

@@ -149,6 +149,7 @@ const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
 const valueOptions = ref<any[]>([]) // 默认手动输入下拉
 const metricOption = ref<any[]>([])  // 根据termType获取对应指标值
 const tabsOptions = ref<Array<TabsOption>>([{ label: '手动输入', key: 'manual', component: 'string' }])
+const arrayParamsKey = ['nbtw', 'btw', 'in', 'nin']
 let metricsCacheOption: any[] = [] // 缓存指标值
 
 const handOptionByColumn = (option: any) => {
@@ -187,7 +188,7 @@ watchEffect(() => {
 })
 
 const showDouble = computed(() => {
-  const isRange = paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
+  const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
   if (metricsCacheOption.length) {
     metricOption.value = metricsCacheOption.filter(item => isRange ? item.range : !item.range)
   } else {
@@ -217,10 +218,11 @@ const columnSelect = () => {
   emit('update:value', { ...paramsValue })
 }
 
-const termsTypeSelect = () => {
+const termsTypeSelect = (e: { key: string }) => {
+  const value = arrayParamsKey.includes(e.key) ? [ undefined, undefined ] : undefined
   paramsValue.value = {
     source: tabsOptions.value[0].key,
-    value: undefined
+    value: value
   }
   emit('update:value', { ...paramsValue })
 }

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

@@ -47,7 +47,7 @@ import { storeToRefs } from 'pinia';
 import { useSceneStore } from 'store/scene'
 import { cloneDeep } from 'lodash-es'
 import { provide } from 'vue'
-import { ContextKey } from './util'
+import { ContextKey, handleParamsData } from './util'
 import { getParseTerm } from '@/api/rule-engine/scene'
 import type { FormModelType } from '@/views/rule-engine/Scene/typings'
 import Branches from './Branchs.vue'
@@ -65,17 +65,6 @@ const change = (e: boolean) => {
   open.value = e
 }
 
-const handleParamsData = (data: any[]): any[] => {
-  return data?.map(item => {
-    return {
-      ...item,
-      key: item.column,
-      disabled: !!item.children,
-      children: handleParamsData(item.children)
-    }
-  }) || []
-}
-
 const queryColumn = (dataModel: FormModelType) => {
   const cloneDevice = cloneDeep(dataModel)
   cloneDevice.branches = cloneDevice.branches?.filter(item => !!item)

src/views/rule-engine/Scene/Save/components/Terms/util.ts

@@ -1 +1,12 @@
-export const ContextKey = 'columnOptions'
+export const ContextKey = 'columnOptions'
+
+export const handleParamsData = (data: any[], key: string = 'column'): any[] => {
+  return data?.map(item => {
+    return {
+      ...item,
+      key: item[key],
+      disabled: !!item.children,
+      children: handleParamsData(item.children, key)
+    }
+  }) || []
+}

src/views/rule-engine/Scene/Save/util.ts

@@ -0,0 +1,49 @@
+import { queryBuiltInParams } from '@/api/rule-engine/scene'
+import { handleParamsData } from './components/Terms/util'
+import { useSceneStore } from 'store/scene'
+import { storeToRefs } from 'pinia'
+import type { FormModelType } from '@/views/rule-engine/Scene/typings'
+
+interface Params {
+  branch: number
+  branchGroup: number
+  action: number
+}
+
+export const getParams = (params: Params, sceneModel: FormModelType): Promise<any[]> => {
+  return new Promise(res => {
+    const data = sceneModel.branches!.filter(item => !!item)
+    queryBuiltInParams({
+      ...sceneModel,
+      branches: data
+    }, params).then(resp => {
+      if (resp.success) {
+        res(resp.result as any[])
+      }
+    })
+  })
+}
+
+/**
+ * @param params
+ */
+export const useParams = (params: Params, effect: any[] = []) => {
+  const sceneStore = useSceneStore()
+  const { data: formModel } = storeToRefs(sceneStore)
+  const columnOptions = ref<any[]>([])
+
+  const handleParams = async () => {
+    const _data = await getParams(params, formModel.value)
+    columnOptions.value = handleParamsData(_data, 'id')
+  }
+
+  watchEffect(() => {
+    if (effect[0]) {
+      handleParams()
+    }
+  })
+
+  return {
+    columnOptions
+  }
+}