feat(frontend): 工具箱支持资源池协议变更_mysql添加proxy TencentBlueKing#8076

# Reviewed, transaction id: 26512

dbm-ui/frontend/src/components/editable-table/Column.vue

@@ -164,7 +164,7 @@
         required: true,
         validator: defaultValidator.required,
         message: `${label}不能为空`,
-        trigger: 'change',
+        trigger: 'blur',
       });
     }
     if (props.email) {
@@ -487,10 +487,11 @@
 
   .bk-editable-table-field-cell {
     position: relative;
-    display: flex;
+    // display: flex;
     height: 100%;
     min-height: 40px;
-    align-items: center;
+    // align-items: center;
+    padding: 1px;
   }
 
   .bk-editable-table-column-error {

dbm-ui/frontend/src/components/editable-table/Index.vue

@@ -56,6 +56,7 @@
   import Block from './edit/Block.vue';
   import DatePicker from './edit/DatePicker.vue';
   import Input from './edit/Input.vue';
+  import Operate from './edit/Operate.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
   import Textarea from './edit/Textarea.vue';
@@ -97,7 +98,7 @@
     getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
   }> = Symbol.for('bk-editable-table');
 
-  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn };
+  export { Block, Column, DatePicker, Input, Operate, Row, Select, TagInput, Textarea, TimePicker, useColumn };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();

dbm-ui/frontend/src/components/editable-table/edit/Input.vue

@@ -1,11 +1,19 @@
 <template>
   <BkInput
+    ref="inputRef"
     v-model="modelValue"
     class="bk-editable-input"
     v-bind="{ ...attrs, ...props }"
     clearable
     @blur="handleBlur"
-    @focus="handleFocus" />
+    @focus="handleFocus">
+    <template #prefix>
+      <slot name="prefix" />
+    </template>
+    <template #suffix>
+      <slot name="suffix" />
+    </template>
+  </BkInput>
 </template>
 <script setup lang="ts">
   import { useAttrs, watch } from 'vue';
@@ -26,6 +34,10 @@
     (e: 'focus'): void;
   }
 
+  interface Exposes {
+    focus: () => void;
+  }
+
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
@@ -35,22 +47,31 @@
 
   const modelValue = defineModel<string>();
 
+  const inputRef = ref();
+
   watch(modelValue, () => {
     columnContext?.validate('change');
-    console.log('change');
   });
 
-  const handleBlur = () => {
-    columnContext?.blur();
-    columnContext?.validate('blur');
-    emits('blur');
-    console.log('handleBlur');
+  const handleBlur = async () => {
+    const result = await columnContext?.validate('blur');
+    if (result) {
+      columnContext?.blur();
+      emits('blur');
+    }
   };
 
   const handleFocus = () => {
     columnContext?.focus();
     emits('focus');
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
   };
+
+  defineExpose<Exposes>({
+    focus: handleFocus,
+  });
 </script>
 <style lang="less">
   .bk-editable-input {

dbm-ui/frontend/src/components/editable-table/edit/Operate.vue

@@ -0,0 +1,111 @@
+<!--
+ * 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>
+  <div class="action-box">
+    <div
+      v-if="showAdd"
+      class="action-btn"
+      @click="handleAppend">
+      <DbIcon type="plus-fill" />
+    </div>
+    <div
+      v-if="showRemove"
+      class="action-btn"
+      :class="{
+        disabled: removeable,
+      }"
+      @click="handleRemove">
+      <DbIcon type="minus-fill" />
+    </div>
+    <div
+      v-if="showClone"
+      v-bk-tooltips="t('克隆')"
+      class="action-btn"
+      @click="handleClone">
+      <DbIcon type="copy-2" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    showAdd?: boolean;
+    showRemove?: boolean;
+    removeable?: boolean;
+    showClone?: boolean;
+  }
+
+  interface Emits {
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'clone'): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showAdd: true,
+    showRemove: true,
+    removeable: true,
+    showClone: false,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const handleAppend = () => {
+    emits('add');
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    emits('clone');
+  };
+</script>
+<style lang="less" scoped>
+  .action-box {
+    display: flex;
+    height: 42px;
+    padding: 0 16px;
+    align-items: center;
+    background-color: #fff;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 12px;
+      }
+    }
+  }
+</style>

dbm-ui/frontend/src/components/editable-table/types.ts

@@ -7,5 +7,5 @@ export interface IRule {
   pattern?: RegExp;
   validator?: (value: any) => Promise<boolean | string> | boolean | string;
   message: (() => string) | string;
-  trigger: 'change' | 'blur';
+  trigger: string;
 }

dbm-ui/frontend/src/components/render-table/columns/input/index.vue

@@ -329,11 +329,11 @@
         border: 1px solid transparent;
         border-radius: 0;
 
-        &:hover {
-          cursor: pointer;
-          background-color: #fafbfd;
-          border: 1px solid #a3c5fd;
-        }
+        // &:hover {
+        //   cursor: pointer;
+        //   background-color: #fafbfd;
+        //   border: 1px solid #a3c5fd;
+        // }
 
         &:focus {
           border-color: #3a84ff;

dbm-ui/frontend/src/hooks/index.ts

@@ -15,6 +15,7 @@ export * from './useApplyBase';
 export * from './useBeforeClose';
 export * from './useCopy';
 export * from './useCopyFromSelection';
+export * from './useCreateTicket3';
 export * from './useDebouncedRef';
 export * from './useDebouncedRef';
 export * from './useDefaultPagination';

dbm-ui/frontend/src/hooks/useCreateTicket3/common/index.ts

@@ -0,0 +1,9 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreate<T> {
+  bk_biz_id: number;
+  details: T;
+  ignore_duplication: boolean;
+  remark: string;
+  ticket_type: TicketTypes;
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/index.ts

@@ -0,0 +1,43 @@
+import { createTicket } from '@services/source/ticket';
+
+import type * as Mongodb from './mongodb';
+import type * as Mysql from './mysql';
+import type * as Redis from './redis';
+import type * as Sqlserver from './sqlserver';
+import type * as Tendbcluster from './tendbcluster';
+
+interface TicketCreateDetails
+  extends Mysql.TicketCreateDetails,
+    Tendbcluster.TicketCreateDetails,
+    Redis.TicketCreateDetails,
+    Sqlserver.TicketCreateDetails,
+    Mongodb.TicketCreateDetails {}
+
+export function useCreateTicket(ticketType: keyof TicketCreateDetails) {
+  const loading = ref(false);
+  const router = useRouter();
+
+  const run = async (details: TicketCreateDetails[typeof ticketType]) => {
+    loading.value = true;
+    const { id } = await createTicket({
+      ticket_type: ticketType,
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      details,
+    });
+    loading.value = false;
+    router.push({
+      name: ticketType,
+      params: {
+        page: 'success',
+      },
+      query: {
+        ticketId: id,
+      },
+    });
+  };
+
+  return {
+    run,
+    loading,
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/mongodb/MONGODB_TEMPORARY_DESTROY.ts

@@ -0,0 +1,15 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreateDetails {
+  [TicketTypes.MYSQL_ADD_SLAVE]: {
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/mongodb/index.ts

@@ -0,0 +1 @@
+export * from './MONGODB_TEMPORARY_DESTROY';

dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts

@@ -0,0 +1,16 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreateDetails {
+  [TicketTypes.MYSQL_ADD_SLAVE]: {
+    backup_source: 'local' | 'remote';
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/index.ts

@@ -0,0 +1 @@
+export * from './MYSQL_ADD_SLAVE';

dbm-ui/frontend/src/hooks/useCreateTicket3/redis/REDIS_CLUSTER_APPLY.ts

@@ -0,0 +1,15 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreateDetails {
+  [TicketTypes.REDIS_CLUSTER_APPLY]: {
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/redis/index.ts

@@ -0,0 +1 @@
+export * from './REDIS_CLUSTER_APPLY';

dbm-ui/frontend/src/hooks/useCreateTicket3/sqlserver/SQLSERVER_SINGLE_APPLY.ts

@@ -0,0 +1,15 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreateDetails {
+  [TicketTypes.SQLSERVER_SINGLE_APPLY]: {
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/sqlserver/index.ts

@@ -0,0 +1 @@
+export * from './SQLSERVER_SINGLE_APPLY';

dbm-ui/frontend/src/hooks/useCreateTicket3/tendbcluster/TENDBCLUSTER_CHECKSUM.ts

@@ -0,0 +1,15 @@
+import type { TicketTypes } from '@common/const';
+
+export interface TicketCreateDetails {
+  [TicketTypes.TENDBCLUSTER_CHECKSUM]: {
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  };
+}

dbm-ui/frontend/src/hooks/useCreateTicket3/tendbcluster/index.ts

@@ -0,0 +1 @@
+export * from './TENDBCLUSTER_CHECKSUM';