266 lines
8.7 KiB
Vue
266 lines
8.7 KiB
Vue
<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.resourceAuthorization.priority.label') }}</span>
|
|
<el-radio-group v-model="radioRole">
|
|
<el-radio :value="true" size="large">{{
|
|
$t('views.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="['default']"
|
|
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/node/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.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.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.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.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.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.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 {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,
|
|
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 === AuthorizationEnum.KNOWLEDGE)
|
|
const isApplication = computed(() => props.type === AuthorizationEnum.APPLICATION)
|
|
const isTool = computed(() => props.type === AuthorizationEnum.TOOL)
|
|
const isModel = computed(() => props.type === AuthorizationEnum.MODEL)
|
|
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(() =>
|
|
props.data.filter((v: any) => v.name.toLowerCase().includes(filterText.value.toLowerCase())),
|
|
)
|
|
|
|
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>
|