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

feat: 设置主机分组内元素.

Browse Source
This commit is contained in:
lijiahangmax
2023-11-14 00:57:15 +08:00
parent 570ffd3ebc
commit 894edb52a7
49 changed files with 1410 additions and 660 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
orion-ops-ui/src/api/asset/host-group-rel.ts
View File

@@ -1,114 +0,0 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue/es/table/interface';
import axios from 'axios';
import qs from 'query-string';
/**
* 数据分组关联创建请求
*/
export interface DataGroupRelCreateRequest {
groupId?: number;
relId?: number;
type?: string;
sort?: number;
}
/**
* 数据分组关联更新请求
*/
export interface DataGroupRelUpdateRequest extends DataGroupRelCreateRequest {
id?: number;
}
/**
* 数据分组关联查询请求
*/
export interface DataGroupRelQueryRequest extends Pagination {
searchValue?: string;
id?: number;
groupId?: number;
relId?: number;
type?: string;
sort?: number;
}
/**
* 数据分组关联查询响应
*/
export interface DataGroupRelQueryResponse extends TableData {
id: number;
groupId: number;
relId: number;
type: string;
sort: number;
createTime: number;
updateTime: number;
creator: string;
updater: string;
}
/**
* 创建数据分组关联
*/
export function createDataGroupRel(request: DataGroupRelCreateRequest) {
return axios.post('/infra/data-group-rel/create', request);
}
/**
* 更新数据分组关联
*/
export function updateDataGroupRel(request: DataGroupRelUpdateRequest) {
return axios.put('/infra/data-group-rel/update', request);
}
/**
* 查询数据分组关联
*/
export function getDataGroupRel(id: number) {
return axios.get<DataGroupRelQueryResponse>('/infra/data-group-rel/get', { params: { id } });
}
/**
* 批量查询数据分组关联
*/
export function batchGetDataGroupRelList(idList: Array<number>) {
return axios.get<DataGroupRelQueryResponse[]>('/infra/data-group-rel/batch-get', {
params: { idList },
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat: 'comma' });
}
});
}
/**
* 查询全部数据分组关联
*/
export function getDataGroupRelList(request: DataGroupRelQueryRequest) {
return axios.post<Array<DataGroupRelQueryResponse>>('/infra/data-group-rel/list', request);
}
/**
* 分页查询数据分组关联
*/
export function getDataGroupRelPage(request: DataGroupRelQueryRequest) {
return axios.post<DataGrid<DataGroupRelQueryResponse>>('/infra/data-group-rel/query', request);
}
/**
* 删除数据分组关联
*/
export function deleteDataGroupRel(id: number) {
return axios.delete('/infra/data-group-rel/delete', { params: { id } });
}
/**
* 批量删除数据分组关联
*/
export function batchDeleteDataGroupRel(idList: Array<number>) {
return axios.delete('/infra/data-group-rel/batch-delete', {
params: { idList },
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat: 'comma' });
}
});
}

59
orion-ops-ui/src/api/asset/host-group.ts
View File

@@ -9,47 +9,58 @@ export interface HostGroupCreateRequest {
}
/**
* 主机分组更新请求
* 主机分组重命名请求
*/
export interface HostGroupUpdateRequest extends HostGroupCreateRequest {
export interface HostGroupRenameRequest {
id?: number;
name?: string;
}
/**
* 主机分组查询请求
* 主机分组移动请求
*/
export interface HostGroupQueryRequest {
searchValue?: string;
export interface HostGroupMoveRequest {
id?: number;
parentId?: number;
name?: string;
type?: string;
sort?: number;
targetId?: number;
position?: number;
}
/**
* 主机分组查询响应
*/
export interface HostGroupQueryResponse {
id: number;
parentId: number;
name: string;
sort: number;
key: number;
title: string;
children: Array<HostGroupQueryResponse>;
}
/**
* 分组内主机修改请求
*/
export interface HostGroupRelUpdateRequest {
groupId?: number;
relIdList?: Array<number>;
}
/**
* 创建主机分组
*/
export function createHostGroup(request: HostGroupCreateRequest) {
return axios.post('/asset/host-group/create', request);
return axios.post<number>('/asset/host-group/create', request);
}
/**
* 更新主机分组
* 更新主机分组名称
*/
export function updateHostGroup(request: HostGroupUpdateRequest) {
return axios.put('/asset/host-group/update', request);
export function updateHostGroupName(request: HostGroupRenameRequest) {
return axios.put('/asset/host-group/rename', request);
}
/**
* 移动主机分组
*/
export function moveHostGroup(request: HostGroupMoveRequest) {
return axios.put('/asset/host-group/move', request);
}
/**
@@ -65,3 +76,17 @@ export function getHostGroupTree() {
export function deleteHostGroup(id: number) {
return axios.delete('/asset/host-group/delete', { params: { id } });
}
/**
* 查询分组内主机
*/
export function getHostGroupRelList() {
return axios.get<Array<number>>('/asset/host-group/rel-list');
}
/**
* 修改分组内主机
*/
export function updateHostGroupRel(request: HostGroupRelUpdateRequest) {
return axios.post('/asset/host-group/update-rel', request);
}

6
orion-ops-ui/src/assets/style/global.less
View File

@@ -135,10 +135,10 @@ body {
cursor: pointer;
border: 1px solid transparent;
transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
}
.click-icon-wrapper:hover {
background: var(--color-fill-3);
&:hover {
background: var(--color-fill-3);
}
}
// -- element

46
orion-ops-ui/src/components/app/navbar/index.vue
View File

@@ -115,6 +115,19 @@
</a-button>
</a-tooltip>
</li>
<!-- 刷新页面 -->
<li>
<a-tooltip content="刷新页面">
<a-button class="nav-btn"
type="outline"
shape="circle"
@click="reloadCurrent">
<template #icon>
<icon-refresh />
</template>
</a-button>
</a-tooltip>
</li>
<!-- 偏好设置 -->
<li>
<a-popover :popup-visible="tippedPreference" position="br">
@@ -184,24 +197,30 @@
<script lang="ts" setup>
import { computed, inject, ref } from 'vue';
import { useDark, useFullscreen, useToggle } from '@vueuse/core';
import { useAppStore, useTipsStore, useUserStore } from '@/store';
import { LOCALE_OPTIONS } from '@/locale';
import useLocale from '@/hooks/locale';
import useUser from '@/hooks/user';
import { useRoute, useRouter } from 'vue-router';
import { useDark, useFullscreen, useToggle } from '@vueuse/core';
import { useAppStore, useTabBarStore, useTipsStore, useUserStore } from '@/store';
import { LOCALE_OPTIONS } from '@/locale';
import { triggerMouseEvent } from '@/utils';
import Menu from '@/components/system/menu/tree/index.vue';
import MessageBox from '@/components/system/message-box/index.vue';
import { openAppSettingKey, toggleDrawerMenuKey } from '@/types/symbol';
import { preferenceTipsKey } from './const';
import { REDIRECT_ROUTE_NAME, routerToTag } from '@/router/constants';
import Menu from '@/components/system/menu/tree/index.vue';
import UpdatePasswordModal from '@/components/user/role/update-password-modal.vue';
import MessageBox from '@/components/system/message-box/index.vue';
const tipsStore = useTipsStore();
const appStore = useAppStore();
const userStore = useUserStore();
const tabBarStore = useTabBarStore();
const route = useRoute();
const router = useRouter();
const { logout } = useUser();
const { changeLocale, currentLocale } = useLocale();
const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
// 主题
const darkTheme = useDark({
selector: 'body',
@@ -254,6 +273,23 @@
triggerMouseEvent(localeRef);
};
// 刷新页面
const reloadCurrent = async () => {
if (appStore.tabBar) {
// 重新加载 tab
const itemData = routerToTag(route);
tabBarStore.deleteCache(itemData);
await router.push({
name: REDIRECT_ROUTE_NAME,
params: { path: route.fullPath },
});
tabBarStore.addCache(itemData.name);
} else {
// 刷新页面
router.go(0);
}
};
// 退出登录
const handleLogout = async () => {
await logout();

4
orion-ops-ui/src/components/app/tab-bar/index.vue
View File

@@ -44,9 +44,7 @@
}
);
/**
* 监听路由变化
*/
// 监听路由变化
listenerRouteChange((route: RouteLocationNormalized) => {
if (
!route.meta.noAffix &&

3
orion-ops-ui/src/components/app/tab-bar/tab-item.vue
View File

@@ -112,7 +112,8 @@
const tagClose = (tag: TagProps, idx: number) => {
tabBarStore.deleteTab(idx, tag);
if (props.itemData.fullPath === route.fullPath) {
const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
// 获取队列的前一个 tab
const latest = tagList.value[idx - 1];
router.push({ name: latest.name });
}
};

119
orion-ops-ui/src/components/system/menu/grant/menu-grant-table.vue
View File

@@ -54,6 +54,7 @@
import type { MenuQueryResponse } from '@/api/system/menu';
import { useCacheStore } from '@/store';
import { ref, watch } from 'vue';
import { findNode, flatNodeKeys, flatNodes } from '@/utils/tree';
const cacheStore = useCacheStore();
@@ -75,39 +76,35 @@
return checkedKeys.value;
};
// 选择
const checked = (rule: undefined | ((s: string) => boolean)) => {
// 通过规则 选择/取消选择
const checkOrUncheckByRule = (rule: undefined | ((s: string) => boolean), check: boolean) => {
unTriggerChange.value = true;
const nodes: Array<MenuQueryResponse> = [];
flatNodes(menuData.value, nodes);
if (rule) {
const checkedNodes = nodes.filter(s => s.permission)
const ruleNodes = nodes.filter(s => s.permission)
.filter(s => rule(s?.permission))
.map(s => s.id)
.filter(Boolean);
checkedKeys.value = [...new Set([...checkedKeys.value, ...checkedNodes])];
if (check) {
// 选择
checkedKeys.value = [...new Set([...checkedKeys.value, ...ruleNodes])];
} else {
// 取消选择
checkedKeys.value = [...checkedKeys.value].filter(s => !ruleNodes.includes(s));
}
} else {
checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
if (check) {
// 选择
checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
} else {
// 取消选择
checkedKeys.value = [];
}
}
};
// 取消选择
const unchecked = (rule: undefined | ((s: string) => boolean)) => {
unTriggerChange.value = true;
const nodes: Array<MenuQueryResponse> = [];
flatNodes(menuData.value, nodes);
if (rule) {
const uncheckedNodes = nodes.filter(s => s.permission)
.filter(s => rule(s?.permission))
.map(s => s.id)
.filter(Boolean);
checkedKeys.value = [...checkedKeys.value].filter(s => !uncheckedNodes.includes(s));
} else {
checkedKeys.value = [];
}
};
defineExpose({ init, getValue, checked, unchecked });
defineExpose({ init, getValue, checkOrUncheckByRule });
// 监听级联变化
watch(checkedKeys, (after: Array<number>, before: Array<number>) => {
@@ -119,7 +116,7 @@
const beforeLength = before.length;
if (afterLength > beforeLength) {
// 选择 一定是最后一个
checkMenu(after[afterLength - 1]);
checkOrUncheckMenu(after[afterLength - 1], true);
} else if (afterLength < beforeLength) {
// 取消
let uncheckedId = null;
@@ -132,74 +129,28 @@
if (uncheckedId == null) {
uncheckedId = before[beforeLength - 1];
}
uncheckMenu(uncheckedId);
checkOrUncheckMenu(uncheckedId, false);
}
});
// fixme 提成公共方法
// 寻找当前节点
const findNode = (id: number, arr: Array<MenuQueryResponse>): MenuQueryResponse | undefined => {
for (let node of arr) {
if (node.id === id) {
return node;
}
}
// 寻找子级
for (let node of arr) {
if (node?.children?.length) {
const inChildNode = findNode(id, node.children);
if (inChildNode) {
return inChildNode;
}
}
}
return undefined;
};
// 获取所有子节点id
const flatChildrenId = (nodes: MenuQueryResponse[] | undefined, result: number[]) => {
if (!nodes || !nodes.length) {
return;
}
for (let node of nodes) {
result.push(node.id);
if (node.children) {
flatChildrenId(node.children, result);
}
}
};
// 展开节点
const flatNodes = (nodes: Array<MenuQueryResponse>, result: Array<MenuQueryResponse>) => {
if (!nodes || !nodes.length) {
return;
}
nodes.forEach(s => {
result.push(s);
flatNodes(s.children, result);
});
};
// 级联选择菜单
const checkMenu = (id: number) => {
// 级联选择/取消选择菜单
const checkOrUncheckMenu = (id: number, check: boolean) => {
unTriggerChange.value = true;
// 查询当前节点
const node = findNode(id, menuData.value);
const node = findNode(id, menuData.value, 'id');
if (!node) {
return;
}
const childrenId: number[] = [];
// 获取所在子节点id
flatChildrenId(node?.children, childrenId);
checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
};
// 级联取消选择菜单
const uncheckMenu = (id: number) => {
unTriggerChange.value = true;
// 查询当前节点
const node = findNode(id, menuData.value);
const childrenId: number[] = [];
// 获取所在子节点id
flatChildrenId(node?.children, childrenId);
checkedKeys.value = checkedKeys.value.filter(s => !childrenId.includes(s));
flatNodeKeys(node.children, childrenId, 'id');
if (check) {
// 选中
checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
} else {
// 取消选择
checkedKeys.value = checkedKeys.value.filter(s => !childrenId.includes(s));
}
};
</script>

148
orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue
View File

@@ -1,148 +0,0 @@
<template>
<div>
<!-- 按钮组 -->
<a-button-group class="mb4">
<!-- 全选 -->
<a-button type="text" size="mini" @click="toggleChecked">
{{ checkedKeys?.length === allCheckedKeys?.length ? '反选' : '全选' }}
</a-button>
<!-- 展开 -->
<a-button type="text" size="mini" @click="toggleExpanded">
{{ expandedKeys?.length ? '折叠' : '展开' }}
</a-button>
</a-button-group>
<!-- 菜单树 -->
<a-tree
checked-strategy="child"
:checkable="true"
:animation="false"
:only-check-leaf="true"
v-model:checked-keys="checkedKeys"
v-model:expanded-keys="expandedKeys"
:data="treeData" />
</div>
</template>
<script lang="ts">
export default {
name: 'menu-selector-tree'
};
</script>
<script lang="ts" setup>
import type { TreeNodeData } from '@arco-design/web-vue';
import { ref } from 'vue';
import { useCacheStore } from '@/store';
const treeData = ref<Array<TreeNodeData>>([]);
const allCheckedKeys = ref<Array<number>>([]);
const allExpandedKeys = ref<Array<number>>([]);
const checkedKeys = ref<Array<number>>([]);
const expandedKeys = ref<Array<number>>([]);
// 修改选中状态
const toggleChecked = () => {
checkedKeys.value = checkedKeys.value.length === allCheckedKeys.value.length ? [] : allCheckedKeys.value;
};
// 修改折叠状态
const toggleExpanded = () => {
expandedKeys.value = expandedKeys?.value.length ? [] : allExpandedKeys.value;
};
// 循环选中的 key
const eachAllCheckKeys = (arr: Array<any>) => {
arr.forEach((item) => {
allCheckedKeys.value.push(item.key);
if (item.children && item.children.length) {
eachAllCheckKeys(item.children);
}
});
};
// 循环展开的 key
const eachAllExpandKeys = (arr: Array<any>) => {
arr.forEach((item) => {
if (item.children && item.children.length) {
allExpandedKeys.value.push(item.key);
eachAllExpandKeys(item.children);
}
});
};
// 渲染数据
const init = (keys: Array<number>) => {
// 初始化数据
allCheckedKeys.value = [];
allExpandedKeys.value = [];
checkedKeys.value = keys;
expandedKeys.value = [];
// 渲染菜单
const cacheStore = useCacheStore();
let render = (arr: any[]): TreeNodeData[] => {
return arr.map((s) => {
// 当前节点
const node = {
key: s.id,
title: s.name,
children: undefined as unknown
} as TreeNodeData;
// 子节点
if (s.children && s.children.length) {
node.children = render(s.children);
}
return node;
}).filter(Boolean);
};
// 加载菜单
treeData.value = render([...cacheStore.menus]);
// 加载所有选中的key
eachAllCheckKeys(treeData.value);
// 加载所有展开的key
eachAllExpandKeys(treeData.value);
};
init([]);
// 获取值
const getValue = () => {
if (!checkedKeys.value.length) {
return [];
}
// 查询子节点上级父节点
const mixed: number[] = [];
const findParent = (arr: Array<TreeNodeData>, key: number) => {
for (let node of arr) {
// 是子节点 并且相同
if (node.key === key) {
mixed.push(key);
return true;
}
if (node.children?.length) {
const isFind = findParent(node.children, key);
if (isFind) {
mixed.push(node.key as number);
return true;
}
}
}
return false;
};
// 设置所有节点
for (let key of checkedKeys.value) {
findParent(treeData.value, key);
}
return new Set(mixed);
};
defineExpose({ init, getValue });
</script>
<style lang="less" scoped>
</style>;

7
orion-ops-ui/src/utils/index.ts
View File

@@ -179,6 +179,13 @@ export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
}, 0);
};
/**
* 休眠
*/
export const sleep = (ms: number) => {
return new Promise(resolve => setTimeout(resolve, ms));
};
/**
* 获取当前页面的缩放值
*/

153
orion-ops-ui/src/utils/tree.ts Normal file
View File

@@ -0,0 +1,153 @@
import type { NodeData } from '@/types/global';
// 寻找当前节点
export const findNode = <T extends NodeData>(key: any,
nodes: Array<T>,
keyName = 'key'): T => {
if (!nodes || !nodes.length) {
return undefined as unknown as T;
}
for (let node of nodes) {
if (node[keyName] === key) {
return node;
}
}
// 寻找子级
for (let node of nodes) {
if (node.children?.length) {
const childrenNode = findNode(key, node.children, keyName);
if (childrenNode) {
return childrenNode as T;
}
}
}
return undefined as unknown as T;
};
// 寻找父节点
export const findParentNode = <T extends NodeData>(key: any,
nodes: Array<T>,
keyName = 'key',
parent = (undefined as unknown as T)): T => {
if (!nodes || !nodes.length) {
return undefined as unknown as T;
}
for (let node of nodes) {
if (node[keyName] === key) {
if (parent) {
return parent;
} else {
// 根节点
return {
root: true
} as unknown as T;
}
}
}
// 寻找子级
for (let node of nodes) {
if (node.children?.length) {
const parentNode = findParentNode(key, node.children, keyName, node);
if (parentNode) {
return parentNode as T;
}
}
}
return undefined as unknown as T;
};
// 级联寻找父节点
export const findParentNodes = <T extends NodeData>(key: any,
nodes: Array<T>,
result: Array<T>,
keyName = 'key',
parent = ([] as T[])) => {
if (!nodes || !nodes.length) {
return;
}
for (let node of nodes) {
if (node[keyName] === key) {
result.push(...parent);
return;
}
}
// 寻找子级
for (let node of nodes) {
if (node.children?.length) {
const currentParent = [...parent, node];
findParentNodes(key, node.children, result, keyName, currentParent);
}
}
};
// 检查是否包含子节点 单层
export const hasChildren = <T extends NodeData>(key: string,
nodes: Array<T>,
keyName = 'key'): boolean => {
if (!nodes || !nodes.length) {
return false;
}
return !!nodes.find(s => s[keyName] === key);
};
// 获取所有节点 key
export const flatNodeKeys = <T extends NodeData, R>(nodes: Array<T>,
result: Array<R>,
keyName = 'key') => {
if (!nodes || !nodes.length) {
return;
}
for (let node of nodes) {
result.push(node[keyName]);
flatNodeKeys(node.children, result, keyName);
}
};
// 获取所有节点
export const flatNodes = <T extends NodeData>(nodes: Array<T>,
result: Array<T>) => {
if (!nodes || !nodes.length) {
return;
}
nodes.forEach(s => {
result.push(s);
flatNodes(s.children, result);
});
};
// 移动节点
export const moveNode = (nodes: Array<NodeData>,
dragNode: NodeData,
dropNode: NodeData,
dropPosition: number) => {
// dropPosition === -1 将 dragNode 拖拽到 dropNode 上
// dropPosition === 0 将 dragNode 拖拽到 dropNode 中
// dropPosition === 1 将 dragNode 拖拽到 dropNode 下
const loop = (data: NodeData, key: number, callback: any) => {
data.some((item: NodeData, index: any, arr: NodeData[]) => {
if (item.key === key) {
callback(item, index, arr);
return true;
}
if (item.children) {
return loop(item.children, key, callback);
}
return false;
});
};
loop(nodes, dragNode.key as number, (_: NodeData, index: number, arr: NodeData[]) => {
arr.splice(index, 1);
});
if (dropPosition === 0) {
loop(nodes, dropNode.key as number, (item: NodeData) => {
item.children = item.children || [];
item.children?.push(dragNode);
});
} else {
loop(nodes, dropNode.key as number, (_: NodeData, index: number, arr: NodeData[]) => {
arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
});
}
};

420
orion-ops-ui/src/views/asset/host-group/components/host-group-tree.vue
View File

@@ -1,14 +1,22 @@
<template>
<!-- 分组树 -->
<a-tree
v-if="treeData.length"
ref="tree"
class="tree-container"
:blockNode="true"
:draggable="true"
:data="treeData">
:data="treeData"
@drop="moveGroup">
<!-- 标题 -->
<template #title="node">
<!-- 修改名称输入框 -->
<template v-if="node.editable">
<a-input size="mini"
ref="renameInput"
v-model="currName"
placeholder="名称"
autofocus
:max-length="32"
:disabled="node.loading"
@blur="() => saveNode(node.key)"
@@ -21,30 +29,52 @@
<icon-check v-else
class="pointer"
title="保存"
@click="saveNode(node.key)" />
@click="() => saveNode(node.key)" />
</template>
</a-input>
</template>
<span class="node-title" v-else>
{{ node.title }}
</span>
<!-- 名称 -->
<span v-else
class="node-title-wrapper"
@click="() => emits('selectKey', node.key)">
{{ node.title }}
</span>
</template>
<!-- 操作图标 -->
<template #drag-icon="{ node }">
<a-space v-if="!node.editable">
<icon-edit class="tree-icon"
title="重命名"
@click="rename(node.title, node.key)" />
<icon-delete class="tree-icon"
title="删除"
@click="rename(node.title, node.key)" />
<icon-plus class="tree-icon"
title="新增"
@click="rename(node.title, node.key)" />
<!-- 重命名 -->
<span v-permission="['asset:host-group:update']"
class="tree-icon"
title="重命名"
@click="rename(node.title, node.key)">
<icon-edit />
</span>
<!-- 删除 -->
<a-popconfirm content="确认删除这条记录吗?"
position="left"
type="warning"
@ok="deleteNode(node.key)">
<span v-permission="['asset:host-group:delete']"
class="tree-icon" title="删除">
<icon-delete />
</span>
</a-popconfirm>
<!-- 新增 -->
<span v-permission="['asset:host-group:create']"
class="tree-icon"
title="新增"
@click="addChildren(node)">
<icon-plus />
</span>
</a-space>
</template>
</a-tree>
<!-- 无数据 -->
<div v-else-if="!loading" class="empty-container">
<span>暂无数据</span>
<span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
</div>
</template>
<script lang="ts">
@@ -55,51 +85,25 @@
<script lang="ts" setup>
import type { TreeNodeData } from '@arco-design/web-vue';
import type { NodeData } from '@/types/global';
import { nextTick, ref } from 'vue';
import { nextTick, onMounted, ref } from 'vue';
import { createGroupGroupPrefix, rootId } from '../types/const';
import { findNode, findParentNode, moveNode } from '@/utils/tree';
import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
import { isString } from '@/utils/is';
const props = defineProps({
loading: Boolean
});
const emits = defineEmits(['loading', 'selectKey']);
const tree = ref();
const modCount = ref(0);
const renameInput = ref();
const currName = ref();
// 提为工具 utils tree.js
function sleep(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 保存节点
const saveNode = async (key: string) => {
// 寻找节点
const node = findNode<TreeNodeData>(key, treeData.value);
if (!node) {
return;
}
if (currName.value) {
node.loading = true;
try {
if (key.startsWith('create')) {
// 调用创建 api
await sleep(340);
node.key = 'await id';
} else {
// 调用重命名 api
await sleep(340);
}
node.title = currName.value;
} catch (e) {
} finally {
node.loading = false;
}
} else {
if (key.startsWith('create')) {
// 寻找父节点
// 移除子节点
}
}
node.editable = false;
};
const treeData = ref<Array<TreeNodeData>>([]);
// 重命名
const rename = (title: string, key: string) => {
const rename = (title: number, key: number) => {
const node = findNode<TreeNodeData>(key, treeData.value);
if (!node) {
return;
@@ -111,132 +115,181 @@
});
};
// 寻找当前节点
const findNode = <T extends NodeData>(id: string, arr: Array<T>): T | undefined => {
for (let node of arr) {
if (node.key === id) {
return node;
// 删除节点
const deleteNode = async (key: number) => {
try {
emits('loading', true);
// 删除
await deleteHostGroup(key);
// 页面删除
const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
if (!parentNode) {
return;
}
}
// 寻找子级
for (let node of arr) {
if (node?.children?.length) {
const inChildNode = findNode(id, node.children);
if (inChildNode) {
return inChildNode as T;
const children = parentNode.root ? treeData.value : parentNode.children;
if (children) {
// 删除
for (let i = 0; i < children.length; i++) {
if (children[i].key === key) {
children.splice(i, 1);
break;
}
}
}
} catch (e) {
} finally {
emits('loading', false);
}
return undefined;
};
function onIconClick(node: any) {
const children = node.children || [];
children.push({
title: 'new tree node',
key: node.key + '-' + (children.length + 1)
// 新增根节点
const addRootNode = () => {
const newKey = `${createGroupGroupPrefix}${Date.now()}`;
treeData.value.push({
title: 'new',
key: newKey
});
node.children = children;
// 编辑子节点
const newNode = findNode<TreeNodeData>(newKey, treeData.value);
if (newNode) {
newNode.editable = true;
currName.value = '';
nextTick(() => {
renameInput.value?.focus();
});
}
};
// 新增子节点
const addChildren = (parentNode: TreeNodeData) => {
const newKey = `${createGroupGroupPrefix}${Date.now()}`;
const children = parentNode.children || [];
children.push({
title: 'new',
key: newKey
});
parentNode.children = children;
treeData.value = [...treeData.value];
}
nextTick(() => {
// 展开
tree.value.expandNode(parentNode.key);
// 编辑子节点
const newNode = findNode<TreeNodeData>(newKey, treeData.value);
if (newNode) {
newNode.editable = true;
currName.value = '';
nextTick(() => {
renameInput.value?.focus();
});
}
});
};
// 保存节点
const saveNode = async (key: string | number) => {
modCount.value++;
if (modCount.value !== 1) {
return;
}
// 寻找节点
const node = findNode<TreeNodeData>(key, treeData.value);
if (!node) {
return;
}
if (currName.value) {
node.loading = true;
try {
// 创建节点
if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
const parent = findParentNode<TreeNodeData>(key, treeData.value);
if (parent.root) {
parent.key = rootId;
}
// 创建
const { data } = await createHostGroup({
parentId: parent.key as number,
name: currName.value
});
node.key = data;
} else {
// 重命名节点
await updateHostGroupName({
id: key as unknown as number,
name: currName.value
});
}
node.title = currName.value;
node.editable = false;
} catch (e) {
// 重复 重新聚焦
setTimeout(() => {
renameInput.value?.focus();
}, 100);
} finally {
node.loading = false;
}
} else {
// 未输入数据 并且为创建则移除节点
if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
// 寻找父节点
const parent = findParentNode(key, treeData.value);
if (parent && parent.children) {
// 移除子节点
for (let i = 0; i < parent.children.length; i++) {
if (parent.children[i].key === key) {
parent.children.splice(i, 1);
}
}
}
}
node.editable = false;
}
modCount.value = 0;
};
// 移动分组
const moveGroup = async (
{
dragNode, dropNode, dropPosition
}: {
dragNode: TreeNodeData,
dropNode: TreeNodeData,
dropPosition: number
}) => {
try {
emits('loading', true);
// 移动
await moveHostGroup({
id: dragNode.key as number,
targetId: dropNode.key as number,
position: dropPosition
});
// 移动分组
moveNode(treeData.value, dragNode, dropNode, dropPosition);
} catch (e) {
} finally {
emits('loading', false);
}
};
// 加载数据
const fetchTreeData = async () => {
try {
emits('loading', true);
const { data } = await getHostGroupTree();
treeData.value = data;
} catch {
} finally {
emits('loading', false);
}
};
defineExpose({ addRootNode, fetchTreeData });
onMounted(() => {
fetchTreeData();
});
const treeData = ref(
[
{
title: 'Trunk',
key: '0-0',
children: [
{
title: 'Leaf',
key: '0-0-1',
},
{
title: 'Branch',
key: '0-0-2',
children: [
{
title: 'Leaf',
key: '0-0-2-1'
}
]
},
],
},
{
title: 'Trunk',
key: '0-1',
children: [
{
title: 'Branch',
key: '0-1-1',
children: [
{
title: 'Leaf',
key: '0-1-1-11',
},
{
title: 'Leaf',
key: '0-1-1-12',
},
{
title: 'Leaf',
key: '0-1-1-13',
},
{
title: 'Leaf',
key: '0-1-1-41',
},
{
title: 'Leaf',
key: '0-1-1-51',
},
{
title: 'Leaf',
key: '0-1-1-61',
},
{
title: 'Leaf',
key: '0-1-17-1',
},
{
title: 'Leaf',
key: '0-1-81-1',
},
{
title: 'Leaf',
key: '0-19-1-1',
},
{
title: 'Leaf',
key: '0-10-1-1',
},
{
title: 'Leaf',
key: '0-1-111-1',
},
{
title: 'Leaf',
key: '0-21-1-1',
},
{
title: 'Leaf',
key: '0-31-1-1',
},
{
title: 'Leaf',
key: '40-1-1-2',
},
]
},
{
title: 'Leaf',
key: '0-1-2',
},
],
},
]
);
</script>
<style lang="less" scoped>
@@ -246,6 +299,15 @@
user-select: none;
}
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding-top: 25px;
color: var(--color-text-3);
}
:deep(.arco-tree-node-selected) {
.arco-tree-node-title {
&:hover {
@@ -268,25 +330,17 @@
}
}
.node-title {
}
.node-handler {
}
:deep(.arco-tree-node-selected) {
background-color: var(--color-fill-2);
}
.node-title-wrapper {
width: 100%;
}
.tree-icon {
font-size: 12px;
color: rgb(var(--primary-6));
}
.drag-icon {
padding-left: -8px;
}
</style>

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

@@ -1,22 +1,41 @@
<template>
<!-- 左侧菜单 -->
<div class="simple-card tree-card">
<a-spin class="simple-card tree-card"
:loading="treeLoading">
<!-- 主机分组头部 -->
<div class="tree-card-header">
<!-- 标题 -->
<div class="tree-card-title">
主机菜单
</div>
<!-- 操作 -->
<div class="tree-card-handler">
<div v-permission="['asset:host-group:create']"
class="click-icon-wrapper handler-icon-wrapper"
title="根节点添加"
@click="addRootNode">
<icon-plus />
</div>
<div class="click-icon-wrapper handler-icon-wrapper"
title="刷新"
@click="refreshTree">
<icon-refresh />
</div>
</div>
</div>
<!-- 主机分组树 -->
<div class="tree-card-main">
<host-group-tree ref="tree" />
<host-group-tree ref="tree"
:loading="treeLoading"
@loading="setTreeLoading"
@select-key="selectGroup" />
</div>
</div>
</a-spin>
<!-- 身体部分 -->
<div class="simple-card view-body">
右侧数据
</div>
<a-spin class="simple-card view-body"
:loading="dataLoading">
<host-transfer ref="transfer" />
</a-spin>
</template>
<script lang="ts">
@@ -26,13 +45,36 @@
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import useLoading from '@/hooks/loading';
import HostGroupTree from './host-group-tree.vue';
import HostTransfer from './host-transfer.vue';
const { loading: treeLoading, setLoading: setTreeLoading } = useLoading();
const { loading: dataLoading, setLoading: setDataLoading } = useLoading();
const tree = ref();
const transfer = ref();
// 添加根节点
const addRootNode = () => {
tree.value.addRootNode();
};
// 刷新树
const refreshTree = () => {
tree.value.fetchTreeData();
};
// 选中分组
const selectGroup = (key: number) => {
console.log(key);
};
</script>
<style lang="less" scoped>
@tree-width: 26%;
@tree-width: 50%;
.tree-card {
margin-right: 16px;
@@ -44,11 +86,12 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
padding: 0 8px 0 16px;
position: relative;
width: 100%;
height: 44px;
border-bottom: 1px var(--color-border-2) solid;
user-select: none;
}
&-title {
@@ -60,6 +103,17 @@
text-overflow: ellipsis;
}
&-handler {
display: flex;
.handler-icon-wrapper {
margin-left: 8px;
color: rgb(var(--primary-6));
padding: 4px;
font-size: 16px;
}
}
&-main {
padding: 8px 8px 8px 16px;
position: relative;

139
orion-ops-ui/src/views/asset/host-group/components/host-transfer.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div class="transfer-container">
<!-- 头部 -->
<div class="transfer-header">
<!-- 提示 -->
<a-alert class="alert-wrapper">123123</a-alert>
<!-- 保存按钮 -->
<a-button class="save-button"
type="primary"
@click="save">
保存
<template #icon>
<icon-check />
</template>
</a-button>
</div>
<!-- 传输框 -->
<a-transfer v-model="value"
:data="data"
:source-input-search-props="{ placeholder:'请输入主机名称/编码/IP' }"
:target-input-search-props="{ placeholder:'请输入主机名称/编码/IP' }"
show-search
one-way>
<!-- 主机列表 -->
<template #source-title="{ countTotal, countSelected, checked, indeterminate, onSelectAllChange}">
<!-- 左侧标题 -->
<div class="source-title-container">
<a-checkbox style="margin-right: 8px;"
:model-value="checked"
:indeterminate="indeterminate"
@change="onSelectAllChange" />
<span>
主机列表 {{ countSelected }} / {{ countTotal }}
</span>
</div>
</template>
<!-- 右侧标题 -->
<template #target-title="{ countTotal, countSelected, onClear }">
<div class="target-title-container">
<span>已选择 <span class="span-blue">{{ countTotal }}</span> 个</span>
<span class="pointer"
@click="onClear"
title="清空">
<icon-delete />
</span>
</div>
</template>
</a-transfer>
</div>
</template>
<script lang="ts">
export default {
name: 'host-transfer'
};
</script>
<script lang="ts" setup>
import type { TransferItem } from '@arco-design/web-vue/es/transfer/interface';
import { onMounted, ref } from 'vue';
import { useCacheStore } from '@/store';
const data = ref<Array<TransferItem>>([]);
const value = ref([]);
// 保存
const save = () => {
console.log(value.value);
};
// 加载主机
onMounted(() => {
const cacheStore = useCacheStore();
data.value = Array(200).fill(undefined).map((_, index) => ({
value: `option${index + 1}`,
label: `Option ${index + 1}`,
disabled: false
}));
});
</script>
<style lang="less" scoped>
.transfer-container {
width: 100%;
height: 100%;
.transfer-header {
margin-bottom: 12px;
display: flex;
align-items: center;
.alert-wrapper {
height: 32px;
}
.save-button {
margin-left: 16px;
}
}
}
:deep(.arco-transfer) {
height: calc(100% - 44px);
.arco-transfer-view {
width: 100%;
height: 100%;
user-select: none;
}
.arco-transfer-view-target {
.arco-transfer-list-item-content {
margin-left: 4px;
}
.arco-transfer-list-item-remove-btn {
margin-right: 8px;
}
}
}
.source-title-container {
display: flex;
align-items: center;
}
.target-title-container {
display: flex;
justify-content: space-between;
align-items: center;
svg {
font-size: 16px;
}
}
</style>

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

@@ -51,7 +51,6 @@
// 加载用户列表
// 加载主机列表
render.value = true;
});

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

@@ -10,7 +10,7 @@ export const tabItems = [{
key: tabItemKeys.SETTING,
text: '分组配置',
icon: 'icon-unordered-list',
permission: []
permission: ['asset:host-group:query']
}, {
key: tabItemKeys.ROLE_GRANT,
text: '角色授权',
@@ -22,3 +22,9 @@ export const tabItems = [{
icon: 'icon-user',
permission: []
}];
// 创建前缀
export const createGroupGroupPrefix = 'create-';
// 根id
export const rootId = 0;

2
orion-ops-ui/src/views/dashboard/workplace/components/categories-percent.vue
View File

@@ -10,7 +10,7 @@
<template #title>
{{ $t('workplace.categoriesPercent') }}
</template>
<Chart height="310px" :option="chartOption" />
<chart height="310px" :option="chartOption" />
</a-card>
</a-spin>
</template>

2
orion-ops-ui/src/views/dashboard/workplace/components/content-chart.vue
View File

@@ -11,7 +11,7 @@
<template #extra>
<a-link>{{ $t('workplace.viewMore') }}</a-link>
</template>
<Chart height="289px" :option="chartOption" />
<chart height="289px" :option="chartOption" />
</a-card>
</a-spin>
</template>

44
orion-ops-ui/src/views/system/menu/components/menu-table.vue
View File

@@ -190,6 +190,7 @@
import { Message } from '@arco-design/web-vue';
import { useCacheStore, useDictStore } from '@/store';
import usePermission from '@/hooks/permission';
import { findParentNode } from '@/utils/tree';
const { toOptions, getDictValue, toggleDictValue } = useDictStore();
const cacheStore = useCacheStore();
@@ -215,36 +216,23 @@
setFetchLoading(true);
// 调用删除接口
await deleteMenu(id);
// 获取父菜单
const findParentMenu = (arr: any, id: number): any => {
if (!arr || !arr.length) {
return null;
}
// 当前级
for (let e of arr) {
if (e.id === id) {
return arr;
}
}
// 子级
for (let e of arr) {
if (e.children && e.children.length) {
if (findParentMenu(e.children, id)) {
return e.children;
}
}
}
return null;
};
// 获取父级容器
const parent = findParentMenu(tableRenderData.value, id) as unknown as MenuQueryResponse[];
const parent = findParentNode(id, tableRenderData.value, 'id');
if (parent) {
// 删除
for (let i = 0; i < parent.length; i++) {
if (parent[i].id === id) {
parent.splice(i, 1);
// 页面删除 不重新调用接口
let children;
if (parent.root) {
children = tableRenderData.value;
} else {
children = parent.children;
}
if (children) {
// 删除
for (let i = 0; i < children.length; i++) {
if (children[i].id === id) {
children.splice(i, 1);
break;
}
}
}
}

4
orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
View File

@@ -23,7 +23,7 @@
<div class="usn mb8">
<a-space>
<template v-for="opt of quickGrantMenuOperator" :key="opt.name">
<a-button size="mini" type="text" @click="() => { table.checked(opt.rule) }">
<a-button size="mini" type="text" @click="() => { table.checkOrUncheckByRule(opt.rule, true) }">
{{ '全选' + opt.name }}
</a-button>
</template>
@@ -32,7 +32,7 @@
<div class="usn mb8">
<a-space>
<template v-for="opt of quickGrantMenuOperator" :key="opt.name">
<a-button size="mini" type="text" @click="() => { table.unchecked(opt.rule) }">
<a-button size="mini" type="text" @click="() => { table.checkOrUncheckByRule(opt.rule, false) }">
{{ '反选' + opt.name }}
</a-button>
</template>

2
orion-ops-ui/src/views/user/role/types/const.ts
View File

@@ -12,7 +12,7 @@ const addType = ['add', 'create'];
const updateType = ['update', 'modify'];
const deleteType = ['delete', 'remove'];
const standardRead = [...queryType];
const standardWrite = [...addType, ...updateType, ...deleteType];
const standardWrite = [...addType, ...updateType];
// 快速分配菜单操作
export const quickGrantMenuOperator = [