fix(frontend): 修复mongo添加授权选择器bug TencentBlueKing#7511

dbm-ui/frontend/src/common/const/clusterTypes.ts

@@ -39,6 +39,7 @@ export enum ClusterTypes {
 export enum ClusterTypes {
   MONGO_REPLICA_SET = 'MongoReplicaSet', // Mongo副本集群
   MONGO_SHARED_CLUSTER = 'MongoShardedCluster', // Mongo分片集群
+  MONGODB = 'mongodb',
 }
 // sqlserver
 export enum ClusterTypes {

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/TargetInstances.vue

@@ -149,6 +149,9 @@
       tendbclusterSlave: [],
       [ClusterTypes.SQLSERVER_HA]: [],
       [ClusterTypes.SQLSERVER_SINGLE]: [],
+      [ClusterTypes.MONGO_REPLICA_SET]: [],
+      [ClusterTypes.MONGO_SHARED_CLUSTER]: [],
+      [ClusterTypes.MONGODB]: []
     } as ClusterSelectorResult,
     isShow: false,
     tableProps: {

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/permission-rules/Index.vue

@@ -1,10 +1,10 @@
 <template>
   <BkFormItem
-    v-model="rules"
     class="cluster-authorize-bold"
     :label="t('权限规则')"
-    property="rules"
-    required>
+    :property="property"
+    required
+    :rules="rules">
     <div class="permission-item">
       <BkButton
         class="cluster-authorize-button"
@@ -58,15 +58,17 @@
 
   interface Props {
     accountType: AccountTypes;
+    property: string;
   }
 
   defineProps<Props>();
 
-  const user = defineModel<string>('user', {
-    default: () => [],
-  });
-
-  const rules = defineModel<PermissionRule['rules'][]>('rules', {
+  const modelValue = defineModel<
+    {
+      user: string;
+      rules: PermissionRule['rules'];
+    }[]
+  >('modelValue', {
     default: () => [],
   });
 
@@ -75,14 +77,25 @@
   const accoutRulesShow = ref(false);
   const selectedList = shallowRef<T[]>([]);
 
+  const rules = [
+    {
+      trigger: 'change',
+      message: t('请添加账号规则'),
+      validator: (value: T[]) => value.length > 0,
+    },
+  ];
+
   const handleShowAccoutRules = () => {
     accoutRulesShow.value = true;
   };
 
   const handleAccountRulesChange = (value: T[]) => {
     selectedList.value = value;
     if (value.length > 0) {
-      rules.value = value.map((item) => item.rules);
+      modelValue.value = value.map((item) => ({
+        user: item.account.user,
+        rules: item.rules,
+      }));
     }
   };
 
@@ -95,19 +108,14 @@
   };
 
   watch(
-    () => [user.value, rules.value],
+    modelValue,
     () => {
-      if (rules.value.length === 0) {
-        return;
-      }
-      selectedList.value = [
-        {
-          account: {
-            user: user.value,
-          },
-          rules: rules.value[0],
+      selectedList.value = modelValue.value.map((item) => ({
+        account: {
+          user: item.user,
         },
-      ];
+        rules: item.rules,
+      })) as T[];
     },
     {
       immediate: true,

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/db-form/Mongo.vue

@@ -11,9 +11,9 @@
       :cluster-types="clusterTypes"
       :data="selected" />
     <PermissionRules
-      v-model:rules="formData.rules"
-      v-model:user="formData.user"
-      :account-type="accountType" />
+      v-model="formData.mongo_users"
+      :account-type="accountType"
+      property="mongo_users" />
   </DbForm>
 </template>
 
@@ -63,15 +63,18 @@
   const formRef = ref();
   const formData = reactive({
     target_instances: [] as string[],
-    user: '',
-    rules: [] as PermissionRule['rules'][],
+    mongo_users: [] as { user: string; rules: PermissionRule['rules'] }[],
   });
 
   watch(
     () => [props.user, props.rules],
     () => {
-      formData.user = props.user;
-      formData.rules = [props.rules];
+      formData.mongo_users = [
+        {
+          user: props.user,
+          rules: props.rules,
+        },
+      ];
     },
     {
       immediate: true,
@@ -86,9 +89,9 @@
         params: {
           target_instances: formData.target_instances,
           cluster_type: targetInstancesRef.value!.getClusterType(),
-          mongo_users: formData.rules.map((rule) => ({
-            user: formData.user,
-            access_dbs: rule.map((mapItem) => mapItem.access_db),
+          mongo_users: formData.mongo_users.map((item) => ({
+            user: item.user,
+            access_dbs: item.rules.map((rule) => rule.access_db),
           })),
         },
       };

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/db-form/Sqlserver.vue

@@ -11,9 +11,9 @@
       :cluster-types="clusterTypes"
       :data="selected" />
     <PermissionRules
-      v-model:rules="formData.rules"
-      v-model:user="formData.user"
-      :account-type="accountType" />
+      v-model="formData.sqlserver_users"
+      :account-type="accountType"
+      property="sqlserver_users" />
   </DbForm>
 </template>
 
@@ -63,15 +63,18 @@
   const formRef = ref();
   const formData = reactive({
     target_instances: [] as string[],
-    user: '',
-    rules: [] as PermissionRule['rules'][],
+    sqlserver_users: [] as { user: string; rules: PermissionRule['rules'] }[],
   });
 
   watch(
     () => [props.user, props.rules],
     () => {
-      formData.user = props.user;
-      formData.rules = [props.rules];
+      formData.sqlserver_users = [
+        {
+          user: props.user,
+          rules: props.rules,
+        },
+      ];
     },
     {
       immediate: true,
@@ -86,9 +89,9 @@
         params: {
           target_instances: formData.target_instances,
           cluster_type: targetInstancesRef.value!.getClusterType(),
-          sqlserver_users: formData.rules.map((rule) => ({
-            user: formData.user,
-            access_dbs: rule.map((mapItem) => mapItem.access_db),
+          sqlserver_users: formData.sqlserver_users.map((item) => ({
+            user: item.user,
+            access_dbs: item.rules.map((rule) => rule.access_db),
           })),
         },
       };