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

dbm-ui/frontend/src/components/mult-line-text/Index.vue

@@ -27,27 +27,20 @@
   </div>
 </template>
 <script setup lang="ts">
-  import type { Instance, SingleTarget } from 'tippy.js';
   import { nextTick, onBeforeUpdate, onMounted, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import { dbTippy } from '@common/tippy';
-
   interface Props {
     line: number;
     expandable?: boolean;
-    showTooltips?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     expandable: true,
-    showTooltips: false,
   });
 
   const { t } = useI18n();
 
-  let tippyInst: Instance;
-
   const rootRef = ref<HTMLElement>();
   const placeholderRef = ref<HTMLElement>();
   const isMore = ref(false);
@@ -61,9 +54,7 @@
     nextTick(() => {
       const { height: placeholderHeight } = placeholderRef.value!.getBoundingClientRect();
 
-      if (props.expandable) {
-        isShowExpand.value = rootHeight < placeholderHeight;
-      }
+      isShowExpand.value = rootHeight < placeholderHeight;
     });
   };
   let rootHeight = 0;
@@ -74,36 +65,13 @@
     isMore.value = !isMore.value;
   };
 
-  const createTippyInst = () => {
-    if (props.showTooltips) {
-      const { width } = rootRef.value!.getBoundingClientRect();
-      tippyInst = dbTippy(rootRef.value as SingleTarget, {
-        content: placeholderRef.value,
-        appendTo: () => document.body,
-        maxWidth: width,
-        arrow: true,
-        zIndex: 999999,
-      });
-    }
-  };
-
-  const destroyTippyInst = () => {
-    if (tippyInst) {
-      tippyInst.hide();
-      tippyInst.unmount();
-      tippyInst.destroy();
-    }
-  };
-
   onMounted(() => {
     rootHeight = rootRef.value!.getBoundingClientRect().height;
     calcShowExpand();
-    createTippyInst();
   });
 
   onBeforeUpdate(() => {
     calcShowExpand();
-    destroyTippyInst();
   });
 </script>
 <style lang="less">

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

@@ -121,7 +121,9 @@
   };
 
   const handleSearch = () => {
-    runGetAccountPrivs(getApiParams(true));
+    optionsRef.value!.validate().then(() => {
+      runGetAccountPrivs(getApiParams(true));
+    });
   };
 
   const handleReset = () => {

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

@@ -129,6 +129,7 @@
 
 <script setup lang="tsx">
   import { Form } from 'bkui-vue';
+  import type { ComponentExposed } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
@@ -167,6 +168,7 @@
       account_type: AccountTypes;
     };
     getUserList: () => void;
+    validate: () => ReturnType<ComponentExposed<typeof Form>['validate']>;
   }
 
   defineProps<Props>();
@@ -318,7 +320,7 @@
       {},
     );
 
-  const formRef = ref<InstanceType<typeof Form>>();
+  const formRef = ref<ComponentExposed<typeof Form>>();
   const userSelectRef = ref<InstanceType<typeof UserSelect>>();
   const hostSelectorShow = ref(false);
   const clusterSelectorShow = ref(false);
@@ -381,6 +383,9 @@
         });
       });
     },
+    validate() {
+      return formRef.value!.validate();
+    },
   });
 </script>
 

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

@@ -15,7 +15,9 @@
   <div class="permission-retrieve-result">
     <ReusltHead
       v-model="formatType"
-      @download="handleExport" />
+      :data="data"
+      @export="handleExport"
+      @search="handleSearch" />
     <Component
       :is="tableComponent"
       :data="data"
@@ -33,7 +35,7 @@
 
   import { useTableMaxHeight } from '@hooks';
 
-  import ReusltHead from './components/Head.vue';
+  import ReusltHead from './components/head/Index.vue';
   import DomainTable from './components/table/DomainTable.vue';
   import IpTable from './components/table/IpTable.vue';
 
@@ -90,6 +92,10 @@
     handleTablePageChange(1);
   };
 
+  const handleSearch = () => {
+    emits('search');
+  };
+
   const handleExport = () => {
     emits('export');
   };

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

@@ -5,10 +5,7 @@
       <template v-if="privIpMap.noPriv.length">
         ：
         <div class="head-item-ip">
-          <MultLineText
-            :expandable="false"
-            :line="3"
-            show-tooltips>
+          <MultLineText :line="3">
             {{ privIpMap.noPriv.join('，') }}
           </MultLineText>
         </div>
@@ -46,7 +43,8 @@
       <BkRadioGroup
         v-model="formatType"
         style="margin-left: auto"
-        type="capsule">
+        type="capsule"
+        @change="handleFormatTypeChange">
         <BkRadioButton label="ip">{{ t('IP 视角') }}</BkRadioButton>
         <BkRadioButton label="cluster">{{ t('域名视角') }}</BkRadioButton>
       </BkRadioGroup>
@@ -61,13 +59,14 @@
 
   import { useCopy } from '@hooks';
 
-  import MultLineText from '@components/mult-line-text/Index.vue';
+  import MultLineText from './components/MultLineText.vue';
 
   interface Props {
     data?: ServiceReturnType<typeof getAccountPrivs>;
   }
   interface Emits {
     (e: 'export'): void;
+    (e: 'search'): void;
   }
 
   const props = defineProps<Props>();
@@ -98,6 +97,10 @@
     copy(value);
   };
 
+  const handleFormatTypeChange = () => {
+    emits('search');
+  };
+
   const handleExport = () => {
     emits('export');
   };

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="permission-mult-line-text">
+    <div
+      ref="rootRef"
+      class="permission-mult-line-text-wrapper"
+      :style="styles">
+      <slot />
+      <div
+        ref="placeholderRef"
+        class="placeholder">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { Instance, SingleTarget } from 'tippy.js';
+
+  import { dbTippy } from '@common/tippy';
+
+  interface Props {
+    line: number;
+  }
+
+  const props = defineProps<Props>();
+
+  let tippyInst: Instance;
+
+  const rootRef = ref<HTMLElement>();
+  const placeholderRef = ref<HTMLElement>();
+  const isMore = ref(false);
+
+  const styles = computed(() => ({
+    '-webkit-line-clamp': isMore.value ? 'initial' : props.line,
+  }));
+
+  const calcShowExpand = () => {
+    nextTick(() => {
+      const { height: placeholderHeight } = placeholderRef.value!.getBoundingClientRect();
+
+      if (rootHeight < placeholderHeight) {
+        createTippyInst();
+      }
+    });
+  };
+  let rootHeight = 0;
+
+  const createTippyInst = () => {
+    const { width } = rootRef.value!.getBoundingClientRect();
+    tippyInst = dbTippy(rootRef.value as SingleTarget, {
+      content: placeholderRef.value,
+      appendTo: () => document.body,
+      maxWidth: width,
+      arrow: true,
+      zIndex: 999999,
+    });
+  };
+
+  const destroyTippyInst = () => {
+    if (tippyInst) {
+      tippyInst.hide();
+      tippyInst.unmount();
+      tippyInst.destroy();
+    }
+  };
+
+  onMounted(() => {
+    rootHeight = rootRef.value!.getBoundingClientRect().height;
+    calcShowExpand();
+  });
+
+  onBeforeUpdate(() => {
+    destroyTippyInst();
+    calcShowExpand();
+  });
+</script>
+<style lang="less">
+  .permission-mult-line-text {
+    .permission-mult-line-text-wrapper {
+      position: relative;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: v-bind('line');
+    }
+
+    .placeholder {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: -1;
+      word-break: normal;
+    }
+  }
+</style>

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

@@ -220,7 +220,7 @@
                   user: userItem.user,
                   match_ip: matchIpItem.match_ip,
                   match_db: matchDbItem.match_db,
-                  priv: matchDbItem.priv,
+                  priv: matchDbItem.priv.toLocaleLowerCase(),
                   ...ipDb
                 }
               })