feat(frontend): 单据管理迭代_1126 #7190

# Reviewed, transaction id: 24812

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3741,5 +3741,8 @@
   "备份源:": "备份源:",
   "新从库主机": "新从库主机",
   "故障实例IP": "故障实例IP",
+  "只读集群名称：": "只读集群名称：",
+  "强制实例下架：": "强制实例下架：",
+  "Excel文件：": "Excel文件：",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/model/ticket/details/mysql/haDestroy.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+/**
+ * MySQL 主从集群销毁
+ */
+export interface HaDestroy extends DetailBase {
+  force: boolean;
+  clusters: DetailClusters;
+  cluster_ids: number[];
+}

dbm-ui/frontend/src/services/model/ticket/details/mysql/haDisable.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+/**
+ * MySQL 主从集群禁用
+ */
+export interface HaDisable extends DetailBase {
+  force: boolean;
+  clusters: DetailClusters;
+  cluster_ids: number[];
+}

dbm-ui/frontend/src/services/model/ticket/details/mysql/clusterSwitch.ts → dbm-ui/frontend/src/services/model/ticket/details/mysql/haEnable.ts

@@ -1,9 +1,9 @@
 import type { DetailBase, DetailClusters } from '../common';
 
 /**
- * MySQL 集群操作
+ * MySQL 主从集群可用
  */
-export interface ClusterSwitch extends DetailBase {
+export interface HaEnable extends DetailBase {
   force: boolean;
   clusters: DetailClusters;
   cluster_ids: number[];

dbm-ui/frontend/src/services/model/ticket/details/mysql/index.ts

@@ -9,6 +9,9 @@ export * from './dumpData';
 export * from './flashBack';
 export * from './haApply';
 export * from './haDBTableBackup';
+export * from './haDestroy';
+export * from './haDisable';
+export * from './haEnable';
 export * from './haFullBackup';
 export * from './haRenameDatabase';
 export * from './importSqlFile';
@@ -25,7 +28,10 @@ export * from './proxySwitch';
 export * from './proxyUpgrade';
 export * from './restoreLocalSlave';
 export * from './restoreSlave';
-export * from './rollbackCluster';
+export * from './rollBackCluster';
 export * from './singleApply';
+export * from './singleDestroy';
+export * from './singleDisable';
+export * from './singleEnable';
 export * from './singleRenameDatabase';
 export * from './truncateData';

dbm-ui/frontend/src/services/model/ticket/details/mysql/singleDestroy.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+/**
+ * MySQL 单节点集群销毁
+ */
+export interface SingleDestroy extends DetailBase {
+  force: boolean;
+  clusters: DetailClusters;
+  cluster_ids: number[];
+}

dbm-ui/frontend/src/services/model/ticket/details/mysql/singleDisable.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+/**
+ * MySQL 单节点集群禁用
+ */
+export interface SingleDisable extends DetailBase {
+  force: boolean;
+  clusters: DetailClusters;
+  cluster_ids: number[];
+}

dbm-ui/frontend/src/services/model/ticket/details/mysql/singleEnable.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+/**
+ * MySQL 单节点集群可用
+ */
+export interface SingleEnable extends DetailBase {
+  force: boolean;
+  clusters: DetailClusters;
+  cluster_ids: number[];
+}

dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/destroy.ts

@@ -1,6 +1,9 @@
-import type { DetailBase } from '../common';
+import type { DetailBase, DetailClusters } from '../common';
 
 export interface Destroy extends DetailBase {
-  force: boolean;
+  clusters: DetailClusters;
   cluster_ids: number[];
+  force: boolean;
+  is_only_add_slave_domain: boolean;
+  is_only_delete_slave_domain: boolean;
 }

dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/disable.ts

@@ -1,5 +1,9 @@
-import type { DetailBase } from '../common';
+import type { DetailBase, DetailClusters } from '../common';
 
 export interface Disable extends DetailBase {
+  clusters: DetailClusters;
   cluster_ids: number[];
+  force: boolean;
+  is_only_add_slave_domain: boolean;
+  is_only_delete_slave_domain: boolean;
 }

dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/enable.ts

@@ -1,6 +1,9 @@
-import type { DetailBase } from '../common';
+import type { DetailBase, DetailClusters } from '../common';
 
 export interface Enable extends DetailBase {
-  is_only_add_slave_domain: boolean;
+  clusters: DetailClusters;
   cluster_ids: number[];
+  force: boolean;
+  is_only_add_slave_domain: boolean;
+  is_only_delete_slave_domain: boolean;
 }

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/common/Disabled&enable&destroy.vue → dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/BatchClusterOperation.vue

@@ -12,7 +12,9 @@
 -->
 
 <template>
-  <BkTable :data="tableData">
+  <BkTable
+    :data="tableData"
+    show-overflow-tooltip>
     <BkTableColumn
       field="cluster_ids"
       :label="t('集群ID')">
@@ -24,7 +26,22 @@
       field="immute_domain"
       :label="t('集群名称')">
       <template #default="{ data }: { data: RowData }">
-        {{ ticketDetails.details.clusters[data.id].immute_domain }}
+        <div
+          v-bk-tooltips="{
+            content: `${t('域名')}：${ticketDetails.details.clusters[data.id].immute_domain}
+            ${ticketDetails.details.clusters[data.id].name ? `${'集群别名'}：${ticketDetails.details.clusters[data.id].name}` : null}
+          `,
+            allowHTML: true,
+          }"
+          class="cluster-name">
+          <span>{{ ticketDetails.details.clusters[data.id].immute_domain }}</span>
+          <br />
+          <span
+            v-if="ticketDetails.details.clusters[data.id].name"
+            class="cluster-name-alias">
+            {{ ticketDetails.details.clusters[data.id].name }}
+          </span>
+        </div>
       </template>
     </BkTableColumn>
     <BkTableColumn
@@ -37,14 +54,18 @@
   </BkTable>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
   import { type UnwrapRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import TicketModel, { type Sqlserver } from '@services/model/ticket/ticket';
+  import type { DetailClusters } from '@services/model/ticket/details/common';
+  import TicketModel from '@services/model/ticket/ticket';
 
   interface Props {
-    ticketDetails: TicketModel<Sqlserver.Enable | Sqlserver.Destroy | Sqlserver.Disable>;
+    ticketDetails: TicketModel<{
+      clusters: DetailClusters;
+      cluster_ids: number[];
+    }>;
   }
 
   const props = defineProps<Props>();
@@ -55,3 +76,14 @@
 
   type RowData = UnwrapRef<typeof tableData>[number];
 </script>
+
+<style lang="less" scoped>
+  .cluster-name {
+    padding: 8px 0;
+    line-height: 16px;
+
+    .cluster-name-alias {
+      color: @light-gray;
+    }
+  }
+</style>

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/ClusterOperation.vue

@@ -0,0 +1,93 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkTable
+    :data="tableData"
+    show-overflow-tooltip>
+    <BkTableColumn
+      field="cluster_ids"
+      :label="t('集群ID')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.id }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="immute_domain"
+      :label="t('集群名称')">
+      <template #default="{ data }: { data: RowData }">
+        <div
+          v-bk-tooltips="{
+            content: `${t('域名')}：${ticketDetails.details.clusters[data.id].immute_domain}
+            ${ticketDetails.details.clusters[data.id].name ? `${'集群别名'}：${ticketDetails.details.clusters[data.id].name}` : null}
+          `,
+            allowHTML: true,
+          }"
+          class="cluster-name">
+          <span>{{ ticketDetails.details.clusters[data.id].immute_domain }}</span>
+          <br />
+          <span
+            v-if="ticketDetails.details.clusters[data.id].name"
+            class="cluster-name-alias">
+            {{ ticketDetails.details.clusters[data.id].name }}
+          </span>
+        </div>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="cluster_type_name"
+      :label="t('集群类型')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.id].cluster_type_name }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
+</template>
+
+<script setup lang="ts">
+  import { type UnwrapRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import type { DetailClusters } from '@services/model/ticket/details/common';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  interface Props {
+    ticketDetails: TicketModel<{
+      clusters: DetailClusters;
+      cluster_id: number;
+    }>;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const tableData = computed(() => [
+    {
+      id: props.ticketDetails.details.cluster_id,
+    },
+  ]);
+
+  type RowData = UnwrapRef<typeof tableData>[number];
+</script>
+
+<style lang="less" scoped>
+  .cluster-name {
+    padding: 8px 0;
+    line-height: 16px;
+
+    .cluster-name-alias {
+      color: @light-gray;
+    }
+  }
+</style>