From 4b3013217cbad53dcd7b9949142f37c267658b4f Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Wed, 18 Dec 2024 18:40:51 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20mongodb=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E9=87=8D=E6=9E=84=5F=E6=B8=85=E6=A1=A3=20#8498?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../toolbox-field/operation-column/Index.vue  |   2 +-
 .../mongodb/MONGODB_REMOVE_NS/Index.vue       |  49 +++
 .../MONGODB_REMOVE_NS/pages/page1/Index.vue   | 375 ++++++++++++++++++
 .../pages/page1/components/DropTypeColumn.vue |  50 +++
 .../pages/page1/components/DropTypeIndex.vue  |  50 +++
 .../MONGODB_REMOVE_NS/pages/page2/Index.vue   |  89 +++++
 .../src/views/db-manage/mongodb/routes.ts     |  19 +-
 .../views/db-manage/mongodb/toolbox-menu.ts   |   2 +-
 .../ticket-center/common/TicketClone.vue      |   1 +
 9 files changed, 627 insertions(+), 10 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeIndex.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page2/Index.vue

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
index 85fc745c2c..4f1bd79f3d 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
@@ -89,7 +89,7 @@
 
     const newRowIndex = rowIndex + 1;
 
-    if (rowIndex > 0) {
+    if (newRowIndex > 0) {
       tableData.value.splice(newRowIndex, 0, _.cloneDeep(tableData.value[rowIndex]));
       editTableContext!.validateByRowIndex(newRowIndex);
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/Index.vue
new file mode 100644
index 0000000000..a699b45363
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/Index.vue
@@ -0,0 +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>
+  <Component :is="com" />
+</template>
+<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>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
new file mode 100644
index 0000000000..071ed4797b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
@@ -0,0 +1,375 @@
+<!--
+ * 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>
+  <SmartAction>
+    <div class="mongo-db-clear-page">
+      <BkAlert
+        closable
+        theme="info"
+        :title="
+          t('清档：删除目标数据库数据, 数据会暂存在不可见的备份库中，只有在执行删除备份库后, 才会真正的删除数据。')
+        " />
+      <DbForm
+        ref="form"
+        class="toolbox-form"
+        form-type="vertical"
+        :model="formData"
+        style="margin-top: 16px">
+        <BkFormItem
+          :label="t('集群类型')"
+          property="cluster_type"
+          required>
+          <BkRadioGroup
+            v-model="formData.cluster_type"
+            style="width: 400px"
+            type="card">
+            <BkRadioButton :label="ClusterTypes.MONGO_REPLICA_SET">
+              {{ t('副本集集群') }}
+            </BkRadioButton>
+            <BkRadioButton :label="ClusterTypes.MONGO_SHARED_CLUSTER">
+              {{ t('分片集群') }}
+            </BkRadioButton>
+          </BkRadioGroup>
+        </BkFormItem>
+        <EditableTable
+          :key="formData.cluster_type"
+          ref="editableTable"
+          class="mt16 mb16"
+          :model="tableData"
+          :rules="rules">
+          <EditableTableRow
+            v-for="(item, index) in tableData"
+            :key="index">
+            <EditClusterColumn
+              ref="editClusterColumn"
+              v-model="item.cluster"
+              :cluster-types="[formData.cluster_type]"
+              :label="isShardCluster ? '目标分片集群' : '副本集'"
+              :selected="selected"
+              @batch-edit="handleClusterBatchEdit" />
+            <DropTypeColumn v-model="item.drop_type" />
+            <DropIndexColumn v-model="item.drop_index" />
+            <EditDbNameColumn
+              v-model="item.db_patterns"
+              field="db_patterns"
+              :label="t('备份DB名')"
+              @batch-edit="(value: string[]) => handleDbTableBatchEdit(value, 'db_patterns')" />
+            <EditDbNameColumn
+              v-model="item.ignore_dbs"
+              :compare-data="item.ignore_tables"
+              field="ignore_dbs"
+              :label="t('忽略 DB 名')"
+              :required="false"
+              @batch-edit="(value: string[]) => handleDbTableBatchEdit(value, 'ignore_dbs')" />
+            <EditTableNameColumn
+              v-model="item.table_patterns"
+              field="table_patterns"
+              :label="t('备份表名')"
+              @batch-edit="(value: string[]) => handleDbTableBatchEdit(value, 'table_patterns')" />
+            <EditTableNameColumn
+              v-model="item.ignore_tables"
+              :compare-data="item.ignore_dbs"
+              field="ignore_tables"
+              :label="t('忽略表名')"
+              :required="false"
+              @batch-edit="(value: string[]) => handleDbTableBatchEdit(value, 'ignore_tables')" />
+            <OperationColumn
+              :create-row-method="createRowData"
+              :table-data="tableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <div class="bottom-opeartion">
+          <BkCheckbox
+            v-model="formData.ignore_business_access"
+            style="padding-top: 6px" />
+          <span
+            v-bk-tooltips="{
+              content: t('如忽略_有连接的情况下也会执行'),
+              theme: 'dark',
+            }"
+            class="ml-6 force-switch">
+            {{ t('忽略业务连接') }}
+          </span>
+        </div>
+        <TicketRemark v-model="formData.remark" />
+      </DbForm>
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script setup lang="tsx">
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+
+  import MongodbModel from '@services/model/mongodb/mongodb';
+  import type { Mongodb } from '@services/model/ticket/ticket';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketDetail } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+  import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue';
+  import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue';
+
+  import DropTypeColumn from './components/DropTypeColumn.vue';
+  import DropIndexColumn from './components/DropTypeIndex.vue';
+
+  export interface IDataRow {
+    cluster: {
+      id?: number;
+      master_domain?: string;
+      cluster_type?: string;
+      cluster_type_name?: string;
+    };
+    drop_type: string;
+    drop_index: string;
+    db_patterns: string[];
+    ignore_dbs: string[];
+    table_patterns: string[];
+    ignore_tables: string[];
+  }
+
+  const createRowData = (values?: Partial<IDataRow>) => ({
+    cluster: values?.cluster ? values.cluster : {},
+    drop_type: values?.drop_type || '',
+    drop_index: values?.drop_index || '',
+    db_patterns: values?.db_patterns || [],
+    ignore_dbs: values?.ignore_dbs || [],
+    table_patterns: values?.table_patterns || [],
+    ignore_tables: values?.ignore_tables || [],
+  });
+
+  const createDefaultFormData = () => ({
+    cluster_type: ClusterTypes.MONGO_REPLICA_SET,
+    ignore_business_access: false,
+    remark: '',
+  });
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const { currentBizId } = useGlobalBizs();
+
+  useTicketDetail<Mongodb.RemoveNs>(TicketTypes.MONGODB_REMOVE_NS, {
+    onSuccess(ticketDetail) {
+      const { details, remark } = ticketDetail;
+      const { infos, clusters, is_safe: isSafe } = details;
+      Object.assign(formData, {
+        cluster_type: clusters[infos[0].cluster_ids[0]].cluster_type,
+        ignore_business_access: !isSafe,
+        remark,
+      });
+
+      nextTick(() => {
+        tableData.value = infos.map((item) =>
+          createRowData({
+            cluster: {
+              master_domain: clusters[item.cluster_ids[0]].immute_domain,
+            },
+            drop_type: item.drop_type,
+            drop_index: item.drop_index ? 'delete' : 'keep',
+            db_patterns: item.ns_filter.db_patterns,
+            ignore_dbs: item.ns_filter.ignore_dbs,
+            table_patterns: item.ns_filter.table_patterns,
+            ignore_tables: item.ns_filter.ignore_tables,
+          }),
+        );
+      });
+    },
+  });
+
+  const formRef = useTemplateRef('form');
+  const editableTableRef = useTemplateRef('editableTable');
+
+  const rules = {
+    'cluster.master_domain': [
+      {
+        validator: (value: string) => {
+          if (value) {
+            const nonEmptyIdList = tableData.value.filter((row) => row.cluster.master_domain === value);
+            return nonEmptyIdList.length === 1;
+          }
+          return true;
+        },
+        trigger: 'change',
+        message: t('目标集群重复'),
+      },
+    ],
+  };
+
+  const isSubmitting = ref(false);
+  const clusterType = ref(ClusterTypes.MONGO_REPLICA_SET);
+  const tableData = ref<Array<IDataRow>>([createRowData()]);
+
+  const selectedClusters = shallowRef<{ [key: string]: Array<MongodbModel> }>({
+    [ClusterTypes.MONGO_SHARED_CLUSTER]: [],
+  });
+
+  const formData = reactive(createDefaultFormData());
+
+  const isShardCluster = computed(() => formData.cluster_type === ClusterTypes.MONGO_SHARED_CLUSTER);
+
+  const selected = computed(() => {
+    const selectedClusters: ComponentProps<typeof EditClusterColumn>['selected'] = {
+      [formData.cluster_type]: [],
+    };
+    tableData.value.forEach((tableRow) => {
+      const { id, cluster_type: clusterType, master_domain: masterDomain } = tableRow.cluster;
+      if (id && clusterType && masterDomain) {
+        selectedClusters[clusterType as keyof typeof selectedClusters].push({
+          id,
+          master_domain: masterDomain,
+        });
+      }
+    });
+    return selectedClusters;
+  });
+
+  watch(
+    () => formData.cluster_type,
+    () => {
+      tableData.value = [createRowData()];
+    },
+  );
+
+  const handleClusterBatchEdit = (clusterList: MongodbModel[]) => {
+    const newList = clusterList.map((item) =>
+      createRowData({
+        cluster: {
+          id: item.id,
+          master_domain: item.master_domain,
+          cluster_type: item.cluster_type,
+          cluster_type_name: item.cluster_type_name,
+        },
+      }),
+    );
+
+    tableData.value = [...(tableData.value[0].cluster.master_domain ? tableData.value : []), ...newList];
+    window.changeConfirm = true;
+  };
+
+  const handleDbTableBatchEdit = (value: string[], field: keyof Omit<IDataRow, 'cluster' | 'target_host'>) => {
+    tableData.value.forEach((item) => {
+      Object.assign(item, { [field]: value });
+    });
+    window.changeConfirm = true;
+  };
+
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      await formRef.value!.validate();
+      const validateResult = await editableTableRef.value!.validate();
+      if (validateResult) {
+        const params = {
+          bk_biz_id: currentBizId,
+          ticket_type: TicketTypes.MONGODB_REMOVE_NS,
+          remark: formData.remark,
+          details: {
+            is_safe: !formData.ignore_business_access,
+            infos: tableData.value.map((row) => ({
+              // cluster_ids: props.isShardCluster ? [clusterId] : clusterIds, // TODO
+              cluster_ids: isShardCluster.value ? [row.cluster.id] : [row.cluster.id],
+              cluster_type: formData.cluster_type,
+              drop_type: row.drop_type,
+              drop_index: row.drop_index !== 'keep',
+              ns_filter: {
+                db_patterns: row.db_patterns,
+                ignore_dbs: row.ignore_dbs,
+                table_patterns: row.table_patterns,
+                ignore_tables: row.ignore_tables,
+              },
+            })),
+          },
+        };
+        await createTicket(params).then((data) => {
+          window.changeConfirm = false;
+          router.push({
+            name: TicketTypes.MONGODB_REMOVE_NS,
+            params: {
+              page: 'success',
+            },
+            query: {
+              ticketId: data.id,
+            },
+          });
+        });
+      }
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    selectedClusters.value[clusterType.value] = [];
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less">
+  .mongo-db-clear-page {
+    padding-bottom: 20px;
+
+    .page-action-box {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+
+      .safe-action-text {
+        padding-bottom: 2px;
+        border-bottom: 1px dashed #979ba5;
+      }
+    }
+
+    .bottom-opeartion {
+      display: flex;
+      width: 100%;
+      height: 30px;
+      align-items: flex-end;
+      margin-bottom: 24px;
+
+      .force-switch {
+        font-size: 12px;
+        border-bottom: 1px dashed #63656e;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeColumn.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeColumn.vue
new file mode 100644
index 0000000000..ee11d8f42b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeColumn.vue
@@ -0,0 +1,50 @@
+<!--
+ * 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>
+  <EditableTableColumn
+    ref="editableTableColumn"
+    field="drop_type"
+    :label="t('清档类型')"
+    required
+    :width="200">
+    <EditSelect
+      v-model="modelValue"
+      :clearable="false"
+      :list="list" />
+  </EditableTableColumn>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { Column as EditableTableColumn, Select as EditSelect } from '@components/editable-table/Index.vue';
+
+  const modelValue = defineModel<string>({
+    required: true,
+    default: 'drop_collection',
+  });
+
+  const { t } = useI18n();
+
+  const list = [
+    {
+      value: 'drop_collection',
+      label: t('直接删除表'),
+    },
+    {
+      value: 'rename_collection',
+      label: t('将表暂时重命名，用于需要快速恢复的情况'),
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeIndex.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeIndex.vue
new file mode 100644
index 0000000000..4880dc576c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/components/DropTypeIndex.vue
@@ -0,0 +1,50 @@
+<!--
+ * 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>
+  <EditableTableColumn
+    ref="editableTableColumn"
+    field="drop_index"
+    :label="t('索引处理')"
+    required
+    :width="200">
+    <EditSelect
+      v-model="modelValue"
+      :clearable="false"
+      :list="list" />
+  </EditableTableColumn>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { Column as EditableTableColumn, Select as EditSelect } from '@components/editable-table/Index.vue';
+
+  const modelValue = defineModel<string>({
+    required: true,
+    default: 'keep',
+  });
+
+  const { t } = useI18n();
+
+  const list = [
+    {
+      value: 'keep',
+      label: t('保留索引'),
+    },
+    {
+      value: 'delete',
+      label: t('删除索引'),
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page2/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page2/Index.vue
new file mode 100644
index 0000000000..fac98c1e99
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page2/Index.vue
@@ -0,0 +1,89 @@
+<!--
+ * 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>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ t('清档任务提交成功') }}
+    </template>
+    <I18nT
+      keypath="清档任务提交成功"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'SelfServiceMyTickets',
+          query: {
+            id: ticketId,
+          },
+        }">
+        {{ t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        class="w-88"
+        theme="primary"
+        @click="handleGoTicket">
+        {{ t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml8"
+        @click="handleStepChange">
+        {{ t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import { TicketTypes } from '@common/const';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('生产执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'SelfServiceMyTickets',
+      query: {
+        id: ticketId,
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: TicketTypes.MONGODB_REMOVE_NS,
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts b/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
index 5941ff0e49..85137554c7 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/routes.ts
@@ -119,14 +119,17 @@ export const mongoToolboxChildrenRoutes: RouteRecordRaw[] = [
   //   },
   //   component: () => import('@views/db-manage/mongodb/db-backup/Index.vue'),
   // },
-  {
-    path: 'db-clear/:page?',
-    name: 'MongoDbClear',
-    meta: {
-      navName: t('清档'),
-    },
-    component: () => import('@views/db-manage/mongodb/db-clear/Index.vue'),
-  },
+  createRouteItem(TicketTypes.MONGODB_REMOVE_NS, {
+    navName: t('清档'),
+  }),
+  // {
+  //   path: 'db-clear/:page?',
+  //   name: 'MongoDbClear',
+  //   meta: {
+  //     navName: t('清档'),
+  //   },
+  //   component: () => import('@views/db-manage/mongodb/db-clear/Index.vue'),
+  // },
 ];
 
 const routes: RouteRecordRaw[] = [
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
index fb44f43400..876acf6e45 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/toolbox-menu.ts
@@ -111,7 +111,7 @@ export default [
     children: [
       {
         name: t('清档'),
-        id: 'MongoDbClear',
+        id: TicketTypes.MONGODB_REMOVE_NS,
         parentId: 'mongo_data',
       },
     ],
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue b/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
index 197db7e1a4..9f4ddefcce 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/TicketClone.vue
@@ -150,6 +150,7 @@
     [TicketTypes.TENDBCLUSTER_RESTORE_SLAVE]: 'spiderSlaveRebuild', // spider 重建从库-新机重建
     [TicketTypes.MONGODB_FULL_BACKUP]: TicketTypes.MONGODB_FULL_BACKUP, // mongodb 全库备份
     [TicketTypes.MONGODB_BACKUP]: TicketTypes.MONGODB_BACKUP, // mongodb 库表备份
+    [TicketTypes.MONGODB_REMOVE_NS]: TicketTypes.MONGODB_REMOVE_NS, // mongodb 清档
   };
 
   const isSupported = computed(() => !!ticketTypeRouteNameMap[props.data.ticket_type]);