feat(frontend): 权限查询页 TencentBlueKing#6905

dbm-ui/frontend/src/views/permission-retrieve/Index.vue

@@ -19,9 +19,8 @@
       <Options
         ref="optionsRef"
         class="ml-8"
-        :loading
-        @reset="handleReset"
-        @search="handleSearch" />
+        :loading="loading"
+        @change="handleOptionsChange" />
     </BkCard>
     <BkCard
       class="mt-16"
@@ -30,21 +29,15 @@
       <Result
         ref="resultRef"
         class="ml-8"
-        :data="data"
-        :db-memo="dbMemo"
-        :is-master="isMaster"
-        :loading="loading"
-        @export="handleExport"
-        @search="handleSearch" />
+        :options="options"
+        @loading-change="handleLoadingChange" />
     </BkCard>
   </div>
 </template>
 
 <script setup lang="tsx">
+  import type { ComponentEmit } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { getAccountPrivs, getDownloadPrivs } from '@services/source/mysqlPermissionAccount';
 
   import Options from './components/options/Index.vue';
   import Result from './components/result/Index.vue';
@@ -53,65 +46,16 @@
 
   const optionsRef = ref<InstanceType<typeof Options>>();
   const resultRef = ref<InstanceType<typeof Result>>();
-  const isMaster = ref(true);
-
-  const dbMemo = shallowRef<string>('');
-
-  const {
-    run: runGetAccountPrivs,
-    data,
-    mutate,
-    loading,
-  } = useRequest(getAccountPrivs, {
-    manual: true,
-    onError() {
-      mutate({
-        match_ips_count: 0,
-        results: {
-          privs_for_ip: null,
-          privs_for_cluster: null,
-          has_priv: null,
-          no_priv: null,
-        },
-      });
-    },
-  });
+  const loading = ref<boolean>(false);
 
-  const getApiParams = (pagination = false) => {
-    const params = {
-      ...optionsRef.value!.getValues(),
-      ...resultRef.value!.getValues(pagination),
-    };
-    dbMemo.value = params.dbs || '';
-    isMaster.value = params.is_master!;
-
-    delete params.is_master;
-
-    return params;
-  };
-
-  const handleSearch = () => {
-    optionsRef.value!.validate().then(() => {
-      runGetAccountPrivs(getApiParams(true));
-    });
-  };
+  const options = shallowRef<Parameters<ComponentEmit<typeof Options>>[1]>();
 
-  const handleReset = () => {
-    resultRef.value!.reset();
-    dbMemo.value = '';
-    mutate({
-      match_ips_count: 0,
-      results: {
-        privs_for_ip: null,
-        privs_for_cluster: null,
-        has_priv: null,
-        no_priv: null,
-      },
-    });
+  const handleOptionsChange = (value: Parameters<ComponentEmit<typeof Options>>[1]) => {
+    options.value = value;
   };
 
-  const handleExport = () => {
-    getDownloadPrivs(getApiParams());
+  const handleLoadingChange = (value: boolean) => {
+    loading.value = value;
   };
 </script>
 

dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue

@@ -62,21 +62,18 @@
   }
 
   interface Emits {
-    (e: 'search'): void;
-    (e: 'reset'): void;
-  }
-
-  interface Expose {
-    getValues: () => {
-      ips: string;
-      immute_domains: string;
-      users: string;
-      cluster_type: ClusterTypes;
-      account_type: AccountTypes;
-      dbs?: string;
-      is_master?: boolean;
-    };
-    validate: () => ReturnType<ComponentExposed<typeof Form>['validate']>;
+    (
+      e: 'change',
+      params?: {
+        ips: string;
+        immute_domains: string;
+        users: string;
+        dbs: string;
+        cluster_type: ClusterTypes;
+        account_type: AccountTypes;
+        is_master: boolean;
+      },
+    ): void;
   }
 
   defineProps<Props>();
@@ -118,37 +115,24 @@
 
   const handleSearch = () => {
     formRef.value!.validate().then(() => {
-      emits('search');
-    });
-  };
-
-  const handleReset = () => {
-    domainItemRef.value!.reset();
-    Object.assign(formData, getDefaultFormData());
-    emits('reset');
-  };
-
-  defineExpose<Expose>({
-    getValues() {
       const params = {
         ips: formData.ips.replace(batchSplitRegex, ','),
         immute_domains: formData.immute_domains.replace(batchSplitRegex, ','),
         users: formData.users.join(','),
+        dbs: formData.dbs.join(','),
         cluster_type: domainItemRef.value!.getClusterType(),
         account_type: accountType as AccountTypes,
         is_master: domainItemRef.value!.isMaster(),
       };
+      emits('change', params);
+    });
+  };
 
-      if (formData.dbs.length) {
-        return Object.assign(params, { dbs: formData.dbs.join(',') });
-      }
-
-      return params;
-    },
-    validate() {
-      return formRef.value!.validate();
-    },
-  });
+  const handleReset = () => {
+    domainItemRef.value!.reset();
+    Object.assign(formData, getDefaultFormData());
+    emits('change');
+  };
 </script>
 
 <style lang="less">

dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue

@@ -16,6 +16,7 @@
     <ReusltHead
       v-model="formatType"
       :data="data"
+      :loading="loading"
       @export="handleExport"
       @search="handleSearch" />
     <BkLoading
@@ -35,33 +36,32 @@
 </template>
 
 <script setup lang="tsx">
-  import { getAccountPrivs } from '@services/source/mysqlPermissionAccount';
+  import { useRequest } from 'vue-request';
+
+  import { getAccountPrivs, getDownloadPrivs } from '@services/source/mysqlPermissionAccount';
 
   import { useTableMaxHeight } from '@hooks';
 
+  import { AccountTypes, ClusterTypes } from '@common/const';
+
   import ReusltHead from './components/head/Index.vue';
   import DomainTable from './components/table/DomainTable.vue';
   import IpTable from './components/table/IpTable.vue';
 
   interface Props {
-    data?: ServiceReturnType<typeof getAccountPrivs>;
-    isMaster: boolean;
-    dbMemo: string;
-    loading: boolean;
+    options?: {
+      ips: string;
+      immute_domains: string;
+      users: string;
+      cluster_type: ClusterTypes;
+      account_type: AccountTypes;
+      dbs?: string;
+      is_master?: boolean;
+    };
   }
 
   interface Emits {
-    (e: 'search'): void;
-    (e: 'export'): void;
-  }
-
-  interface Expose {
-    getValues: (isPagination: boolean) => {
-      format_type: string;
-      limit?: number;
-      offset?: number;
-    };
-    reset: () => void;
+    (e: 'loading-change', value: boolean): void;
   }
 
   const props = defineProps<Props>();
@@ -80,52 +80,100 @@
 
   const tableComponent = computed(() => (formatType.value === 'ip' ? IpTable : DomainTable));
 
+  const dbMemo = computed(() => props.options?.dbs || '');
+  const isMaster = computed(() => !!props.options?.is_master);
+
+  const {
+    run: runGetAccountPrivs,
+    data,
+    mutate,
+    loading,
+  } = useRequest(getAccountPrivs, {
+    manual: true,
+    onError() {
+      mutate({
+        match_ips_count: 0,
+        results: {
+          privs_for_ip: null,
+          privs_for_cluster: null,
+          has_priv: null,
+          no_priv: null,
+        },
+      });
+    },
+  });
+
   watch(
-    () => props.data?.match_ips_count,
+    () => props.options,
     () => {
-      pagination.count = props.data?.match_ips_count ?? 0;
+      if (props.options) {
+        runGetAccountPrivs(getApiParams());
+      } else {
+        mutate({
+          match_ips_count: 0,
+          results: {
+            privs_for_ip: null,
+            privs_for_cluster: null,
+            has_priv: null,
+            no_priv: null,
+          },
+        });
+        formatType.value = 'ip';
+        Object.assign(pagination, {
+          current: 1,
+          count: 0,
+        });
+      }
     },
   );
 
+  watch(data, () => {
+    pagination.count = data.value?.match_ips_count ?? 0;
+  });
+
+  watch(loading, () => {
+    emits('loading-change', loading.value);
+  });
+
+  const getApiParams = (isPagination = true) => {
+    const params = {
+      ...props.options!,
+      format_type: formatType.value,
+    };
+    if (isPagination) {
+      Object.assign(params, {
+        limit: pagination.limit,
+        offset: pagination.limit * (pagination.current - 1),
+      });
+    }
+
+    delete params.is_master;
+    if (!params.dbs) {
+      delete params.dbs;
+    }
+    return params;
+  };
+
+  const handleSearch = () => {
+    if (!props.options) {
+      return;
+    }
+    runGetAccountPrivs(getApiParams());
+  };
+
   const handleTablePageChange = (value: number) => {
     pagination.current = value;
-    emits('search');
+    handleSearch();
   };
 
   const handleTableLimitChange = (value: number) => {
     pagination.limit = value;
     handleTablePageChange(1);
   };
 
-  const handleSearch = () => {
-    emits('search');
-  };
-
   const handleExport = () => {
-    emits('export');
+    getDownloadPrivs(getApiParams(false));
   };
-
-  defineExpose<Expose>({
-    getValues(isPagination: boolean) {
-      const params = {
-        format_type: formatType.value,
-      };
-      if (isPagination) {
-        Object.assign(params, {
-          limit: pagination.limit,
-          offset: pagination.limit * (pagination.current - 1),
-        });
-      }
-      return params;
-    },
-    reset() {
-      formatType.value = 'ip';
-      Object.assign(pagination, {
-        current: 1,
-        count: 0,
-      });
-    },
-  });
 </script>
 
 <style lang="less" scoped>

dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/Index.vue

@@ -42,6 +42,7 @@
       </template>
       <BkRadioGroup
         v-model="formatType"
+        :disabled="loading"
         style="margin-left: auto"
         type="capsule"
         @change="handleFormatTypeChange">
@@ -63,6 +64,7 @@
 
   interface Props {
     data?: ServiceReturnType<typeof getAccountPrivs>;
+    loading: boolean;
   }
   interface Emits {
     (e: 'export'): void;