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

[dataeaseShu]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[fit2cloudrd]

代码看起来比较整洁，但有以下几点建议和优化：

1. 类型定义：在 defineComponent 中明确指定组件的类型参数 PropsOptions 或者使用泛型。

2. 模板字符串中的计算属性：

   .select-item {
     height: v-bind(boxHeight); // 使用双引号包裹变量名称

3. **样式选择器**：在 `.scrollbar-flex-content` 的样式中可以进一步细化选择器以提高可维护性。

4. **事件传递**：为了增强可读性和一致性，可以在传入值时统一为 `{ value, label }` 格式。

修改后的代码示例如下：

```typescript
<script lang="ts" setup>
import { reactive, defineProps } from "vue";

export interface PropsType {
  options: Array<{ value: any; label: string }>;
  activeItems: Array<string | number>; // 假设为数值数组以便更灵活
  selectStyle?: Record<string, any>;
}

const props = withDefaults(defineProps<PropsType>(), {
  options: () => [],
  activeItems: () => [],
  selectStyle: () => {},
});

// 其他逻辑不变...
</script>

<template>
<!-- 确保正确绑定value -->
<p 
    @click="$emit('handleItemClick', {value: item.value, label: item.label})"
    v-for="(item, index) in options"
    :key="index"
    :style="{...customColor}"
    class="select-item"
    :class="[activeItems.includes(item.value) && 'active-select']"
    >
  {{ item.label }}
</p>
</template>

<style lang="less" scoped>
/* 同上 */
</style>

这样不仅使代码更加清晰，并且更容易扩展或调试。

[fit2cloudrd]

这个代码看起来有一些问题和优化空间：

1. 重复计算props.config.displayFormat：

   <el-select-v2
       v-else-if="multiple"
       key="multiple"
       ref="mult"
       v-model="selectValue"
       v-loading="loading"
       :multiple="multiple"
       :display-format="props.config.displayFormat === 1 ? 'flat' : 'normal'"
       :disabled="disabledFirstItem && props.isConfig"
       @handleItemClick="handleItemClick"
   >

   可以将display-fotmat绑定到一个单独的响应式变量上，减少嵌套的模板语法。

2. 组件渲染逻辑冗余：

   <Flat
       @handleItemClick="handleItemClick"
       :options="options"
       :select-style="selectStyleFlat"
       v-loading="loading"
       :multiple="multiple"
       :disabled="disabledFirstItem && props.isConfig"
       :activeItems="activeItems"
       v-if="config.displayFormat === 1"
   ></Flat>
   <el-select-v2
       v-else-if="multiple"
       key="multiple"
       ref="mult"
       v-model="selectValue"
       v-loading="loading"
       :multiple="multiple"
       :display-format="props.config.displayFormat === 1 ? 'flat' : 'normal'"
       :disabled="disabledFirstItem && props.isConfig"
       @handleItemClick="handleItemClick"
   >

   可以考虑使用统一的组件来处理不同类型的显示格式，而不是直接在两个地方定义相同的逻辑。例如，可以有一个全局组件，并通过参数动态决定是否使用自定义样式。

3. 不必要的导入语句：

   import Flat from './Flat.vue'

   如果Flat组件在整个项目中仅被此文件引用一次，则可以将其从模块路径中移除，从而优化库加载时间。

4. 避免未使用的属性：
   在某些情况下，如select-style-flat，可以在定义时就提供一个默认值（为空对象或null），这样就不需要每次都手动覆盖默认值。

综上所述，主要优化建议是简化组件中的逻辑重复性，提高可维护性和性能表现；同时适当清理不必要的代码和依赖项。

[fit2cloudrd]

代码中有一些优化和改善的建议：

1. 重复元素：

   <template v-if="['0', '2', '5'].includes(curComponent.displayType)">
     <!-- 具体内容 -->
   </template>

   可以将这部分模板复用在其他地方，这样逻辑上会更清晰。

2. 样式重叠：

   .value {
     margin-top: 10.5px;
   }

   可能可以考虑合并 style 属性，使其更加简洁统一。

3. 国际化文本处理：

   <div class="label ellipsis" :title="t('common.display_formats')">
     {{ t('common.display_formats') }}
   </div>

   确保所有使用了国际化的地方都正确地传入了对应的上下文参数 context。

4. 变量命名一致性：

   defaultNumValueEnd: null,
   numValueEnd: null,
   numValueStart: null,
   ...
   curComponent.displayFormat: 0,
   ... 
   ['0', '2', '5']

   变量名和属性名保持一致有助于代码的理解。

5. 事件监听器简化：

   eventBus.on('query-change', handleQueryChange);

   如果可能的话，尽量提前绑定好事件监听器，避免在数据变化时动态添加或移除监听者。

通过以上改进，代码将会变得更加整洁、易于维护和理解。