feat: 主机分组授权.

This commit is contained in:
lijiahangmax
2023-11-24 02:07:52 +08:00
parent 5fe7ce07e5
commit ba446ba508
14 changed files with 385 additions and 129 deletions

View File

@@ -1,5 +1,8 @@
package com.orion.ops.module.infra.enums; package com.orion.ops.module.infra.enums;
import lombok.AllArgsConstructor;
import lombok.Getter;
/** /**
* 数据权限类型 * 数据权限类型
* *
@@ -7,15 +10,22 @@ package com.orion.ops.module.infra.enums;
* @version 1.0.0 * @version 1.0.0
* @since 2023/11/8 18:57 * @since 2023/11/8 18:57
*/ */
@Getter
@AllArgsConstructor
public enum DataPermissionTypeEnum { public enum DataPermissionTypeEnum {
/** /**
* 主机分组 * 主机分组
*/ */
HOST_GROUP, HOST_GROUP(true),
; ;
/**
* 是否会分配给角色
*/
private final boolean toRole;
public static DataPermissionTypeEnum of(String type) { public static DataPermissionTypeEnum of(String type) {
if (type == null) { if (type == null) {
return null; return null;

View File

@@ -2,6 +2,7 @@ package com.orion.ops.module.infra.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.orion.lang.utils.collect.Lists; import com.orion.lang.utils.collect.Lists;
import com.orion.ops.framework.common.utils.Valid;
import com.orion.ops.framework.mybatis.core.query.Conditions; import com.orion.ops.framework.mybatis.core.query.Conditions;
import com.orion.ops.framework.redis.core.utils.RedisLists; import com.orion.ops.framework.redis.core.utils.RedisLists;
import com.orion.ops.framework.redis.core.utils.RedisUtils; import com.orion.ops.framework.redis.core.utils.RedisUtils;
@@ -11,6 +12,7 @@ import com.orion.ops.module.infra.dao.SystemUserRoleDAO;
import com.orion.ops.module.infra.define.cache.DataPermissionCacheKeyDefine; import com.orion.ops.module.infra.define.cache.DataPermissionCacheKeyDefine;
import com.orion.ops.module.infra.entity.domain.DataPermissionDO; import com.orion.ops.module.infra.entity.domain.DataPermissionDO;
import com.orion.ops.module.infra.entity.request.data.DataPermissionUpdateRequest; import com.orion.ops.module.infra.entity.request.data.DataPermissionUpdateRequest;
import com.orion.ops.module.infra.enums.DataPermissionTypeEnum;
import com.orion.ops.module.infra.service.DataPermissionService; import com.orion.ops.module.infra.service.DataPermissionService;
import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
@@ -131,6 +133,7 @@ public class DataPermissionServiceImpl implements DataPermissionService {
@Override @Override
public List<Long> getUserAuthorizedRelIdList(String type, Long userId) { public List<Long> getUserAuthorizedRelIdList(String type, Long userId) {
DataPermissionTypeEnum dataType = Valid.valid(DataPermissionTypeEnum::of, type);
String cacheKey = DataPermissionCacheKeyDefine.DATA_PERMISSION_USER.format(type, userId); String cacheKey = DataPermissionCacheKeyDefine.DATA_PERMISSION_USER.format(type, userId);
// 获取缓存 // 获取缓存
List<Long> list = RedisLists.range(cacheKey, Long::valueOf); List<Long> list = RedisLists.range(cacheKey, Long::valueOf);
@@ -139,9 +142,11 @@ public class DataPermissionServiceImpl implements DataPermissionService {
.eq(DataPermissionDO::getType, type) .eq(DataPermissionDO::getType, type)
.eq(DataPermissionDO::getUserId, userId); .eq(DataPermissionDO::getUserId, userId);
// 查询用户角色 // 查询用户角色
List<Long> roleIdList = systemUserRoleDAO.selectRoleIdByUserId(userId); if (dataType.isToRole()) {
if (!roleIdList.isEmpty()) { List<Long> roleIdList = systemUserRoleDAO.selectRoleIdByUserId(userId);
wrapper.or().in(DataPermissionDO::getRoleId, roleIdList); if (!roleIdList.isEmpty()) {
wrapper.or().in(DataPermissionDO::getRoleId, roleIdList);
}
} }
// 查询数据库 // 查询数据库
list = dataPermissionDAO.of() list = dataPermissionDAO.of()

View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="simple-card tabs-container"> <div class="tabs-container">
<template v-for="item in items" <template v-for="item in items"
:key="item.key"> :key="item.key">
<span v-permission="item.permission" <span v-permission="item.permission || []"
:title="item.text" :title="item.text"
:class="['tab-item', item.key === modelValue ? 'tab-item-active' : '']" :class="['tab-item', item.key === modelValue ? 'tab-item-active' : '']"
@click="changeTab(item.key)"> @click="changeTab(item)">
<component v-if="item.icon" <component v-if="item.icon"
:is="item.icon" /> :is="item.icon" />
{{ item.text }} {{ item.text }}
@@ -36,24 +36,31 @@
const emits = defineEmits(['update:modelValue', 'change']); const emits = defineEmits(['update:modelValue', 'change']);
// 切换 tab // 切换 tab
const changeTab = (key: string | number) => { const changeTab = ({ key, text }: TabRouterItem) => {
if (key === props.modelValue) { if (key === props.modelValue) {
return; return;
} }
emits('update:modelValue', key); emits('update:modelValue', key);
emits('change', key); emits('change', key, text);
}; };
onMounted(() => { onMounted(() => {
// 获取有权限的 key // 获取有权限的 key
const keys = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission)) const items = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission)) || [];
.map(s => s.key) || []; if (!items.length) {
if (!keys.length) {
return; return;
} }
// 设置默认选中 // 设置默认选中
if (keys.indexOf(props.modelValue as string | number) === -1) { if (items.map(s => s.key).indexOf(props.modelValue as string | number) === -1) {
emits('update:modelValue', keys[0]); const item = items[0];
emits('update:modelValue', item.key);
emits('change', item.key, item.text);
} else {
// 触发 change 事件
const matchItem = items.find(s => s.key === props.modelValue);
if (matchItem) {
emits('change', matchItem.key, matchItem.text);
}
} }
}); });
@@ -64,6 +71,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
user-select: none; user-select: none;
background: #FFF;
} }
.tab-item { .tab-item {
@@ -77,6 +85,10 @@
font-size: 14px; font-size: 14px;
color: var(--color-text-2); color: var(--color-text-2);
&:first-child {
margin-top: 0;
}
svg { svg {
margin-right: 4px; margin-right: 4px;
font-size: 16px; font-size: 16px;

View File

@@ -2,8 +2,10 @@
* tab 元素 * tab 元素
*/ */
export interface TabRouterItem { export interface TabRouterItem {
key: string | number, key: string | number;
text: string, text: string;
icon?: string; icon?: string;
permission?: string[] permission?: string[];
[key: string]: unknown;
} }

View File

@@ -1,6 +1,7 @@
import type { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router'; import type { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
import { useMenuStore, useUserStore } from '@/store'; import { useMenuStore, useUserStore } from '@/store';
import { STATUS_ROUTER_LIST, WHITE_ROUTER_LIST } from '@/router/constants'; import { STATUS_ROUTER_LIST, WHITE_ROUTER_LIST } from '@/router/constants';
import { AdminRoleCode } from '@/types/const';
export default function usePermission() { export default function usePermission() {
const menuStore = useMenuStore(); const menuStore = useMenuStore();
@@ -50,7 +51,7 @@ export default function usePermission() {
* 是否有角色 * 是否有角色
*/ */
hasRole(role: string) { hasRole(role: string) {
return userStore.roles?.includes('admin') || return userStore.roles?.includes(AdminRoleCode) ||
userStore.roles?.includes(role); userStore.roles?.includes(role);
}, },
@@ -58,7 +59,7 @@ export default function usePermission() {
* 是否有角色 * 是否有角色
*/ */
hasAnyRole(role: string[]) { hasAnyRole(role: string[]) {
return userStore.roles?.includes('admin') || return userStore.roles?.includes(AdminRoleCode) ||
role.map(s => userStore.roles?.includes(s)) role.map(s => userStore.roles?.includes(s))
.filter(Boolean).length > 0; .filter(Boolean).length > 0;
} }

View File

@@ -0,0 +1,2 @@
// 管理员角色编码
export const AdminRoleCode = 'admin';

View File

@@ -1,13 +1,15 @@
<template> <template>
<!-- 分组树 --> <!-- 分组树 -->
<a-tree <a-tree v-if="treeData.length"
v-if="treeData.length" ref="tree"
ref="tree" class="tree-container"
class="tree-container" :blockNode="true"
:blockNode="true" :draggable="draggable"
:draggable="true" :data="treeData"
:data="treeData" :checkable="checkable"
@drop="moveGroup"> v-model:checked-keys="checkedKeys"
:check-strictly="true"
@drop="moveGroup">
<!-- 标题 --> <!-- 标题 -->
<template #title="node"> <template #title="node">
<!-- 修改名称输入框 --> <!-- 修改名称输入框 -->
@@ -15,6 +17,7 @@
<a-input size="mini" <a-input size="mini"
ref="renameInput" ref="renameInput"
v-model="currName" v-model="currName"
style="width: 138px;"
placeholder="名称" placeholder="名称"
autofocus autofocus
:max-length="32" :max-length="32"
@@ -85,16 +88,31 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { TreeNodeData } from '@arco-design/web-vue'; import type { TreeNodeData } from '@arco-design/web-vue';
import { nextTick, onMounted, ref } from 'vue'; import { computed, nextTick, onMounted, ref } from 'vue';
import { createGroupGroupPrefix, rootId } from '../types/const'; import { createGroupGroupPrefix, rootId } from '../types/const';
import { findNode, findParentNode, moveNode } from '@/utils/tree'; import { findNode, findParentNode, moveNode } from '@/utils/tree';
import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group'; import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
import { isString } from '@/utils/is'; import { isString } from '@/utils/is';
import { useCacheStore } from '@/store';
const props = defineProps({ const props = defineProps({
loading: Boolean loading: Boolean,
draggable: {
type: Boolean,
default: true
},
checkable: {
type: Boolean,
default: false
},
checkedKeys: {
type: Array<Number>,
default: []
}
}); });
const emits = defineEmits(['loading', 'selectNode']); const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
const cacheStore = useCacheStore();
const tree = ref(); const tree = ref();
const modCount = ref(0); const modCount = ref(0);
@@ -102,6 +120,19 @@
const currName = ref(); const currName = ref();
const treeData = ref<Array<TreeNodeData>>([]); 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 rename = (title: number, key: number) => {
const node = findNode<TreeNodeData>(key, treeData.value); const node = findNode<TreeNodeData>(key, treeData.value);
@@ -146,7 +177,7 @@
const addRootNode = () => { const addRootNode = () => {
const newKey = `${createGroupGroupPrefix}${Date.now()}`; const newKey = `${createGroupGroupPrefix}${Date.now()}`;
treeData.value.push({ treeData.value.push({
title: 'new', title: '新分组',
key: newKey key: newKey
}); });
// 编辑子节点 // 编辑子节点
@@ -165,7 +196,7 @@
const newKey = `${createGroupGroupPrefix}${Date.now()}`; const newKey = `${createGroupGroupPrefix}${Date.now()}`;
const children = parentNode.children || []; const children = parentNode.children || [];
children.push({ children.push({
title: 'new', title: '新分组',
key: newKey key: newKey
}); });
parentNode.children = children; parentNode.children = children;
@@ -233,11 +264,17 @@
if (isString(key) && key.startsWith(createGroupGroupPrefix)) { if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
// 寻找父节点 // 寻找父节点
const parent = findParentNode(key, treeData.value); const parent = findParentNode(key, treeData.value);
if (parent && parent.children) { if (parent) {
// 根节点
if (parent.root) {
parent.children = treeData.value;
}
// 移除子节点 // 移除子节点
for (let i = 0; i < parent.children.length; i++) { if (parent.children) {
if (parent.children[i].key === key) { for (let i = 0; i < parent.children.length; i++) {
parent.children.splice(i, 1); if (parent.children[i].key === key) {
parent.children.splice(i, 1);
}
} }
} }
} }
@@ -273,21 +310,28 @@
}; };
// 加载数据 // 加载数据
const fetchTreeData = async () => { const fetchTreeData = async (force = false) => {
try { if (cacheStore.hostGroups.length && !force) {
emits('loading', true); // 缓存有数据并且非强制加载 直接从缓存中加载
const { data } = await getHostGroupTree(); treeData.value = cacheStore.hostGroups;
treeData.value = data; } else {
// 未选择则选择首个 // 无数据/强制加载
if (!tree.value?.getSelectedNodes()?.length && data.length) { try {
await nextTick(() => { emits('loading', true);
tree.value?.selectNode(data[0].key); const { data } = await getHostGroupTree();
emits('selectNode', data[0]); treeData.value = data;
}); cacheStore.hostGroups = data;
} catch (e) {
} finally {
emits('loading', false);
} }
} 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]);
});
} }
}; };
@@ -321,15 +365,17 @@
.arco-tree-node-switcher { .arco-tree-node-switcher {
margin-left: 8px; margin-left: 8px;
} }
&:hover {
background-color: var(--color-fill-1);
}
} }
:deep(.arco-tree-node-selected) { :deep(.arco-tree-node-selected) {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
.arco-tree-node-title { &:hover {
&:hover { background-color: var(--color-fill-1);
background-color: var(--color-fill-2);
}
} }
} }

View File

@@ -1,8 +1,66 @@
<template> <template>
<div class="simple-card grant-container"> <a-spin :loading="loading" class="grant-container">
<div style="height: 200px;background: #00308f"> <!-- 左侧角色列表 -->
<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> </div>
</div> <!-- 右侧菜单列表 -->
<div class="group-container">
<!-- 顶部 -->
<div class="group-header">
<!-- 提示信息 -->
<a-alert class="alert-wrapper" :show-icon="false">
<span v-if="currentRole">
当前选择的角色为 <span class="span-blue mr4">{{ currentRole.text }}</span>
<span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
</span>
</a-alert>
<!-- 保存 -->
<a-button class="save-button"
type="primary"
@click="save">
保存
</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="fetchGroupHost"
@update:checked-keys="updateCheckedGroups" />
</div>
<!-- 主机列表 -->
<div class="group-main-hosts">
<a-list size="smail" :title="'组内数据'" :split="false">
<a-list-item v-for="idx in 4" :key="idx">
<a-list-item-meta
title="host"
>
<template #avatar>
<icon-desktop />
</template>
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</div>
</div>
</a-spin>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -12,11 +70,143 @@
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import type { TabRouterItem } from '@/components/view/tab-router/types';
import { ref, onMounted, watch } from 'vue';
import { useCacheStore } from '@/store';
import useLoading from '@/hooks/loading';
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
import { AdminRoleCode } from '@/types/const';
import HostGroupTree from './host-group-tree.vue';
import { Message } from '@arco-design/web-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>>([]);
// 监听角色变更 获取授权列表
watch(roleId, async (value) => {
if (!value) {
return;
}
currentRole.value = rolesRouter.value.find(s => s.key === value);
setLoading(true);
try {
const { data } = await getAuthorizedHostGroup({
roleId: roleId.value
});
authorizedGroups.value = data;
checkedGroups.value = data;
} catch (e) {
} finally {
setLoading(false);
}
});
// 加载组内数据
const fetchGroupHost = () => {
};
// 选择分组
const updateCheckedGroups = (e: Array<number>) => {
checkedGroups.value = e;
};
// 保存
const save = async () => {
setLoading(true);
try {
await grantHostGroup({
roleId: roleId.value,
groupIdList: checkedGroups.value
});
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.grant-container { .grant-container {
width: 100%;
padding: 16px; padding: 16px;
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;
}
}
.group-container {
width: 100%;
.group-header {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
align-items: center;
.alert-wrapper {
height: 32px;
}
.save-button {
margin-left: 16px;
}
}
.group-main {
display: flex;
&-tree {
width: calc(100% - 240px - 16px);
margin-right: 16px;
}
&-hosts {
width: 240px;
}
}
}
}
:deep(.tab-item) {
margin-left: 0;
}
:deep(.arco-avatar-image) {
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
background: rgb(var(--blue-6));
} }
</style> </style>

View File

@@ -32,7 +32,7 @@
</div> </div>
</a-spin> </a-spin>
<!-- 身体部分 --> <!-- 身体部分 -->
<a-spin class="simple-card view-body" <a-spin class="simple-card transfer-body"
:loading="dataLoading"> :loading="dataLoading">
<host-transfer ref="transfer" <host-transfer ref="transfer"
:group="currentGroup" :group="currentGroup"
@@ -67,7 +67,7 @@
// 刷新树 // 刷新树
const refreshTree = () => { const refreshTree = () => {
tree.value.fetchTreeData(); tree.value.fetchTreeData(true);
}; };
// 选中分组 // 选中分组
@@ -78,10 +78,10 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@tree-width: 26%; @tree-width: 30%;
.tree-card { .tree-card {
margin-right: 16px; padding: 0 0 16px 8px;
width: @tree-width; width: @tree-width;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -90,7 +90,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 8px 0 16px; padding-left: 16px;
position: relative; position: relative;
width: 100%; width: 100%;
height: 44px; height: 44px;
@@ -131,13 +131,13 @@
} }
} }
.view-body { .transfer-body {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 16px; padding: 12px 16px 16px 16px;
width: calc(100% - @tree-width - 16px); width: calc(100% - @tree-width);
position: absolute; position: absolute;
left: calc(@tree-width + 16px); left: @tree-width;
} }
</style> </style>

View File

@@ -1,50 +0,0 @@
<template>
<a-tabs class="view-container"
:default-active-key="1"
:justify="true"
:destroy-on-hide="true"
:lazy-load="true">
<!-- 左侧导航 -->
<a-tab-pane :key="1">
<host-group-view-setting />
<template #title>
<icon-unordered-list />
分组配置
</template>
</a-tab-pane>
<!-- 角色分配 -->
<a-tab-pane :key="2">
<host-group-view-role-grant />
<template #title>
<icon-safe />
角色授权
</template>
</a-tab-pane>
<!-- 用户分配 -->
<a-tab-pane :key="3">
<host-group-view-user-grant />
<template #title>
<icon-user />
用户授权
</template>
</a-tab-pane>
</a-tabs>
</template>
<script lang="ts">
export default {
name: 'host-group-view'
};
</script>
<script lang="ts" setup>
import HostGroupViewSetting from './host-group-view-setting.vue';
import HostGroupViewRoleGrant from './host-group-view-role-grant.vue';
import HostGroupViewUserGrant from './host-group-view-user-grant.vue';
</script>
<style lang="less" scoped>
</style>

View File

@@ -3,7 +3,7 @@
<!-- 头部 --> <!-- 头部 -->
<div class="transfer-header"> <div class="transfer-header">
<!-- 提示 --> <!-- 提示 -->
<a-alert class="alert-wrapper"> <a-alert class="alert-wrapper" :show-icon="false">
<!-- 已选中分组 --> <!-- 已选中分组 -->
<template v-if="group.key"> <template v-if="group.key">
<span>当前编辑的分组为 <span class="span-blue">{{ group.title }}</span></span> <span>当前编辑的分组为 <span class="span-blue">{{ group.title }}</span></span>

View File

@@ -2,6 +2,7 @@
<div v-if="render" class="view-container"> <div v-if="render" class="view-container">
<a-tabs v-if="render" <a-tabs v-if="render"
class="tabs-container" class="tabs-container"
size="large"
:default-active-key="1" :default-active-key="1"
:destroy-on-hide="true" :destroy-on-hide="true"
:justify="true" :justify="true"
@@ -48,9 +49,13 @@
import HostGroupViewSetting from './components/host-group-view-setting.vue'; import HostGroupViewSetting from './components/host-group-view-setting.vue';
import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue'; import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue';
import HostGroupViewUserGrant from './components/host-group-view-user-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';
const render = ref(false); const render = ref(false);
const cacheStore = useCacheStore(); const cacheStore = useCacheStore();
const { hasPermission } = usePermission();
// 加载主机列表 // 加载主机列表
const loadHostList = async () => { const loadHostList = async () => {
@@ -59,19 +64,50 @@
// 设置到缓存 // 设置到缓存
cacheStore.set('hosts', data); cacheStore.set('hosts', data);
} catch (e) { } catch (e) {
Message.error('tag加载失败'); Message.error('主机列表加载失败');
}
};
// 加载用户列表
const loadUserList = async () => {
try {
const { data } = await getUserList();
// 设置到缓存
cacheStore.set('users', data);
} catch (e) {
Message.error('用户列表加载失败');
}
};
// 加载角色列表
const loadRoleList = async () => {
try {
const { data } = await getRoleList();
// 设置到缓存
cacheStore.set('roles', data);
} catch (e) {
Message.error('角色列表加载失败');
} }
}; };
onBeforeMount(async () => { onBeforeMount(async () => {
// 加载主机列表 if (hasPermission('asset:host-group:query')) {
await loadHostList(); // 加载主机列表 tab1
render.value = true; await loadHostList();
render.value = true;
}
if (hasPermission('asset:host-group:grant')) {
// 加载角色列表 tab2
await loadRoleList();
render.value = true;
// 加载用户列表 tab3
await loadUserList();
}
}); });
// 卸载时清除 cache // 卸载时清除 cache
onUnmounted(() => { onUnmounted(() => {
cacheStore.reset('user', 'roles', 'hosts'); cacheStore.reset('users', 'roles', 'hosts', 'hostGroups');
}); });
</script> </script>
@@ -96,4 +132,8 @@
:deep(.arco-tabs-content) { :deep(.arco-tabs-content) {
padding-top: 0; padding-top: 0;
} }
:deep(.arco-tabs-content) {
position: relative;
}
</style> </style>

View File

@@ -80,7 +80,7 @@
type="warning" type="warning"
@ok="toggleRoleStatus(record)"> @ok="toggleRoleStatus(record)">
<a-button v-permission="['infra:system-role:delete']" <a-button v-permission="['infra:system-role:delete']"
:disabled="record.code === AdminCode" :disabled="record.code === AdminRoleCode"
:status="toggleDictValue(roleStatusKey, record.status, 'status')" :status="toggleDictValue(roleStatusKey, record.status, 'status')"
type="text" type="text"
size="mini"> size="mini">
@@ -89,7 +89,7 @@
</a-popconfirm> </a-popconfirm>
<!-- 分配菜单 --> <!-- 分配菜单 -->
<a-button v-permission="['infra:system-role:grant-menu']" <a-button v-permission="['infra:system-role:grant-menu']"
:disabled="record.code === AdminCode" :disabled="record.code === AdminRoleCode"
type="text" type="text"
size="mini" size="mini"
@click="emits('openGrant', record)"> @click="emits('openGrant', record)">
@@ -108,7 +108,7 @@
type="warning" type="warning"
@ok="deleteRow(record)"> @ok="deleteRow(record)">
<a-button v-permission="['infra:system-role:delete']" <a-button v-permission="['infra:system-role:delete']"
:disabled="record.code === AdminCode" :disabled="record.code === AdminRoleCode"
type="text" type="text"
size="mini" size="mini"
status="danger"> status="danger">
@@ -134,9 +134,10 @@
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading'; import useLoading from '@/hooks/loading';
import columns from '../types/table.columns'; import columns from '../types/table.columns';
import { roleStatusKey, AdminCode } from '../types/const'; import { roleStatusKey } from '../types/const';
import { usePagination } from '@/types/table'; import { usePagination } from '@/types/table';
import { useDictStore } from '@/store'; import { useDictStore } from '@/store';
import { AdminRoleCode } from '@/types/const';
const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']); const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);

View File

@@ -1,6 +1,3 @@
// 管理员角色编码
export const AdminCode = 'admin';
// 角色状态 // 角色状态
export const RoleStatus = { export const RoleStatus = {
// 停用 // 停用