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" />
|
||||
{{ tab.title }}
|
||||
</template>
|
||||
<component :is="tab.component" />
|
||||
<component :is="tab.component" :type="tab.type" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import HostGroupRoleGrant from '../components/host-group-role-grant.vue';
|
||||
import HostGroupUserGrant from '../components/host-group-user-grant.vue';
|
||||
import HostKeyRoleGrant from '../components/host-key-role-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';
|
||||
import HostGroupGrant from '../components/host-group-grant.vue';
|
||||
import HostKeyGrant from '../components/host-key-grant.vue';
|
||||
import HostIdentityGrant from '../components/host-identity-grant.vue';
|
||||
|
||||
// 路由
|
||||
export const GrantRouteName = 'assetGrant';
|
||||
@@ -24,6 +21,12 @@ export const GrantKey = {
|
||||
HOST_IDENTITY_USER: 6,
|
||||
};
|
||||
|
||||
// 授权类型
|
||||
export const GrantType = {
|
||||
ROLE: 'role',
|
||||
USER: 'user',
|
||||
};
|
||||
|
||||
// 授权 tab 组件
|
||||
export const GrantTabs = [
|
||||
{
|
||||
@@ -31,36 +34,42 @@ export const GrantTabs = [
|
||||
permission: ['asset:host-group:grant'],
|
||||
title: '主机分组授权 - 角色',
|
||||
icon: 'icon-desktop',
|
||||
component: HostGroupRoleGrant
|
||||
type: GrantType.ROLE,
|
||||
component: HostGroupGrant
|
||||
}, {
|
||||
key: GrantKey.HOST_GROUP_USER,
|
||||
permission: ['asset:host-group:grant'],
|
||||
title: '主机分组授权 - 用户',
|
||||
icon: 'icon-desktop',
|
||||
component: HostGroupUserGrant
|
||||
type: GrantType.USER,
|
||||
component: HostGroupGrant
|
||||
}, {
|
||||
key: GrantKey.HOST_KEY_ROLE,
|
||||
permission: ['asset:host-key:grant'],
|
||||
title: '主机秘钥授权 - 角色',
|
||||
icon: 'icon-lock',
|
||||
component: HostKeyRoleGrant
|
||||
type: GrantType.ROLE,
|
||||
component: HostKeyGrant
|
||||
}, {
|
||||
key: GrantKey.HOST_KEY_USER,
|
||||
permission: ['asset:host-key:grant'],
|
||||
title: '主机秘钥授权 - 用户',
|
||||
icon: 'icon-lock',
|
||||
component: HostKeyUserGrant
|
||||
type: GrantType.USER,
|
||||
component: HostKeyGrant
|
||||
}, {
|
||||
key: GrantKey.HOST_IDENTITY_ROLE,
|
||||
permission: ['asset:host-identity:grant'],
|
||||
title: '主机身份授权 - 角色',
|
||||
icon: 'icon-idcard',
|
||||
component: HostIdentityRoleGrant
|
||||
type: GrantType.ROLE,
|
||||
component: HostIdentityGrant
|
||||
}, {
|
||||
key: GrantKey.HOST_IDENTITY_USER,
|
||||
permission: ['asset:host-identity:grant'],
|
||||
title: '主机身份授权 - 用户',
|
||||
icon: 'icon-idcard',
|
||||
component: HostIdentityUserGrant
|
||||
type: GrantType.USER,
|
||||
component: HostIdentityGrant
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user