PermissionTable.vue

<template>
  <div class="permission-setting p-24 flex">
    <div class="resource-authorization__table">
      <h4 class="mb-16">{{ $t('views.system.resourceAuthorization.permissionSetting') }}</h4>
      <div class="flex-between mb-16">
        <el-button
          type="primary"
          v-if="
            hasPermission(permissionObj[(route.meta?.resource as string) || 'APPLICATION'], 'OR')
          "
          :disabled="multipleSelection.length === 0"
          @click="openMulConfigureDialog"
          >{{ $t('views.system.resourceAuthorization.setting.configure') }}</el-button
        >

        <div class="flex-between complex-search">
          <el-select
            class="complex-search__left"
            v-model="searchType"
            style="width: 80px"
            @change="search_type_change"
          >
            <el-option :label="$t('common.name')" value="name" />
            <el-option
              :label="$t('views.model.modelForm.permissionType.label')"
              value="permission"
            />
          </el-select>
          <el-input
            v-if="searchType === 'name'"
            v-model="searchForm.name"
            :placeholder="$t('common.searchBar.placeholder')"
            style="width: 220px"
            clearable
          />
          <el-select
            v-else-if="searchType === 'permission'"
            v-model="searchForm.permission"
            filterable
            clearable
            multiple
            :reserve-keyword="false"
            collapse-tags
            collapse-tags-tooltip
            style="width: 220px"
          >
            <template v-for="(item, index) in getPermissionOptions()" :key="index">
              <el-option :label="item.label" :value="item.value" />
            </template>
          </el-select>
        </div>
      </div>

      <app-table
        ref="multipleTableRef"
        class="mt-16"
        :data="filteredData"
        @select="select"
        :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 }">
            <span style="vertical-align: sub">
              <!--  文件夹 icon -->
              <AppIcon
                v-if="row.resource_type === 'folder'"
                iconName="app-folder"
                style="font-size: 20px"
              ></AppIcon>
              <!--  知识库 icon -->
              <KnowledgeIcon :size="20" v-else-if="isKnowledge" :type="row.icon" />
              <!--  应用/工具 自定义 icon -->
              <el-avatar
                v-else-if="isAppIcon(row?.icon) && !isModel"
                style="background: none"
                shape="square"
                :size="20"
              >
                <img :src="resetUrl(row?.icon)" alt="" />
              </el-avatar>
              <!--  应用 icon -->
              <LogoIcon v-else-if="isApplication" height="20px" />
              <!-- 工具 icon -->
              <ToolIcon v-else-if="isTool" :size="20" :type="row?.tool_type" />
              <!-- 模型 icon -->
              <span
                v-else-if="isModel"
                style="width: 20px; height: 20px; display: inline-block"
                :innerHTML="getProviderIcon(row)"
              ></span>
            </span>
            {{ row?.name }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('views.model.modelForm.permissionType.label')" align="left">
          <template #default="{ row }">
            <el-radio-group
              v-model="row.permission"
              @change="(val: any) => submitPermissions(val, row)"
            >
              <template v-for="(item, index) in getRowPermissionOptions(row)" :key="index">
                <el-radio :value="item.value" class="mr-16">{{ item.label }}</el-radio>
              </template>
            </el-radio-group>
          </template>
        </el-table-column>
      </app-table>
    </div>

    <!-- 批量配置 弹出层 -->
    <el-dialog
      v-model="dialogVisible"
      :title="$t('views.system.resourceAuthorization.setting.configure')"
      destroy-on-close
      @close="closeDialog"
    >
      <el-radio-group v-model="radioPermission" class="radio-block">
        <template v-for="(item, index) in permissionOptions" :key="index">
          <el-radio :value="item.value" class="mr-16">
            <p class="color-text-primary lighter">{{ item.label }}</p>
            <el-text class="color-secondary lighter">{{ item.desc }}</el-text>
          </el-radio>
        </template>
      </el-radio-group>
      <template #footer>
        <div class="dialog-footer mt-24">
          <el-button @click="closeDialog"> {{ $t('common.cancel') }}</el-button>
          <el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
import type { Provider } from '@/api/type/model'
import { SourceTypeEnum } from '@/enums/common'
import { isAppIcon, resetUrl } from '@/utils/common'
import { RoleConst, PermissionConst } from '@/utils/permission/data'
import { hasPermission } from '@/utils/permission/index'
import { ComplexPermission } from '@/utils/permission/type'
import { getPermissionOptions } from '@/views/system/resource-authorization/constant'
import useStore from '@/stores'
import { TreeToFlatten } from '@/utils/array'

const { model, user } = useStore()
const route = useRoute()
const props = defineProps<{
  data: any[]
  type: string
  getData?: () => void
}>()
const emit = defineEmits(['submitPermissions'])

const defaultExpandKeys = computed(() => {
  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] : []
  }
  const expandIds: string[] = []
  // 传入过滤后的数据
  const collectExpandIds = (nodes: any[]) => {
    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 {
    rootFolder: getPermissionOptions(true, true),
    folder: getPermissionOptions(true, false),
    resource: getPermissionOptions(false, false),
  }
})

const getRowPermissionOptions = (row: any) => {
  const isFolder = row.resource_type === 'folder'
  const isRoot = isFolder && row.folder_id === null
  if (isRoot) {
    return permissionOptionMap.value.rootFolder
  }
  if (isFolder) {
    return permissionOptionMap.value.folder
  }
  return permissionOptionMap.value.resource
}

const permissionOptions = computed(() => {
  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(
    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
    [
      PermissionConst.APPLICATION_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT,
      PermissionConst.APPLICATION_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT
        .getWorkspacePermissionWorkspaceManageRole,
    ],
    [],
    'OR',
  ),
  KNOWLEDGE: new ComplexPermission(
    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
    [
      PermissionConst.KNOWLEDGE_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT,
      PermissionConst.KNOWLEDGE_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT
        .getWorkspacePermissionWorkspaceManageRole,
    ],
    [],
    'OR',
  ),
  TOOL: new ComplexPermission(
    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
    [
      PermissionConst.TOOL_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT,
      PermissionConst.TOOL_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT
        .getWorkspacePermissionWorkspaceManageRole,
    ],
    [],
    'OR',
  ),
  MODEL: new ComplexPermission(
    [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
    [
      PermissionConst.MODEL_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT,
      PermissionConst.MODEL_WORKSPACE_USER_RESOURCE_PERMISSION_EDIT
        .getWorkspacePermissionWorkspaceManageRole,
    ],
    [],
    'OR',
  ),
})
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 multipleTableRef = ref()
const searchType = ref('name')
const searchForm = ref<any>({
  name: '',
  permission: undefined,
})

const search_type_change = () => {
  searchForm.value = { name: '', permission: undefined }
}

const filterTreeData = () => {
  const searchName = searchForm.value.name || ''
  const searchPermissions = searchForm.value.permission ?? []

  if (!searchName && (!searchPermissions || searchPermissions.length === 0)) {
    return props.data
  }

  const filterNodes = (treeData: any[], name: string, permissions: any[]): any[] => {
    if (!treeData || treeData.length === 0) return []

    const result: any[] = []

    for (const node of treeData) {
      const cloneNode = { ...node }

      let isMatch = false
      if (searchType.value === 'name') {
        isMatch = node.name.toLowerCase().includes(name.toLowerCase())
      } else if (searchType.value === 'permission') {
        isMatch = node.permission && permissions.includes(node.permission)
      }

      let filteredChildren: any[] = []
      if (node.children && node.children.length > 0) {
        filteredChildren = filterNodes(node.children, name, permissions)
      }
      if (isMatch || filteredChildren.length > 0) {
        cloneNode.children = filteredChildren
        result.push(cloneNode)
      }
    }
    return result
  }
  return filterNodes(props.data, searchName, searchPermissions)
}

const filteredData = computed(() => {
  return filterTreeData()
})

const multipleSelection = ref<any[]>([])
const selectObj: any = {}
const select = (val: any[], active: any) => {
  if (active.resource_type === 'folder') {
    if (!val.some((item) => item.id == active.id)) {
      if (selectObj[active.id] === undefined) {
        selectObj[active.id] = 0
      }
      if (selectObj[active.id] % 2 == 0) {
        console.log(TreeToFlatten([active]))
        TreeToFlatten([active])
          .filter((item: any) => item.id != active.id)
          .forEach((item: any) => {
            multipleTableRef.value?.toggleRowSelection(item, true)
          })

        multipleSelection.value = multipleTableRef.value.getSelectionRows()
      } else {
        multipleSelection.value = val
      }
      selectObj[active.id] = selectObj[active.id] + 1
    } else {
      multipleSelection.value = val
    }
  } else {
    multipleSelection.value = val
  }
}
const dialogVisible = ref(false)
const radioPermission = ref('')
function openMulConfigureDialog() {
  if (multipleSelection.value.length === 0) {
    return
  }
  dialogVisible.value = true
}
function submitDialog() {
  if (multipleSelection.value.length === 0 || !radioPermission.value) {
    return
  }
  const obj = multipleSelection.value.map((item) => ({
    target_id: item.id,
    permission: radioPermission.value,
  }))
  emit('submitPermissions', obj)
  closeDialog()
}
function closeDialog() {
  dialogVisible.value = false
  radioPermission.value = ''
  multipleSelection.value = []
  multipleTableRef.value?.clearSelection()
}

function submitPermissions(value: string, row: any) {
  const obj = [
    {
      target_id: row.id,
      permission: value,
    },
  ]
  emit('submitPermissions', obj)
}
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()
  }
})

defineExpose({
  searchForm,
  searchType,
})
</script>
<style lang="scss" scoped>
.permission-setting {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
}
</style>