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

refact: 提取 tree 工具.

Browse Source
This commit is contained in:
lijiahang
2023-11-13 12:49:24 +08:00
parent 570ffd3ebc
commit 9f7e0c945f
13 changed files with 225 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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));
};
/**
* 获取当前页面的缩放值
*/

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

@@ -0,0 +1,116 @@
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);
});
};

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>

43
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,22 @@
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);
}
}
}
}

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 = [