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

# Reviewed, transaction id: 28340

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
@@ -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/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

@@ -40,5 +40,4 @@ export * from './useTicketCloneInfo';
 export * from './useTicketCount';
 export * from './useTicketMessage';
 export * from './useTimeZoneFormat';
-export * from './useToolboxRoute';
 export * from './useUrlSearach';

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

@@ -0,0 +1,106 @@
+import InfoBox from 'bkui-vue/lib/info-box';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { createTicketNew } from '@services/source/ticket';
+
+import type { TicketTypes } from '@common/const';
+
+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();
+
+  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;
+
+        InfoBox({
+          title: t('是否继续提交单据'),
+          content: () => {
+            const route = router.resolve({
+              name: 'bizTicketManage',
+              params: {
+                ticketId: id,
+              },
+            });
+
+            if (locale.value === 'en') {
+              return (
+                <span>
+                  You have already submitted a
+                  <a
+                    href={route.href}
+                    target='_blank'>
+                    {' '}
+                    ticket[{id}]{' '}
+                  </a>
+                  with the same target cluster, continue?
+                </span>
+              );
+            }
+
+            return (
+              <span>
+                你已提交过包含相同目标集群的
+                <a
+                  href={route.href}
+                  target='_blank'>
+                  单据[{id}]
+                </a>
+                ，是否继续？
+              </span>
+            );
+          },
+          confirmText: t('继续提单'),
+          cancelText: t('取消提单'),
+          onConfirm: async () => {
+            try {
+              await run({
+                ...params,
+                ignore_duplication: true,
+              });
+            } catch (e: any) {
+              messageError(e?.message);
+            }
+          },
+        });
+      } else {
+        messageError(message);
+      }
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    run,
+    loading,
+  };
+}

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

@@ -3948,5 +3948,6 @@
   "目标集群xx重复": "目标集群 {0} 重复",
   "目标Master主机": "目标 Master 主机",
   "请输入集群域名_多个集群用分隔符输入": "请输入集群域名，多个集群用分隔符输入",
+  "单据创建成功": "单据创建成功",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/source/ticket.tsx

@@ -57,13 +57,20 @@ export function getTickets(params: {
 /**
  * 创建单据
  */
-export function createTicket<T>(formData: {
+export function createTicketNew<T>(params: {
   bk_biz_id: number;
   details: T;
-  ignore_duplication: boolean;
+  ignore_duplication?: boolean;
   remark: string;
   ticket_type: TicketTypes;
 }) {
+  return http.post<{ id: number }>(`${path}/`, params, { catchError: true });
+}
+
+/**
+ * 创建单据、过后摒弃
+ */
+export function createTicket(formData: Record<string, any>) {
   return http
     .post<{ id: number }>(`${path}/`, formData, { catchError: true })
     .then((res) => res)

dbm-ui/frontend/src/hooks/useToolboxRoute.ts → dbm-ui/frontend/src/utils/createToolboxRoute.ts

@@ -1,6 +1,6 @@
 import { DBTypes, type TicketTypes } from '@common/const';
 
-export function useToolboxRoute(dbType: DBTypes) {
+export function createToolboxRoute(dbType: DBTypes) {
   const dbToolbox = dbType === DBTypes.TENDBCLUSTER ? 'tendb-cluster' : dbType;
 
   const createRouteItem = (ticketType: TicketTypes, navName: string) => ({

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

@@ -18,6 +18,7 @@ export * from './checkDbConsole';
 export * from './classes';
 export * from './compareVersions';
 export * from './convertStorageUnits';
+export * from './createToolboxRoute';
 export * from './deepMerge';
 export * from './dom';
 export * from './downloadFile';

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/host-column/MultipleHost.vue → dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue

@@ -199,11 +199,13 @@
   };
 
   const handleInputChange = (value: string) => {
-    queryHost({
-      search_content: value,
-      limit: -1,
-      offset: 0,
-    });
+    if (value) {
+      queryHost({
+        search_content: value,
+        limit: -1,
+        offset: 0,
+      });
+    }
   };
 
   const handleSelectorChange = (hostList: IValue[]) => {

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/host-column/SingleHost.vue → dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue

@@ -122,11 +122,13 @@
   };
 
   const handleInputChange = (value: string) => {
-    queryHost({
-      search_content: value,
-      limit: -1,
-      offset: 0,
-    });
+    if (value) {
+      queryHost({
+        search_content: value,
+        limit: -1,
+        offset: 0,
+      });
+    }
   };
 
   const handleSelectorChange = (hostList: IValue[]) => {

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/ignore-biz/Index.vue → dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue

@@ -1,10 +1,12 @@
 <template>
-  <BkCheckbox
-    v-model="modelValue"
-    :false-label="false"
-    true-label>
-    <span class="safe-action-text">{{ t('忽略业务连接') }}</span>
-  </BkCheckbox>
+  <BkFormItem class="ignore-biz">
+    <BkCheckbox
+      v-model="modelValue"
+      :false-label="false"
+      true-label>
+      <span class="safe-action-text">{{ t('忽略业务连接') }}</span>
+    </BkCheckbox>
+  </BkFormItem>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +20,10 @@
 </script>
 
 <style lang="less" scoped>
+  .ignore-biz {
+    width: fit-content;
+  }
+
   .safe-action-text {
     padding-bottom: 2px;
     border-bottom: 1px dashed #979ba5;