ps毕业设计做网站界面常德网站建设企业

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

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

<!-- 简易版 cluster-db选择器 支持筛选，需要传递emit onChange来获取返回值 -->
<!-- 返回值为数据，第一个是 集群， 第二个是 DB：ID ["base_dms_platform","dms_main_beta:1"
] -->
<template><Cascader2v-model:model-value="selectedValue":options="filteredOptions"filterableremotehideAfterSelect: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: stringshowDb?: 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 = resconst clusters: Record<string, (typeof databases)[number][]> = {}databases.forEach((db) => {const cluster = db.clusterNameif (!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>

主要修改点：

1. 将 ...(props.showDb !== false && { 简化为 ...(props.showDb && {

2. 这样当 showDb 为 false 或 undefined 时，不会添加 children 属性

3. 当 showDb 为 true 时，会添加 children 属性

使用方式

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