fix(仪表板): 查询组件的宽度较小时，勾选的图标会偏移在框外 #17563

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

@@ -484,10 +484,53 @@ const isConfirmSearch = (id, disabledFirstItem = false) => {
   queryDataForId(id)
 }
 
+const isConfirmSearchNoRequiredName = id => {
+  if (componentWithSure.value) return
+  let requiredName = ''
+  let numName = ''
+  const emitterList = (element.value.propValue || [])
+    .filter(ele => ele.id === id)
+    .reduce((pre, next) => {
+      if (next.displayType === '22') {
+        if (
+          !isNaN(next.numValueEnd) &&
+          !isNaN(next.numValueStart) &&
+          next.numValueEnd < next.numValueStart
+        ) {
+          numName = next.name
+        }
+        if (
+          [next.numValueEnd, next.numValueStart].filter(itx => ![null, undefined, ''].includes(itx))
+            .length === 1
+        ) {
+          requiredName = next.name
+        }
+      }
+
+      const keyList = getKeyList(next)
+      pre = [...new Set([...keyList, ...pre])]
+      return pre
+    }, [])
+  if (!!requiredName) {
+    ElMessage.error(`【${requiredName}】${t('v_query.before_querying')}`)
+    return
+  }
+  if (!!numName) {
+    ElMessage.error(`【${numName}】${t('v_query.the_minimum_value')}`)
+    return
+  }
+  if (!emitterList.length) return
+  fillRequireVal(emitterList)
+  emitterList.forEach(ele => {
+    emitter.emit(`query-data-${ele}`)
+  })
+}
+
 provide('is-confirm-search', isConfirmSearch)
 provide('unmount-select', unMountSelect)
 provide('release-unmount-select', releaseSelect)
 provide('query-data-for-id', queryDataForId)
+provide('query-data-for-id-tree', isConfirmSearchNoRequiredName)
 provide('com-width', getQueryConditionWidth)
 provide('cascade-list', getCascadeList)
 provide('placeholder', getPlaceholder)

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

@@ -162,10 +162,9 @@ const datasetFieldList = computed(() => {
 const setCascadeDefault = val => {
   conditions.value.forEach(ele => {
     if (
-      (ele.optionValueSource === 1 &&
-        [0, 2, 5].includes(+ele.displayType) &&
-        val.includes(ele.id)) ||
-      [9].includes(+ele.displayType)
+      ele.optionValueSource === 1 &&
+      [0, 2, 5].includes(+ele.displayType) &&
+      val.includes(ele.id)
     ) {
       ele.selectValue = Array.isArray(ele.selectValue) ? [] : undefined
       ele.defaultValue = Array.isArray(ele.defaultValue) ? [] : undefined
@@ -1524,7 +1523,6 @@ const validate = () => {
         return true
       }
       if (!ele.setTimeRange) return false
-      console.log(startTime, endTime)
 
       if (
         isInRange(

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

@@ -294,27 +294,6 @@ const handleFieldIdDefaultChange = (val: string[]) => {
     })
 }
 
-const setOldMapValue = arr => {
-  const { displayId } = config.value
-  if (!displayId) {
-    return []
-  }
-  let defaultMapValue = {}
-  let defaultValue = []
-  arr.forEach(ele => {
-    defaultMapValue[ele] = []
-  })
-  enumValueArr.forEach(ele => {
-    if (defaultMapValue[ele[displayId]]) {
-      defaultMapValue[ele[displayId]].push(ele)
-    }
-  })
-  Object.values(defaultMapValue).forEach(ele => {
-    defaultValue = [...defaultValue, ...(ele as unknown as string[])]
-  })
-  return defaultValue
-}
-
 const customSort = () => {
   if (config.value.sortList?.length && config.value.sort === 'customSort') {
     options.value = [
@@ -339,19 +318,15 @@ const handleFieldIdChange = (val: EnumValue) => {
   enumValueObj(val)
     .then(res => {
       let oldArr = []
-      let oldEnumValueArr = []
       if (selectValue.value?.length && config.value.multiple) {
         oldArr = [...selectValue.value]
-        oldEnumValueArr = setOldMapValue(oldArr)
       }
-      enumValueArr = [...(res || []), ...oldEnumValueArr] || []
+      enumValueArr = [...(res || [])] || []
       options.value = [
         ...new Set(
-          (res || [])
-            .map(ele => {
-              return `${ele[val.displayId || val.queryId]}`
-            })
-            .concat(oldArr)
+          (res || []).map(ele => {
+            return `${ele[val.displayId || val.queryId]}`
+          })
         )
       ].map(ele => {
         return {
@@ -366,6 +341,26 @@ const handleFieldIdChange = (val: EnumValue) => {
         selectValue.value = config.value.multiple ? [] : undefined
         config.value.defaultValue = selectValue.value
       }
+
+      const valArr = options.value.map(ele => ele.value)
+
+      if (
+        config.value.multiple &&
+        Array.isArray(selectValue.value) &&
+        selectValue.value.length &&
+        !selectValue.value.every(ele => valArr.includes(ele))
+      ) {
+        const delArr = selectValue.value.filter(ele => !valArr.includes(ele))
+        selectValue.value = selectValue.value.filter(ele => valArr.includes(ele))
+        options.value = options.value.filter(ele => !delArr.includes(ele.value))
+        config.value.defaultValue = selectValue.value
+      }
+
+      if (!config.value.multiple && selectValue.value && !valArr.includes(selectValue.value)) {
+        options.value = options.value.filter(ele => selectValue.value !== ele.value)
+        selectValue.value = undefined
+        config.value.defaultValue = selectValue.value
+      }
     })
     .finally(() => {
       loading.value = false
@@ -405,6 +400,7 @@ const handleFieldIdChange = (val: EnumValue) => {
           ? [...selectValue.value]
           : selectValue.value
       }
+      setCascadeValueBack(config.value.mapValue)
       isFromRemote.value = false
     })
 }
@@ -872,6 +868,9 @@ defineExpose({
   .ed-vl__window.ed-select-dropdown__list {
     min-width: 200px;
   }
+  .ed-select-dropdown {
+    width: auto !important;
+  }
   .ed-select-dropdown__option-item {
     .ed-checkbox__label:hover {
       color: #1f2329;