feat(frontend): 工具箱支持资源池协议变更 #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/Block.vue

@@ -57,7 +57,7 @@
 
   const contentRef = useTemplateRef('content');
 
-  const isShowPlacehoder = ref(false);
+  const isShowPlacehoder = ref(true);
 
   watch(modelValue, () => {
     columnContext?.validate('change');

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

@@ -40,27 +40,28 @@
   }
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
+  const modelValue = defineModel<string>();
+
   const slots = defineSlots<{
     prepend?: () => VNode;
     default?: () => VNode;
     append?: () => VNode;
   }>();
 
   const attrs = useAttrs();
-
   const columnContext = useColumn();
 
-  const modelValue = defineModel<string>();
-
   watch(modelValue, () => {
     columnContext?.validate('change');
   });
 
   const handleChange = (value: string) => {
     emits('change', value);
   };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');

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

@@ -4,8 +4,23 @@
     class="bk-editable-select"
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus">
-    <slot />
+    <template
+      v-if="slots.option"
+      #optionRender="{ item, index }">
+      <slot
+        :index="index"
+        :item="item"
+        name="option" />
+    </template>
+    <template
+      v-if="slots.trigger"
+      #trigger="{ selected }">
+      <slot
+        name="trigger"
+        :selected="selected" />
+    </template>
   </BkSelect>
 </template>
 <script lang="ts">
@@ -25,12 +40,18 @@
   import useColumn from '../useColumn';
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<{
     (e: 'blur'): void;
     (e: 'focus'): void;
     (e: 'change', value: T): void;
   }>();
 
+  const slots = defineSlots<{
+    trigger?: (value: { selected: any[] }) => VNode;
+    option?: (value: { item: Record<string, any>; index: number }) => VNode;
+  }>();
+
   const attrs = useAttrs();
 
   const columnContext = useColumn();
@@ -41,6 +62,10 @@
     columnContext?.validate('change');
   });
 
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');

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;
@@ -1000,9 +1000,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]))
@@ -1016,6 +1013,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/render-table/columns/spec-display/Panel.vue

@@ -27,16 +27,16 @@
             <div class="item-title">CPU：</div>
             <div class="item-content">
               {{
-                data.cpu.min === data.cpu.max
-                  ? t('n核', { n: data.cpu.min })
-                  : t('((n-m))核', { n: data.cpu.min, m: data.cpu.max })
+                data.cpu?.min === data.cpu?.max
+                  ? t('n核', { n: data.cpu?.min })
+                  : t('((n-m))核', { n: data.cpu?.min, m: data.cpu?.max })
               }}
             </div>
           </div>
           <div class="item">
             <div class="item-title">{{ $t('内存') }}：</div>
             <div class="item-content">
-              {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
+              {{ data.mem?.min === data.mem?.max ? data.mem?.min : `(${data.mem?.min}~${data.mem?.max})` }} G
             </div>
           </div>
           <div
@@ -58,13 +58,13 @@
                 </div>
                 <div class="table-row">
                   <div class="row-one">
-                    {{ data.storage_spec[0].mount_point }}
+                    {{ data.storage_spec[0]?.mount_point || '--' }}
                   </div>
                   <div class="row-two">
-                    {{ data.storage_spec[0].size }}
+                    {{ data.storage_spec[0]?.size || '--' }}
                   </div>
                   <div class="row-three">
-                    {{ data.storage_spec[0].type }}
+                    {{ data.storage_spec[0]?.type || '--' }}
                   </div>
                 </div>
               </div>
@@ -77,7 +77,7 @@
               {{ $t('单机 QPS') }}
             </div>
             <div class="item-content">
-              {{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
+              {{ data.qps?.min === data.qps?.max ? `${data.qps?.min}/s` : `${data.qps?.min}/s~${data.qps?.max}/s` }}
             </div>
           </div>
         </div>

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

@@ -51,7 +51,7 @@
               <HostAgentStatus :data="data.agent_status" />
             </template>
           </BkTableColumn>
-          <BkTableColumn
+          <!-- <BkTableColumn
             field="bk_cpu"
             :label="t('资源归属')"
             :min-width="300">
@@ -60,7 +60,7 @@
                 v-if="false"
                 :data="data" />
             </template>
-          </BkTableColumn>
+          </BkTableColumn> -->
           <BkTableColumn
             field="rack_id"
             :label="t('机架')"
@@ -159,15 +159,22 @@
 
   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';
 
+  export interface IValue {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+  }
+
   interface Props {
     multiple?: boolean;
     params?: {
-      bk_biz_id?: number;
+      for_biz?: number;
       bk_cloud_ids?: string;
       resource_type?: string;
       os_type?: string;
@@ -178,13 +185,6 @@
     (e: 'change', value: IValue[]): void;
   }
 
-  interface IValue {
-    bk_biz_id: number;
-    bk_cloud_id: number;
-    bk_host_id: number;
-    ip: string;
-  }
-
   const props = withDefaults(defineProps<Props>(), {
     multiple: true,
     params: () => ({}),
@@ -251,7 +251,7 @@
   const handleSubmit = () => {
     isShow.value = false;
     const latestValue = Object.values(rowSelectMemo.value).map((item) => ({
-      bk_biz_id: item.bk_biz_id,
+      bk_biz_id: item.dedicated_biz,
       bk_cloud_id: item.bk_cloud_id,
       bk_host_id: item.bk_host_id,
       ip: item.ip,

dbm-ui/frontend/src/demo/Index.vue

@@ -99,7 +99,7 @@
     TimePicker as EditTimePicker,
   } from '@components/editable-table/Index.vue';
 
-  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
 
   const createData = () => ({
     name: 'name',

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';