perf(frontend): mongodb工具箱重构_库表备份 #8498

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue

@@ -0,0 +1,150 @@
+<template>
+  <EditableTableColumn
+    ref="editableTableColumn"
+    :field="field"
+    :label="label"
+    :loading="isLoading"
+    :min-width="200"
+    :required="required"
+    :rules="rules">
+    <template
+      v-if="batchEdit"
+      #headAppend>
+      <BatchEditColumn
+        v-model="isShowBatchEdit"
+        :title="label"
+        type="taginput"
+        @change="handleBatchEditChange">
+        <BkButton
+          v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
+          text
+          theme="primary"
+          @click="handleBatchEditShow">
+          <DbIcon type="bulk-edit" />
+        </BkButton>
+      </BatchEditColumn>
+    </template>
+    <div
+      ref="root"
+      class="edit-table-name-content"
+      @click="handleShowTips">
+      <EditTagInput
+        v-model="modelValue"
+        allow-auto-match
+        allow-create
+        clearable
+        :disabled="disabled"
+        has-delete-icon
+        :max-data="single ? 1 : -1"
+        :placeholder="placeholder" />
+      <div style="display: none">
+        <div
+          ref="pop"
+          style="font-size: 12px; line-height: 24px; color: #63656e">
+          <slot name="tip" />
+        </div>
+      </div>
+    </div>
+  </EditableTableColumn>
+</template>
+
+<script setup lang="ts">
+  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
+  import { type VNode } from 'vue';
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column as EditableTableColumn, TagInput as EditTagInput } from '@components/editable-table/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+
+  interface Props {
+    label: string;
+    field: string;
+    placeholder: string;
+    rules: NonNullable<ComponentProps<typeof EditableTableColumn>['rules']>;
+    required?: boolean;
+    disabled?: boolean;
+    single?: boolean;
+    isLoading?: boolean;
+    batchEdit?: boolean;
+  }
+
+  interface Emits {
+    (e: 'batch-edit', value: string[]): void;
+  }
+
+  interface Slots {
+    tip: VNode;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    required: true,
+    disabled: false,
+    single: false,
+    isLoading: false,
+    batchEdit: true,
+  });
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<string[]>({
+    required: true,
+  });
+
+  const slots = defineSlots<Slots>();
+
+  const { t } = useI18n();
+
+  let tippyIns: Instance | undefined;
+
+  const isShowBatchEdit = ref(false);
+  const rootRef = useTemplateRef('root');
+  const popRef = useTemplateRef('pop');
+
+  const handleBatchEditShow = () => {
+    isShowBatchEdit.value = true;
+  };
+
+  const handleBatchEditChange = (value: string | string[]) => {
+    emits('batch-edit', value as string[]);
+  };
+
+  const handleShowTips = () => {
+    tippyIns?.show();
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      if (slots.tip && rootRef.value !== null) {
+        tippyIns = tippy(rootRef.value as SingleTarget, {
+          content: popRef.value,
+          placement: 'top',
+          appendTo: () => document.body,
+          theme: 'light',
+          maxWidth: 'none',
+          trigger: 'manual',
+          interactive: true,
+          arrow: true,
+          offset: [0, 18],
+          zIndex: 9998,
+          hideOnClick: true,
+        });
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (slots.tip && tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+      tippyIns = undefined;
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .edit-table-name-content {
+    width: 100%;
+  }
+</style>

dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/Index.vue

@@ -1,9 +1,49 @@
+<!--
+ * 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></div>
+  <Component :is="com" />
 </template>
-<script setup lang="ts"></script>
-<style lang="less">
-  .root {
-    display: block;
-  }
-</style>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import Page1 from './pages/page1/Index.vue';
+  import Page2 from './pages/page2/Index.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Page1,
+    success: Page2,
+  };
+
+  const page = ref('');
+
+  const com = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Page1;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>