review code.
This commit is contained in:
lijiahang
@@ -112,6 +112,21 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.arco-scrollbar-track-direction-vertical {
|
||||
width: 9px;
|
||||
|
||||
.arco-scrollbar-thumb-bar {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.arco-scrollbar-track-direction-horizontal{
|
||||
height: 9px;
|
||||
|
||||
.arco-scrollbar-thumb-bar {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.a-query-header-grid {
|
||||
.arco-grid-item {
|
||||
&:last-child {
|
||||
|
||||
@@ -1,83 +1,85 @@
|
||||
<template>
|
||||
<!-- 分组树 -->
|
||||
<a-tree v-if="treeData.length"
|
||||
ref="tree"
|
||||
class="tree-container"
|
||||
:blockNode="true"
|
||||
:draggable="draggable"
|
||||
:data="treeData"
|
||||
:checkable="checkable"
|
||||
v-model:checked-keys="checkedKeys"
|
||||
:check-strictly="true"
|
||||
@drop="moveGroup">
|
||||
<!-- 标题 -->
|
||||
<template #title="node">
|
||||
<!-- 修改名称输入框 -->
|
||||
<template v-if="node.editable">
|
||||
<a-input size="mini"
|
||||
ref="renameInput"
|
||||
v-model="currName"
|
||||
style="width: 138px;"
|
||||
placeholder="名称"
|
||||
autofocus
|
||||
:max-length="32"
|
||||
:disabled="node.loading"
|
||||
@blur="() => saveNode(node.key)"
|
||||
@pressEnter="() => saveNode(node.key)"
|
||||
@change="() => saveNode(node.key)">
|
||||
<template #suffix>
|
||||
<!-- 加载中 -->
|
||||
<icon-loading v-if="node.loading" />
|
||||
<!-- 保存 -->
|
||||
<icon-check v-else
|
||||
class="pointer"
|
||||
title="保存"
|
||||
@click="() => saveNode(node.key)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<!-- 名称 -->
|
||||
<span v-else
|
||||
class="node-title-wrapper"
|
||||
@click="() => emits('selectNode', node)">
|
||||
<a-scrollbar>
|
||||
<!-- 分组树 -->
|
||||
<a-tree v-if="treeData.length"
|
||||
ref="tree"
|
||||
class="tree-container"
|
||||
:blockNode="true"
|
||||
:draggable="draggable"
|
||||
:data="treeData"
|
||||
:checkable="checkable"
|
||||
v-model:checked-keys="checkedKeys"
|
||||
:check-strictly="true"
|
||||
@drop="moveGroup">
|
||||
<!-- 标题 -->
|
||||
<template #title="node">
|
||||
<!-- 修改名称输入框 -->
|
||||
<template v-if="node.editable">
|
||||
<a-input size="mini"
|
||||
ref="renameInput"
|
||||
v-model="currName"
|
||||
style="width: 138px;"
|
||||
placeholder="名称"
|
||||
autofocus
|
||||
:max-length="32"
|
||||
:disabled="node.loading"
|
||||
@blur="() => saveNode(node.key)"
|
||||
@pressEnter="() => saveNode(node.key)"
|
||||
@change="() => saveNode(node.key)">
|
||||
<template #suffix>
|
||||
<!-- 加载中 -->
|
||||
<icon-loading v-if="node.loading" />
|
||||
<!-- 保存 -->
|
||||
<icon-check v-else
|
||||
class="pointer"
|
||||
title="保存"
|
||||
@click="() => saveNode(node.key)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<!-- 名称 -->
|
||||
<span v-else
|
||||
class="node-title-wrapper"
|
||||
@click="() => emits('selectNode', node)">
|
||||
{{ node.title }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作图标 -->
|
||||
<template #drag-icon="{ node }">
|
||||
<a-space v-if="!node.editable">
|
||||
<!-- 重命名 -->
|
||||
<span v-permission="['asset:host-group:update']"
|
||||
class="tree-icon"
|
||||
title="重命名"
|
||||
@click="rename(node.title, node.key)">
|
||||
</template>
|
||||
<!-- 操作图标 -->
|
||||
<template #drag-icon="{ node }">
|
||||
<a-space v-if="!node.editable">
|
||||
<!-- 重命名 -->
|
||||
<span v-permission="['asset:host-group:update']"
|
||||
class="tree-icon"
|
||||
title="重命名"
|
||||
@click="rename(node.title, node.key)">
|
||||
<icon-edit />
|
||||
</span>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteNode(node.key)">
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteNode(node.key)">
|
||||
<span v-permission="['asset:host-group:delete']"
|
||||
class="tree-icon" title="删除">
|
||||
<icon-delete />
|
||||
</span>
|
||||
</a-popconfirm>
|
||||
<!-- 新增 -->
|
||||
<span v-permission="['asset:host-group:create']"
|
||||
class="tree-icon"
|
||||
title="新增"
|
||||
@click="addChildren(node)">
|
||||
</a-popconfirm>
|
||||
<!-- 新增 -->
|
||||
<span v-permission="['asset:host-group:create']"
|
||||
class="tree-icon"
|
||||
title="新增"
|
||||
@click="addChildren(node)">
|
||||
<icon-plus />
|
||||
</span>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tree>
|
||||
<!-- 无数据 -->
|
||||
<div v-else-if="!loading" class="empty-container">
|
||||
<span>暂无数据</span>
|
||||
<span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tree>
|
||||
<!-- 无数据 -->
|
||||
<div v-else-if="!loading" class="empty-container">
|
||||
<span>暂无数据</span>
|
||||
<span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
|
||||
</div>
|
||||
</a-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -344,10 +346,16 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.arco-scrollbar-container) {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
@@ -380,7 +388,7 @@
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-title) {
|
||||
padding: 0 68px 0 0;
|
||||
padding: 0 80px 0 0;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -36,12 +36,13 @@
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
// 切换 tab
|
||||
const changeTab = ({ key, text }: TabRouterItem) => {
|
||||
const changeTab = (item: TabRouterItem) => {
|
||||
const key = item.key;
|
||||
if (key === props.modelValue) {
|
||||
return;
|
||||
}
|
||||
emits('update:modelValue', key);
|
||||
emits('change', key, text);
|
||||
emits('change', key, item);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
@@ -54,12 +55,12 @@
|
||||
if (items.map(s => s.key).indexOf(props.modelValue as string | number) === -1) {
|
||||
const item = items[0];
|
||||
emits('update:modelValue', item.key);
|
||||
emits('change', item.key, item.text);
|
||||
emits('change', item.key, item);
|
||||
} else {
|
||||
// 触发 change 事件
|
||||
const matchItem = items.find(s => s.key === props.modelValue);
|
||||
if (matchItem) {
|
||||
emits('change', matchItem.key, matchItem.text);
|
||||
emits('change', matchItem.key, matchItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
<template>
|
||||
<a-spin :loading="loading" class="grant-container">
|
||||
<!-- 左侧角色列表 -->
|
||||
<div class="role-container">
|
||||
<!-- 角色列表 -->
|
||||
<tab-router v-if="rolesRouter.length"
|
||||
class="role-router"
|
||||
v-model="roleId"
|
||||
:items="rolesRouter" />
|
||||
<!-- 暂无数据 -->
|
||||
<a-empty v-else class="role-empty">
|
||||
<div slot="description">
|
||||
暂无角色数据
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
<!-- 右侧菜单列表 -->
|
||||
<!-- 角色列表 -->
|
||||
<router-roles v-model="roleId" @change="fetchAuthorizedGroup" />
|
||||
<!-- 分组列表 -->
|
||||
<div class="group-container">
|
||||
<!-- 顶部 -->
|
||||
<div class="group-header">
|
||||
@@ -25,28 +13,27 @@
|
||||
<span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
|
||||
</span>
|
||||
</a-alert>
|
||||
<!-- 保存 -->
|
||||
<a-button class="save-button"
|
||||
<!-- 授权 -->
|
||||
<a-button class="grant-button"
|
||||
type="primary"
|
||||
@click="save">
|
||||
保存
|
||||
@click="doGrant">
|
||||
授权
|
||||
<template #icon>
|
||||
<icon-check />
|
||||
<icon-safe />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 主题部分 -->
|
||||
<!-- 主体部分 -->
|
||||
<div class="group-main">
|
||||
<!-- 菜单 -->
|
||||
<div class="group-main-tree">
|
||||
<host-group-tree :checkable="true"
|
||||
:checked-keys="checkedGroups"
|
||||
:draggable="false"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="e => selectedGroup = e"
|
||||
@update:checked-keys="updateCheckedGroups" />
|
||||
</div>
|
||||
<!-- 分组 -->
|
||||
<host-group-tree outer-class="group-main-tree"
|
||||
:checkable="true"
|
||||
:checked-keys="checkedGroups"
|
||||
:draggable="false"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="e => selectedGroup = e"
|
||||
@update:checked-keys="updateCheckedGroups" />
|
||||
<!-- 主机列表 -->
|
||||
<host-list class="group-main-hosts"
|
||||
:group="selectedGroup" />
|
||||
@@ -62,33 +49,28 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TabRouterItem } from '@/components/view/tab-router/types';
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
|
||||
import { AdminRoleCode } from '@/types/const';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
|
||||
import HostList from './host-list.vue';
|
||||
import RouterRoles from './router-roles.vue';
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const roleId = ref();
|
||||
const currentRole = ref();
|
||||
const rolesRouter = ref<Array<TabRouterItem>>([]);
|
||||
const authorizedGroups = ref<Array<number>>([]);
|
||||
const checkedGroups = ref<Array<number>>([]);
|
||||
const selectedGroup = ref<TreeNodeData>({});
|
||||
|
||||
// 监听角色变更 获取授权列表
|
||||
watch(roleId, async (value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
currentRole.value = rolesRouter.value.find(s => s.key === value);
|
||||
// 获取授权列表
|
||||
const fetchAuthorizedGroup = async (id: number, role: any) => {
|
||||
roleId.value = id;
|
||||
currentRole.value = role;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await getAuthorizedHostGroup({
|
||||
@@ -100,83 +82,66 @@
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 选择分组
|
||||
const updateCheckedGroups = (e: Array<number>) => {
|
||||
checkedGroups.value = e;
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
// 授权
|
||||
const doGrant = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await grantHostGroup({
|
||||
roleId: roleId.value,
|
||||
idList: checkedGroups.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
Message.success('授权成功');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载主机
|
||||
onMounted(() => {
|
||||
rolesRouter.value = cacheStore.roles.map(s => {
|
||||
return {
|
||||
key: s.id,
|
||||
text: `${s.name} (${s.code})`,
|
||||
code: s.code
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.grant-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.role-container {
|
||||
margin-right: 16px;
|
||||
|
||||
.role-router {
|
||||
height: 100%;
|
||||
min-width: max-content;
|
||||
border-right: 1px var(--color-neutral-3) solid;
|
||||
}
|
||||
|
||||
.role-empty {
|
||||
width: 198px;
|
||||
}
|
||||
}
|
||||
padding: 0 12px 12px 0;
|
||||
|
||||
.group-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
align-items: center;
|
||||
|
||||
.alert-wrapper {
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
.grant-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-main {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
&-tree {
|
||||
width: calc(60% - 16px);
|
||||
height: 100%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@@ -187,8 +152,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.tab-item) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,412 +0,0 @@
|
||||
<template>
|
||||
<!-- 分组树 -->
|
||||
<a-tree v-if="treeData.length"
|
||||
ref="tree"
|
||||
class="tree-container"
|
||||
:blockNode="true"
|
||||
:draggable="draggable"
|
||||
:data="treeData"
|
||||
:checkable="checkable"
|
||||
v-model:checked-keys="checkedKeys"
|
||||
:check-strictly="true"
|
||||
@drop="moveGroup">
|
||||
<!-- 标题 -->
|
||||
<template #title="node">
|
||||
<!-- 修改名称输入框 -->
|
||||
<template v-if="node.editable">
|
||||
<a-input size="mini"
|
||||
ref="renameInput"
|
||||
v-model="currName"
|
||||
style="width: 138px;"
|
||||
placeholder="名称"
|
||||
autofocus
|
||||
:max-length="32"
|
||||
:disabled="node.loading"
|
||||
@blur="() => saveNode(node.key)"
|
||||
@pressEnter="() => saveNode(node.key)"
|
||||
@change="() => saveNode(node.key)">
|
||||
<template #suffix>
|
||||
<!-- 加载中 -->
|
||||
<icon-loading v-if="node.loading" />
|
||||
<!-- 保存 -->
|
||||
<icon-check v-else
|
||||
class="pointer"
|
||||
title="保存"
|
||||
@click="() => saveNode(node.key)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<!-- 名称 -->
|
||||
<span v-else
|
||||
class="node-title-wrapper"
|
||||
@click="() => emits('selectNode', node)">
|
||||
{{ node.title }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作图标 -->
|
||||
<template #drag-icon="{ node }">
|
||||
<a-space v-if="!node.editable">
|
||||
<!-- 重命名 -->
|
||||
<span v-permission="['asset:host-group:update']"
|
||||
class="tree-icon"
|
||||
title="重命名"
|
||||
@click="rename(node.title, node.key)">
|
||||
<icon-edit />
|
||||
</span>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteNode(node.key)">
|
||||
<span v-permission="['asset:host-group:delete']"
|
||||
class="tree-icon" title="删除">
|
||||
<icon-delete />
|
||||
</span>
|
||||
</a-popconfirm>
|
||||
<!-- 新增 -->
|
||||
<span v-permission="['asset:host-group:create']"
|
||||
class="tree-icon"
|
||||
title="新增"
|
||||
@click="addChildren(node)">
|
||||
<icon-plus />
|
||||
</span>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tree>
|
||||
<!-- 无数据 -->
|
||||
<div v-else-if="!loading" class="empty-container">
|
||||
<span>暂无数据</span>
|
||||
<span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-group-tree'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { computed, nextTick, onMounted, ref } from 'vue';
|
||||
import { createGroupGroupPrefix, rootId } from '../types/const';
|
||||
import { findNode, findParentNode, moveNode } from '@/utils/tree';
|
||||
import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
|
||||
import { isString } from '@/utils/is';
|
||||
import { useCacheStore } from '@/store';
|
||||
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
draggable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checkedKeys: {
|
||||
type: Array<Number>,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const tree = ref();
|
||||
const modCount = ref(0);
|
||||
const renameInput = ref();
|
||||
const currName = ref();
|
||||
const treeData = ref<Array<TreeNodeData>>([]);
|
||||
|
||||
const checkedKeys = computed<Array<number>>({
|
||||
get() {
|
||||
return props.checkedKeys as Array<number>;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:checkedKeys', e);
|
||||
} else {
|
||||
emits('update:checkedKeys', []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 重命名
|
||||
const rename = (title: number, key: number) => {
|
||||
const node = findNode<TreeNodeData>(key, treeData.value);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
currName.value = title;
|
||||
node.editable = true;
|
||||
nextTick(() => {
|
||||
renameInput.value?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除节点
|
||||
const deleteNode = async (key: number) => {
|
||||
try {
|
||||
emits('loading', true);
|
||||
// 删除
|
||||
await deleteHostGroup(key);
|
||||
// 页面删除
|
||||
const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
|
||||
if (!parentNode) {
|
||||
return;
|
||||
}
|
||||
const children = parentNode.root ? treeData.value : parentNode.children;
|
||||
if (children) {
|
||||
// 删除
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (children[i].key === key) {
|
||||
children.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增根节点
|
||||
const addRootNode = () => {
|
||||
const newKey = `${createGroupGroupPrefix}${Date.now()}`;
|
||||
treeData.value.push({
|
||||
title: '新分组',
|
||||
key: newKey
|
||||
});
|
||||
// 编辑子节点
|
||||
const newNode = findNode<TreeNodeData>(newKey, treeData.value);
|
||||
if (newNode) {
|
||||
newNode.editable = true;
|
||||
currName.value = '';
|
||||
nextTick(() => {
|
||||
renameInput.value?.focus();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 新增子节点
|
||||
const addChildren = (parentNode: TreeNodeData) => {
|
||||
const newKey = `${createGroupGroupPrefix}${Date.now()}`;
|
||||
const children = parentNode.children || [];
|
||||
children.push({
|
||||
title: '新分组',
|
||||
key: newKey
|
||||
});
|
||||
parentNode.children = children;
|
||||
treeData.value = [...treeData.value];
|
||||
nextTick(() => {
|
||||
// 展开
|
||||
tree.value.expandNode(parentNode.key);
|
||||
// 编辑子节点
|
||||
const newNode = findNode<TreeNodeData>(newKey, treeData.value);
|
||||
if (newNode) {
|
||||
newNode.editable = true;
|
||||
currName.value = '';
|
||||
nextTick(() => {
|
||||
renameInput.value?.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 保存节点
|
||||
const saveNode = async (key: string | number) => {
|
||||
modCount.value++;
|
||||
if (modCount.value !== 1) {
|
||||
return;
|
||||
}
|
||||
// 寻找节点
|
||||
const node = findNode<TreeNodeData>(key, treeData.value);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
if (currName.value) {
|
||||
node.loading = true;
|
||||
try {
|
||||
// 创建节点
|
||||
if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
|
||||
const parent = findParentNode<TreeNodeData>(key, treeData.value);
|
||||
if (parent.root) {
|
||||
parent.key = rootId;
|
||||
}
|
||||
// 创建
|
||||
const { data } = await createHostGroup({
|
||||
parentId: parent.key as number,
|
||||
name: currName.value
|
||||
});
|
||||
node.key = data;
|
||||
} else {
|
||||
// 重命名节点
|
||||
await updateHostGroupName({
|
||||
id: key as unknown as number,
|
||||
name: currName.value
|
||||
});
|
||||
}
|
||||
node.title = currName.value;
|
||||
node.editable = false;
|
||||
} catch (e) {
|
||||
// 重复 重新聚焦
|
||||
setTimeout(() => {
|
||||
renameInput.value?.focus();
|
||||
}, 100);
|
||||
} finally {
|
||||
node.loading = false;
|
||||
}
|
||||
} else {
|
||||
// 未输入数据 并且为创建则移除节点
|
||||
if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
|
||||
// 寻找父节点
|
||||
const parent = findParentNode(key, treeData.value);
|
||||
if (parent) {
|
||||
// 根节点
|
||||
if (parent.root) {
|
||||
parent.children = treeData.value;
|
||||
}
|
||||
// 移除子节点
|
||||
if (parent.children) {
|
||||
for (let i = 0; i < parent.children.length; i++) {
|
||||
if (parent.children[i].key === key) {
|
||||
parent.children.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
node.editable = false;
|
||||
}
|
||||
modCount.value = 0;
|
||||
};
|
||||
|
||||
// 移动分组
|
||||
const moveGroup = async (
|
||||
{
|
||||
dragNode, dropNode, dropPosition
|
||||
}: {
|
||||
dragNode: TreeNodeData,
|
||||
dropNode: TreeNodeData,
|
||||
dropPosition: number
|
||||
}) => {
|
||||
try {
|
||||
emits('loading', true);
|
||||
// 移动
|
||||
await moveHostGroup({
|
||||
id: dragNode.key as number,
|
||||
targetId: dropNode.key as number,
|
||||
position: dropPosition
|
||||
});
|
||||
// 移动分组
|
||||
moveNode(treeData.value, dragNode, dropNode, dropPosition);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const fetchTreeData = async (force = false) => {
|
||||
if (cacheStore.hostGroups.length && !force) {
|
||||
// 缓存有数据并且非强制加载 直接从缓存中加载
|
||||
treeData.value = cacheStore.hostGroups;
|
||||
} else {
|
||||
// 无数据/强制加载
|
||||
try {
|
||||
emits('loading', true);
|
||||
const { data } = await getHostGroupTree();
|
||||
treeData.value = data;
|
||||
cacheStore.hostGroups = data;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
}
|
||||
// 未选择则选择首个
|
||||
if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
|
||||
await nextTick(() => {
|
||||
tree.value?.selectNode(treeData.value[0].key);
|
||||
emits('selectNode', treeData.value[0]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ addRootNode, fetchTreeData });
|
||||
|
||||
onMounted(() => {
|
||||
fetchTreeData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree-container {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-top: 25px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node) {
|
||||
cursor: unset;
|
||||
|
||||
.arco-tree-node-switcher {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-selected) {
|
||||
background-color: var(--color-fill-2);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-title) {
|
||||
padding: 0 68px 0 0;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
|
||||
.arco-tree-node-title-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.node-title-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
font-size: 12px;
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,20 +1,8 @@
|
||||
<template>
|
||||
<a-spin :loading="loading" class="grant-container">
|
||||
<!-- 左侧用户列表 -->
|
||||
<div class="user-container">
|
||||
<!-- 用户列表 -->
|
||||
<tab-router v-if="usersRouter.length"
|
||||
class="user-router"
|
||||
v-model="userId"
|
||||
:items="usersRouter" />
|
||||
<!-- 暂无数据 -->
|
||||
<a-empty v-else class="user-empty">
|
||||
<div slot="description">
|
||||
暂无用户数据
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
<!-- 右侧菜单列表 -->
|
||||
<!-- 用户列表 -->
|
||||
<router-users v-model="userId" @change="fetchAuthorizedGroup" />
|
||||
<!-- 分组列表 -->
|
||||
<div class="group-container">
|
||||
<!-- 顶部 -->
|
||||
<div class="group-header">
|
||||
@@ -25,28 +13,26 @@
|
||||
<span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
|
||||
</span>
|
||||
</a-alert>
|
||||
<!-- 保存 -->
|
||||
<a-button class="save-button"
|
||||
<!-- 授权 -->
|
||||
<a-button class="grant-button"
|
||||
type="primary"
|
||||
@click="save">
|
||||
保存
|
||||
@click="doGrant">
|
||||
授权
|
||||
<template #icon>
|
||||
<icon-check />
|
||||
<icon-safe />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 主题部分 -->
|
||||
<div class="group-main">
|
||||
<!-- 菜单 -->
|
||||
<div class="group-main-tree">
|
||||
<host-group-tree :checkable="true"
|
||||
:checked-keys="checkedGroups"
|
||||
:draggable="false"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="e => selectedGroup = e"
|
||||
@update:checked-keys="updateCheckedGroups" />
|
||||
</div>
|
||||
<!-- 分组 -->
|
||||
<host-group-tree outer-class="group-main-tree"
|
||||
:checked-keys="checkedGroups"
|
||||
:draggable="false"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="e => selectedGroup = e"
|
||||
@update:checked-keys="updateCheckedGroups" />
|
||||
<!-- 主机列表 -->
|
||||
<host-list class="group-main-hosts"
|
||||
:group="selectedGroup" />
|
||||
@@ -62,32 +48,27 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TabRouterItem } from '@/components/view/tab-router/types';
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
|
||||
import HostList from './host-list.vue';
|
||||
import RouterUsers from './router-users.vue';
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const userId = ref();
|
||||
const currentUser = ref();
|
||||
const usersRouter = ref<Array<TabRouterItem>>([]);
|
||||
const authorizedGroups = ref<Array<number>>([]);
|
||||
const checkedGroups = ref<Array<number>>([]);
|
||||
const selectedGroup = ref<TreeNodeData>({});
|
||||
|
||||
// 监听用户变更 获取授权列表
|
||||
watch(userId, async (value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
currentUser.value = usersRouter.value.find(s => s.key === value);
|
||||
// 获取授权列表
|
||||
const fetchAuthorizedGroup = async (id: number, user: any) => {
|
||||
userId.value = id;
|
||||
currentUser.value = user;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await getAuthorizedHostGroup({
|
||||
@@ -99,82 +80,66 @@
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 选择分组
|
||||
const updateCheckedGroups = (e: Array<number>) => {
|
||||
checkedGroups.value = e;
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
// 授权
|
||||
const doGrant = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await grantHostGroup({
|
||||
userId: userId.value,
|
||||
idList: checkedGroups.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
Message.success('授权成功');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载主机
|
||||
onMounted(() => {
|
||||
usersRouter.value = cacheStore.users.map(s => {
|
||||
return {
|
||||
key: s.id,
|
||||
text: `${s.nickname} (${s.username})`
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.grant-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.user-container {
|
||||
margin-right: 16px;
|
||||
|
||||
.user-router {
|
||||
height: 100%;
|
||||
min-width: max-content;
|
||||
border-right: 1px var(--color-neutral-3) solid;
|
||||
}
|
||||
|
||||
.user-empty {
|
||||
width: 198px;
|
||||
}
|
||||
}
|
||||
padding: 0 12px 12px 0;
|
||||
|
||||
.group-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
align-items: center;
|
||||
|
||||
.alert-wrapper {
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
.grant-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-main {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
&-tree {
|
||||
width: calc(60% - 16px);
|
||||
height: 100%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@@ -185,8 +150,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.tab-item) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<a-list size="small"
|
||||
max-height="100%"
|
||||
:hoverable="true"
|
||||
:data="selectedGroupHosts"
|
||||
:loading="loading">
|
||||
@@ -35,8 +36,10 @@
|
||||
import type { PropType } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { ref, watch } from 'vue';
|
||||
import { onBeforeMount, ref, watch } from 'vue';
|
||||
import { getHostGroupRelList } from '@/api/asset/host-group';
|
||||
import { getHostList } from '@/api/asset/host';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps({
|
||||
group: {
|
||||
@@ -63,12 +66,37 @@
|
||||
const { data } = await getHostGroupRelList(groupId as number);
|
||||
selectedGroupHosts.value = data.map(s => cacheStore.hosts.find(h => h.id === s) as HostQueryResponse)
|
||||
.filter(Boolean);
|
||||
for (let i = 1800; i < 2000; i++) {
|
||||
selectedGroupHosts.value.push({
|
||||
id: i,
|
||||
name: i + '',
|
||||
code: i + '',
|
||||
} as any);
|
||||
}
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
// 加载主机列表
|
||||
const loadHostList = async () => {
|
||||
try {
|
||||
const { data } = await getHostList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('hosts', data);
|
||||
} catch (e) {
|
||||
Message.error('主机列表加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
if (!cacheStore.hosts.length) {
|
||||
// 加载用户列表
|
||||
await loadHostList();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -80,14 +108,15 @@
|
||||
}
|
||||
|
||||
.host-list-empty {
|
||||
padding: 24px;
|
||||
padding: 16px 24px;
|
||||
text-align: center;
|
||||
color: var(--color-text-2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.arco-list-wrapper .arco-list-spin) {
|
||||
height: unset;
|
||||
:deep(.arco-scrollbar) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.arco-list-item-content) {
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="role-container">
|
||||
<!-- 角色列表 -->
|
||||
<tab-router v-if="rolesRouter.length"
|
||||
class="role-router"
|
||||
v-model="value"
|
||||
:items="rolesRouter"
|
||||
@change="(key, item) => emits('change', key, item)" />
|
||||
<!-- 暂无数据 -->
|
||||
<a-empty v-else class="role-empty">
|
||||
<div slot="description">
|
||||
暂无角色数据
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'router-roles'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TabRouterItem } from '@/components/view/tab-router/types';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { getRoleList } from '@/api/user/role';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Number
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const rolesRouter = ref<Array<TabRouterItem>>([]);
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(e) {
|
||||
emits('update:modelValue', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 加载角色列表
|
||||
const loadRoleList = async () => {
|
||||
try {
|
||||
const { data } = await getRoleList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('roles', data);
|
||||
} catch (e) {
|
||||
Message.error('角色列表加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载主机
|
||||
onMounted(async () => {
|
||||
if (!cacheStore.roles.length) {
|
||||
await loadRoleList();
|
||||
}
|
||||
rolesRouter.value = cacheStore.roles.map(s => {
|
||||
return {
|
||||
key: s.id,
|
||||
text: `${s.name} (${s.code})`,
|
||||
code: s.code
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.role-container {
|
||||
margin-right: 16px;
|
||||
|
||||
.role-router {
|
||||
height: 100%;
|
||||
min-width: max-content;
|
||||
border-right: 1px var(--color-neutral-3) solid;
|
||||
}
|
||||
|
||||
.role-empty {
|
||||
width: 198px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="user-container">
|
||||
<!-- 用户列表 -->
|
||||
<tab-router v-if="usersRouter.length"
|
||||
class="user-router"
|
||||
v-model="value"
|
||||
:items="usersRouter"
|
||||
@change="(key, item) => emits('change', key, item)" />
|
||||
<!-- 暂无数据 -->
|
||||
<a-empty v-else class="user-empty">
|
||||
<div slot="description">
|
||||
暂无用户数据
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'router-users'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TabRouterItem } from '@/components/view/tab-router/types';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { getUserList } from '@/api/user/user';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Number
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const usersRouter = ref<Array<TabRouterItem>>([]);
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(e) {
|
||||
emits('update:modelValue', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 加载用户列表
|
||||
const loadUserList = async () => {
|
||||
try {
|
||||
const { data } = await getUserList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('users', data);
|
||||
} catch (e) {
|
||||
Message.error('用户列表加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载主机
|
||||
onMounted(async () => {
|
||||
if (!cacheStore.users.length) {
|
||||
await loadUserList();
|
||||
}
|
||||
usersRouter.value = cacheStore.users.map(s => {
|
||||
return {
|
||||
key: s.id,
|
||||
text: `${s.nickname} (${s.username})`
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-container {
|
||||
margin-right: 16px;
|
||||
|
||||
.user-router {
|
||||
height: 100%;
|
||||
min-width: max-content;
|
||||
border-right: 1px var(--color-neutral-3) solid;
|
||||
}
|
||||
|
||||
.user-empty {
|
||||
width: 198px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +1,21 @@
|
||||
<template>
|
||||
<div v-if="render" class="view-container">
|
||||
<a-tabs v-if="render"
|
||||
class="tabs-container"
|
||||
position="left"
|
||||
type="rounded"
|
||||
<div class="view-container">
|
||||
<a-tabs class="tabs-container simple-card"
|
||||
size="large"
|
||||
:destroy-on-hide="true"
|
||||
:justify="true"
|
||||
:lazy-load="true">
|
||||
<!-- 角色分配 -->
|
||||
<a-tab-pane :key="1" v-permission="['asset:host-group:grant']">
|
||||
<host-group-view-role-grant />
|
||||
<template #title>
|
||||
<icon-safe />
|
||||
角色授权
|
||||
</template>
|
||||
<!-- 主机分组授权(角色) -->
|
||||
<a-tab-pane :key="1"
|
||||
v-permission="['asset:host-group:grant']"
|
||||
title="主机分组授权(角色)">
|
||||
<host-group-role-grant />
|
||||
</a-tab-pane>
|
||||
<!-- 用户分配 -->
|
||||
<a-tab-pane :key="2" v-permission="['asset:host-group:grant']">
|
||||
<host-group-view-user-grant />
|
||||
<template #title>
|
||||
<icon-user />
|
||||
用户授权2323
|
||||
</template>
|
||||
<!-- 主机分组授权(用户) -->
|
||||
<a-tab-pane :key="2"
|
||||
v-permission="['asset:host-group:grant']"
|
||||
title="主机分组授权(用户)">
|
||||
<host-group-user-grant />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
@@ -37,28 +30,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { getHostList } from '@/api/asset/host';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue';
|
||||
import HostGroupViewUserGrant from './components/host-group-view-user-grant.vue';
|
||||
import { getUserList } from '@/api/user/user';
|
||||
import { getRoleList } from '@/api/user/role';
|
||||
import usePermission from '@/hooks/permission';
|
||||
import HostGroupRoleGrant from './components/host-group-role-grant.vue';
|
||||
import HostGroupUserGrant from './components/host-group-user-grant.vue';
|
||||
|
||||
const render = ref(false);
|
||||
const cacheStore = useCacheStore();
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
// 加载主机列表
|
||||
const loadHostList = async () => {
|
||||
try {
|
||||
const { data } = await getHostList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('hosts', data);
|
||||
} catch (e) {
|
||||
Message.error('主机列表加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载用户列表
|
||||
const loadUserList = async () => {
|
||||
@@ -71,32 +50,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
// 加载角色列表
|
||||
const loadRoleList = async () => {
|
||||
try {
|
||||
const { data } = await getRoleList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('roles', data);
|
||||
} catch (e) {
|
||||
Message.error('角色列表加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
if (hasPermission('asset:host-group:query')) {
|
||||
// 加载主机列表 tab1
|
||||
await loadHostList();
|
||||
render.value = true;
|
||||
}
|
||||
if (hasPermission('asset:host-group:grant')) {
|
||||
// 加载角色列表 tab2
|
||||
await loadRoleList();
|
||||
render.value = true;
|
||||
// 加载用户列表 tab3
|
||||
await loadUserList();
|
||||
}
|
||||
});
|
||||
|
||||
// 卸载时清除 cache
|
||||
onUnmounted(() => {
|
||||
cacheStore.reset('users', 'roles', 'hosts', 'hostGroups');
|
||||
@@ -114,17 +67,8 @@
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
width: calc(100% - 32px);
|
||||
max-height: calc(100% - 32px);
|
||||
position: absolute;
|
||||
background: var(--color-bg-2);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav-tab) {
|
||||
border-right: 1px var(--color-neutral-3) solid;
|
||||
padding-right: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-tab-title) {
|
||||
|
||||
@@ -39,12 +39,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机分组树 -->
|
||||
<div class="tree-card-main">
|
||||
<host-group-tree ref="tree"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="selectGroup" />
|
||||
</div>
|
||||
<host-group-tree outer-class="tree-card-main"
|
||||
ref="tree"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="selectGroup" />
|
||||
</div>
|
||||
<!-- 身体部分 -->
|
||||
<a-spin class="simple-card transfer-body"
|
||||
@@ -189,10 +188,10 @@
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: 8px 8px 8px 16px;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
height: calc(100% - 44px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user