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

Author: JustaCattt

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

@@ -67,6 +67,7 @@
   import Input from './edit/Input.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
+  import Text from './edit/Text.vue';
   import Textarea from './edit/Textarea.vue';
   import TimePicker from './edit/TimePicker.vue';
   import useResize from './hooks/use-resize';
@@ -112,7 +113,7 @@
     } & Expose
   > = Symbol.for('bk-editable-table');
 
-  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();

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

@@ -40,7 +40,9 @@
   }
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
+
   const modelValue = defineModel<string>();
 
   const slots = defineSlots<{

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

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { onBeforeUpdate, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { ref, useTemplateRef, type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -57,7 +57,7 @@
 
   const contentRef = useTemplateRef('content');
 
-  const isShowPlacehoder = ref(false);
+  const isShowPlacehoder = ref(true);
 
   watch(modelValue, () => {
     columnContext?.validate();
@@ -71,8 +71,10 @@
     columnContext?.focus();
   };
 
-  onBeforeUpdate(() => {
-    isShowPlacehoder.value = !contentRef.value?.innerText;
+  onUpdated(() => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
   });
 </script>
 <style lang="less">

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

@@ -98,7 +98,7 @@
   import type { InjectionKey, Ref } from 'vue';
 
   import TendbclusterMachineModel from '@services/model/tendbcluster/tendbcluster-machine';
-  import type { ListBase } from '@services/types';
+  import type { HostInfo, ListBase } from '@services/types';
 
   import { t } from '@locales/index';
 
@@ -113,7 +113,7 @@
     create_at: string;
     db_module_id: number;
     db_module_name: string;
-    host_info: any;
+    host_info: HostInfo;
     id: number;
     name: string;
     instance_address: string;
@@ -999,9 +999,6 @@
         isInnerChange = false;
         return;
       }
-      if (props.selected) {
-        Object.assign(lastValues, props.selected);
-      }
       if (
         props.clusterTypes.length > 0 &&
         (!panelTabActive.value || !props.clusterTypes.includes(panelTabActive.value as Props['clusterTypes'][number]))
@@ -1015,6 +1012,15 @@
     },
   );
 
+  watch(
+    () => props.selected,
+    () => {
+      if (props.selected) {
+        Object.assign(lastValues, props.selected);
+      }
+    },
+  );
+
   const handleChangePanel = (obj: PanelListItem) => {
     activePanelObj.value = obj;
     if (props.onlyOneType) {

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

@@ -167,7 +167,7 @@
   interface Props {
     multiple?: boolean;
     params?: {
-      bk_biz_id?: number;
+      for_biz?: number;
       bk_cloud_ids?: string;
       resource_type?: string;
       os_type?: string;
@@ -183,6 +183,7 @@
     bk_cloud_id: number;
     bk_host_id: number;
     ip: string;
+    dedicated_biz?: number;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -255,6 +256,7 @@
       bk_cloud_id: item.bk_cloud_id,
       bk_host_id: item.bk_host_id,
       ip: item.ip,
+      dedicated_biz: item.dedicated_biz,
     }));
 
     modelValue.value = latestValue;

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

@@ -3927,7 +3927,8 @@
   "xx任务提交成功": "{name}任务提交成功",
   "xx执行": "{name}执行",
   "含n个同机关联集群": "含 {n} 个同机关联集群",
-  "新 Slave": "新 Slave",
   "目标集群是集群target的关联集群_请勿重复添加": "目标集群是集群 {target} 的关联集群，请勿重复添加",
+  "目标实例不存在": "目标实例不存在",
+  "新Slave": "新 Slave",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/model/db-resource/DbResource.ts

@@ -32,6 +32,7 @@ export default class DbResource {
   city_id: string;
   consume_time: string;
   create_time: string;
+  dedicated_biz: number;
   device_class: string;
   for_biz: {
     bk_biz_id: number;
@@ -81,6 +82,7 @@ export default class DbResource {
     this.city_id = payload.city_id;
     this.consume_time = payload.consume_time;
     this.create_time = payload.create_time;
+    this.dedicated_biz = payload.dedicated_biz;
     this.device_class = payload.device_class;
     this.for_biz = payload.for_biz;
     this.ip = payload.ip;

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue

@@ -33,10 +33,10 @@
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <HostSingleSelect
+          <SingleHost
             v-model="item.slave"
             field="slave.ip"
-            :label="t('新 Slave')" />
+            :label="t('新Slave')" />
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
@@ -92,9 +92,8 @@
   import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-input-select/WithRelatedClusters.vue';
-
-  import HostSingleSelect from '@/views/db-manage/mysql/common/edit-table-column/host-block-select/HostSingleSelect.vue';
+  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-filter/WithRelatedClusters.vue';
+  import SingleHost from '@views/db-manage/mysql/common/edit-table-column/host-filter/SingleHost.vue';
 
   interface RowData {
     cluster: {

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue

@@ -35,14 +35,14 @@
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <HostSingleSelect
+          <SingleHost
             v-model="item.master"
             field="master.ip"
-            :label="t('新 Master')" />
-          <HostSingleSelect
+            :label="t('新Master')" />
+          <SingleHost
             v-model="item.slave"
             field="slave.ip"
-            :label="t('新 Slave')" />
+            :label="t('新Slave')" />
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
@@ -98,9 +98,8 @@
   import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-input-select/WithRelatedClusters.vue';
-
-  import HostSingleSelect from '@/views/db-manage/mysql/common/edit-table-column/host-block-select/HostSingleSelect.vue';
+  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-filter/WithRelatedClusters.vue';
+  import SingleHost from '@views/db-manage/mysql/common/edit-table-column/host-filter/SingleHost.vue';
 
   interface RowData {
     cluster: {

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue

@@ -33,10 +33,10 @@
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <HostSingleSelect
+          <SingleHost
             v-model="item.proxy"
             field="proxy.ip"
-            :label="t('新 Proxy')" />
+            :label="t('新Proxy主机')" />
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
@@ -79,9 +79,8 @@
   import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-input-select/WithRelatedClusters.vue';
-
-  import HostSingleSelect from '@/views/db-manage/mysql/common/edit-table-column/host-block-select/HostSingleSelect.vue';
+  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/cluster-filter/WithRelatedClusters.vue';
+  import SingleHost from '@views/db-manage/mysql/common/edit-table-column/host-filter/SingleHost.vue';
 
   interface RowData {
     cluster: {