From c4c30f9b0028a84e9ffc43298c285aa000a8522f Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Fri, 6 Dec 2024 18:34:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=A8=A1=E5=9D=97=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=97=B6=E5=A2=9E=E5=8A=A0=E6=A8=A1=E5=9D=97=E7=9A=84?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF=20#8424?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/const/clusterTypeInfos.ts      |  33 +-
 .../generateCloneData/mysql/singleApply.ts    |   2 +-
 .../common/apply-items/ModuleItem.vue         | 442 ++++++++++++++++++
 .../db-manage/mysql/apply/ApplyMySQL.vue      | 207 ++------
 .../mysql/apply/hooks/useMysqlData.ts         | 157 +++----
 .../src/views/db-manage/riak/apply/Index.vue  |  73 +--
 .../db-manage/sqlserver/apply/SqlServer.vue   | 276 +----------
 .../db-manage/tendb-cluster/apply/Index.vue   |  10 +-
 8 files changed, 601 insertions(+), 599 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/apply-items/ModuleItem.vue

diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
index 2e34f23728..406b809d1b 100644
--- a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
+++ b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -275,26 +275,19 @@ const bigdata: InfoType = {
         name: t('冷_热节点规格'),
       },
     ],
-    [ClusterTypes.DORIS]: {
-      id: ClusterTypes.DORIS,
-      name: 'Doris',
-      dbType: DBTypes.DORIS,
-      moduleId: 'bigdata',
-      machineList: [
-        {
-          id: MachineTypes.DORIS_FOLLOWER,
-          name: t('Follower节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_OBSERVER,
-          name: t('Observer节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_BACKEND,
-          name: t('冷_热节点规格'),
-        },
-      ],
-    },
+  },
+  [ClusterTypes.RIAK]: {
+    id: ClusterTypes.RIAK,
+    name: 'Riak',
+    specClusterName: 'Riak',
+    dbType: DBTypes.RIAK,
+    moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.RIAK,
+        name: t('后端存储'),
+      },
+    ],
   },
 };
 
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/singleApply.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/singleApply.ts
index e88b79fc7f..a993b02451 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/singleApply.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/singleApply.ts
@@ -28,7 +28,7 @@ export function generateMysqlSingleApplyCloneData(ticketData: TicketModel<MySQLD
     instNum: details.inst_num,
     ipSource: details.ip_source,
     nodes: details.nodes,
-    singleSpecId: details.resource_spec?.single.spec_id,
+    singleSpecId: details.resource_spec?.backend.spec_id,
     remark: ticketData.remark,
     startMysqlPort: details.start_mysql_port,
   });
diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-items/ModuleItem.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-items/ModuleItem.vue
new file mode 100644
index 0000000000..8348d10828
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/apply-items/ModuleItem.vue
@@ -0,0 +1,442 @@
+<template>
+  <BkFormItem
+    ref="moduleRef"
+    class="apply-module-item"
+    :description="t('DB 参数模块是一个管理单元，用于标识一组使用了相同数据库配置（版本、字符集等）的集群')"
+    :label="t('DB参数模块')"
+    property="details.db_module_id"
+    required
+    :rules="rules">
+    <BkSelect
+      v-model="modelValue"
+      class="item-input"
+      :clearable="false"
+      filterable
+      :input-search="false"
+      :loading="moduleLoading"
+      style="display: inline-block">
+      <AuthOption
+        v-for="item in moduleList"
+        :id="item.db_module_id"
+        :key="item.db_module_id"
+        action-id="dbconfig_view"
+        :biz-id="bizId"
+        :name="item.alias_name"
+        :permission="item.permission.dbconfig_view"
+        :resource="dbType">
+        <div class="apply-module-item-moudle-option">
+          <span class="moudle-option-label">
+            <BkOverflowTitle type="tips">{{ item.alias_name }}</BkOverflowTitle>
+          </span>
+          <span class="moudle-opiton-info ml-4">
+            {{ getBaseInfo(item) }}
+          </span>
+        </div>
+      </AuthOption>
+      <template
+        v-if="bizId && clusterType !== ClusterTypes.RIAK"
+        #extension>
+        <div
+          :key="bizId"
+          v-bk-tooltips.top="{
+            content: t('请先选择所属业务'),
+            disabled: !!bizId,
+          }"
+          style="padding: 0 12px">
+          <AuthButton
+            action-id="dbconfig_edit"
+            :biz-id="bizId"
+            class="create-module"
+            :disabled="!bizId"
+            :resource="dbType"
+            text
+            @click="handleCreateModule">
+            <DbIcon
+              class="mr-4"
+              type="plus-circle" />
+            {{ t('新建模块') }}
+          </AuthButton>
+        </div>
+      </template>
+    </BkSelect>
+    <BkButton
+      v-if="bizId"
+      v-bk-tooltips.top="t('刷新获取最新DB模块名')"
+      class="ml-8"
+      text
+      @click="fetchModuleList">
+      <DbIcon type="refresh" />
+    </BkButton>
+    <div
+      v-if="modelValue && dbType !== DBTypes.RIAK"
+      class="config-detail">
+      <BkLoading :loading="levelConfigLoading">
+        <div v-if="configItemList.length">
+          <div
+            v-for="(item, index) in configItemList"
+            :key="index"
+            class="config-detail-item">
+            <span class="config-detail-label">{{ item.label }}:</span>
+            <span class="config-detail-value">{{ item.value }}</span>
+          </div>
+        </div>
+        <template v-else-if="dbType !== DBTypes.TENDBCLUSTER">
+          <div class="no-items">
+            {{ t('该模块暂未绑定数据库相关配置') }}
+            <span
+              class="bind-module"
+              @click="handleBindConfig">
+              {{ isBindModule ? t('已完成') : t('去绑定') }}
+            </span>
+          </div>
+          <!-- <div class="bk-form-error mt-10">
+            {{ t('需要绑定数据库相关配置') }}
+          </div> -->
+        </template>
+      </BkLoading>
+    </div>
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { Form } from 'bkui-vue';
+  import type { UnwrapRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getModules } from '@services/source/cmdb';
+  import { getLevelConfig } from '@services/source/configs';
+
+  import { clusterTypeInfos, ClusterTypes, DBTypes, TicketTypes } from '@common/const';
+
+  interface Props {
+    clusterType: ClusterTypes;
+    bizId: number | '';
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<number | null>({
+    required: true,
+  });
+  const moduleAliasName = defineModel<string>('moduleAliasName');
+  const moduleLevelConfig = defineModel<{
+    charset: string;
+    dbVersion: string;
+    systemVersionList: string[];
+  }>('moduleLevelConfig');
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { dbType } = clusterTypeInfos[props.clusterType];
+
+  const rules = [
+    {
+      message: t('请先选择所属业务'),
+      trigger: 'blur',
+      validator: () => props.bizId,
+    },
+    {
+      message: t('DB模块名不能为空'),
+      trigger: 'blur',
+      validator: (value: number) => value,
+    },
+    {
+      message: t('需要绑定数据库相关配置'),
+      trigger: 'blur',
+      validator: () => {
+        if ([DBTypes.MYSQL, DBTypes.SQLSERVER].includes(dbType)) {
+          return isBindModule.value;
+        }
+        return true;
+      },
+    },
+  ];
+
+  const moduleRef = ref<InstanceType<typeof Form.FormItem>>();
+  const isBindModule = ref(false);
+
+  const configItemList = computed(() => {
+    const confItems = levelConfigData.value?.conf_items || [];
+    if (!confItems.length) {
+      return [];
+    }
+
+    if (dbType === DBTypes.SQLSERVER) {
+      const labelMap: Record<string, string> = {
+        buffer_percent: t('实例内存分配比例'),
+        charset: t('字符集'),
+        db_version: t('数据库版本'),
+        max_remain_mem_gb: t('最大系统保留内存'),
+        sync_type: t('主从方式'),
+        system_version: t('操作系统版本'),
+      };
+
+      if (confItems) {
+        const configMap: Record<string, string | undefined> = {};
+        confItems.forEach((configItemList) => {
+          const { conf_name: configName, conf_value: confValue } = configItemList;
+          switch (configName) {
+            case 'buffer_percent':
+              configMap[configName] = `${confValue}%`;
+              break;
+            case 'charset':
+              configMap[configName] = confValue;
+              break;
+            case 'db_version':
+              configMap[configName] = confValue;
+              break;
+            case 'max_remain_mem_gb':
+              configMap[configName] = `${confValue}GB`;
+              break;
+            case 'sync_type':
+              configMap[configName] = confValue === 'mirroring' ? t('镜像') : 'always on';
+              break;
+            case 'system_version':
+              configMap[configName] = confValue;
+              break;
+          }
+        });
+
+        return ['db_version', 'charset', 'system_version', 'buffer_percent', 'max_remain_mem_gb', 'sync_type'].map(
+          (key) => ({
+            label: labelMap[key],
+            value: configMap[key],
+          }),
+        );
+      }
+    }
+    return confItems.map((confItem) => ({
+      label: confItem.description || confItem.conf_name,
+      value: confItem.conf_value,
+    }));
+  });
+
+  const {
+    data: moduleList,
+    loading: moduleLoading,
+    run: runGetModules,
+  } = useRequest(getModules, {
+    manual: true,
+  });
+
+  const {
+    data: levelConfigData,
+    loading: levelConfigLoading,
+    run: runGetLevelConfig,
+  } = useRequest(getLevelConfig, {
+    manual: true,
+    onSuccess(levelConfigResult) {
+      isBindModule.value = levelConfigResult.conf_items.length > 0;
+      moduleRef.value!.clearValidate();
+    },
+  });
+
+  const fetchModuleList = () => {
+    runGetModules({
+      cluster_type: props.clusterType,
+      bk_biz_id: Number(props.bizId),
+    });
+  };
+
+  const fetchLevelConfig = () => {
+    if (modelValue.value && props.bizId) {
+      const params = {
+        bk_biz_id: props.bizId,
+        conf_type: 'deploy',
+        level_name: 'module',
+        level_value: modelValue.value,
+        meta_cluster_type: props.clusterType,
+        version: 'deploy_info',
+      };
+      runGetLevelConfig(params);
+    }
+  };
+
+  watch(
+    () => props.bizId,
+    () => {
+      if (props.bizId) {
+        fetchModuleList();
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(
+    modelValue,
+    () => {
+      const item = (moduleList.value || []).find((item) => item.db_module_id === modelValue.value);
+      moduleAliasName.value = item?.alias_name ?? '';
+
+      fetchLevelConfig();
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(levelConfigData, () => {
+    const confItems = levelConfigData.value?.conf_items || [];
+    const confInfo = {
+      charset: '',
+      dbVersion: '',
+      systemVersionList: [] as string[],
+    };
+    confItems.forEach((confItem) => {
+      const { conf_name: confName, conf_value: confValue = '' } = confItem;
+
+      if (confName === 'charset') {
+        confInfo.charset = confValue;
+      } else if (confName === 'db_version') {
+        confInfo.dbVersion = confValue;
+      } else if (confName === 'system_version') {
+        confInfo.systemVersionList = confValue.split(',');
+      }
+    });
+
+    moduleLevelConfig.value = confInfo;
+  });
+
+  const getBaseInfo = (moduleItem: NonNullable<UnwrapRef<typeof moduleList>>[number]) => {
+    const confItems = moduleItem.db_module_info.conf_items;
+    if (dbType === DBTypes.RIAK || !confItems.length) {
+      return '';
+    }
+    let dbVersion = '';
+    let charset = '';
+
+    if (confItems.length) {
+      confItems.forEach((confItem) => {
+        if (confItem.conf_name === 'db_version') {
+          dbVersion = confItem.conf_value;
+        } else if (confItem.conf_name === 'charset') {
+          charset = confItem.conf_value;
+        }
+      });
+    }
+    return [dbVersion, charset].join('，');
+  };
+
+  const handleCreateModule = () => {
+    const routeNameMap: Record<string, string> = {
+      [DBTypes.MYSQL]: 'SelfServiceCreateDbModule',
+      [DBTypes.TENDBCLUSTER]: 'createSpiderModule',
+      [DBTypes.SQLSERVER]: 'SqlServerCreateDbModule',
+    };
+
+    const getParams = () => {
+      if (dbType === DBTypes.MYSQL) {
+        return {
+          type:
+            props.clusterType === ClusterTypes.TENDBSINGLE
+              ? TicketTypes.MYSQL_SINGLE_APPLY
+              : TicketTypes.MYSQL_HA_APPLY,
+          bk_biz_id: props.bizId,
+        };
+      }
+      if (dbType === DBTypes.TENDBCLUSTER) {
+        return {
+          bizId: props.bizId,
+        };
+      }
+      return {
+        ticketType:
+          props.clusterType === ClusterTypes.SQLSERVER_SINGLE
+            ? TicketTypes.SQLSERVER_SINGLE_APPLY
+            : TicketTypes.SQLSERVER_HA_APPLY,
+        bizId: props.bizId,
+      };
+    };
+
+    const url = router.resolve({
+      name: routeNameMap[dbType],
+      params: getParams(),
+      query: {
+        from: route.name as string,
+      },
+    });
+    window.open(url.href, '_blank');
+  };
+
+  const handleBindConfig = () => {
+    if (isBindModule.value) {
+      fetchLevelConfig();
+      return;
+    }
+
+    const typeMap: Record<string, string> = {
+      [ClusterTypes.TENDBSINGLE]: TicketTypes.MYSQL_SINGLE_APPLY,
+      [ClusterTypes.TENDBHA]: TicketTypes.MYSQL_HA_APPLY,
+      [ClusterTypes.SQLSERVER_SINGLE]: TicketTypes.SQLSERVER_SINGLE_APPLY,
+      [ClusterTypes.SQLSERVER_HA]: TicketTypes.SQLSERVER_HA_APPLY,
+    };
+
+    isBindModule.value = true;
+    const url = router.resolve({
+      name: 'SelfServiceBindDbModule',
+      params: {
+        type: typeMap[props.clusterType],
+        bk_biz_id: props.bizId,
+        db_module_id: modelValue.value,
+      },
+      query: dbType === DBTypes.MYSQL ? { alias_name: moduleAliasName.value } : {},
+    });
+    window.open(url.href, '_blank');
+  };
+</script>
+
+<style lang="less">
+  .apply-module-item-moudle-option {
+    display: flex;
+    width: 100%;
+
+    .moudle-option-label {
+      flex: 1;
+      width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .moudle-opiton-info {
+      margin-left: auto;
+      color: #979ba5;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .apply-module-item {
+    .config-detail {
+      width: 435px;
+      padding: 8px 12px;
+      margin-top: 16px;
+      font-size: @font-size-mini;
+      line-height: 20px;
+      background-color: @bg-gray;
+      border-radius: 2px;
+
+      .config-detail-label {
+        display: inline-block;
+        min-width: 112px;
+        padding-right: 8px;
+        text-align: right;
+      }
+
+      .config-detail-value {
+        color: @title-color;
+      }
+
+      .no-items {
+        text-align: center;
+
+        .bind-module {
+          color: @primary-color;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
index 23ec7ee51e..b0e2ae5f53 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
@@ -26,91 +26,13 @@
             v-model:biz-id="formdata.bk_biz_id"
             perrmision-action-id="mysql_apply"
             @change-biz="handleChangeBiz" />
-          <BkFormItem
-            ref="moduleRef"
-            class="is-required"
-            :description="t('DB 参数模块是一个管理单元，用于标识一组使用了相同数据库配置（版本、字符集等）的集群')"
-            :label="t('DB参数模块')"
-            property="details.db_module_id">
-            <BkSelect
-              v-model="formdata.details.db_module_id"
-              class="item-input"
-              :clearable="false"
-              filterable
-              :input-search="false"
-              :loading="loading.modules"
-              style="display: inline-block">
-              <AuthOption
-                v-for="item in fetchState.moduleList"
-                :id="item.db_module_id"
-                :key="item.db_module_id"
-                action-id="dbconfig_view"
-                :biz-id="formdata.bk_biz_id"
-                :name="item.alias_name"
-                :permission="item.permission.dbconfig_view"
-                resource="mysql" />
-              <template
-                v-if="formdata.bk_biz_id"
-                #extension>
-                <div
-                  :key="formdata.bk_biz_id"
-                  v-bk-tooltips.top="{
-                    content: t('请先选择所属业务'),
-                    disabled: !!formdata.bk_biz_id,
-                  }"
-                  style="padding: 0 12px">
-                  <AuthButton
-                    action-id="dbconfig_edit"
-                    :biz-id="formdata.bk_biz_id"
-                    class="create-module"
-                    :disabled="!formdata.bk_biz_id"
-                    resource="mysql"
-                    text
-                    @click="handleCreateModule">
-                    <DbIcon type="plus-circle" />
-                    {{ t('新建模块') }}
-                  </AuthButton>
-                </div>
-              </template>
-            </BkSelect>
-            <span
-              v-if="formdata.bk_biz_id"
-              v-bk-tooltips.top="t('刷新获取最新DB模块名')"
-              class="refresh-module"
-              @click="fetchModules(Number(formdata.bk_biz_id))">
-              <i class="db-icon-refresh" />
-            </span>
-            <div
-              v-if="formdata.details.db_module_id"
-              class="apply-form__database">
-              <BkLoading :loading="loading.levelConfigs">
-                <div v-if="fetchState.levelConfigList.length">
-                  <div
-                    v-for="(item, index) in fetchState.levelConfigList"
-                    :key="index"
-                    class="apply-form__database-item">
-                    <span class="apply-form__database-label">{{ item.description || item.conf_name }}:</span>
-                    <span class="apply-form__database-value">{{ item.conf_value }}</span>
-                  </div>
-                </div>
-                <div
-                  v-else
-                  class="no-items">
-                  {{ t('该模块暂未绑定数据库相关配置') }}
-                  <span
-                    class="bind-module"
-                    @click="handleBindConfig">
-                    {{ isBindModule ? t('已完成') : t('去绑定') }}
-                  </span>
-                </div>
-                <div
-                  v-if="!fetchState.levelConfigList.length"
-                  class="bk-form-error mt-10">
-                  {{ t('需要绑定数据库相关配置') }}
-                </div>
-              </BkLoading>
-            </div>
-          </BkFormItem>
+          <ModuleItem
+            ref="moduleItemRef"
+            v-model="formdata.details.db_module_id"
+            v-model:module-alias-name="moduleAliasName"
+            v-model:module-level-config="moduleLevelConfig"
+            :biz-id="formdata.bk_biz_id"
+            :cluster-type="typeInfo.type" />
           <CloudItem
             v-model="formdata.details.bk_cloud_id"
             @change="handleChangeCloud" />
@@ -399,6 +321,7 @@
   import AffinityItem from '@views/db-manage/common/apply-items/AffinityItem.vue';
   import BusinessItems from '@views/db-manage/common/apply-items/BusinessItems.vue';
   import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
+  import ModuleItem from '@views/db-manage/common/apply-items/ModuleItem.vue';
   import RegionItem from '@views/db-manage/common/apply-items/RegionItem.vue';
   import SpecSelector from '@views/db-manage/common/apply-items/SpecSelector.vue';
 
@@ -504,14 +427,20 @@
   const isSingleType = route.name === 'SelfServiceApplySingle';
   const dbType: string = isSingleType ? TicketTypes.MYSQL_SINGLE_APPLY : TicketTypes.MYSQL_HA_APPLY;
 
+  const moduleItemRef = ref<InstanceType<typeof ModuleItem>>();
   const specProxyRef = ref();
   const specBackendRef = ref();
   const specSingleRef = ref();
   const backendRef = ref();
   const proxyRef = ref();
   const moduleRef = ref();
-  const isBindModule = ref(false);
   const regionItemRef = ref();
+  const moduleAliasName = ref('');
+  const moduleLevelConfig = ref({
+    charset: '',
+    dbVersion: '',
+    systemVersionList: [] as string[],
+  });
 
   const cloudInfo = reactive({
     id: '' as number | string,
@@ -525,18 +454,6 @@
         validator: (val: string) => nameRegx.test(val),
       },
     ],
-    'details.db_module_id': [
-      {
-        message: t('请先选择所属业务'),
-        trigger: 'blur',
-        validator: () => !!formdata.bk_biz_id,
-      },
-      {
-        message: t('DB模块名不能为空'),
-        trigger: 'blur',
-        validator: (val: number) => !!val,
-      },
-    ],
     'details.nodes.proxy': [
       {
         message: t('请添加服务器'),
@@ -573,10 +490,6 @@
   });
   const hostSpecInfo = computed(() => fetchState.hostSpecs.find((info) => info.spec === formdata.details.spec));
   const typeInfo = computed(() => mysqlType[dbType as MysqlTypeString]);
-  const moduleAliasName = computed(() => {
-    const item = fetchState.moduleList.find((item) => item.db_module_id === formdata.details.db_module_id);
-    return item?.alias_name ?? '';
-  });
   const tableData = computed(() => {
     if (moduleAliasName.value && formdata.details.db_app_abbr) {
       return formdata.details.domains;
@@ -596,8 +509,7 @@
   // const isDefaultCity = computed(() => formdata.details.city_code === 'default');
 
   // 获取基础数据信息
-  const { formdata, fetchState, loading, leveConfig, handleResetFormdata, fetchModules, fetchLevelConfig } =
-    useMysqlData(dbType);
+  const { formdata, fetchState, handleResetFormdata } = useMysqlData(dbType);
 
   function handleChangeClusterCount(value: number) {
     if (value && formdata.details.inst_num > value) {
@@ -714,20 +626,20 @@
   }
 
   /** 获取版本、字符集信息 */
-  watch(
-    () => fetchState.levelConfigList,
-    (value) => {
-      value.forEach((item) => {
-        Object.keys(leveConfig).forEach((key) => {
-          if (key === item.conf_name) {
-            if (item.conf_value !== undefined) {
-              leveConfig[key as keyof typeof leveConfig] = item.conf_value;
-            }
-          }
-        });
-      });
-    },
-  );
+  // watch(
+  //   () => fetchState.levelConfigList,
+  //   (value) => {
+  //     value.forEach((item) => {
+  //       Object.keys(leveConfig).forEach((key) => {
+  //         if (key === item.conf_name) {
+  //           if (item.conf_value !== undefined) {
+  //             leveConfig[key as keyof typeof leveConfig] = item.conf_value;
+  //           }
+  //         }
+  //       });
+  //     });
+  //   },
+  // );
 
   /**
    * 预览功能
@@ -736,17 +648,18 @@
     proxy: formatNodes(formdata.details.nodes.proxy),
     backend: formatNodes(formdata.details.nodes.backend),
   }));
-  const previewData = computed(() =>
-    tableData.value.map(({ key }: { key: string }) => ({
+  const previewData = computed(() => {
+    const { dbVersion, charset } = moduleLevelConfig.value;
+    return tableData.value.map(({ key }: { key: string }) => ({
       domain: `${moduleAliasName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
       slaveDomain: `${moduleAliasName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
       disasterDefence: t('同城跨园区'),
       deployStructure: typeInfo.value.name,
-      version: leveConfig.db_version,
-      charset: leveConfig.charset,
+      version: dbVersion,
+      charset,
       spec: hostSpecInfo.value ? `${hostSpecInfo.value.cpu}/${hostSpecInfo.value.mem}` : '',
-    })),
-  );
+    }));
+  });
   const isShowPreview = ref(false);
   const handleShowPreview = () => {
     isShowPreview.value = true;
@@ -773,7 +686,7 @@
       ?.validate()
       .then(() => true)
       .catch(() => false);
-    if (validate && fetchState.levelConfigList.length) {
+    if (validate) {
       baseState.isSubmitting = true;
 
       const getDetails = () => {
@@ -850,50 +763,6 @@
     }
   };
 
-  /**
-   * 新建模块
-   */
-  const handleCreateModule = () => {
-    const url = router.resolve({
-      name: 'SelfServiceCreateDbModule',
-      params: {
-        type: dbType,
-        bk_biz_id: formdata.bk_biz_id,
-      },
-      query: {
-        from: route.name as string,
-      },
-    });
-    window.open(url.href, '_blank');
-  };
-
-  const handleBindConfig = () => {
-    if (isBindModule.value) {
-      fetchLevelConfig(formdata.details.db_module_id as number);
-      return;
-    }
-    const moduleInfo = fetchState.moduleList.find((item) => item.db_module_id === formdata.details.db_module_id);
-    const moduleAliasName = moduleInfo?.alias_name ?? '';
-    const moduleAliasNameQuery = moduleAliasName
-      ? {
-          alias_name: moduleAliasName,
-        }
-      : {};
-    isBindModule.value = true;
-    const url = router.resolve({
-      name: 'SelfServiceBindDbModule',
-      params: {
-        type: dbType,
-        bk_biz_id: formdata.bk_biz_id,
-        db_module_id: formdata.details.db_module_id,
-      },
-      query: {
-        ...moduleAliasNameQuery,
-      },
-    });
-    window.open(url.href, '_blank');
-  };
-
   defineExpose({
     routerBack() {
       if (!route.query.from) {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/hooks/useMysqlData.ts b/dbm-ui/frontend/src/views/db-manage/mysql/apply/hooks/useMysqlData.ts
index 12b1811103..632de40cc7 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/hooks/useMysqlData.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/hooks/useMysqlData.ts
@@ -15,18 +15,13 @@ import InfoBox from 'bkui-vue/lib/info-box';
 import _ from 'lodash';
 import { useI18n } from 'vue-i18n';
 
-import { getModules } from '@services/source/cmdb';
-import { getLevelConfig } from '@services/source/configs';
 import { getInfrasHostSpecs } from '@services/source/infras';
-import { createTicket } from '@services/source/ticket';
 import type { HostInfo } from '@services/types';
 
-import { mysqlType, type MysqlTypeString } from '@common/const';
+import { type MysqlTypeString } from '@common/const';
 
 type FetchState = {
   hostSpecs: ServiceReturnType<typeof getInfrasHostSpecs>;
-  moduleList: ServiceReturnType<typeof getModules>;
-  levelConfigList: ServiceReturnType<typeof getLevelConfig>['conf_items'];
 };
 
 const getFormData = (type: string) => ({
@@ -86,17 +81,6 @@ export const useMysqlData = (type: string) => {
   // 接口数据
   const fetchState = reactive<FetchState>({
     hostSpecs: [],
-    moduleList: [],
-    levelConfigList: [],
-  });
-  const loading = reactive({
-    hostSpecs: false,
-    modules: false,
-    levelConfigs: false,
-  });
-  const leveConfig = reactive({
-    charset: '',
-    db_version: '',
   });
 
   /**
@@ -120,39 +104,39 @@ export const useMysqlData = (type: string) => {
     },
   );
 
-  /**
-   * 获取配置详情下拉展示
-   */
-  const fetchLevelConfig = (moduleId: number) => {
-    const params = {
-      bk_biz_id: formdata.bk_biz_id as number,
-      conf_type: 'deploy',
-      level_name: 'module',
-      level_value: moduleId,
-      meta_cluster_type: mysqlType[ticketType].type,
-      version: 'deploy_info',
-    };
-    loading.levelConfigs = true;
-    getLevelConfig(params)
-      .then((res) => {
-        fetchState.levelConfigList = res.conf_items;
-      })
-      .finally(() => {
-        loading.levelConfigs = false;
-      });
-  };
+  // /**
+  //  * 获取配置详情下拉展示
+  //  */
+  // const fetchLevelConfig = (moduleId: number) => {
+  //   const params = {
+  //     bk_biz_id: formdata.bk_biz_id as number,
+  //     conf_type: 'deploy',
+  //     level_name: 'module',
+  //     level_value: moduleId,
+  //     meta_cluster_type: mysqlType[ticketType].type,
+  //     version: 'deploy_info',
+  //   };
+  //   loading.levelConfigs = true;
+  //   getLevelConfig(params)
+  //     .then((res) => {
+  //       fetchState.levelConfigList = res.conf_items;
+  //     })
+  //     .finally(() => {
+  //       loading.levelConfigs = false;
+  //     });
+  // };
 
   /**
    * 查询层级（业务、模块、集群）配置详情
    */
-  watch(
-    () => formdata.details.db_module_id,
-    (value) => {
-      if (value) {
-        fetchLevelConfig(value);
-      }
-    },
-  );
+  // watch(
+  //   () => formdata.details.db_module_id,
+  //   (value) => {
+  //     if (value) {
+  //       fetchLevelConfig(value);
+  //     }
+  //   },
+  // );
 
   /**
    * 获取服务器规格列表
@@ -167,45 +151,40 @@ export const useMysqlData = (type: string) => {
     },
   );
   const fetchInfrasHostSpecs = () => {
-    loading.hostSpecs = true;
-    getInfrasHostSpecs()
-      .then((res) => {
-        fetchState.hostSpecs = res || [];
-      })
-      .finally(() => {
-        loading.hostSpecs = false;
-      });
+    getInfrasHostSpecs().then((res) => {
+      fetchState.hostSpecs = res || [];
+    });
   };
 
-  /**
-   * 获取模块列表
-   */
-  watch(
-    () => formdata.bk_biz_id,
-    (value) => {
-      if (value) {
-        fetchModules(value);
-      }
-    },
-  );
-  const fetchModules = (bizId: number | null) => {
-    if (!bizId) {
-      return;
-    }
-
-    loading.modules = true;
-    const params = {
-      bk_biz_id: bizId,
-      cluster_type: mysqlType[ticketType].type,
-    };
-    getModules(params)
-      .then((res) => {
-        fetchState.moduleList = res || [];
-      })
-      .finally(() => {
-        loading.modules = false;
-      });
-  };
+  // /**
+  //  * 获取模块列表
+  //  */
+  // watch(
+  //   () => formdata.bk_biz_id,
+  //   (value) => {
+  //     if (value) {
+  //       fetchModules(value);
+  //     }
+  //   },
+  // );
+  // const fetchModules = (bizId: number | null) => {
+  //   if (!bizId) {
+  //     return;
+  //   }
+
+  //   loading.modules = true;
+  //   const params = {
+  //     bk_biz_id: bizId,
+  //     cluster_type: mysqlType[ticketType].type,
+  //   };
+  //   getModules(params)
+  //     .then((res) => {
+  //       fetchState.moduleList = res || [];
+  //     })
+  //     .finally(() => {
+  //       loading.modules = false;
+  //     });
+  // };
 
   /**
    * reset formdata
@@ -228,16 +207,16 @@ export const useMysqlData = (type: string) => {
   /**
    * 创建单据
    */
-  const submitTicket = () => createTicket(formdata);
+  // const submitTicket = () => createTicket(formdata);
 
   return {
     formdata,
     fetchState,
-    loading,
-    leveConfig,
-    submitTicket,
+    // loading,
+    // leveConfig,
+    // submitTicket,
     handleResetFormdata,
-    fetchModules,
-    fetchLevelConfig,
+    // fetchModules,
+    // fetchLevelConfig,
   };
 };
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
index 30351b3141..fdfec69016 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
@@ -27,33 +27,11 @@
           v-model:biz-id="formData.bk_biz_id"
           perrmision-action-id="riak_cluster_apply"
           @change-biz="handleChangeBiz" />
-        <BkFormItem
-          ref="moduleRef"
-          class="is-required"
-          :description="t('表示DB的用途')"
-          :label="t('DB模块名')"
-          property="details.db_module_id"
-          required>
-          <BkSelect
-            v-model="formData.details.db_module_id"
-            class="item-input"
-            :clearable="false"
-            filterable
-            :input-search="false"
-            :loading="getModulesLoading"
-            :placeholder="t('请选择xx', [t('DB模块名')])">
-            <AuthOption
-              v-for="item in moduleList"
-              :key="item.db_module_id"
-              action-id="dbconfig_view"
-              :biz-id="formData.bk_biz_id"
-              :label="item.alias_name"
-              :name="item.alias_name"
-              :permission="item.permission.dbconfig_view"
-              resource="riak"
-              :value="item.db_module_id" />
-          </BkSelect>
-        </BkFormItem>
+        <ModuleItem
+          v-model="formData.details.db_module_id"
+          v-model:module-alias-name="moduleAliasName"
+          :biz-id="formData.bk_biz_id"
+          :cluster-type="ClusterTypes.RIAK" />
         <ClusterName v-model="formData.details.cluster_name" />
         <ClusterAlias
           v-model="formData.details.cluster_alias"
@@ -211,9 +189,7 @@
 <script setup lang="ts">
   import InfoBox from 'bkui-vue/lib/info-box';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import { getModules } from '@services/source/cmdb';
   import type { BizItem, HostInfo } from '@services/types';
 
   import { useApplyBase } from '@hooks';
@@ -226,6 +202,7 @@
   import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
   import ClusterAlias from '@views/db-manage/common/apply-items/ClusterAlias.vue';
   import ClusterName from '@views/db-manage/common/apply-items/ClusterName.vue';
+  import ModuleItem from '@views/db-manage/common/apply-items/ModuleItem.vue';
   import RegionItem from '@views/db-manage/common/apply-items/RegionItem.vue';
   import SpecSelector from '@views/db-manage/common/apply-items/SpecSelector.vue';
 
@@ -242,7 +219,7 @@
       bk_cloud_id: 0,
       db_app_abbr: '',
       ip_source: 'resource_pool',
-      db_module_id: '' as number | '',
+      db_module_id: null as number | null,
       cluster_name: '',
       cluster_alias: '',
       city_code: '',
@@ -264,26 +241,9 @@
     id: '' as number | string,
     name: '',
   });
+  const moduleAliasName = ref('');
   const formData = reactive(genDefaultFormData());
 
-  const {
-    data: moduleList,
-    run: getModulesRun,
-    loading: getModulesLoading,
-  } = useRequest(getModules, {
-    manual: true,
-  });
-
-  watch(
-    () => formData.bk_biz_id,
-    (value) => {
-      if (value) {
-        formData.details.db_module_id = '';
-        fetchModules(value);
-      }
-    },
-  );
-
   const formRules = {
     nodes_num: [
       {
@@ -309,17 +269,6 @@
     bizState.hasEnglishName = !!info.english_name;
   };
 
-  const fetchModules = (bizId: number | null) => {
-    if (!bizId) {
-      return;
-    }
-
-    getModulesRun({
-      bk_biz_id: bizId,
-      cluster_type: ClusterTypes.RIAK,
-    });
-  };
-
   const handleChangeCloud = (info: { id: number | string; name: string }) => {
     cloudInfo.value = info;
 
@@ -340,15 +289,11 @@
     formRef.value.validate().then(() => {
       baseState.isSubmitting = true;
 
-      const { db_module_id: moduleId } = formData.details;
-      const moduleListValue = moduleList.value || [];
-      const moduleIndex = moduleListValue.findIndex((moduleItem) => Number(moduleItem.db_module_id) === moduleId);
-
       const params = {
         ...formData,
         details: {
           ...formData.details,
-          db_module_name: moduleListValue[moduleIndex].alias_name,
+          db_module_name: moduleAliasName.value,
         },
       };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
index 245434f96b..15f9552743 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
@@ -13,85 +13,13 @@
             v-model:biz-id="formData.bk_biz_id"
             perrmision-action-id="sqlserver_apply"
             @change-biz="handleChangeBiz" />
-          <BkFormItem
-            ref="moduleRef"
-            class="is-required"
-            :description="t('表示DB的用途')"
-            :label="t('DB模块名')"
-            property="details.db_module_id"
-            required>
-            <BkSelect
-              v-model="formData.details.db_module_id"
-              class="item-input"
-              :clearable="false"
-              filterable
-              :input-search="false"
-              style="display: inline-block">
-              <AuthOption
-                v-for="item in moduleList"
-                :key="item.db_module_id"
-                action-id="dbconfig_view"
-                :biz-id="formData.bk_biz_id"
-                :label="item.alias_name"
-                :permission="item.permission.dbconfig_view"
-                resource="sqlserver"
-                :value="item.db_module_id" />
-              <template
-                v-if="formData.bk_biz_id"
-                #extension>
-                <div
-                  :key="formData.bk_biz_id"
-                  v-bk-tooltips.top="{ content: t('请先选择所属业务') }"
-                  class="ml-8">
-                  <BkButton
-                    action-id="dbconfig_edit"
-                    :biz-id="formData.bk_biz_id"
-                    class="create-module"
-                    resource="sqlserver"
-                    text
-                    @click="handleCreateModule">
-                    <DbIcon type="plus-circle" />
-                    <span class="ml-4">{{ t('新建模块') }}</span>
-                  </BkButton>
-                </div>
-              </template>
-            </BkSelect>
-            <DbIcon
-              v-bk-tooltips="t('刷新获取最新DB模块名')"
-              class="spec-refresh-icon ml-6"
-              type="refresh"
-              @click="getModulesConfig" />
-            <div
-              v-if="formData.details.db_module_id"
-              class="apply-form-database">
-              <BkLoading :loading="isModuleLoading">
-                <div v-if="levelConfigList.length">
-                  <div
-                    v-for="(item, index) in levelConfigList"
-                    :key="index"
-                    class="apply-form-database-item">
-                    <div class="apply-form-database-label">{{ item.label }} ：</div>
-                    <div class="apply-form-database-value">{{ item.value }}</div>
-                  </div>
-                </div>
-                <div
-                  v-else
-                  class="no-items">
-                  {{ t('该模块暂未绑定数据库相关配置') }}
-                  <span
-                    class="bind-module"
-                    @click="handleBindConfig">
-                    {{ isBindModule ? t('已完成') : t('去绑定') }}
-                  </span>
-                </div>
-                <div
-                  v-if="!levelConfigData?.conf_items.length"
-                  class="bk-form-error mt-10">
-                  {{ t('需要绑定数据库相关配置') }}
-                </div>
-              </BkLoading>
-            </div>
-          </BkFormItem>
+          <ModuleItem
+            ref="moduleItemRef"
+            v-model="formData.details.db_module_id"
+            v-model:module-alias-name="moduleAliasName"
+            v-model:module-level-config="moduleLevelConfig"
+            :biz-id="formData.bk_biz_id"
+            :cluster-type="clusterType" />
           <CloudItem
             v-model="formData.details.bk_cloud_id"
             @change="handleChangeCloud" />
@@ -292,24 +220,22 @@
 <script setup lang="tsx">
   import InfoBox from 'bkui-vue/lib/info-box';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
   import { useRoute } from 'vue-router';
 
-  import { getModules } from '@services/source/cmdb';
-  import { getLevelConfig } from '@services/source/configs';
   import type { BizItem, HostInfo } from '@services/types';
 
   import { useApplyBase } from '@hooks';
 
   import { useGlobalBizs } from '@stores';
 
-  import { sqlServerType, type SqlServerTypeString, TicketTypes } from '@common/const';
+  import { ClusterTypes, TicketTypes } from '@common/const';
 
   import IpSelector from '@components/ip-selector/IpSelector.vue';
 
   import AffinityItem from '@views/db-manage/common/apply-items/AffinityItem.vue';
   import BusinessItems from '@views/db-manage/common/apply-items/BusinessItems.vue';
   import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
+  import ModuleItem from '@views/db-manage/common/apply-items/ModuleItem.vue';
   import RegionItem from '@views/db-manage/common/apply-items/RegionItem.vue';
   import SpecSelector from '@views/db-manage/common/apply-items/SpecSelector.vue';
 
@@ -324,7 +250,7 @@
 
   const isSingleType = route.name === 'SqlServiceSingleApply';
 
-  const clusterType = isSingleType ? 'sqlserver_single' : 'sqlserver_ha';
+  const clusterType = isSingleType ? ClusterTypes.SQLSERVER_SINGLE : ClusterTypes.SQLSERVER_HA;
 
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
@@ -365,16 +291,17 @@
 
   const formRef = ref();
   const backendRef = ref();
-  const moduleAliasName = ref('');
-  const moduleRef = ref();
-  const isBindModule = ref(false);
+  const moduleItemRef = ref<InstanceType<typeof ModuleItem>>();
   const isShowPreview = ref(false);
-  const dbVersion = ref();
-  const charset = ref();
   const maxInstNum = ref();
-  const systemVersionList = ref<string[]>([]);
   const regionItemRef = ref<InstanceType<typeof RegionItem>>();
   const specBackendRef = ref<InstanceType<typeof SpecSelector>>();
+  const moduleAliasName = ref('');
+  const moduleLevelConfig = ref({
+    charset: '',
+    dbVersion: '',
+    systemVersionList: [] as string[],
+  });
 
   const cloudInfo = ref<{
     id: string | number;
@@ -384,13 +311,6 @@
     name: '',
   });
 
-  const levelConfigList = shallowRef<
-    {
-      label: string;
-      value?: string;
-    }[]
-  >([]);
-
   const formData = reactive(getDefaultformData());
 
   const rules = computed(() => ({
@@ -400,13 +320,6 @@
         trigger: 'blur',
       },
     ],
-    'details.db_module_id': [
-      {
-        message: t('DB模块名不能为空'),
-        trigger: 'blur',
-        validator: (val: number) => !!val,
-      },
-    ],
     'details.nodes.backend': [
       {
         message: t('请添加服务器'),
@@ -440,8 +353,9 @@
     return [];
   });
 
-  const previewData = computed(() =>
-    tableData.value.reduce(
+  const previewData = computed(() => {
+    const { dbVersion, charset } = moduleLevelConfig.value;
+    return tableData.value.reduce(
       (accumulator, { key }) => [
         ...accumulator,
         {
@@ -449,8 +363,8 @@
           slaveDomain: `${moduleAliasName.value}db.${key}.${formData.details.db_app_abbr}.db`,
           disasterDefence: t('同城跨园区'),
           deployStructure: isSingleType ? t('单节点部署') : t('主从部署'),
-          version: dbVersion.value,
-          charset: charset.value,
+          version: dbVersion,
+          charset,
         },
       ],
       [] as {
@@ -461,99 +375,9 @@
         version: string;
         charset: string;
       }[],
-    ),
-  );
-
-  /**
-   * 获取模块详情
-   */
-  const { data: levelConfigData, run: fetchModulesDetails } = useRequest(getLevelConfig, {
-    manual: true,
-    onSuccess(result) {
-      const labelMap: Record<string, string> = {
-        buffer_percent: t('实例内存分配比例'),
-        charset: t('字符集'),
-        db_version: t('数据库版本'),
-        max_remain_mem_gb: t('最大系统保留内存'),
-        sync_type: t('主从方式'),
-        system_version: t('操作系统版本'),
-      };
-
-      if (result.conf_items) {
-        const configMap: Record<string, string | undefined> = {};
-        result.conf_items.forEach((configItem) => {
-          const { conf_name: configName, conf_value: confValue } = configItem;
-          switch (configName) {
-            case 'buffer_percent':
-              configMap[configName] = `${confValue}%`;
-              break;
-            case 'charset':
-              charset.value = confValue;
-              configMap[configName] = confValue;
-              break;
-            case 'db_version':
-              dbVersion.value = confValue;
-              configMap[configName] = confValue;
-              break;
-            case 'max_remain_mem_gb':
-              configMap[configName] = `${confValue}GB`;
-              break;
-            case 'sync_type':
-              configMap[configName] = confValue === 'mirroring' ? t('镜像') : 'always on';
-              break;
-            case 'system_version':
-              systemVersionList.value = (confValue || '').split(',');
-              configMap[configName] = confValue;
-              break;
-          }
-        });
-
-        levelConfigList.value = [
-          'db_version',
-          'charset',
-          'system_version',
-          'buffer_percent',
-          'max_remain_mem_gb',
-          'sync_type',
-        ].map((key) => ({
-          label: labelMap[key],
-          value: configMap[key],
-        }));
-      }
-    },
-  });
-
-  /**
-   * 获取DB模块
-   */
-  const {
-    data: moduleList,
-    loading: isModuleLoading,
-    run: fetchModulesConfig,
-  } = useRequest(getModules, {
-    manual: true,
+    );
   });
 
-  // 根据DM模块 获取配置下拉展示详情
-  watch(
-    () => formData.details.db_module_id,
-    (newDbModuleId) => {
-      if (newDbModuleId) {
-        const module = (moduleList.value || []).find((item) => item.db_module_id === formData.details.db_module_id);
-        moduleAliasName.value = module ? module.alias_name : '';
-
-        fetchModulesDetails({
-          bk_biz_id: Number(formData.bk_biz_id),
-          meta_cluster_type: sqlServerType[formData.ticket_type as SqlServerTypeString].type,
-          conf_type: 'deploy',
-          level_value: newDbModuleId,
-          level_name: 'module',
-          version: 'deploy_info',
-        });
-      }
-    },
-  );
-
   /**
    * 设置 domain 数量
    */
@@ -582,7 +406,8 @@
   // 只能选择 module 配置中对应操作系统版本的机器
   const disableHostMethod = (data: HostInfo) => {
     const osName = data.os_name.replace(/\s+/g, '');
-    return systemVersionList.value.every((versionItem) => !osName.includes(versionItem))
+    const { systemVersionList } = moduleLevelConfig.value;
+    return systemVersionList.every((versionItem) => !osName.includes(versionItem))
       ? t('操作系统版本不符合模块配置')
       : false;
   };
@@ -600,30 +425,6 @@
     }
   };
 
-  const getModulesConfig = () => {
-    fetchModulesConfig({
-      cluster_type: clusterType,
-      bk_biz_id: Number(formData.bk_biz_id),
-    });
-  };
-
-  /**
-   * 新建模块
-   */
-  const handleCreateModule = () => {
-    const url = router.resolve({
-      name: 'SqlServerCreateDbModule',
-      params: {
-        ticketType: formData.ticket_type,
-        bizId: formData.bk_biz_id,
-      },
-      query: {
-        from: String(route.name),
-      },
-    });
-    window.open(url.href, '_blank');
-  };
-
   /**
    * 变更所属管控区域
    */
@@ -714,24 +515,6 @@
     });
   };
 
-  /**
-   * 绑定数据库模块
-   */
-  const handleBindConfig = () => {
-    if (isBindModule.value) {
-      return;
-    }
-    const url = router.resolve({
-      name: 'SelfServiceBindDbModule',
-      params: {
-        type: formData.ticket_type,
-        bk_biz_id: formData.bk_biz_id,
-        db_module_id: formData.details.db_module_id,
-      },
-    });
-    window.open(url.href, '_blank');
-  };
-
   /**
    * 变更业务选择
    */
@@ -740,15 +523,6 @@
     bizState.hasEnglishName = !!info.english_name;
     formData.details.db_module_id = null;
     formData.details.nodes.backend = [];
-    moduleRef.value.clearValidate();
-    levelConfigList.value = [];
-    systemVersionList.value = [];
-
-    if (info.bk_biz_id) {
-      getModulesConfig();
-    } else {
-      moduleList.value = [];
-    }
   };
 
   // 获取 DM模块
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
index bce227e391..da0bfe347c 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
@@ -43,7 +43,8 @@
         <DbCard :title="t('部署需求')">
           <ModuleItem
             v-model="formdata.details.db_module_id"
-            :biz-id="formdata.bk_biz_id" />
+            :biz-id="formdata.bk_biz_id"
+            :cluster-type="ClusterTypes.TENDBCLUSTER" />
           <BkFormItem
             :label="t('接入层Master')"
             required>
@@ -144,7 +145,7 @@
 
   import { useApplyBase, useTicketCloneInfo } from '@hooks';
 
-  import { TicketTypes } from '@common/const';
+  import { ClusterTypes, TicketTypes } from '@common/const';
   import { nameRegx } from '@common/regex';
 
   import AffinityItem from '@views/db-manage/common/apply-items/AffinityItem.vue';
@@ -153,11 +154,10 @@
   import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
   import ClusterAlias from '@views/db-manage/common/apply-items/ClusterAlias.vue';
   import ClusterName from '@views/db-manage/common/apply-items/ClusterName.vue';
+  import ModuleItem from '@views/db-manage/common/apply-items/ModuleItem.vue';
   import RegionItem from '@views/db-manage/common/apply-items/RegionItem.vue';
   import SpecSelector from '@views/db-manage/common/apply-items/SpecSelector.vue';
 
-  import ModuleItem from './components/ModuleItem.vue';
-
   const route = useRoute();
   const router = useRouter();
   const { t } = useI18n();
@@ -325,7 +325,7 @@
       return {
         ...details,
         cluster_shard_num: Number(specInfo.cluster_shard_num),
-        remote_shard_num: specInfo.cluster_shard_num / specInfo.machine_pair,
+        remote_shard_num: Number(specInfo.cluster_shard_num) / specInfo.machine_pair,
         disaster_tolerance_level: details.resource_spec.backend_group.affinity,
         resource_spec: {
           spider: {