|
|
@@ -1,81 +1,30 @@
|
|
|
<template>
|
|
|
<a-modal width="50%" v-model:visible="visible" title="权限配置" @cancel="handleCancel" @ok="editDeptHandleOk">
|
|
|
- <a-tabs :active-key="selected_tab_key" @change="handleTabChange">
|
|
|
- <a-tab-pane v-for="tab in tabs" :key="tab.key">
|
|
|
- <template #title>
|
|
|
- <component :is="tab.icon" /> {{ tab.title }}
|
|
|
- </template>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
<div style="display: flex;">
|
|
|
<a-card class="card-body" :title="getCurrentTabTitle" hoverable>
|
|
|
- <a-tree v-if="selected_tab_key === '1'" :data="menu_list" v-model="checked_menu"
|
|
|
- v-model:expanded-keys="expand_kdys" :checkable="true" :show-line="true" @check="onCheck" :fieldNames="{
|
|
|
+ <a-tree :data="menu_list" v-model:checked-keys="checked_menu" v-model:expanded-keys="expand_keys"
|
|
|
+ :checkable="true" :show-line="true" @check="onCheck" :fieldNames="{
|
|
|
key: 'menuId',
|
|
|
title: 'menuName',
|
|
|
children: 'children',
|
|
|
}">
|
|
|
</a-tree>
|
|
|
|
|
|
- <a-checkbox-group v-if="selected_tab_key === '2'" v-model="checked_knowledge" @change="onCheckKnowledge">
|
|
|
- <a-checkbox v-for="(knowledg, index) of knowledge_list" :value="knowledg.id" :lable="knowledg.name"
|
|
|
- style="width:150px">
|
|
|
- {{ knowledg.name }}
|
|
|
- </a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
-
|
|
|
- <a-checkbox-group v-if="selected_tab_key === '3'" v-model="checked_agents" @change="onCheckAgents">
|
|
|
- <a-checkbox v-for="(agents, index) of agents_list" :value="agents.id" :lable="agents.name"
|
|
|
- style="width:150px">
|
|
|
- {{ agents.name }}
|
|
|
- </a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
-
|
|
|
- <a-checkbox-group v-if="selected_tab_key === '4'" v-model="checked_model" @change="onCheckModel">
|
|
|
- <a-checkbox v-for="(model, index) of model_list" :value="model.id" :lable="model.name" style="width:150px">
|
|
|
- {{ model.name }}
|
|
|
- </a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
-
|
|
|
</a-card>
|
|
|
- <a-card class="card-body" title="角色所有权限">
|
|
|
+ <a-card class="card-body" title="角色菜单权限">
|
|
|
<div style="margin: 8px 0;">菜单功能:</div>
|
|
|
<a-space wrap>
|
|
|
- <a-tag v-for="(tag, index) of checked_menu_list" :key="tag.menuId">
|
|
|
+ <a-tag v-for="tag of checked_menu_list" :key="tag.menuId">
|
|
|
{{ tag.menuName }}
|
|
|
</a-tag>
|
|
|
</a-space>
|
|
|
- <a-divider />
|
|
|
-
|
|
|
- <div style="margin: 8px 0;">知识库功能:</div>
|
|
|
- <a-space wrap>
|
|
|
- <a-tag v-for="(tag, index) of checked_knowledge_list" :key="tag.id">
|
|
|
- {{ tag.name }}
|
|
|
- </a-tag>
|
|
|
- </a-space>
|
|
|
- <a-divider />
|
|
|
-
|
|
|
- <div style="margin: 8px 0;">智能体功能:</div>
|
|
|
- <a-space wrap>
|
|
|
- <a-tag v-for="(tag, index) of checked_agents_list" :key="tag.id">
|
|
|
- {{ tag.name }}
|
|
|
- </a-tag>
|
|
|
- </a-space>
|
|
|
- <a-divider />
|
|
|
-
|
|
|
- <div style="margin: 8px 0;">模型功能:</div>
|
|
|
- <a-space wrap>
|
|
|
- <a-tag v-for="(tag, index) of checked_model_list" :key="tag.id">
|
|
|
- {{ tag.name }}
|
|
|
- </a-tag>
|
|
|
- </a-space>
|
|
|
</a-card>
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, toRefs, onMounted, computed } from 'vue';
|
|
|
+import { ref, toRefs, watch } from 'vue';
|
|
|
|
|
|
// 定义组件的 props 和 emits
|
|
|
const props = defineProps({
|
|
|
@@ -84,45 +33,20 @@ const props = defineProps({
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
- knowledge_list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- agents_list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- model_list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
record: Object
|
|
|
});
|
|
|
|
|
|
-const { visible, menu_list, knowledge_list, agents_list, model_list, record } = toRefs(props);
|
|
|
+const { visible, menu_list, record } = toRefs(props);
|
|
|
|
|
|
const emit = defineEmits(['getActiveTab', 'close', 'ok']);
|
|
|
|
|
|
-const tabs = [
|
|
|
- { key: "1", icon: "icon-menu", title: "菜单" },
|
|
|
- { key: "2", icon: "icon-storage", title: "知识库" },
|
|
|
- { key: "3", icon: "icon-robot", title: "智能体" },
|
|
|
- { key: "4", icon: "icon-relation", title: "模型" }
|
|
|
-]
|
|
|
-const selected_tab_key = ref(tabs[0].key);
|
|
|
|
|
|
// 组件内部状态
|
|
|
// 默认展开第一节
|
|
|
-const expand_kdys = ref(['0']);
|
|
|
+const expand_keys = ref(['0']);
|
|
|
|
|
|
const checked_menu = ref([]);
|
|
|
const checked_menu_list = ref([]);
|
|
|
-const checked_knowledge = ref([]);
|
|
|
-const checked_knowledge_list = ref([]);
|
|
|
-const checked_agents = ref([]);
|
|
|
-const checked_agents_list = ref([])
|
|
|
-const checked_model = ref([]);
|
|
|
-const checked_model_list = ref([])
|
|
|
|
|
|
|
|
|
// 递归取消所有子节点的选择
|
|
|
@@ -183,39 +107,6 @@ const onCheck = (newCheckedKeys, event) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const onCheckboxCheck = (newCheckedKeys, event, collection) => {
|
|
|
- let o = {
|
|
|
- id: event.target.value,
|
|
|
- name: event.target.labels[0].innerText,
|
|
|
- };
|
|
|
- if (event.target.checked) {
|
|
|
- collection.value.push(o);
|
|
|
- } else {
|
|
|
- collection.value.forEach((val, idx, array) => {
|
|
|
- if (val['id'] == event.target.value) {
|
|
|
- collection.value.splice(idx, 1);
|
|
|
- return true;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const onCheckKnowledge = (newCheckedKeys, event) => {
|
|
|
- onCheckboxCheck(newCheckedKeys, event, checked_knowledge_list);
|
|
|
-
|
|
|
-};
|
|
|
-const onCheckAgents = (newCheckedKeys, event) => {
|
|
|
- onCheckboxCheck(newCheckedKeys, event, checked_agents_list);
|
|
|
-};
|
|
|
-const onCheckModel = (newCheckedKeys, event) => {
|
|
|
- onCheckboxCheck(newCheckedKeys, event, checked_model_list);
|
|
|
-};
|
|
|
-
|
|
|
-const handleTabChange = (key) => {
|
|
|
- const currentTab = tabs.find(tab => tab.key === key);
|
|
|
- emit('getActiveTab', currentTab);
|
|
|
- selected_tab_key.value = key;
|
|
|
-};
|
|
|
// 处理取消事件
|
|
|
const handleCancel = () => {
|
|
|
emit('cancel');
|
|
|
@@ -223,35 +114,25 @@ const handleCancel = () => {
|
|
|
|
|
|
// 处理确认事件
|
|
|
const editDeptHandleOk = () => {
|
|
|
- emit('ok', {
|
|
|
- checkedKeys: {
|
|
|
- menu: checked_menu.value,
|
|
|
- knowledge: checked_knowledge.value,
|
|
|
- agents: checked_agents.value,
|
|
|
- model: checked_model.value
|
|
|
- }
|
|
|
- });
|
|
|
+ emit('ok', checked_menu.value);
|
|
|
};
|
|
|
|
|
|
-const getCurrentTabTitle = computed(() => {
|
|
|
- const currentTab = tabs.find(tab => tab.key === selected_tab_key.value);
|
|
|
- return currentTab ? currentTab.title : '菜单';
|
|
|
-});
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- // 处理传入的部门数据
|
|
|
- // TODO功能 回显
|
|
|
- // if (record?.dept) {
|
|
|
- // record.dept.forEach((val) => {
|
|
|
- // checked_menu_list.value.push({
|
|
|
- // menuId: val.menuId,
|
|
|
- // menuName: val.menuName
|
|
|
- // });
|
|
|
- // checked_menu.value.push(val.menuId);
|
|
|
- // expand_kdys.value.push(val.menuId);
|
|
|
- // });
|
|
|
- // }
|
|
|
|
|
|
+watch(() => props.record, (newVal) => {
|
|
|
+ if (newVal?.resources) {
|
|
|
+ newVal.resources.forEach((val) => {
|
|
|
+ checked_menu_list.value.push({
|
|
|
+ menuId: val.menuId,
|
|
|
+ menuName: val.menuName
|
|
|
+ });
|
|
|
+ checked_menu.value.push(val.menuId);
|
|
|
+ expand_keys.value.push(val.menuId);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ checked_menu_list.value = [];
|
|
|
+ checked_menu.value = [];
|
|
|
+ expand_keys.value = ['0'];
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
|