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

dbm-ui/frontend/src/components/cluster-selector/Index.vue

@@ -128,25 +128,15 @@
   setup
   lang="tsx"
   generic="
-    T extends
-      | RedisModel
-      | TendbhaModel
-      | TendbclusterModel
-      | TendbsingleModel
-      | MongodbModel
-      | SqlServerHaModel
-      | SqlServerSingleModel
+    T extends {
+      id: number;
+      master_domain: string;
+      isOffline: boolean;
+    }
   ">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import MongodbModel from '@services/model/mongodb/mongodb';
-  import TendbhaModel from '@services/model/mysql/tendbha';
-  import TendbsingleModel from '@services/model/mysql/tendbsingle';
-  import RedisModel from '@services/model/redis/redis';
-  import SqlServerHaModel from '@services/model/sqlserver/sqlserver-ha';
-  import SqlServerSingleModel from '@services/model/sqlserver/sqlserver-single';
-  import TendbclusterModel from '@services/model/tendbcluster/tendbcluster';
   import { getMongoList } from '@services/source/mongodb';
   import { getRedisList } from '@services/source/redis';
   import { getHaClusterList } from '@services/source/sqlserveHaCluster';

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,7 @@
 
   .bk-editable-table-field-cell {
     position: relative;
-    display: flex;
     height: 100%;
-    min-height: 40px;
-    align-items: center;
   }
 
   .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>();
@@ -215,7 +216,7 @@
         return result;
       }, []);
 
-      return Promise.all(columnList.map((column) => column.validate())).then(
+      return Promise.all(columnList.map((column) => column?.validate())).then(
         () => true,
         () => false,
       );

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,29 @@
 
   const modelValue = defineModel<string>();
 
+  const inputRef = ref();
+
   watch(modelValue, () => {
     columnContext?.validate('change');
-    console.log('change');
   });
 
-  const handleBlur = () => {
-    columnContext?.blur();
+  const handleBlur = async () => {
     columnContext?.validate('blur');
+    columnContext?.blur();
     emits('blur');
-    console.log('handleBlur');
   };
 
   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/resource-host-owner/Index.vue

@@ -28,8 +28,8 @@
 
   const { t } = useI18n();
 
-  const isForBiz = computed(() => props.data.for_biz.bk_biz_id);
-  const isForDb = computed(() => props.data.resource_type && props.data.resource_type !== 'PUBLIC');
+  const isForBiz = computed(() => props.data?.for_biz.bk_biz_id);
+  const isForDb = computed(() => props.data?.resource_type && props.data.resource_type !== 'PUBLIC');
 </script>
 <style lang="less">
   .resource-host-owner {

dbm-ui/frontend/src/components/resource-host-selector/Index.vue

@@ -51,14 +51,14 @@
               <HostAgentStatus :data="data.agent_status" />
             </template>
           </BkTableColumn>
-          <BkTableColumn
+          <!-- <BkTableColumn
             field="bk_cpu"
             :label="t('资源归属')"
             :min-width="300">
             <template #default="{ data }">
               <ResourceHostOwner :data="data" />
             </template>
-          </BkTableColumn>
+          </BkTableColumn> -->
           <BkTableColumn
             field="rack_id"
             :label="t('机架')"
@@ -157,8 +157,8 @@
 
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
-  import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
 
+  // import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
   import PanelTab from './components/PanelTab.vue';
   import useSearchSelectData from './hooks/use-search-select-data';
 
@@ -176,7 +176,7 @@
     (e: 'change', value: IValue[]): void;
   }
 
-  interface IValue {
+  export interface IValue {
     bk_biz_id: number;
     bk_cloud_id: number;
     bk_host_id: number;
@@ -251,6 +251,8 @@
       bk_host_id: item.bk_host_id,
       ip: item.ip,
     }));
+    console.log(modelValue.value, 'modelValue.value');
+
     emits('change', modelValue.value);
   };
 

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 './useCreateTicket';
 export * from './useDebouncedRef';
 export * from './useDebouncedRef';
 export * from './useDefaultPagination';

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

@@ -0,0 +1,34 @@
+import { createTicket } from '@services/source/ticket';
+
+import type { TicketTypes } from '@common/const';
+
+export function useCreateTicket<T>(ticketType: TicketTypes) {
+  const loading = ref(false);
+  const router = useRouter();
+
+  const run = async (details: T, remark = '') => {
+    loading.value = true;
+    const { id } = await createTicket<T>({
+      ticket_type: ticketType,
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      details,
+      remark,
+      ignore_duplication: true,
+    });
+    loading.value = false;
+    router.push({
+      name: ticketType,
+      params: {
+        page: 'success',
+      },
+      query: {
+        ticketId: id,
+      },
+    });
+  };
+
+  return {
+    run,
+    loading,
+  };
+}