feat: 优化资产授权.
This commit is contained in:
lijiahangmax
140
orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
Normal file
140
orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<a-spin :loading="loading" class="grant-container">
|
||||||
|
<!-- 角色列表 -->
|
||||||
|
<router-roles v-if="type === GrantType.ROLE" outer-class="router-wrapper"
|
||||||
|
v-model="subjectId"
|
||||||
|
@change="fetchAuthorizedData" />
|
||||||
|
<!-- 角色列表 -->
|
||||||
|
<router-users v-else-if="type === GrantType.USER" outer-class="router-wrapper"
|
||||||
|
v-model="subjectId"
|
||||||
|
@change="fetchAuthorizedData" />
|
||||||
|
<!-- 数据列表 -->
|
||||||
|
<div class="data-container">
|
||||||
|
<!-- 顶部 -->
|
||||||
|
<div class="data-header">
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<a-alert class="alert-wrapper" :show-icon="false">
|
||||||
|
<span class="alert-message" v-if="currentSubject">
|
||||||
|
<!-- 角色提示信息 -->
|
||||||
|
<template v-if="type === GrantType.ROLE">
|
||||||
|
当前选择的角色为 <span class="span-blue mr4">{{ currentSubject.text }}</span>
|
||||||
|
<span class="span-blue ml4" v-if="currentSubject.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
|
||||||
|
</template>
|
||||||
|
<!-- 用户提示信息 -->
|
||||||
|
<template v-else-if="type === GrantType.USER">
|
||||||
|
当前选择的用户为 <span class="span-blue mr4">{{ currentSubject.text }}</span>
|
||||||
|
<span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</a-alert>
|
||||||
|
<!-- 授权 -->
|
||||||
|
<a-button class="grant-button"
|
||||||
|
type="primary"
|
||||||
|
@click="doGrant">
|
||||||
|
授权
|
||||||
|
<template #icon>
|
||||||
|
<icon-safe />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<!-- 主体部分 -->
|
||||||
|
<div class="data-main">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'grant-layout'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { TabRouterItem } from '@/components/view/tab-router/types';
|
||||||
|
import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { AdminRoleCode } from '@/types/const';
|
||||||
|
import { GrantType } from '../types/const';
|
||||||
|
import RouterRoles from './router-roles.vue';
|
||||||
|
import RouterUsers from './router-users.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: String,
|
||||||
|
loading: Boolean,
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['fetch', 'grant']);
|
||||||
|
|
||||||
|
const subjectId = ref();
|
||||||
|
const currentSubject = ref();
|
||||||
|
|
||||||
|
// 获取授权列表
|
||||||
|
const fetchAuthorizedData = async (id: number, subject: TabRouterItem) => {
|
||||||
|
currentSubject.value = subject;
|
||||||
|
if (props.type === GrantType.ROLE) {
|
||||||
|
emits('fetch', { roleId: id } as AssetAuthorizedDataQueryRequest);
|
||||||
|
} else if (props.type === GrantType.USER) {
|
||||||
|
emits('fetch', { userId: id } as AssetAuthorizedDataQueryRequest);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 授权
|
||||||
|
const doGrant = async () => {
|
||||||
|
if (props.type === GrantType.ROLE) {
|
||||||
|
emits('grant', { roleId: subjectId.value } as AssetDataGrantRequest);
|
||||||
|
} else if (props.type === GrantType.USER) {
|
||||||
|
emits('grant', { userId: subjectId.value } as AssetDataGrantRequest);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.grant-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 12px 12px 0;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
.router-wrapper {
|
||||||
|
margin-right: 16px;
|
||||||
|
border-right: 1px var(--color-neutral-3) solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.data-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.alert-wrapper {
|
||||||
|
padding: 4px 16px;
|
||||||
|
|
||||||
|
.alert-message {
|
||||||
|
display: block;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grant-button {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-main {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<grant-layout :type="type"
|
||||||
|
:loading="loading"
|
||||||
|
@fetch="fetchAuthorizedGroup"
|
||||||
|
@grant="doGrant">
|
||||||
|
<!-- 分组 -->
|
||||||
|
<host-group-tree outer-class="group-main-tree"
|
||||||
|
:checkable="true"
|
||||||
|
:checked-keys="checkedGroups"
|
||||||
|
:editable="false"
|
||||||
|
:loading="loading"
|
||||||
|
@loading="setLoading"
|
||||||
|
@select-node="e => selectedGroup = e"
|
||||||
|
@update:checked-keys="updateCheckedGroups" />
|
||||||
|
<!-- 主机列表 -->
|
||||||
|
<host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
|
||||||
|
</grant-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'host-group-grant'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||||
|
import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
|
||||||
|
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 '@/components/asset/host-group/host-group-tree.vue';
|
||||||
|
import HostList from './host-list.vue';
|
||||||
|
import GrantLayout from './grant-layout.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { loading, setLoading } = useLoading();
|
||||||
|
|
||||||
|
const authorizedGroups = ref<Array<number>>([]);
|
||||||
|
const checkedGroups = ref<Array<number>>([]);
|
||||||
|
const selectedGroup = ref<TreeNodeData>({});
|
||||||
|
|
||||||
|
// 选择分组
|
||||||
|
const updateCheckedGroups = (e: Array<number>) => {
|
||||||
|
checkedGroups.value = e;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取授权列表
|
||||||
|
const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const { data } = await getAuthorizedHostGroup(request);
|
||||||
|
authorizedGroups.value = data;
|
||||||
|
checkedGroups.value = data;
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 授权
|
||||||
|
const doGrant = async (request: AssetDataGrantRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await grantHostGroup({
|
||||||
|
...request,
|
||||||
|
idList: checkedGroups.value
|
||||||
|
});
|
||||||
|
Message.success('授权成功');
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.group-main-tree {
|
||||||
|
width: calc(60% - 16px);
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-main-hosts {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 角色列表 -->
|
|
||||||
<router-roles outer-class="roles-router-wrapper"
|
|
||||||
v-model="roleId"
|
|
||||||
@change="fetchAuthorizedGroup" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="group-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="group-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentRole" class="alert-message">
|
|
||||||
当前选择的角色为 <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="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主体部分 -->
|
|
||||||
<div class="group-main">
|
|
||||||
<!-- 分组 -->
|
|
||||||
<host-group-tree outer-class="group-main-tree"
|
|
||||||
:checkable="true"
|
|
||||||
:checked-keys="checkedGroups"
|
|
||||||
:editable="false"
|
|
||||||
:loading="loading"
|
|
||||||
@loading="setLoading"
|
|
||||||
@select-node="e => selectedGroup = e"
|
|
||||||
@update:checked-keys="updateCheckedGroups" />
|
|
||||||
<!-- 主机列表 -->
|
|
||||||
<host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-group-role-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
|
||||||
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 HostList from './host-list.vue';
|
|
||||||
import RouterRoles from './router-roles.vue';
|
|
||||||
import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
|
|
||||||
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const roleId = ref();
|
|
||||||
const currentRole = ref();
|
|
||||||
const authorizedGroups = ref<Array<number>>([]);
|
|
||||||
const checkedGroups = ref<Array<number>>([]);
|
|
||||||
const selectedGroup = ref<TreeNodeData>({});
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedGroup = async (id: number, role: any) => {
|
|
||||||
roleId.value = id;
|
|
||||||
currentRole.value = role;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostGroup({
|
|
||||||
roleId: roleId.value
|
|
||||||
});
|
|
||||||
authorizedGroups.value = data;
|
|
||||||
checkedGroups.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择分组
|
|
||||||
const updateCheckedGroups = (e: Array<number>) => {
|
|
||||||
checkedGroups.value = e;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostGroup({
|
|
||||||
roleId: roleId.value,
|
|
||||||
idList: checkedGroups.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.roles-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.group-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-hosts {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 用户列表 -->
|
|
||||||
<router-users outer-class="users-router-wrapper"
|
|
||||||
v-model="userId"
|
|
||||||
@change="fetchAuthorizedGroup" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="group-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="group-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentUser" class="alert-message">
|
|
||||||
当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
|
|
||||||
<span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
|
|
||||||
</span>
|
|
||||||
</a-alert>
|
|
||||||
<!-- 授权 -->
|
|
||||||
<a-button class="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主题部分 -->
|
|
||||||
<div class="group-main">
|
|
||||||
<!-- 分组 -->
|
|
||||||
<host-group-tree outer-class="group-main-tree sticky-list"
|
|
||||||
:checked-keys="checkedGroups"
|
|
||||||
:editable="false"
|
|
||||||
:loading="loading"
|
|
||||||
@loading="setLoading"
|
|
||||||
@select-node="e => selectedGroup = e"
|
|
||||||
@update:checked-keys="updateCheckedGroups" />
|
|
||||||
<!-- 主机列表 -->
|
|
||||||
<host-list class="group-main-hosts" :group="selectedGroup" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-group-user-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import HostList from './host-list.vue';
|
|
||||||
import RouterUsers from './router-users.vue';
|
|
||||||
import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
|
|
||||||
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const userId = ref();
|
|
||||||
const currentUser = ref();
|
|
||||||
const authorizedGroups = ref<Array<number>>([]);
|
|
||||||
const checkedGroups = ref<Array<number>>([]);
|
|
||||||
const selectedGroup = ref<TreeNodeData>({});
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedGroup = async (id: number, user: any) => {
|
|
||||||
userId.value = id;
|
|
||||||
currentUser.value = user;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostGroup({
|
|
||||||
userId: userId.value
|
|
||||||
});
|
|
||||||
authorizedGroups.value = data;
|
|
||||||
checkedGroups.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择分组
|
|
||||||
const updateCheckedGroups = (e: Array<number>) => {
|
|
||||||
checkedGroups.value = e;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostGroup({
|
|
||||||
userId: userId.value,
|
|
||||||
idList: checkedGroups.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.users-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.group-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-hosts {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-table row-key="id"
|
|
||||||
class="host-identity-main-table"
|
|
||||||
label-align="left"
|
|
||||||
:columns="hostIdentityColumns"
|
|
||||||
v-model:selected-keys="selectedKeys"
|
|
||||||
:row-selection="rowSelection"
|
|
||||||
:sticky-header="true"
|
|
||||||
:data="hostIdentities"
|
|
||||||
:pagination="false"
|
|
||||||
:bordered="false">
|
|
||||||
<!-- 秘钥名称 -->
|
|
||||||
<template #keyId="{ record }">
|
|
||||||
<a-tag color="arcoblue" v-if="record.keyName">{{ record.keyName }}</a-tag>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-identity-grant-table'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { PropType } from 'vue';
|
|
||||||
import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
|
|
||||||
import { hostIdentityColumns } from '../types/table.columns';
|
|
||||||
import { useRowSelection } from '@/types/table';
|
|
||||||
import { computed, ref, onMounted } from 'vue';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Array as PropType<Array<number>>,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const emits = defineEmits(['loading', 'update:modelValue']);
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const rowSelection = useRowSelection();
|
|
||||||
|
|
||||||
const hostIdentities = ref<Array<HostIdentityQueryResponse>>([]);
|
|
||||||
|
|
||||||
const selectedKeys = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue;
|
|
||||||
},
|
|
||||||
set(e) {
|
|
||||||
emits('update:modelValue', e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
onMounted(async () => {
|
|
||||||
emits('loading', true);
|
|
||||||
try {
|
|
||||||
const keys = await cacheStore.loadHostKeys();
|
|
||||||
const identities = await cacheStore.loadHostIdentities();
|
|
||||||
hostIdentities.value = identities.map(s => {
|
|
||||||
return {
|
|
||||||
...s,
|
|
||||||
keyName: s.keyId ? keys.find(k => k.id === s.keyId)?.name : undefined
|
|
||||||
};
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
emits('loading', false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<grant-layout :type="type"
|
||||||
|
:loading="loading"
|
||||||
|
@fetch="fetchAuthorizedGroup"
|
||||||
|
@grant="doGrant">
|
||||||
|
<!-- 主机身份表格 -->
|
||||||
|
<a-table row-key="id"
|
||||||
|
class="host-identity-main-table"
|
||||||
|
label-align="left"
|
||||||
|
:columns="hostIdentityColumns"
|
||||||
|
v-model:selected-keys="selectedKeys"
|
||||||
|
:row-selection="rowSelection"
|
||||||
|
:sticky-header="true"
|
||||||
|
:data="hostIdentities"
|
||||||
|
:pagination="false"
|
||||||
|
:bordered="false">
|
||||||
|
<!-- 秘钥名称 -->
|
||||||
|
<template #keyId="{ record }">
|
||||||
|
<a-tag color="arcoblue" v-if="record.keyId">
|
||||||
|
{{ hostKeys.find(s => s.id === record.keyId)?.name }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</grant-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'host-group-grant'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
|
||||||
|
import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
|
||||||
|
import type { HostKeyQueryResponse } from '@/api/asset/host-key';
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import { hostIdentityColumns } from '../types/table.columns';
|
||||||
|
import { useCacheStore } from '@/store';
|
||||||
|
import { useRowSelection } from '@/types/table';
|
||||||
|
import GrantLayout from './grant-layout.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
const cacheStore = useCacheStore();
|
||||||
|
const rowSelection = useRowSelection();
|
||||||
|
const { loading, setLoading } = useLoading();
|
||||||
|
|
||||||
|
const selectedKeys = ref<Array<number>>([]);
|
||||||
|
const hostIdentities = ref<Array<HostIdentityQueryResponse>>([]);
|
||||||
|
const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
|
||||||
|
|
||||||
|
// 获取授权列表
|
||||||
|
const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const { data } = await getAuthorizedHostIdentity(request);
|
||||||
|
selectedKeys.value = data;
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 授权
|
||||||
|
const doGrant = async (request: AssetDataGrantRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await grantHostIdentity({
|
||||||
|
...request,
|
||||||
|
idList: selectedKeys.value
|
||||||
|
});
|
||||||
|
Message.success('授权成功');
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
onMounted(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
// 加载主机秘钥
|
||||||
|
hostKeys.value = await cacheStore.loadHostKeys();
|
||||||
|
// 加载主机身份
|
||||||
|
hostIdentities.value = await cacheStore.loadHostIdentities();
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 角色列表 -->
|
|
||||||
<router-roles outer-class="roles-router-wrapper"
|
|
||||||
v-model="roleId"
|
|
||||||
@change="fetchAuthorizedHostIdentity" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="host-identity-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="host-identity-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentRole" class="alert-message">
|
|
||||||
当前选择的角色为 <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="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主体部分 -->
|
|
||||||
<div class="host-identity-main">
|
|
||||||
<host-identity-grant-table v-model="selectedIdentities"
|
|
||||||
@loading="setLoading" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-identity-role-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
|
|
||||||
import { AdminRoleCode } from '@/types/const';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
import RouterRoles from './router-roles.vue';
|
|
||||||
import HostIdentityGrantTable from './host-identity-grant-table.vue';
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const roleId = ref();
|
|
||||||
const currentRole = ref();
|
|
||||||
const selectedIdentities = ref<Array<number>>([]);
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedHostIdentity = async (id: number, role: any) => {
|
|
||||||
roleId.value = id;
|
|
||||||
currentRole.value = role;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostIdentity({
|
|
||||||
roleId: roleId.value
|
|
||||||
});
|
|
||||||
selectedIdentities.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostIdentity({
|
|
||||||
roleId: roleId.value,
|
|
||||||
idList: selectedIdentities.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.roles-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-identity-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.host-identity-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grant-button {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-identity-main {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
|
|
||||||
&-table {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 用户列表 -->
|
|
||||||
<router-users outer-class="users-router-wrapper"
|
|
||||||
v-model="userId"
|
|
||||||
@change="fetchAuthorizedHostIdentity" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="host-identity-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="host-identity-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentUser" class="alert-message">
|
|
||||||
当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
|
|
||||||
<span class="ml4">若当前选择的用户用户包含管理员则无需配置 (管理员拥有全部权限)</span>
|
|
||||||
</span>
|
|
||||||
</a-alert>
|
|
||||||
<!-- 授权 -->
|
|
||||||
<a-button class="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主体部分 -->
|
|
||||||
<div class="host-identity-main">
|
|
||||||
<host-identity-grant-table v-model="selectedIdentities"
|
|
||||||
@loading="setLoading" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-identity-user-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
import RouterUsers from './router-users.vue';
|
|
||||||
import HostIdentityGrantTable from '@/views/asset/grant/components/host-identity-grant-table.vue';
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const userId = ref();
|
|
||||||
const currentUser = ref();
|
|
||||||
const selectedIdentities = ref<Array<number>>([]);
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedHostIdentity = async (id: number, user: any) => {
|
|
||||||
userId.value = id;
|
|
||||||
currentUser.value = user;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostIdentity({
|
|
||||||
userId: userId.value
|
|
||||||
});
|
|
||||||
selectedIdentities.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostIdentity({
|
|
||||||
userId: userId.value,
|
|
||||||
idList: selectedIdentities.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.users-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-identity-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.host-identity-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grant-button {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-identity-main {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
|
|
||||||
&-table {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-table row-key="id"
|
|
||||||
class="host-key-main-table"
|
|
||||||
label-align="left"
|
|
||||||
:columns="hostKeyColumns"
|
|
||||||
v-model:selected-keys="selectedKeys"
|
|
||||||
:row-selection="rowSelection"
|
|
||||||
:sticky-header="true"
|
|
||||||
:data="hostKeys"
|
|
||||||
:pagination="false"
|
|
||||||
:bordered="false" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-key-grant-table'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { PropType } from 'vue';
|
|
||||||
import type { HostKeyQueryResponse } from '@/api/asset/host-key';
|
|
||||||
import { hostKeyColumns } from '../types/table.columns';
|
|
||||||
import { useRowSelection } from '@/types/table';
|
|
||||||
import { computed, ref, onMounted } from 'vue';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Array as PropType<Array<number>>,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const emits = defineEmits(['loading', 'update:modelValue']);
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const rowSelection = useRowSelection();
|
|
||||||
|
|
||||||
const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
|
|
||||||
|
|
||||||
const selectedKeys = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue;
|
|
||||||
},
|
|
||||||
set(e) {
|
|
||||||
emits('update:modelValue', e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
onMounted(async () => {
|
|
||||||
emits('loading', true);
|
|
||||||
try {
|
|
||||||
hostKeys.value = await cacheStore.loadHostKeys();
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
emits('loading', false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<grant-layout :type="type"
|
||||||
|
:loading="loading"
|
||||||
|
@fetch="fetchAuthorizedGroup"
|
||||||
|
@grant="doGrant">
|
||||||
|
<!-- 主机秘钥表格 -->
|
||||||
|
<a-table row-key="id"
|
||||||
|
class="host-key-main-table"
|
||||||
|
label-align="left"
|
||||||
|
:columns="hostKeyColumns"
|
||||||
|
v-model:selected-keys="selectedKeys"
|
||||||
|
:row-selection="rowSelection"
|
||||||
|
:sticky-header="true"
|
||||||
|
:data="hostKeys"
|
||||||
|
:pagination="false"
|
||||||
|
:bordered="false" />
|
||||||
|
</grant-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'host-group-grant'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
|
||||||
|
import type { HostKeyQueryResponse } from '@/api/asset/host-key';
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import { useRowSelection } from '@/types/table';
|
||||||
|
import { useCacheStore } from '@/store';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import { hostKeyColumns } from '../types/table.columns';
|
||||||
|
import GrantLayout from './grant-layout.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: String,
|
||||||
|
});
|
||||||
|
const cacheStore = useCacheStore();
|
||||||
|
const rowSelection = useRowSelection();
|
||||||
|
const { loading, setLoading } = useLoading();
|
||||||
|
|
||||||
|
const selectedKeys = ref<Array<number>>([]);
|
||||||
|
const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
|
||||||
|
|
||||||
|
// 获取授权列表
|
||||||
|
const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const { data } = await getAuthorizedHostKey(request);
|
||||||
|
selectedKeys.value = data;
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 授权
|
||||||
|
const doGrant = async (request: AssetDataGrantRequest) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await grantHostKey({
|
||||||
|
...request,
|
||||||
|
idList: selectedKeys.value
|
||||||
|
});
|
||||||
|
Message.success('授权成功');
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
onMounted(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
hostKeys.value = await cacheStore.loadHostKeys();
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 角色列表 -->
|
|
||||||
<router-roles outer-class="roles-router-wrapper"
|
|
||||||
v-model="roleId"
|
|
||||||
@change="fetchAuthorizedHostKey" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="host-key-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="host-key-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentRole" class="alert-message">
|
|
||||||
当前选择的角色为 <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="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主体部分 -->
|
|
||||||
<div class="host-key-main">
|
|
||||||
<host-key-grant-table v-model="selectedKeys"
|
|
||||||
@loading="setLoading" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-key-role-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { HostKeyQueryResponse } from '@/api/asset/host-key';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
|
|
||||||
import { AdminRoleCode } from '@/types/const';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
import RouterRoles from './router-roles.vue';
|
|
||||||
import HostKeyGrantTable from './host-key-grant-table.vue';
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const roleId = ref();
|
|
||||||
const currentRole = ref();
|
|
||||||
const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
|
|
||||||
const selectedKeys = ref<Array<number>>([]);
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedHostKey = async (id: number, role: any) => {
|
|
||||||
roleId.value = id;
|
|
||||||
currentRole.value = role;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostKey({
|
|
||||||
roleId: roleId.value
|
|
||||||
});
|
|
||||||
selectedKeys.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostKey({
|
|
||||||
roleId: roleId.value,
|
|
||||||
idList: selectedKeys.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
onMounted(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
hostKeys.value = await cacheStore.loadHostKeys();
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.roles-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-key-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.host-key-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grant-button {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-key-main {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
|
|
||||||
&-table {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :loading="loading" class="grant-container">
|
|
||||||
<!-- 用户列表 -->
|
|
||||||
<router-users outer-class="users-router-wrapper"
|
|
||||||
v-model="userId"
|
|
||||||
@change="fetchAuthorizedHostKey" />
|
|
||||||
<!-- 分组列表 -->
|
|
||||||
<div class="host-key-container">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="host-key-header">
|
|
||||||
<!-- 提示信息 -->
|
|
||||||
<a-alert class="alert-wrapper" :show-icon="false">
|
|
||||||
<span v-if="currentUser" class="alert-message">
|
|
||||||
当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
|
|
||||||
<span class="ml4">若当前选择的用户用户包含管理员则无需配置 (管理员拥有全部权限)</span>
|
|
||||||
</span>
|
|
||||||
</a-alert>
|
|
||||||
<!-- 授权 -->
|
|
||||||
<a-button class="grant-button"
|
|
||||||
type="primary"
|
|
||||||
@click="doGrant">
|
|
||||||
授权
|
|
||||||
<template #icon>
|
|
||||||
<icon-safe />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 主体部分 -->
|
|
||||||
<div class="host-key-main">
|
|
||||||
<host-key-grant-table v-model="selectedKeys"
|
|
||||||
@loading="setLoading" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'host-key-user-grant'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { HostKeyQueryResponse } from '@/api/asset/host-key';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
|
|
||||||
import { Message } from '@arco-design/web-vue';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import { useCacheStore } from '@/store';
|
|
||||||
import RouterUsers from './router-users.vue';
|
|
||||||
import HostKeyGrantTable from './host-key-grant-table.vue';
|
|
||||||
|
|
||||||
const cacheStore = useCacheStore();
|
|
||||||
const { loading, setLoading } = useLoading();
|
|
||||||
|
|
||||||
const userId = ref();
|
|
||||||
const currentUser = ref();
|
|
||||||
const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
|
|
||||||
const selectedKeys = ref<Array<number>>([]);
|
|
||||||
|
|
||||||
// 获取授权列表
|
|
||||||
const fetchAuthorizedHostKey = async (id: number, user: any) => {
|
|
||||||
userId.value = id;
|
|
||||||
currentUser.value = user;
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await getAuthorizedHostKey({
|
|
||||||
userId: userId.value
|
|
||||||
});
|
|
||||||
selectedKeys.value = data;
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 授权
|
|
||||||
const doGrant = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
await grantHostKey({
|
|
||||||
userId: userId.value,
|
|
||||||
idList: selectedKeys.value
|
|
||||||
});
|
|
||||||
Message.success('授权成功');
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
onMounted(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
hostKeys.value = await cacheStore.loadHostKeys();
|
|
||||||
} catch (e) {
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.grant-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 12px 12px 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.users-router-wrapper {
|
|
||||||
margin-right: 16px;
|
|
||||||
border-right: 1px var(--color-neutral-3) solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-key-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.host-key-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.alert-wrapper {
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
.alert-message {
|
|
||||||
display: block;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grant-button {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-key-main {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 48px);
|
|
||||||
|
|
||||||
&-table {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
<component :is="tab.icon" />
|
<component :is="tab.icon" />
|
||||||
{{ tab.title }}
|
{{ tab.title }}
|
||||||
</template>
|
</template>
|
||||||
<component :is="tab.component" />
|
<component :is="tab.component" :type="tab.type" />
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,9 +1,6 @@
|
|||||||
import HostGroupRoleGrant from '../components/host-group-role-grant.vue';
|
import HostGroupGrant from '../components/host-group-grant.vue';
|
||||||
import HostGroupUserGrant from '../components/host-group-user-grant.vue';
|
import HostKeyGrant from '../components/host-key-grant.vue';
|
||||||
import HostKeyRoleGrant from '../components/host-key-role-grant.vue';
|
import HostIdentityGrant from '../components/host-identity-grant.vue';
|
||||||
import HostKeyUserGrant from '../components/host-key-user-grant.vue';
|
|
||||||
import HostIdentityRoleGrant from '../components/host-identity-role-grant.vue';
|
|
||||||
import HostIdentityUserGrant from '../components/host-identity-user-grant.vue';
|
|
||||||
|
|
||||||
// 路由
|
// 路由
|
||||||
export const GrantRouteName = 'assetGrant';
|
export const GrantRouteName = 'assetGrant';
|
||||||
@@ -24,6 +21,12 @@ export const GrantKey = {
|
|||||||
HOST_IDENTITY_USER: 6,
|
HOST_IDENTITY_USER: 6,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 授权类型
|
||||||
|
export const GrantType = {
|
||||||
|
ROLE: 'role',
|
||||||
|
USER: 'user',
|
||||||
|
};
|
||||||
|
|
||||||
// 授权 tab 组件
|
// 授权 tab 组件
|
||||||
export const GrantTabs = [
|
export const GrantTabs = [
|
||||||
{
|
{
|
||||||
@@ -31,36 +34,42 @@ export const GrantTabs = [
|
|||||||
permission: ['asset:host-group:grant'],
|
permission: ['asset:host-group:grant'],
|
||||||
title: '主机分组授权 - 角色',
|
title: '主机分组授权 - 角色',
|
||||||
icon: 'icon-desktop',
|
icon: 'icon-desktop',
|
||||||
component: HostGroupRoleGrant
|
type: GrantType.ROLE,
|
||||||
|
component: HostGroupGrant
|
||||||
}, {
|
}, {
|
||||||
key: GrantKey.HOST_GROUP_USER,
|
key: GrantKey.HOST_GROUP_USER,
|
||||||
permission: ['asset:host-group:grant'],
|
permission: ['asset:host-group:grant'],
|
||||||
title: '主机分组授权 - 用户',
|
title: '主机分组授权 - 用户',
|
||||||
icon: 'icon-desktop',
|
icon: 'icon-desktop',
|
||||||
component: HostGroupUserGrant
|
type: GrantType.USER,
|
||||||
|
component: HostGroupGrant
|
||||||
}, {
|
}, {
|
||||||
key: GrantKey.HOST_KEY_ROLE,
|
key: GrantKey.HOST_KEY_ROLE,
|
||||||
permission: ['asset:host-key:grant'],
|
permission: ['asset:host-key:grant'],
|
||||||
title: '主机秘钥授权 - 角色',
|
title: '主机秘钥授权 - 角色',
|
||||||
icon: 'icon-lock',
|
icon: 'icon-lock',
|
||||||
component: HostKeyRoleGrant
|
type: GrantType.ROLE,
|
||||||
|
component: HostKeyGrant
|
||||||
}, {
|
}, {
|
||||||
key: GrantKey.HOST_KEY_USER,
|
key: GrantKey.HOST_KEY_USER,
|
||||||
permission: ['asset:host-key:grant'],
|
permission: ['asset:host-key:grant'],
|
||||||
title: '主机秘钥授权 - 用户',
|
title: '主机秘钥授权 - 用户',
|
||||||
icon: 'icon-lock',
|
icon: 'icon-lock',
|
||||||
component: HostKeyUserGrant
|
type: GrantType.USER,
|
||||||
|
component: HostKeyGrant
|
||||||
}, {
|
}, {
|
||||||
key: GrantKey.HOST_IDENTITY_ROLE,
|
key: GrantKey.HOST_IDENTITY_ROLE,
|
||||||
permission: ['asset:host-identity:grant'],
|
permission: ['asset:host-identity:grant'],
|
||||||
title: '主机身份授权 - 角色',
|
title: '主机身份授权 - 角色',
|
||||||
icon: 'icon-idcard',
|
icon: 'icon-idcard',
|
||||||
component: HostIdentityRoleGrant
|
type: GrantType.ROLE,
|
||||||
|
component: HostIdentityGrant
|
||||||
}, {
|
}, {
|
||||||
key: GrantKey.HOST_IDENTITY_USER,
|
key: GrantKey.HOST_IDENTITY_USER,
|
||||||
permission: ['asset:host-identity:grant'],
|
permission: ['asset:host-identity:grant'],
|
||||||
title: '主机身份授权 - 用户',
|
title: '主机身份授权 - 用户',
|
||||||
icon: 'icon-idcard',
|
icon: 'icon-idcard',
|
||||||
component: HostIdentityUserGrant
|
type: GrantType.USER,
|
||||||
|
component: HostIdentityGrant
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user