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

TencentBlueKing · Jan 3, 2025 · a407d26 · a407d26
1 parent be47e70
commit a407d26
Show file tree

Hide file tree

Showing 123 changed files with 13,914 additions and 220 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/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>();

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/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');

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/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');

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue b/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');

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue b/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">

diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/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) {

diff --git a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue b/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>

diff --git a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue b/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,

diff --git a/dbm-ui/frontend/src/demo/Index.vue b/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',

diff --git a/dbm-ui/frontend/src/hooks/index.ts b/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';

diff --git a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
@@ -2,18 +2,41 @@ import InfoBox from 'bkui-vue/lib/info-box';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { createTicket } from '@services/source/ticket';
+import { createTicketNew } from '@services/source/ticket';
 
-import { messageError, messageSuccess } from '@utils';
+import type { TicketTypes } from '@common/const';
 
-export const useCreateTicket = (params: Record<string, any>) => {
-  const { t, locale } = useI18n();
+import { messageError } from '@utils';
+
+export function useCreateTicket<T>(ticketType: TicketTypes, options?: { onSuccess?: (ticketId: number) => void }) {
+  const loading = ref(false);
   const router = useRouter();
+  const { t, locale } = useI18n();
 
-  createTicket(params)
-    .then(() => messageSuccess(t('单据创建成功')))
-    .catch((e) => {
-      const { code, data } = e;
+  const run = async (formData: { details: T; remark: string; ignore_duplication?: boolean }) => {
+    const params = {
+      ticket_type: ticketType,
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      ...formData,
+    };
+    try {
+      loading.value = true;
+      const { id: ticketId } = await createTicketNew<T>(params);
+      if (options?.onSuccess) {
+        options.onSuccess(ticketId);
+      } else {
+        router.push({
+          name: ticketType,
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId,
+          },
+        });
+      }
+    } catch (e: any) {
+      const { code, data, message } = e;
       const duplicateCode = 8704005;
       if (code === duplicateCode) {
         const id = data.duplicate_ticket_id;
@@ -59,7 +82,7 @@ export const useCreateTicket = (params: Record<string, any>) => {
           cancelText: t('取消提单'),
           onConfirm: async () => {
             try {
-              await createTicket({
+              await run({
                 ...params,
                 ignore_duplication: true,
               });
@@ -68,8 +91,16 @@ export const useCreateTicket = (params: Record<string, any>) => {
             }
           },
         });
+      } else {
+        messageError(message);
       }
+    } finally {
+      loading.value = false;
+    }
+  };
 
-      messageError(e.message);
-    });
-};
+  return {
+    run,
+    loading,
+  };
+}