fix(查询组件): 优化下拉树

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ElSelect } from 'element-plus-secondary'
-import { computed, ref, toRefs } from 'vue'
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
 import RangeFilterTime from '@/custom-component/v-query/RangeFilterTime.vue'
 import FilterTime from '@/custom-component/v-query/FilterTime.vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -56,9 +56,19 @@ const props = defineProps({
 })
 
 const showFlag = computed(() => props.showPosition === 'main')
-
 const { curComponent } = toRefs(props)
-
+const loadingDeault = ref(true)
+watch(
+  () => curComponent.value.id,
+  val => {
+    if (!val) return
+    loadingDeault.value = false
+    nextTick(() => {
+      loadingDeault.value = true
+    })
+  },
+  { immediate: true }
+)
 const relativeToCurrentTypeList = computed(() => {
   if (!curComponent.value) return []
   let index = ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1
@@ -646,7 +656,11 @@ defineExpose({
         </div>
       </template>
     </div>
-    <div v-if="curComponent.defaultValueCheck" class="parameters" :class="dynamicTime && 'setting'">
+    <div
+      v-if="curComponent.defaultValueCheck && loadingDeault"
+      class="parameters"
+      :class="dynamicTime && 'setting'"
+    >
       <div class="setting-label" v-if="dynamicTime">{{ t('template_manage.preview') }}</div>
       <div :class="dynamicTime ? 'setting-value' : 'w100'">
         <component :config="curComponent" isConfig ref="inputCom" :is="filterTypeCom"></component>

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

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { DatePickType } from 'element-plus-secondary'
-import { toRefs, computed } from 'vue'
+import { toRefs, computed, watch } from 'vue'
 import { type TimeRange } from './time-format'
 import { useI18n } from '@/hooks/web/useI18n'
 import DynamicTime from './DynamicTimeFiltering.vue'
 import DynamicTimeRange from './DynamicTimeRangeFiltering.vue'
+import { ManipulateType } from 'dayjs'
 const props = withDefaults(
   defineProps<{
     timeRange: TimeRange
@@ -253,6 +254,35 @@ const relativeToCurrentListRange = computed(() => {
     }
   ]
 })
+watch(
+  () => relativeToCurrentListRange.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentRange)) {
+      timeRange.value.relativeToCurrentRange = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrent)) {
+      timeRange.value.relativeToCurrent = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentTypeList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentType)) {
+      timeRange.value.relativeToCurrentType = val[0].value as ManipulateType
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>

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

@@ -510,6 +510,24 @@ const setTreeDefault = () => {
   }
 }
 
+const setTreeDefaultBatch = ele => {
+  if (!!ele.checkedFields.length) {
+    let tableId = ''
+    fields.value.forEach(ele => {
+      if (
+        ele.checkedFields.includes(ele.componentId) &&
+        ele.checkedFieldsMap[ele.componentId] &&
+        !tableId
+      ) {
+        tableId = datasetFieldList.value.find(itx => itx.id === ele.componentId)?.tableId
+      }
+    })
+    if (tableId && !ele.treeDatasetId) {
+      ele.treeDatasetId = tableId
+    }
+  }
+}
+
 const numTypeChange = () => {
   if (!curComponent.value.checkedFieldsMapArrNum[currentComponentId]) {
     curComponent.value.checkedFieldsMapArrNum[currentComponentId] = []
@@ -1045,10 +1063,12 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
     dynamicWindow,
     maximumSingleQuery,
     timeNumRange,
+    relativeToCurrentRange,
     relativeToCurrentTypeRange,
     aroundRange
   } = ele.timeRange || {}
   let isDynamicWindowTime = false
+
   const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
   const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
   if (startWindowTime && dynamicWindow) {
@@ -1120,22 +1140,27 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
   }
 
   if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
+    let endTime
+    if (relativeToCurrentRange === 'custom') {
+      startTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+      endTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(
+              relativeToCurrentTypeRange,
+              aroundRange === 'f' ? 'subtract' : 'add',
+              timeNumRange
+            )
+    } else {
+      ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
+    }
 
     return (
       startWindowTime < +new Date(startTime) - 1000 ||
@@ -1242,7 +1267,10 @@ const validate = () => {
         return true
       }
       if (!ele.treeDatasetId) {
-        ElMessage.error(t('data_set.dataset_cannot_be'))
+        setTreeDefaultBatch(ele)
+        if (!ele.treeDatasetId) {
+          ElMessage.error(t('data_set.dataset_cannot_be'))
+        }
         return true
       }
 
@@ -1495,7 +1523,11 @@ const validate = () => {
       return true
     }
 
-    if (!['9', '22'].includes(ele.displayType) && ele.optionValueSource === 1 && !ele.field.id) {
+    if (
+      !['9', '22', '1', '7'].includes(ele.displayType) &&
+      ele.optionValueSource === 1 &&
+      !ele.field.id
+    ) {
       ElMessage.error(
         !ele.dataset?.id ? t('v_query.option_value_field') : t('v_query.the_data_set')
       )
@@ -1544,6 +1576,8 @@ const confirmClick = () => {
     cascadeArr = []
     queryElement.value.propValue = cloneDeep(conditions.value)
     snapshotStore.recordSnapshotCache('confirmClick')
+    curComponent.value.id = ''
+    relationshipChartIndex.value = 0
     nextTick(() => {
       emits('queryData')
     })
@@ -1854,7 +1888,7 @@ const handleCondition = (item, idx = 0) => {
   nextTick(() => {
     if (curComponent.value.displayType === '9') {
       oldDisplayType = '9'
-      handleRelationshipChart(idx)
+      handleRelationshipChart(idx, true)
       if (!curComponent.value.treeDatasetId && fields.value?.length) {
         nextTick(() => {
           setTreeDefault()
@@ -1910,7 +1944,7 @@ const sortComputed = computed(() => {
 const treeDialog = ref()
 const startTreeDesign = () => {
   treeDialog.value.init(
-    curComponent.value.dataset.fields.filter(ele => ele.groupType === 'd'),
+    curComponent.value.dataset.fields.filter(ele => ele.groupType === 'd' && ele.deType === 0),
     curComponent.value.treeFieldList
   )
 }
@@ -2217,8 +2251,8 @@ const setRelationBack = () => {
     checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
   }
 }
-const handleRelationshipChart = index => {
-  if (curComponent.value.treeCheckedList?.length) {
+const handleRelationshipChart = (index, initShip = false) => {
+  if (curComponent.value.treeCheckedList?.length && !initShip) {
     curComponent.value.treeCheckedList[relationshipChartIndex.value] = {
       checkedFields: [...curComponent.value.checkedFields],
       checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
@@ -3789,7 +3823,7 @@ defineExpose({
           flex-wrap: wrap;
           .search-tree {
             width: 100%;
-            height: 200px;
+            height: 216px;
             margin-top: 8px;
             position: relative;
             padding: 16px;

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

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { toRefs, computed, PropType } from 'vue'
+import { toRefs, computed, PropType, watch } from 'vue'
 import { type TimeRange } from './time-format'
 import { useI18n } from '@/hooks/web/useI18n'
 import DynamicTime from './DynamicTimeFiltering.vue'
 import DynamicTimeRange from './DynamicTimeRangeFiltering.vue'
+import { ManipulateType } from 'dayjs'
 const props = defineProps({
   timeRange: {
     type: Object as PropType<TimeRange>,
@@ -264,6 +265,40 @@ const relativeToCurrentListRange = computed(() => {
     }
   ]
 })
+
+watch(
+  () => relativeToCurrentListRange.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentRange)) {
+      timeRange.value.relativeToCurrentRange = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrent)) {
+      timeRange.value.relativeToCurrent = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentTypeList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentType)) {
+      timeRange.value.relativeToCurrentType = val[0].value as ManipulateType
+    }
+
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentTypeRange)) {
+      timeRange.value.relativeToCurrentTypeRange = val[0].value as ManipulateType
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>

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

@@ -7,7 +7,13 @@ import { type TimeRange } from './time-format'
 import dayjs from 'dayjs'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useShortcuts } from './shortcuts'
-import { getThisStart, getThisEnd, getLastStart, getAround } from './time-format-dayjs'
+import {
+  getThisStart,
+  getThisEnd,
+  getLastStart,
+  getAround,
+  getCustomRange
+} from './time-format-dayjs'
 import VanPopup from 'vant/es/popup'
 import VanDatePicker from 'vant/es/date-picker'
 import VanTimePicker from 'vant/es/time-picker'
@@ -251,6 +257,7 @@ const disabledDate = val => {
     regularOrTrends,
     regularOrTrendsValue,
     relativeToCurrent,
+    relativeToCurrentRange,
     timeNum,
     relativeToCurrentType,
     around,
@@ -261,6 +268,7 @@ const disabledDate = val => {
     aroundRange
   } = config.value.timeRange || {}
   let isDynamicWindowTime = false
+
   if (startWindowTime.value && dynamicWindow) {
     isDynamicWindowTime =
       dayjs(startWindowTime.value)
@@ -336,26 +344,31 @@ const disabledDate = val => {
   }
 
   if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[0]))
-              .startOf(queryTimeType.value)
-              .format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[1]))
-              .endOf(queryTimeType.value)
-              .format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
+    let endTime
+    if (relativeToCurrentRange === 'custom') {
+      startTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[0]))
+                .startOf(queryTimeType.value)
+                .format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+      endTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[1]))
+                .endOf(queryTimeType.value)
+                .format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(
+              relativeToCurrentTypeRange,
+              aroundRange === 'f' ? 'subtract' : 'add',
+              timeNumRange
+            )
+    } else {
+      ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
+    }
     return (
       timeStamp < +new Date(startTime) - 1000 ||
       timeStamp > +new Date(endTime) ||

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

@@ -66,26 +66,28 @@ const placeholderText = computed(() => {
   return ' '
 })
 const { config } = toRefs(props)
-
+const fromTreeSelectConfirm = ref(false)
 const multiple = ref(false)
-
 const treeSelectConfirm = val => {
   treeValue.value = val
   handleValueChange()
 }
 
 const handleValueChange = () => {
+  fromTreeSelectConfirm.value = true
   const value = Array.isArray(treeValue.value) ? [...treeValue.value] : treeValue.value
   if (!props.isConfig) {
     config.value.selectValue = Array.isArray(treeValue.value)
       ? [...treeValue.value]
       : treeValue.value
     nextTick(() => {
+      fromTreeSelectConfirm.value = false
       isConfirmSearch(config.value.id)
     })
     return
   }
   config.value.defaultValue = value
+  fromTreeSelectConfirm.value = false
 }
 
 const changeFromId = ref(false)
@@ -145,6 +147,39 @@ onMounted(() => {
   }, 0)
 })
 
+watch(
+  () => config.value.defaultValue,
+  val => {
+    if (props.isConfig) return
+    if (config.value.multiple) {
+      treeValue.value = Array.isArray(val) ? [...val] : val
+    }
+    nextTick(() => {
+      multiple.value = config.value.multiple
+    })
+  }
+)
+
+watch(
+  () => config.value.selectValue,
+  val => {
+    if (props.isConfig || fromTreeSelectConfirm.value) return
+
+    if (config.value.multiple) {
+      treeValue.value = Array.isArray(val) ? [...val] : val
+    }
+
+    nextTick(() => {
+      multiple.value = config.value.multiple
+      if (!config.value.multiple) {
+        treeValue.value = Array.isArray(config.value.selectValue)
+          ? [...config.value.selectValue]
+          : config.value.selectValue
+      }
+    })
+  }
+)
+
 const showWholePath = ref(false)
 watch(
   () => config.value.multiple,

core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts

@@ -65,7 +65,7 @@ function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
       return [getLastStart('day'), getLastEnd('day')]
     case 'LastThreeDays':
       return [
-        new Date(dayjs().subtract(3, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
+        new Date(dayjs().subtract(2, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
         getThisEnd('day')
       ]
     case 'monthBeginning':

core/core-frontend/src/locales/en.ts

@@ -2787,7 +2787,7 @@ export default {
     msg_center: 'Message center',
     to_be_filled: 'To be filled',
     the_minimum_value:
-      'The maximum value of the numerical interval must be greater than the minimum value',
+      'The maximum value of the numerical interval must be greater than or equal to the minimum value',
     before_querying:
       'The query condition is required, please set the option value before querying! ',
     here_or_click: 'Drag the field on the right here or click',

core/core-frontend/src/locales/tw.ts

@@ -2717,7 +2717,7 @@ export default {
     custom_sort: '自訂排序',
     msg_center: '訊息中心',
     to_be_filled: '待填報',
-    the_minimum_value: '數值區間最大值必須大於最小值',
+    the_minimum_value: '數值區間最大值必須大於等於最小值',
     before_querying: '查詢條件是必填項，請設定選項值後，再進行查詢！ ',
     here_or_click: '將右側的字段拖曳到這裡或點擊',
     add_query_condition: '新增查詢條件',

core/core-frontend/src/locales/zh-CN.ts

@@ -2723,7 +2723,7 @@ export default {
     custom_sort: '自定义排序',
     msg_center: '消息中心',
     to_be_filled: '待填报',
-    the_minimum_value: '数值区间最大值必须大于最小值',
+    the_minimum_value: '数值区间最大值必须大于等于最小值',
     before_querying: '查询条件是必填项，请设置选项值后，再进行查询！',
     here_or_click: '将右侧的字段拖拽到这里 或 点击',
     add_query_condition: '添加查询条件',