重构 cluster-db 选择器，新增限制字段 showDb 不影响原功能前提实现查询功能增量拓展

1.为DbSelect组件新添加showDb字段 :show-db="false"时只显示集群不显示数据库信息

重构 cluster-db 选择器 ，新增限制字段 showDb 不影响原功能前提实现查询功能增量拓展 ,。保证组件* *高可用性,减少冗余方法的编写**,提高整体代码**复用性和维护性**。

复制代码

<!-- 简易版 cluster-db选择器 支持筛选，需要传递emit onChange来获取返回值 -->
<!-- 返回值为数据，第一个是 集群， 第二个是 DB：ID [
    "base_dms_platform",
    "dms_main_beta:1"
] -->
<template>
  <Cascader2
    v-model:model-value="selectedValue"
    :options="filteredOptions"
    filterable
    remote
    hideAfterSelect
    :filter-method="handleFilter"
    @change="handleChange"
  ></Cascader2>
</template>

<script lang="ts" setup>
import { Cascader2, OptionContent, useDebounce } from '@xhs/delight'
import { onBeforeMount, Ref, ref } from 'vue'
import { getDbByEnv } from '~/page/mysql/SQLQuery/service'

const props = defineProps<{
  env: string
  showDb?: boolean  // 添加 showDb 属性，控制是否显示数据库选项
}>(),{
  showDb: true
}

const emit = defineEmits(['onChange'])
const optionsContents: Ref<OptionContent[]> = ref([])
const filteredOptions: Ref<OptionContent[]> = ref([])

const getClusterAndDbOptions = () => {
  getDbByEnv({ env: props.env }).then((res) => {
    const databases = res
    const clusters: Record<string, (typeof databases)[number][]> = {}
    databases.forEach((db) => {
      const cluster = db.clusterName
      if (!clusters[cluster]) clusters[cluster] = []
      clusters[cluster].push(db)
    })
    // 生成下拉选项
    optionsContents.value = Object.entries(clusters).map(([cluster, dbs]) => ({
      value: cluster,
      label: cluster,
      ...(props.showDb && {
        children: dbs.map((db: any) => ({
          label: db.dbname,
          value: db.dbname + ':' + db.id
        }))
      })
    }))
    filteredOptions.value = optionsContents.value
  })
}

onBeforeMount(() => {
  getClusterAndDbOptions()
})

const selectedValue = ref([])

const handleFilter: any = useDebounce(
  (value: string) => {
    const lowerValue = value.toLowerCase()

    filteredOptions.value = optionsContents.value
      .map((item: any) => {
        if (item.children) {
          // 过滤子节点
          const filteredChildren = item.children.filter((child: any) =>
            child.label.toLowerCase().includes(lowerValue)
          )
          // 如果父节点的label匹配，保留所有子节点
          if (item.label.toLowerCase().includes(lowerValue)) {
            return { ...item, children: item.children }
          }
          // 如果有符合条件的子节点，保留父节点并更新子节点
          if (filteredChildren.length > 0) {
            return { ...item, children: filteredChildren }
          }
        } else {
          // 如果是单层结构直接匹配
          if (item.label.toLowerCase().includes(lowerValue)) {
            return item
          }
        }
        return null // 无符合条件的节点
      })
      .filter((item: any) => item !== null)

    return false
  },
  {
    delay: 200
  }
)

const handleChange = () => {
  emit('onChange', selectedValue.value)
}
</script>

主要修改点：

将 ...(props.showDb !== false && { 简化为 ...(props.showDb && {
这样当 showDb 为 false 或 undefined 时，不会添加 children 属性
当 showDb 为 true 时，会添加 children 属性

使用方式

复制代码

<!-- 只显示集群信息 -->
<DbSelect 
  env="sit" 
  :show-db="false"
  @on-change="handleTargetClusterChange"
/>

<!-- 显示集群和数据库信息（默认行为） -->
<DbSelect 
  env="sit" 
  @on-change="handleTargetClusterChange"
/>