集群选择器允许用户选择不同类型的数据库集群，并提供了预览、复制和清空选中项的功能。它支持多种数据库类型，如Redis、MongoDB、MySQL等。
交互展示
主要功能 1. **集群选择**：用户可以通过对话框选择不同类型的数据库集群。
2. **结果预览**：提供了一个区域用于预览当前选中的集群信息。
3. **复制功能**：用户可以复制选中的集群域名。
4. **清空功能**：用户可以清空所有选中的集群。
5. **多选支持**：根据配置，某些类型的集群支持多选。
6. **切换Tab提示**：当用户切换不同的集群类型时，会显示一个提示信息，告知用户切换后的影响。
使用方法 该组件通过`<template>`部分定义了对话框的结构，包括标题、内容区域、底部按钮等。`<script>`部分定义了组件的逻辑，包括响应式数据、计算属性、方法和生命周期钩子。`<style>`部分定义了组件的样式。
Props - `selected`: 类型为`Record<string, T[]>`，用于传递初始选中的集群数据。
- `clusterTypes`: 类型为`string[]`，用于传递支持的集群类型数组。
- `tabListConfig`: 类型为`Record<string, TabConfig>`，用于传递每个集群类型的配置。
- `onlyOneType`: 类型为`boolean`，用于指定是否只允许选择一种集群类型。
- `supportOfflineData`: 类型为`boolean`，用于指定是否支持离线数据。
- `disableDialogSubmitMethod`: 类型为`(hostList: Array<string>) => string | boolean`，用于指定一个方法来决定是否禁用对话框的提交按钮。
Emits - `change`: 当用户选择或取消选择集群时，会触发此事件，并传递当前的选中数据。
组件使用示例 Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL
<template>
<ClusterSelectorDialog
:selected="selectedClusters"
:clusterTypes="['TENDBCLUSTER', 'REDIS']"
@change="handleClusterChange" />
</template>
<script setup>
import { ref } from 'vue';
import ClusterSelectorDialog from './path/to/ClusterSelectorDialog.vue';
const selectedClusters = ref({
TENDBCLUSTER: [{ id: 'cluster1', master_domain: 'cluster1.domain' }],
REDIS: [{ id: 'redis1', master_domain: 'redis1.domain' }],
});
const handleClusterChange = (newSelected) => {
selectedClusters.value = newSelected;
};
</script>
在这个示例中，`ClusterSelectorDialog`组件被用来选择`TENDBCLUSTER`和`REDIS`类型的集群，并且当用户更改选择时，`handleClusterChange`方法会被调用来更新`selectedClusters`数据。
实例选择器允许用户从不同的数据库实例类型中选择实例，并提供了手动输入功能。组件支持多种数据库类型，如MongoDB、MySQL、Redis等，并且可以根据不同的数据库类型展示不同的配置选项。
交互展示
主要功能 1. **实例选择**：用户可以从提供的数据库实例列表中选择实例。
2. **手动输入**：如果用户无法从列表中找到所需的实例，可以通过手动输入功能添加实例。
3. **多类型支持**：组件支持多种数据库类型的实例选择。
4. **配置选项**：根据不同的数据库类型，组件提供了不同的配置选项，如角色、状态、管控区域等。
5. **预览结果**：用户在选择实例后，可以预览所选实例的结果。
6. **提交和取消操作**：用户可以选择确认提交所选实例，或者取消操作。
使用方法 1. **引入组件**：在父组件中引入并注册该实例选择器组件。
2. **配置属性**：根据需要配置组件的属性，如`clusterTypes`（支持的数据库类型）、`tabListConfig`（自定义选项卡配置）、`selected`（预选的实例）等。
3. **监听事件**：监听组件的`change`和`cancel`事件，以便在用户提交或取消操作时执行相应的逻辑。
4. **使用插槽**：如果需要自定义底部提交按钮的提示信息，可以使用`submitTips`插槽。
Vue组件关键属性 Props - `clusterTypes`：支持的数据库类型数组。
- `tabListConfig`：自定义选项卡配置。
- `selected`：预选的实例。
- `unqiuePanelValue`：是否只允许选择一种类型的实例。
- `unqiuePanelTips`：当`unqiuePanelValue`为`true`时显示的提示信息。
- `hideManualInput`：是否隐藏手动输入选项。
- `onlyOneType`：是否只允许选择一种类型的实例。
- `disableDialogSubmitMethod`：一个函数，用于在提交前对所选实例进行校验。
Emits - `change`：当用户提交所选实例时触发，传递当前的实例选择。
- `cancel`：当用户取消操作时触发。
示例代码 Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL
<template>
<InstanceSelector
:clusterTypes="['TENDBCLUSTER', 'TENDBSINGLE', 'TENDBHA']"
:selected="selectedInstances"
@change="handleInstanceChange"
@cancel="handleCancel">
<template #submitTips="{ hostList }">
<span>已选择 {{ hostList.length }} 个实例</span>
</template>
</InstanceSelector>
</template>
<script setup>
import { ref } from 'vue';
import InstanceSelector from './path-to-instance-selector.vue';
const selectedInstances = ref({});
const handleInstanceChange = (values) => {
selectedInstances.value = values;
// 处理实例选择后的逻辑
};
const handleCancel = () => {
// 处理取消操作的逻辑
};
</script>
在上述示例中，我们创建了一个`InstanceSelector`组件实例，并配置了支持的数据库类型为`TENDBCLUSTER`、`TENDBSINGLE`和`TENDBHA`。我们还监听了`change`和`cancel`事件，并定义了相应的处理函数。此外，我们还使用了`submitTips`插槽来自定义提交按钮的提示信息。
