manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构主机分组页面.

Browse Source
This commit is contained in:
lijiahang
2023-11-23 19:16:57 +08:00
parent 2230d4ed8b
commit 5fe7ce07e5
16 changed files with 166 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
orion-ops-ui/src/views/asset/host-group/components/host-group-view-role-grant.vue
View File

@@ -1,6 +1,7 @@
<template>
<div v-for="i in 300">
host-group-view-role-gra <br>
<div class="simple-card grant-container">
<div style="height: 200px;background: #00308f">
</div>
</div>
</template>
@@ -15,5 +16,7 @@
</script>
<style lang="less" scoped>
.grant-container {
padding: 16px;
}
</style>

69
orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue
View File

@@ -1,25 +1,34 @@
<template>
<div class="view-container">
<a-tabs class="view-container"
:default-active-key="1"
:justify="true"
:destroy-on-hide="true"
:lazy-load="true">
<!-- 左侧导航 -->
<tab-router class="left-tabs"
v-model="key"
:items="tabItems" />
<!-- 右侧内容 -->
<div class="view-main">
<!-- 分组配置 -->
<template v-if="key === tabItemKeys.SETTING">
<host-group-view-setting />
<a-tab-pane :key="1">
<host-group-view-setting />
<template #title>
<icon-unordered-list />
分组配置
</template>
<!-- 角色分配 -->
<template v-if="key === tabItemKeys.ROLE_GRANT">
<host-group-view-role-grant />
</a-tab-pane>
<!-- 角色分配 -->
<a-tab-pane :key="2">
<host-group-view-role-grant />
<template #title>
<icon-safe />
角色授权
</template>
<!-- 用户分配 -->
<template v-if="key === tabItemKeys.USER_GRANT">
<host-group-view-user-grant />
</a-tab-pane>
<!-- 用户分配 -->
<a-tab-pane :key="3">
<host-group-view-user-grant />
<template #title>
<icon-user />
用户授权
</template>
</div>
</div>
</a-tab-pane>
</a-tabs>
</template>
<script lang="ts">
@@ -29,39 +38,13 @@
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { tabItems, tabItemKeys } from '../types/const';
import HostGroupViewSetting from './host-group-view-setting.vue';
import HostGroupViewRoleGrant from './host-group-view-role-grant.vue';
import HostGroupViewUserGrant from './host-group-view-user-grant.vue';
const key = ref();
</script>
<style lang="less" scoped>
@tab-width: 138px;
.view-container {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.left-tabs {
display: flex;
flex-direction: column;
width: @tab-width;
height: 100%;
margin-right: 16px;
}
.view-main {
width: calc(100% - @tab-width - 16px);
height: 100%;
position: relative;
}
</style>

62
orion-ops-ui/src/views/asset/host-group/index.vue
View File

@@ -1,6 +1,36 @@
<template>
<div class="index-container" v-if="render">
<host-group-view />
<div v-if="render" class="view-container">
<a-tabs v-if="render"
class="tabs-container"
:default-active-key="1"
:destroy-on-hide="true"
:justify="true"
:lazy-load="true">
<!-- 左侧导航 -->
<a-tab-pane :key="1" v-permission="['asset:host-group:query']">
<host-group-view-setting />
<template #title>
<icon-unordered-list />
分组配置
</template>
</a-tab-pane>
<!-- 角色分配 -->
<a-tab-pane :key="2" v-permission="['asset:host-group:grant']">
<host-group-view-role-grant />
<template #title>
<icon-safe />
角色授权
</template>
</a-tab-pane>
<!-- 用户分配 -->
<a-tab-pane :key="3" v-permission="['asset:host-group:grant']">
<host-group-view-user-grant />
<template #title>
<icon-user />
用户授权
</template>
</a-tab-pane>
</a-tabs>
</div>
</template>
@@ -11,12 +41,13 @@
</script>
<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
import { useAppStore, useCacheStore, useDictStore } from '@/store';
import HostGroupView from './components/host-group-view.vue';
import { ref, onBeforeMount, onUnmounted } from 'vue';
import { useCacheStore } from '@/store';
import { getHostList } from '@/api/asset/host';
import { Message } from '@arco-design/web-vue';
import HostGroupViewSetting from './components/host-group-view-setting.vue';
import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue';
import HostGroupViewUserGrant from './components/host-group-view-user-grant.vue';
const render = ref(false);
const cacheStore = useCacheStore();
@@ -46,10 +77,23 @@
</script>
<style lang="less" scoped>
.index-container {
position: relative;
.view-container {
display: flex;
width: 100%;
height: 100%;
position: relative;
padding: 16px;
}
.tabs-container {
display: flex;
width: 100%;
height: 100%;
position: relative;
background: #FFF;
}
:deep(.arco-tabs-content) {
padding-top: 0;
}
</style>

25
orion-ops-ui/src/views/asset/host-group/types/const.ts
View File

@@ -1,28 +1,3 @@
// 导航 key
export const tabItemKeys = {
SETTING: 1,
ROLE_GRANT: 2,
USER_GRANT: 3
};
// 导航路径
export const tabItems = [{
key: tabItemKeys.SETTING,
text: '分组配置',
icon: 'icon-unordered-list',
permission: ['asset:host-group:query']
}, {
key: tabItemKeys.ROLE_GRANT,
text: '角色授权',
icon: 'icon-safe',
permission: []
}, {
key: tabItemKeys.USER_GRANT,
text: '用户授权',
icon: 'icon-user',
permission: []
}];
// 创建前缀
export const createGroupGroupPrefix = 'create-';