feat: Support folder authorization(#3853)

ui/src/components/resource-authorization-drawer/index.vue

@@ -122,22 +122,29 @@
     <!-- 单个资源授权提示框 -->
     <el-dialog
       v-model="singleSelectDialogVisible"
-      :title="$t('views.system.resourceAuthorization.setting.configure')"
+      :title="$t('views.system.resourceAuthorization.setting.effectiveResource')"
       destroy-on-close
       @close="closeSingleSelectDialog"
+      width="500px"
     >
       <el-radio-group v-model="authAllChildren" class="radio-block">
-      <el-radio :value="false">
-        <p class="color-text-primary lighter">{{ $t('views.system.resourceAuthorization.setting.currentOnly') }}</p>
-      </el-radio>
-      <el-radio :value="true">
-        <p class="color-text-primary lighter">{{ $t('views.system.resourceAuthorization.setting.includeAll') }}</p>
-      </el-radio>
+        <el-radio :value="false">
+          <p class="color-text-primary lighter">
+            {{ $t('views.system.resourceAuthorization.setting.currentOnly') }}
+          </p>
+        </el-radio>
+        <el-radio :value="true">
+          <p class="color-text-primary lighter">
+            {{ $t('views.system.resourceAuthorization.setting.includeAll') }}
+          </p>
+        </el-radio>
       </el-radio-group>
       <template #footer>
         <div class="dialog-footer mt-24">
           <el-button @click="closeSingleSelectDialog">{{ $t('common.cancel') }}</el-button>
-          <el-button type="primary" @click="confirmSinglePermission">{{ $t('common.confirm') }}</el-button>
+          <el-button type="primary" @click="confirmSinglePermission">{{
+            $t('common.confirm')
+          }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -148,6 +155,7 @@
       :title="$t('views.system.resourceAuthorization.setting.configure')"
       destroy-on-close
       @close="closeDialog"
+      width="500px"
     >
       <el-radio-group v-model="radioPermission" class="radio-block">
         <template v-for="(item, index) in getFolderPermissionOptions()" :key="index">
@@ -160,15 +168,21 @@
       <!-- 如果是文件夹，显示子资源选项 -->
       <div v-if="isFolder" class="mt-16">
         <el-divider />
-    <div class="color-text-primary mb-8">{{ $t('views.system.resourceAuthorization.setting.effectiveResource') }}</div>
-    <el-radio-group v-model="batchAuthAllChildren" class="radio-block">
-      <el-radio :value="false">
-        <p class="color-text-primary lighter">{{ $t('views.system.resourceAuthorization.setting.currentOnly') }}</p>
-      </el-radio>
-      <el-radio :value="true">
-        <p class="color-text-primary lighter">{{ $t('views.system.resourceAuthorization.setting.includeAll') }}</p>
-      </el-radio>
-    </el-radio-group>
+        <div class="color-text-primary mb-8">
+          {{ $t('views.system.resourceAuthorization.setting.effectiveResource') }}
+        </div>
+        <el-radio-group v-model="batchAuthAllChildren" class="radio-block">
+          <el-radio :value="false">
+            <p class="color-text-primary lighter">
+              {{ $t('views.system.resourceAuthorization.setting.currentOnly') }}
+            </p>
+          </el-radio>
+          <el-radio :value="true">
+            <p class="color-text-primary lighter">
+              {{ $t('views.system.resourceAuthorization.setting.includeAll') }}
+            </p>
+          </el-radio>
+        </el-radio-group>
       </div>
       <template #footer>
         <div class="dialog-footer mt-24">
@@ -211,14 +225,13 @@ const apiType = computed(() => {
 const folderType = computed(() => {
   if (route.path.includes('application')) {
     return 'application'
-  }
-  else if (route.path.includes('knowledge')) {
+  } else if (route.path.includes('knowledge')) {
     return 'knowledge'
-  }
-  else if (route.path.includes('tool')) {
+  } else if (route.path.includes('tool')) {
     return 'tool'
+  } else {
+    return 'application'
   }
-  else {return 'application'}
 })
 
 const permissionPrecise = computed(() => {
@@ -228,14 +241,16 @@ const permissionPrecise = computed(() => {
 // 取出文件夹id
 function getAllFolderIds(data: any) {
   if (!data) return []
-  return [data.id,...(data.children?.flatMap((child: any) => getAllFolderIds(child)) || [])]
+  return [data.id, ...(data.children?.flatMap((child: any) => getAllFolderIds(child)) || [])]
 }
 
 const RESOURCE_PERMISSION_MAP = {
-  application: PermissionConst.APPLICATION_RESOURCE_AUTHORIZATION.getWorkspacePermissionWorkspaceManageRole,
-  knowledge: PermissionConst.KNOWLEDGE_RESOURCE_AUTHORIZATION.getWorkspacePermissionWorkspaceManageRole,
+  application:
+    PermissionConst.APPLICATION_RESOURCE_AUTHORIZATION.getWorkspacePermissionWorkspaceManageRole,
+  knowledge:
+    PermissionConst.KNOWLEDGE_RESOURCE_AUTHORIZATION.getWorkspacePermissionWorkspaceManageRole,
   tool: PermissionConst.TOOL_RESOURCE_AUTHORIZATION.getWorkspacePermissionWorkspaceManageRole,
-} 
+}
 
 const resourceAuthorizationOfManager = computed(() => {
   return RESOURCE_PERMISSION_MAP[folderType.value]
@@ -243,18 +258,16 @@ const resourceAuthorizationOfManager = computed(() => {
 
 // 过滤没有Manage权限的文件夹ID
 function filterHasPermissionFolderIds(folderIds: string[]) {
-  if (hasPermission(
-    [
-      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
-      resourceAuthorizationOfManager.value
-    ],'OR'
-  )) {
+  if (
+    hasPermission(
+      [RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, resourceAuthorizationOfManager.value],
+      'OR',
+    )
+  ) {
     return folderIds
+  } else {
+    return folderIds.filter((id) => permissionPrecise.value.folderManage(id))
   }
-  else {
-    return folderIds.filter(id => permissionPrecise.value.folderManage(id))
-  }
-  
 }
 
 function confirmSinglePermission() {
@@ -270,7 +283,7 @@ function confirmSinglePermission() {
       user_id: row.id,
       permission: val,
       include_children: authAllChildren.value,
-      ...(folderIds.length > 0 && {folder_ids: folderIds})
+      ...(folderIds.length > 0 && { folder_ids: folderIds }),
     },
   ]
   submitPermissions(obj)
@@ -354,7 +367,7 @@ const handleSelectionChange = (val: any[]) => {
 
 const dialogVisible = ref(false)
 const singleSelectDialogVisible = ref(false)
-const pendingPermissionChange = ref<{ val: any; row: any; } | null>(null)
+const pendingPermissionChange = ref<{ val: any; row: any } | null>(null)
 const radioPermission = ref('')
 const authAllChildren = ref(false)
 function openMulConfigureDialog() {
@@ -379,7 +392,7 @@ function submitDialog() {
     user_id: item.id,
     permission: radioPermission.value,
     include_children: batchAuthAllChildren.value,
-    ...(folderIds.length > 0 && { folder_ids: folderIds })
+    ...(folderIds.length > 0 && { folder_ids: folderIds }),
   }))
   submitPermissions(obj)
   closeDialog()
@@ -403,7 +416,7 @@ function closeDialog() {
 function permissionsHandle(val: any, row: any) {
   if (props.isFolder) {
     singleSelectDialogVisible.value = true
-    pendingPermissionChange.value = {val, row}
+    pendingPermissionChange.value = { val, row }
     return
   }
   const obj = [
@@ -415,7 +428,7 @@ function permissionsHandle(val: any, row: any) {
   submitPermissions(obj)
 }
 
-function submitPermissions( obj: any) {
+function submitPermissions(obj: any) {
   const workspaceId = user.getWorkspaceId() || 'default'
   loadSharedApi({ type: 'resourceAuthorization', systemType: apiType.value })
     .putResourceAuthorization(workspaceId, targetId.value, props.type, obj, loading)
@@ -440,12 +453,13 @@ const getPermissionList = () => {
       loading,
     )
     .then((res: any) => {
-      permissionData.value = res.data.records.map((item: any) => {
-        if (props.isRootFolder && item.permission === 'NOT_AUTH') {
-          return {...item, permission: 'VIEW'}
-        }
-        return item
-      }) || []
+      permissionData.value =
+        res.data.records.map((item: any) => {
+          if (props.isRootFolder && item.permission === 'NOT_AUTH') {
+            return { ...item, permission: 'VIEW' }
+          }
+          return item
+        }) || []
       paginationConfig.total = res.data.total || 0
     })
 }

ui/src/views/system/resource-authorization/component/PermissionSetting.vue

@@ -1,288 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex-between mb-16">
-      <div
-        class="flex align-center"
-        v-if="hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')"
-      >
-        <!-- 企业版: 选优先级-->
-        <span class="lighter mr-16">{{
-          $t('views.system.resourceAuthorization.priority.label')
-        }}</span>
-        <el-radio-group v-model="radioRole">
-          <el-radio :value="true" size="large"
-            >{{ $t('views.system.resourceAuthorization.priority.role') }}
-          </el-radio>
-          <el-radio :value="false" size="large">{{ $t('common.custom') }}</el-radio>
-        </el-radio-group>
-      </div>
-      <el-input
-        v-model="filterText"
-        :placeholder="$t('common.search')"
-        prefix-icon="Search"
-        class="mt-4"
-        :class="hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR') ? 'w-240' : ''"
-        clearable
-      />
-    </div>
-
-    <el-table
-      row-key="id"
-      :data="filterData"
-      :max-height="tableHeight"
-      :expand-row-keys="defaultExpandKeys"
-      style="width: 100%"
-    >
-      <el-table-column class-name="folder-flex" prop="name" :label="$t('common.name')">
-        <template #default="{ row }">
-          <div class="flex align-center">
-            <!-- 文件夹 icon -->
-            <el-avatar
-              v-if="row.isFolder"
-              class="mr-12"
-              shape="square"
-              :size="20"
-              style="background: none"
-            >
-              <img
-                src="@/assets/knowledge/icon_file-folder_colorful.svg"
-                style="width: 100%"
-                alt=""
-              />
-            </el-avatar>
-            <!--  知识库 icon -->
-            <KnowledgeIcon class="mr-12" :size="20" v-else-if="isKnowledge" :type="row.icon" />
-            <!--  应用/工具 自定义 icon -->
-            <el-avatar
-              v-else-if="isAppIcon(row?.icon) && !isModel"
-              style="background: none"
-              class="mr-12"
-              shape="square"
-              :size="20"
-            >
-              <img :src="resetUrl(row?.icon)" alt="" />
-            </el-avatar>
-            <!--  应用 icon -->
-            <LogoIcon v-else-if="isApplication" height="20px" class="mr-12" />
-            <!-- 工具 icon -->
-            <el-avatar v-else-if="isTool" class="avatar-green mr-12" shape="square" :size="20">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
-            </el-avatar>
-            <!-- 模型 icon -->
-            <span
-              v-else-if="isModel"
-              style="width: 24px; height: 24px; display: inline-block"
-              class="mr-12"
-              :innerHTML="getProviderIcon(row)"
-            ></span>
-            <span :title="row?.name">
-              {{ row?.name }}
-            </span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="isRole"
-        :label="$t('views.system.resourceAuthorization.setting.authorization')"
-        align="center"
-        width="100"
-      >
-        <!-- <template #header>
-          <el-checkbox
-            :disabled="props.manage"
-            v-model="allChecked[AuthorizationEnum.MANAGE]"
-            :indeterminate="allIndeterminate[AuthorizationEnum.MANAGE]"
-            :label="$t('views.system.resourceAuthorization.setting.management')"
-          />
-        </template> -->
-        <template #default="{ row }">
-          <el-checkbox
-            v-if="row.isFolder"
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.ROLE]"
-            :indeterminate="row.permissionHalf[AuthorizationEnum.ROLE]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.ROLE, row, e)"
-          />
-          <el-checkbox
-            v-else
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.ROLE]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.ROLE, row, e)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="!isRole"
-        :label="$t('views.system.resourceAuthorization.setting.management')"
-        align="center"
-        width="100"
-      >
-        <!-- <template #header>
-          <el-checkbox
-            :disabled="props.manage"
-            v-model="allChecked[AuthorizationEnum.MANAGE]"
-            :indeterminate="allIndeterminate[AuthorizationEnum.MANAGE]"
-            :label="$t('views.system.resourceAuthorization.setting.management')"
-          />
-        </template> -->
-        <template #default="{ row }">
-          <el-checkbox
-            v-if="row.isFolder"
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.MANAGE]"
-            :indeterminate="row.permissionHalf[AuthorizationEnum.MANAGE]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.MANAGE, row, e)"
-          />
-          <el-checkbox
-            v-else
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.MANAGE]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.MANAGE, row, e)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="!isRole"
-        :label="$t('views.system.resourceAuthorization.setting.check')"
-        align="center"
-        width="100"
-      >
-        <!-- <template #header>
-          <el-checkbox
-            :disabled="props.manage"
-            v-model="allChecked[AuthorizationEnum.VIEW]"
-            :indeterminate="allIndeterminate[AuthorizationEnum.VIEW]"
-            :label="$t('views.system.resourceAuthorization.setting.check')"
-          />
-        </template> -->
-        <template #default="{ row }">
-          <el-checkbox
-            v-if="row.isFolder"
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.VIEW]"
-            :indeterminate="row.permissionHalf[AuthorizationEnum.VIEW]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.VIEW, row, e)"
-          />
-          <el-checkbox
-            v-else
-            :disabled="props.manage"
-            v-model="row.permission[AuthorizationEnum.VIEW]"
-            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.VIEW, row, e)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue'
-import type { Provider } from '@/api/type/model'
-import { AuthorizationEnum } from '@/enums/system'
-import { SourceTypeEnum } from '@/enums/common'
-import { isAppIcon, resetUrl } from '@/utils/common'
-import { EditionConst } from '@/utils/permission/data'
-import { hasPermission } from '@/utils/permission/index'
-import useStore from '@/stores'
-
-const { model } = useStore()
-const props = defineProps({
-  data: {
-    type: Array<any>,
-    default: () => [],
-  },
-  id: String,
-  type: String,
-  tableHeight: Number,
-  manage: Boolean,
-  isRole: Boolean,
-})
-const emit = defineEmits(['update:data', 'refreshData', 'update:isRole'])
-const radioRole = computed({
-  get: () => props.isRole,
-  set: (v: boolean) => {
-    emit('update:isRole', v)
-  },
-})
-const isKnowledge = computed(() => props.type === SourceTypeEnum.KNOWLEDGE)
-const isApplication = computed(() => props.type === SourceTypeEnum.APPLICATION)
-const isTool = computed(() => props.type === SourceTypeEnum.TOOL)
-const isModel = computed(() => props.type === SourceTypeEnum.MODEL)
-const defaultExpandKeys = computed(() => (props.data?.length > 0 ? [props.data[0]?.id] : []))
-const dfsPermission = (arr: any = [], Name: string | number, e: boolean, idArr: any[]) => {
-  arr.map((item: any) => {
-    if (idArr.includes(item.id)) {
-      item.permission[Name] = e
-      if (Name === AuthorizationEnum.MANAGE && e) {
-        item.permission[AuthorizationEnum.VIEW] = true
-      } else if (Name === AuthorizationEnum.VIEW && !e) {
-        item.permission[AuthorizationEnum.MANAGE] = false
-      }
-    }
-
-    if (item.children?.length) {
-      dfsPermission(
-        item.children,
-        Name,
-        e,
-        idArr.includes(item.id) ? item.children.map((ele: any) => ele.id) : idArr,
-      )
-    }
-  })
-}
-
-const filterText = ref('')
-
-const filterData = computed(() => {
-  function filterTree(data: any[]): any[] {
-    return data
-      .map((item) => {
-        // 递归过滤 children
-        const children = item.children ? filterTree(item.children) : []
-        // 判断当前节点或其子节点是否匹配
-        const isMatch = item.name.toLowerCase().includes(filterText.value.toLowerCase())
-        if (isMatch || children.length) {
-          return {
-            ...item,
-            children: children.length ? children : undefined,
-          }
-        }
-        return null
-      })
-      .filter(Boolean)
-  }
-
-  return filterTree(props.data)
-})
-
-function checkedOperateChange(Name: string | number, row: any, e: boolean) {
-  dfsPermission(props.data, Name, e, [row.id])
-  emit('refreshData')
-}
-
-const provider_list = ref<Array<Provider>>([])
-
-function getProvider() {
-  model.asyncGetProvider().then((res: any) => {
-    provider_list.value = res?.data
-  })
-}
-
-const getProviderIcon = computed(() => {
-  return (row: any) => {
-    return provider_list.value.find((p) => p.provider === row.icon)?.icon
-  }
-})
-onMounted(() => {
-  if (isModel.value) {
-    getProvider()
-  }
-})
-</script>
-<style lang="scss" scoped>
-:deep(.folder-flex) {
-  .cell {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

ui/src/views/system/resource-authorization/component/PermissionTable.vue

@@ -43,7 +43,7 @@
             collapse-tags-tooltip
             style="width: 220px"
           >
-            <template v-for="(item, index) in permissionOptions" :key="index">
+            <template v-for="(item, index) in getPermissionOptions()" :key="index">
               <el-option :label="item.label" :value="item.value" />
             </template>
           </el-select>
@@ -58,11 +58,13 @@
         :maxTableHeight="260"
         :row-key="(row: any) => row.id"
         :expand-row-keys="defaultExpandKeys"
+        style="min-width: 600px"
+        show-overflow-tooltip
       >
         <el-table-column type="selection" width="55" :reserve-selection="true" />
         <el-table-column prop="name" :label="$t('common.name')">
           <template #default="{ row }">
-            <el-space :size="8">
+            <span style="vertical-align: sub">
               <!--  文件夹 icon -->
               <AppIcon
                 v-if="row.resource_type === 'folder'"
@@ -90,10 +92,8 @@
                 style="width: 20px; height: 20px; display: inline-block"
                 :innerHTML="getProviderIcon(row)"
               ></span>
-              <span :title="row?.name" class="ellipsis-1">
-                {{ row?.name }}
-              </span>
-            </el-space>
+            </span>
+            {{ row?.name }}
           </template>
         </el-table-column>
         <el-table-column :label="$t('views.model.modelForm.permissionType.label')" align="left">
@@ -157,26 +157,24 @@ const props = defineProps<{
 const emit = defineEmits(['submitPermissions'])
 
 const defaultExpandKeys = computed(() => {
-    const searchName = searchForm.value.name || ''
+  const searchName = searchForm.value.name || ''
   const searchPermissions = searchForm.value.permission ?? []
   if (!searchName && (!searchPermissions || searchPermissions.length === 0)) {
-      return (props.data?.length > 0 ? [props.data[0]?.id] : [])
-    }
+    return props.data?.length > 0 ? [props.data[0]?.id] : []
+  }
   const expandIds: string[] = []
   // 传入过滤后的数据
   const collectExpandIds = (nodes: any[]) => {
-    nodes.forEach(
-      node => {
-        if (node.children && node.children.length > 0) {
-          expandIds.push(node.id)
-          collectExpandIds(node.children)
-        }
-      })
+    nodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        expandIds.push(node.id)
+        collectExpandIds(node.children)
+      }
+    })
   }
   collectExpandIds(filteredData.value)
   return expandIds
-}
-  )
+})
 
 const permissionOptionMap = computed(() => {
   return {
@@ -199,7 +197,17 @@ const getRowPermissionOptions = (row: any) => {
 }
 
 const permissionOptions = computed(() => {
-  return getPermissionOptions()
+  if (
+    multipleSelection.value.some(
+      (item) => item.resource_type === 'folder' && item.folder_id == null,
+    )
+  ) {
+    return permissionOptionMap.value.rootFolder
+  } else if (multipleSelection.value.some((item) => item.resource_type === 'folder')) {
+    return permissionOptionMap.value.folder
+  } else {
+    return permissionOptionMap.value.resource
+  }
 })
 const permissionObj = ref<any>({
   APPLICATION: new ComplexPermission(
@@ -259,19 +267,6 @@ const search_type_change = () => {
   searchForm.value = { name: '', permission: undefined }
 }
 
-const paginationConfig = reactive({
-  current_page: 1,
-  page_size: 20,
-  total: 0,
-})
-
-function handleSizeChange() {
-  paginationConfig.current_page = 1
-  if (props.getData) {
-    props.getData()
-  }
-}
-
 const filterTreeData = () => {
   const searchName = searchForm.value.name || ''
   const searchPermissions = searchForm.value.permission ?? []
@@ -313,7 +308,6 @@ const filteredData = computed(() => {
   return filterTreeData()
 })
 
-
 const multipleSelection = ref<any[]>([])
 
 const handleSelectionChange = (val: any[]) => {
@@ -375,7 +369,6 @@ onMounted(() => {
 })
 
 defineExpose({
-  // paginationConfig,
   searchForm,
   searchType,
 })