Merge pull request #9154 from dataease/pr@dev-v2_bug_fix

fix(仪表板): 下拉框支持显示值和绑定值 #7343

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -13,7 +13,10 @@ import {
   watch,
   computed,
   onMounted,
-  CSSProperties
+  onBeforeMount,
+  CSSProperties,
+  shallowRef,
+  provide
 } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -156,7 +159,52 @@ const onComponentClick = () => {
 }
 
 const { emitter } = useEmitt()
+const unMountSelect = shallowRef([])
+onBeforeMount(() => {
+  unMountSelect.value = list.value.map(ele => ele.id)
+})
 
+const releaseSelect = id => {
+  unMountSelect.value = unMountSelect.value.filter(ele => ele !== id)
+}
+
+const queryDataForId = id => {
+  let requiredName = ''
+  const emitterList = (element.value.propValue || [])
+    .filter(ele => ele.id === id)
+    .reduce((pre, next) => {
+      if (next.required) {
+        if (!next.defaultValueCheck) {
+          requiredName = next.name
+        }
+
+        if (
+          (Array.isArray(next.selectValue) && !next.selectValue.length) ||
+          (next.selectValue !== 0 && !next.selectValue)
+        ) {
+          requiredName = next.name
+        }
+      }
+      const keyList = Object.entries(next.checkedFieldsMap)
+        .filter(ele => next.checkedFields.includes(ele[0]))
+        .filter(ele => !!ele[1])
+        .map(ele => ele[0])
+      pre = [...new Set([...keyList, ...pre])]
+      return pre
+    }, [])
+  if (!!requiredName) {
+    ElMessage.error(`【${requiredName}】查询条件是必填项，请设置选项值后，再进行查询！`)
+    return
+  }
+  if (!emitterList.length) return
+  emitterList.forEach(ele => {
+    emitter.emit(`query-data-${ele}`)
+  })
+}
+
+provide('unmount-select', unMountSelect)
+provide('release-unmount-select', releaseSelect)
+provide('query-data-for-id', queryDataForId)
 onBeforeUnmount(() => {
   emitter.off(`addQueryCriteria${element.value.id}`)
   emitter.off(`editQueryCriteria${element.value.id}`)

core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue

@@ -675,6 +675,7 @@ const parameterCompletion = () => {
     timeType: 'fixed',
     required: false,
     defaultMapValue: [],
+    mapValue: [],
     parametersStart: null,
     conditionType: 0,
     conditionValueOperatorF: 'eq',

core/core-frontend/src/custom-component/v-query/Select.vue

@@ -1,11 +1,23 @@
 <script lang="ts" setup>
-import { ref, toRefs, PropType, onBeforeMount, shallowRef, watch, nextTick, computed } from 'vue'
+import {
+  ref,
+  toRefs,
+  PropType,
+  onBeforeMount,
+  shallowRef,
+  watch,
+  nextTick,
+  computed,
+  inject,
+  Ref
+} from 'vue'
 import { enumValueObj, type EnumValue, getEnumValue } from '@/api/dataset'
 import { cloneDeep, debounce } from 'lodash-es'
 
 interface SelectConfig {
   selectValue: any
   defaultMapValue: any
+  mapValue: any
   defaultValue: any
   checkedFieldsMap: object
   displayType: string
@@ -53,7 +65,9 @@ const selectValue = ref()
 const loading = ref(false)
 const multiple = ref(false)
 const options = shallowRef([])
-
+const unMountSelect: Ref = inject('unmount-select')
+const releaseSelect = inject('release-unmount-select', Function, true)
+const queryDataForId = inject('query-data-for-id', Function, true)
 const setDefaultMapValue = arr => {
   const { displayId, field } = config.value
   if (!displayId || displayId === field?.id) {
@@ -81,13 +95,16 @@ const handleValueChange = () => {
     config.value.selectValue = Array.isArray(selectValue.value)
       ? [...selectValue.value]
       : selectValue.value
-    config.value.defaultMapValue = setDefaultMapValue(
+    config.value.mapValue = setDefaultMapValue(
       Array.isArray(selectValue.value) ? [...selectValue.value] : [selectValue.value]
     )
     return
   }
 
   config.value.defaultValue = value
+  config.value.mapValue = setDefaultMapValue(
+    Array.isArray(selectValue.value) ? [...selectValue.value] : [selectValue.value]
+  )
   config.value.defaultMapValue = setDefaultMapValue(
     Array.isArray(selectValue.value) ? [...selectValue.value] : [selectValue.value]
   )
@@ -152,6 +169,24 @@ const handleFieldIdChange = (val: EnumValue) => {
         selectValue.value = Array.isArray(config.value.defaultValue)
           ? [...config.value.defaultValue]
           : config.value.defaultValue
+        let shouldReSearch = false
+        if (unMountSelect.value.includes(config.value.id)) {
+          const mapValue = setDefaultMapValue(
+            Array.isArray(selectValue.value) ? [...selectValue.value] : [selectValue.value]
+          )
+          if (mapValue.length !== config.value.defaultMapValue.length) {
+            shouldReSearch = true
+          } else if (!mapValue.every(value => config.value.defaultMapValue.includes(value))) {
+            shouldReSearch = true
+          }
+          releaseSelect(config.value.id)
+        }
+        config.value.mapValue = setDefaultMapValue(
+          Array.isArray(selectValue.value) ? [...selectValue.value] : [selectValue.value]
+        )
+        if (shouldReSearch) {
+          queryDataForId(config.value.id)
+        }
       } else {
         selectValue.value = Array.isArray(selectValue.value)
           ? [...selectValue.value]

core/core-frontend/src/custom-component/v-query/options.ts

@@ -19,6 +19,7 @@ const infoFormat = (obj: ComponentInfo) => {
     sortId: '',
     sort: 'asc',
     defaultMapValue: [],
+    mapValue: [],
     conditionType: 0,
     conditionValueOperatorF: 'eq',
     conditionValueF: '',

core/core-frontend/src/hooks/web/useFilter.ts

@@ -83,13 +83,14 @@ const getValueByDefaultValueCheckOrFirstLoad = (
   firstLoad: boolean,
   multiple: boolean,
   defaultMapValue: any,
-  optionValueSource: number
+  optionValueSource: number,
+  mapValue: any
 ) => {
   if (optionValueSource === 1) {
-    if (firstLoad && !selectValue?.length) {
+    if (firstLoad) {
       return defaultValueCheck ? defaultMapValue : multiple ? [] : ''
     }
-    return (selectValue?.length ? defaultMapValue : selectValue) || ''
+    return (selectValue?.length ? mapValue : selectValue) || ''
   }
 
   if (firstLoad && !selectValue?.length) {
@@ -200,6 +201,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               defaultValue,
               optionValueSource,
               defaultMapValue,
+              mapValue,
               parameters = [],
               parametersCheck = false,
               isTree = false,
@@ -265,7 +267,8 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
                 firstLoad,
                 multiple,
                 defaultMapValue,
-                optionValueSource
+                optionValueSource,
+                mapValue
               )
             }
             if (