update: 场景联动ParamsDropdown 添加插槽

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

@@ -1,9 +1,18 @@
 <template>
-  <j-dropdown class='scene-select' trigger='click'>
+  <j-dropdown
+    class='scene-select'
+    trigger='click'
+    v-model:visible='visible'
+    @visibleChange='visibleChange'
+  >
+    <div @click.prevent='visible = true'>
+      <slot :label='label'>
         <div :class='dropdownButtonClass' >
             <AIcon v-if='!!icon' :type='icon' />
             {{ label }}
         </div>
+      </slot>
+    </div>
     <template #overlay>
       <div class='scene-select-content'>
         <template v-if='options.length'>
@@ -18,7 +27,7 @@
             :type='component'
             @change='timeSelect'
           />
-          <div v-else>
+          <div style='min-width: 400px' v-else>
             <j-tree
               :selectedKeys='selectValue ? [selectValue] : []'
               :treeData='options'
@@ -89,20 +98,18 @@ const props = defineProps({
   component: {
     type: String,
     default: 'select' // 'select' | 'treeSelect'
-  }
+  },
 })
 
 const emit = defineEmits<Emit>()
 
 const label = ref<LabelType>(props.placeholder)
 const selectValue = ref(props.value)
-const flatMapTree = new Map()
+const visible = ref(false)
 
-const LabelStyle = computed(() => {
-  return {
-    color: selectValue.value ? '#' : '#'
+const visibleChange = (v: boolean) => {
+  visible.value = v
 }
-})
 
 const dropdownButtonClass = computed(() => ({
   'dropdown-button': true,
@@ -112,24 +119,34 @@ const dropdownButtonClass = computed(() => ({
   'type': props.type === 'type',
 }))
 
-const treeSelect = (v: any) => {
-
+const treeSelect = (v: any, option: any) => {
+  const node = option.node
+  visible.value = false
+  label.value = node.fullname || node.name
+  selectValue.value = v[0]
+  emit('update:value', node[props.valueName])
+  emit('select', node)
 }
 
 const timeSelect = (v: string) => {
+  selectValue.value = v
+  visible.value = false
   emit('update:value', v)
   emit('select', v)
 }
 
 const menuSelect = (v: any) => {
   const option = getOption(props.options, props.value, props.valueName)
+  selectValue.value  = v.key
+  visible.value = false
   emit('update:value', v.key)
   emit('select', option)
 }
 
 watchEffect(() => {
   const option = getOption(props.options, props.value, props.valueName)
-  if (option && Object.keys(option).length) {
+  selectValue.value = props.value
+  if (option) {
     label.value = option[props.labelName] || option.name
   } else {
     label.value = props.value || props.placeholder

src/views/rule-engine/Scene/Save/components/DropdownButton/Menus.vue

@@ -55,6 +55,9 @@ const click = (e: any) => {
   })
 }
 
+watch(() => props.value, () => {
+  myValue.value = props.value
+}, { immediate: true})
 </script>
 
 <style scoped lang='less'>

src/views/rule-engine/Scene/Save/components/DropdownButton/Time.vue

@@ -62,7 +62,7 @@ const change = (e: string) => {
 }
 </script>
 
-<style lang='less'>
+<style lang='less' scoped>
 .dropdown-time-picker {
   >div{
     position: relative !important;
@@ -86,4 +86,8 @@ const change = (e: string) => {
     box-shadow: unset;
   }
 }
+
+.wrapper{
+  display: none;
+}
 </style>

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

@@ -26,7 +26,7 @@ export const getComponent = (type: string): string => {
 }
 
 export const getOption = (data: any[], value?: string | number | boolean, key: string = 'name'): DropdownButtonOptions | any => {
-  let option = {}
+  let option
   if (!value) return option
   for (let i = 0; i < data.length; i++) {
     const item = data[i]
@@ -35,7 +35,9 @@ export const getOption = (data: any[], value?: string | number | boolean, key: s
       break
     } else if (item.children && item.children.length){
       option = getOption(item.children, value, key)
-      if (option) break
+      if (option) {
+        break
+      }
     }
   }
   return option

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

@@ -5,10 +5,14 @@
     v-model:visible='visible'
     @visibleChange='visibleChange'
   >
+    <div>
+      <slot :label='label'>
         <div class='dropdown-button value' @click.prevent='visible = true'>
             <AIcon v-if='!!icon' :type='icon' />
             {{ label }}
         </div>
+      </slot>
+    </div>
     <template #overlay>
       <div class='scene-select-content'>
         <j-tabs
@@ -24,21 +28,17 @@
                 @change='timeChange'
               />
               <DropdownMenus
-                v-if='["metric","enum", "boolean"].includes(item.component)'
-                :options='options'
+                v-if='["select","enum", "boolean"].includes(item.component)'
+                :options='["metric", "upper"].includes(item.key) ?  metricOption : options'
                 @change='onSelect'
               />
-              <ValueItem
-                v-else-if='valueItemKey.includes(item.component)'
-                v-model:modelValue='myValue'
-                :itemType='getComponent(item.component)'
-                :options='options'
-                @change='valueItemChange'
-              />
+              <div
+                v-else-if='item.component === "tree"'
+                style='min-width: 400px'
+              >
                 <j-tree
-                v-else
                   :selectedKeys='myValue ? [myValue] : []'
-                :treeData='options'
+                  :treeData='item.key === "upper" ?  metricOption : options'
                   @select='treeSelect'
                   :height='450'
                   :virtual='true'
@@ -51,6 +51,14 @@
                   </template>
                 </j-tree>
               </div>
+              <ValueItem
+                v-else
+                v-model:modelValue='myValue'
+                :itemType='getComponent(item.component)'
+                :options='item.key === "upper" ?  metricOption : options'
+                @change='valueItemChange'
+              />
+            </div>
           </j-tab-pane>
         </j-tabs>
       </div>
@@ -101,10 +109,9 @@ const updateValue = () => {
 }
 
 const treeSelect = (e: any) => {
-  console.log('treeSelect', e)
   visible.value = false
   label.value = e.fullname || e.name
-  emit('update:value', e.id)
+  emit('update:value', e[props.valueName])
   emit('select', e)
 }
 
@@ -133,14 +140,16 @@ const visibleChange = (v: boolean) => {
   visible.value = v
 }
 
-watch([props.options, props.value], () => {
+watchEffect(() => {
   const option = getOption(props.options, props.value as string, props.valueName) // 回显label值
-  if (option && Object.keys(option).length) {
+  myValue.value = props.value
+  mySource.value = props.source
+  if (option) {
     label.value = option[props.labelName] || option.name
   } else {
     label.value = props.value || props.placeholder
   }
-}, { immediate: true })
+})
 
 </script>
 

src/views/rule-engine/Scene/Save/components/ParamsDropdown/typings.ts

@@ -12,8 +12,7 @@ export type DropdownButtonOptions = {
 export type TabsOption = {
   label: string;
   key: string;
-  component: string,
-  options: DropdownButtonOptions[]
+  component: string
 }
 type ValueArrayType = [string, number]
 export type ValueType = string | number | undefined | ValueArrayType
@@ -47,6 +46,10 @@ export const defaultSetting = {
     type: Array as PropType<Array<DropdownButtonOptions>>,
     default: () => []
   },
+  metricOption: {
+    type: Array as PropType<Array<DropdownButtonOptions>>,
+    default: () => []
+  },
   metricOptions: { // 指标值
     type: Array as PropType<Array<DropdownButtonOptions>>,
     default: () => []

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

@@ -40,10 +40,8 @@
         icon='icon-canshu'
         placeholder='参数值'
         :options='valueOptions'
-        :tabsOptions='[
-          { label: "手动输入", component: "input", key: "fixed" },
-          { label: "指标值", component: "time", key: "manual" }
-        ]'
+        :metricOption='metricOption'
+        :tabsOptions='tabsOptions'
         v-model:value='paramsValue.value.value'
         v-model:source='paramsValue.value.source'
       />
@@ -52,10 +50,8 @@
         icon='icon-canshu'
         placeholder='参数值'
         :options='valueOptions'
-        :tabsOptions='[
-          { label: "手动输入", component: "time", key: "fixed" },
-          { label: "指标值", component: "input", key: "manual" },
-        ]'
+        :metricOption='metricOption'
+        :tabsOptions='tabsOptions'
         v-model:value='paramsValue.value.value'
         v-model:source='paramsValue.value.source'
       />
@@ -80,6 +76,16 @@ import ParamsDropdown, { DoubleParamsDropdown } from '../ParamsDropdown'
 import { inject } from 'vue'
 import { ContextKey } from './util'
 
+type Emit = {
+  (e: 'update:value', data: TermsType): void
+}
+
+type TabsOption = {
+  label: string;
+  key: string;
+  component: string
+}
+
 const props = defineProps({
   isFirst: {
     type: Boolean,
@@ -98,7 +104,7 @@ const props = defineProps({
     default: () => ({
       column: '',
       type: '',
-      termType: undefined,
+      termType: 'eq',
       value: {
         source: 'fixed',
         value: undefined
@@ -107,6 +113,8 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits<Emit>()
+
 const paramsValue = reactive<TermsType>({
   column: props.value.column,
   type: props.value.type,
@@ -115,21 +123,56 @@ const paramsValue = reactive<TermsType>({
 })
 
 const showDelete = ref(false)
-const columnOptions: any = inject(ContextKey)
-const options = ref<any>([])
+const columnOptions: any = inject(ContextKey) //
+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' }])
+let metricsCacheOption: any[] = [] // 缓存指标值
 
-const termTypeOptions = computed(() => {
+const handOptionByColumn = (option: any) => {
+  if (option) {
+    termTypeOptions.value = option.termTypes || []
+    metricsCacheOption = 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 },
+        { label: '否', value: false },
+      ]
+    } else if(option.dataType === 'enum') {
+      valueOptions.value = option.options?.map((item: any) => ({ ...item, label: item.name, value: item.id})) || []
+    } else{
+      valueOptions.value = option.options || []
+    }
+  } else {
+    termTypeOptions.value = []
+    metricsCacheOption = []
+    valueOptions.value = []
+  }
+}
+
+watchEffect(() => {
   const option = getOption(columnOptions.value, paramsValue.column, 'column')
-  return option && Object.keys(option).length ? option.termTypes : []
-})
-
-const tabsOptions = computed(() => {
-  // 获取当前value对应的option
-  return []
+  handOptionByColumn(option)
 })
 
 const showDouble = computed(() => {
-  return paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
+  const isRange = paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
+  if (metricsCacheOption.length) {
+    metricOption.value = metricsCacheOption.filter(item => isRange ? item.range : !item.range)
+  } else {
+    metricOption.value = []
+  }
+  return isRange
 })
 
 const mouseover = () => {
@@ -145,11 +188,20 @@ const mouseout = () => {
 }
 
 const columnSelect = () => {
-
+  paramsValue.termType = 'eq'
+  paramsValue.value = {
+    source: tabsOptions.value[0].key,
+    value: undefined
+  }
+  emit('update:value', { ...paramsValue })
 }
 
 const termsTypeSelect = () => {
-
+  paramsValue.value = {
+    source: tabsOptions.value[0].key,
+    value: undefined
+  }
+  emit('update:value', { ...paramsValue })
 }
 
 const termAdd = () => {
@@ -160,10 +212,6 @@ const onDelete = () => {
 
 }
 
-const valueOptions = computed(() => {
-  return []
-})
-
 nextTick(() => {
   Object.assign(paramsValue, props.value)
 })

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

@@ -77,11 +77,21 @@ const rules = [{
   }
 }]
 
+const handleParamsData = (data: any[]): any[] => {
+  return data?.map(item => {
+    return {
+      ...item,
+      key: item.column,
+      children: handleParamsData(item.children)
+    }
+  }) || []
+}
+
 const queryColumn = (dataModel: FormModelType) => {
   const cloneDevice = cloneDeep(dataModel)
   cloneDevice.branches = cloneDevice.branches?.filter(item => !!item)
   getParseTerm(cloneDevice).then(res => {
-      columnOptions.value = res.result
+      columnOptions.value = handleParamsData(res.result as any[])
   })
 }
 

src/views/rule-engine/Scene/index.vue

@@ -121,7 +121,7 @@
     </page-container>
 </template>
 
-<script setup lang='ts'>
+<script setup lang='ts' name='Scene'>
 import SaveModal from './Save/save.vue';
 import type { SceneItem } from './typings';
 import { useMenuStore } from 'store/menu';

src/views/rule-engine/Scene/typings.ts

@@ -187,7 +187,7 @@ export type TriggerType = {
 };
 
 export interface TermsVale {
-  source: keyof typeof Source;
+  source: string;
   /** 手动输入值,source为 manual 时不能为空 */
   value?: Record<string, any> | any[];
   /** 指标值,source为 metric 时不能为空 */

yarn.lock

@@ -3695,8 +3695,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#34b70f75dcc4ea679f0da6674a3f372dfc4acab4"
-  integrity sha512-ffDi9NyD51hPzu6iRBhibxlI36In5igUciMugm+Lui2LxnYdGbXGvB0i4y6xKaGg4jRDJ/lDX+b6AvuIrlb1lg==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#41d52892f0f4d38adc6df02a87290a3042eb5645"
+  integrity sha512-aX+XiGigzxZnrG52xqipxd+WuFwBeZ6+dvLkcvOfLLBqSu8sgfvr/8NJ5hFgv5Eo2QFnUJq3Qf4HXLw9Ogv/yw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"