Merge pull request #1124 from Carlmac/fix-perm-search

fix(permission/app): 修复授权记录搜索过滤问题&修复插件配置按钮难点击的问题
TencentBlueKing · Nov 21, 2024 · 6b6810d · 6b6810d
2 parents 9a40ee3 + b335790
commit 6b6810d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1672,6 +1672,7 @@ const lang: ILANG = {
   '待发布（{version}）': ['To Be Published({version})'],
   '删除操作无法撤回，请谨慎操作': ['Deletion can\'t be reverted, please be cautious'],
   '默认分类': ['Default'],
+  '请选择有效的资源名称': ['Please choose a valid resource name'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

diff --git a/src/dashboard-front/src/views/components/plugin-manage/index.vue b/src/dashboard-front/src/views/components/plugin-manage/index.vue
@@ -21,16 +21,10 @@
           v-model="activeIndex"
           class="binding-plugins mt20">
           <template #title="slotProps">
-            <span class="f15" @mouseenter="handleTitleHover(slotProps)" @mouseleave="handleTitleLeave">
+            <span class="f15">
               {{ slotProps.name }}
-              <span
-                class="icon apigateway-icon icon-ag-edit-line ml5 mr5 " @click.stop="handleEditePlugin(slotProps)"
-                v-if="slotProps.name === curHoverHead">
-              </span>
-              <span
-                class="icon apigateway-icon icon-ag-delet " @click.stop="handleDeletePlugin(slotProps)"
-                v-if="slotProps.name === curHoverHead">
-              </span>
+              <AgIcon class="ml5 mr5" name="edit-line" size="15" @click.stop="handleEditePlugin(slotProps)" />
+              <AgIcon class="ml5 mr5" name="delet" size="15" @click.stop="handleDeletePlugin(slotProps)" />
             </span>
           </template>
           <template #content="slotProps">
@@ -241,6 +235,7 @@ import {
 } from '@/http';
 import ConfigDisplayTable from '@/views/components/plugin-manage/config-display-table.vue';
 import pluginIconList from '@/common/plugin-icon-list';
+import AgIcon from '@/components/ag-icon.vue';
 
 const props = defineProps({
   resourceId: {
@@ -256,22 +251,21 @@ const router = useRouter();
 const common = useCommon();
 
 const { apigwId } = common; // 网关id
-const scopeType = ref<string>('');
-const scopeId = ref<number>(-1);
+const scopeType = ref('');
+const scopeId = ref(-1);
 const isBindingListLoading = ref(false);
 const isPluginListLoading = ref(false);
 const isVisible = ref(false);
-const curType = ref<string>('');
+const curType = ref('');
 const isEditVisible = ref(false);
 const isAddSuccess = ref(false);
-const searchValue = ref<string>('');
+const searchValue = ref('');
 const pluginListDate = ref([]);
 const curBindingScopeData = ref<any>({});
-const curHover = ref<string>('');
-const curHoverHead = ref<string>('');
+const curHover = ref('');
 const curBindingPlugins = ref<any>([]);
 const curChoosePlugin = ref(null);
-const curChooseCode = ref<string>('');
+const curChooseCode = ref('');
 const curEditPlugin = ref<any>({});
 const curScopeInfo = reactive({
   scopeType: '',
@@ -387,14 +381,6 @@ const handlScopeLeave = () => {
   curHover.value = '';
 };
 
-// hover 已绑插件的title
-const handleTitleHover = (data: any) => {
-  curHoverHead.value = data.name;
-};
-const handleTitleLeave = () => {
-  curHoverHead.value = '';
-};
-
 const handleClearFilterKey = () => {
   searchValue.value = '';
   // handleSearch();

diff --git a/src/dashboard-front/src/views/permission/app/index.vue b/src/dashboard-front/src/views/permission/app/index.vue
@@ -423,6 +423,7 @@ import {
   IFilterParams,
 } from '@/http/permission';
 import dayjs from 'dayjs';
+import { ISearchItem } from 'bkui-vue/lib/search-select/utils';
 
 const { t } = useI18n();
 const common = useCommon();
@@ -575,7 +576,7 @@ const exportParams = ref<IExportParams>({
 
 const filterValues = ref<IFilterValues[]>([]);
 const componentKey = ref(0);
-const filterConditions = ref([
+const filterConditions = ref<ISearchItem[]>([
   {
     name: t('授权维度'),
     id: 'grant_dimension',
@@ -627,25 +628,42 @@ const selectedApiPermList = computed(() => curSelections.value.filter(perm => pe
 
 // 监听搜索是否变化
 watch(
-  () => filterValues.value,
-  (v) => {
+  filterValues,
+  () => {
     resetSelections();
+    // 当前有资源名称过滤，且过滤值不在资源列表中，则删除该过滤条件
+    const resourceIdFilterIndex = filterValues.value.findIndex(filter => filter.id === 'resource_id');
+
+    if (resourceIdFilterIndex > -1) {
+      const resourceId = filterValues.value[resourceIdFilterIndex].values[0].id as string;
+      const validResourceIds = filterConditions.value
+        .find(condition => condition.id === 'resource_id').children
+        .map(option => option.id);
+      if (!validResourceIds.includes(resourceId)) {
+        filterValues.value.splice(resourceIdFilterIndex, 1);
+        Message({
+          theme: 'warning',
+          message: t('请选择有效的资源名称'),
+        });
+      }
+    }
+
     filterData.value = {};
     let isEmpty = false;
-    if (v) {
+    if (filterValues.value) {
       // 把纯文本搜索项转换成查询参数
-      const textItem = v.find(val => val.type === 'text');
+      const textItem = filterValues.value.find(val => val.type === 'text');
 
       if (textItem) {
         filterData.value.keyword = textItem.name || '';
       }
 
-      v.forEach((item) => {
+      filterValues.value.forEach((item) => {
         if (item.values) {
           filterData.value[item.id] = item.values[0].id;
         }
       });
-      isEmpty = v.length === 0;
+      isEmpty = filterValues.value.length === 0;
     }
     exportDropData.value.forEach((e: IDropList) => {
       // 已选资源
@@ -717,7 +735,7 @@ const getApigwResources = async () => {
   }));
   resourceList.value = sortByKey(results, 'name');
   resourceIdOption.children = resourceList.value.map(item => ({
-    id: item.id,
+    id: String(item.id),
     name: item.name,
   }));
   componentKey.value += 1;