feat(查询组件): 文本下拉组件支持平铺展示风格 #13146

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

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  },
+  activeItems: {
+    type: Array,
+    default: () => []
+  },
+  selectStyle: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const customStyle: any = inject('$custom-style-filter')
+
+const customSelectStyle = computed(() => {
+  return customStyle
+    ? { ...props.selectStyle, background: customStyle.background }
+    : props.selectStyle
+})
+
+const customColor = computed(() => {
+  return customStyle
+    ? { color: customStyle.text, fontSize: customStyle.placeholderSize + 'px' }
+    : {}
+})
+
+const boxHeight = computed(() => {
+  return `${customStyle?.queryConditionHeight || 32}px`
+})
+
+const btnColor = computed(() => {
+  return customStyle ? customStyle.btnColor : '#3370FF'
+})
+
+const emits = defineEmits(['handleItemClick'])
+const handleItemClick = (item: any) => {
+  emits('handleItemClick', item.value)
+}
+</script>
+
+<template>
+  <div :style="customSelectStyle" class="flat-select">
+    <el-scrollbar>
+      <div class="scrollbar-flex-content">
+        <p
+          @click="handleItemClick(item)"
+          v-for="item in options"
+          :key="item"
+          :style="customColor"
+          class="select-item"
+          :class="activeItems.includes(item.value) && 'active-select'"
+        >
+          {{ item.label }}
+        </p>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.flat-select {
+  .ed-scrollbar.ed-scrollbar.ed-scrollbar {
+    padding: 0;
+  }
+  .scrollbar-flex-content {
+    display: flex;
+    width: fit-content;
+    .select-item {
+      height: v-bind(boxHeight);
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      cursor: pointer;
+      white-space: nowrap;
+      &.active-select::after {
+        content: '';
+        width: 80%;
+        height: 2px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: v-bind(btnColor) !important;
+      }
+    }
+  }
+}
+</style>

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

@@ -1784,6 +1784,7 @@ const parameterCompletion = ele => {
     defaultNumValueEnd: null,
     numValueEnd: null,
     numValueStart: null,
+    displayFormat: 0,
     timeRange: {
       intervalType: 'none',
       dynamicWindow: false,
@@ -3438,6 +3439,24 @@ defineExpose({
                   </div>
                 </div>
               </div>
+              <template v-if="['0', '2', '5'].includes(curComponent.displayType)">
+                <div
+                  class="label ellipsis"
+                  :title="t('common.display_formats')"
+                  style="margin-top: 10.5px"
+                >
+                  {{ t('common.display_formats') }}
+                </div>
+                <div class="value" style="margin-top: 10.5px">
+                  <el-radio-group
+                    class="larger-radio icon-info"
+                    v-model="curComponent.displayFormat"
+                  >
+                    <el-radio :label="0">{{ t('common.dropdown_display') }} </el-radio>
+                    <el-radio :label="1">{{ t('common.tile_display') }}</el-radio>
+                  </el-radio-group>
+                </div>
+              </template>
               <div
                 class="label ellipsis"
                 :title="t('v_query.of_option_values')"

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

@@ -16,6 +16,7 @@ import {
 } from 'vue'
 import { enumValueObj, type EnumValue, getEnumValue } from '@/api/dataset'
 import { cloneDeep, debounce } from 'lodash-es'
+import Flat from './Flat.vue'
 import eventBus from '@/utils/eventBus'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -27,6 +28,7 @@ interface SelectConfig {
   selectValue: any
   defaultMapValue: any
   mapValue: any
+  displayFormat?: number
   defaultValue: any
   checkedFieldsMap: object
   displayType: string
@@ -64,6 +66,7 @@ const props = defineProps({
     default: () => {
       return {
         selectValue: '',
+        displayFormat: 0,
         queryConditionWidth: 0,
         resultMode: 0,
         defaultValue: '',
@@ -657,6 +660,10 @@ const selectStyle = computed(() => {
   return props.isConfig ? {} : { width: getCustomWidth() + 'px' }
 })
 
+const selectStyleFlat = computed(() => {
+  return props.isConfig ? { width: '415px' } : { width: getCustomWidth() + 'px' }
+})
+
 const mult = ref()
 const single = ref()
 
@@ -734,6 +741,24 @@ const tagTextWidth = computed(() => {
   return (getCustomWidth() - 65) / 2 - 20 + 'px'
 })
 
+const activeItems = computed(() => {
+  return Array.isArray(selectValue.value) ? selectValue.value : [selectValue.value]
+})
+
+const handleItemClick = (item: any) => {
+  if (multiple.value) {
+    if (selectValue.value.includes(item)) {
+      selectValue.value = selectValue.value.filter(ele => ele !== item)
+    } else {
+      selectValue.value = [...selectValue.value, item]
+    }
+  } else {
+    selectValue.value = selectValue.value === item ? undefined : item
+  }
+
+  handleValueChange()
+}
+
 const componentClick = () => {
   mult.value?.blur()
   single.value?.blur()
@@ -754,8 +779,18 @@ defineExpose({
 </script>
 
 <template>
+  <Flat
+    @handleItemClick="handleItemClick"
+    :options="options"
+    :selectStyle="selectStyleFlat"
+    v-loading="loading"
+    :multiple="multiple"
+    :disabled="disabledFirstItem && props.isConfig"
+    :activeItems="activeItems"
+    v-if="config.displayFormat === 1"
+  ></Flat>
   <el-select-v2
-    v-if="multiple"
+    v-else-if="multiple"
     key="multiple"
     ref="mult"
     v-model="selectValue"

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

@@ -1,5 +1,8 @@
 export default {
   common: {
+    display_formats: 'Display Formats',
+    dropdown_display: 'Drop-down Display',
+    tile_display: 'Tile Display',
     month_to_yesterday: 'From the beginning of the month to yesterday',
     to_this_month: 'From the beginning of the year to this month',
     up_to_options: 'Display up to 1000 options',

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

@@ -1,5 +1,8 @@
 export default {
   common: {
+    display_formats: '展示形式',
+    dropdown_display: '下拉展示',
+    tile_display: '平铺展示',
     month_to_yesterday: '月初至昨天',
     to_this_month: '年初至本月',
     up_to_options: '最多展示1000個選項',

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

@@ -1,5 +1,8 @@
 export default {
   common: {
+    display_formats: '展示形式',
+    dropdown_display: '下拉展示',
+    tile_display: '平铺展示',
     month_to_yesterday: '月初至昨天',
     to_this_month: '年初至本月',
     up_to_options: '最多展示1000个选项',