feat: 修改主机分组配置.
This commit is contained in:
lijiahangmax
412
orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
Normal file
412
orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<!-- 分组树 -->
|
||||
<a-tree v-if="treeData.length"
|
||||
ref="tree"
|
||||
class="tree-container"
|
||||
:blockNode="true"
|
||||
:draggable="draggable"
|
||||
:data="treeData"
|
||||
:checkable="checkable"
|
||||
v-model:checked-keys="checkedKeys"
|
||||
:check-strictly="true"
|
||||
@drop="moveGroup">
|
||||
<!-- 标题 -->
|
||||
<template #title="node">
|
||||
<!-- 修改名称输入框 -->
|
||||
<template v-if="node.editable">
|
||||
<a-input size="mini"
|
||||
ref="renameInput"
|
||||
v-model="currName"
|
||||
style="width: 138px;"
|
||||
placeholder="名称"
|
||||
autofocus
|
||||
:max-length="32"
|
||||
:disabled="node.loading"
|
||||
@blur="() => saveNode(node.key)"
|
||||
@pressEnter="() => saveNode(node.key)"
|
||||
@change="() => saveNode(node.key)">
|
||||
<template #suffix>
|
||||
<!-- 加载中 -->
|
||||
<icon-loading v-if="node.loading" />
|
||||
<!-- 保存 -->
|
||||
<icon-check v-else
|
||||
class="pointer"
|
||||
title="保存"
|
||||
@click="() => saveNode(node.key)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<!-- 名称 -->
|
||||
<span v-else
|
||||
class="node-title-wrapper"
|
||||
@click="() => emits('selectNode', node)">
|
||||
{{ node.title }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作图标 -->
|
||||
<template #drag-icon="{ node }">
|
||||
<a-space v-if="!node.editable">
|
||||
<!-- 重命名 -->
|
||||
<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">
|
||||
export default {
|
||||
name: 'host-group-tree'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { computed, 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';
|
||||
import { useCacheStore } from '@/store';
|
||||
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
draggable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checkedKeys: {
|
||||
type: Array<Number>,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const tree = ref();
|
||||
const modCount = ref(0);
|
||||
const renameInput = ref();
|
||||
const currName = ref();
|
||||
const treeData = ref<Array<TreeNodeData>>([]);
|
||||
|
||||
const checkedKeys = computed<Array<number>>({
|
||||
get() {
|
||||
return props.checkedKeys as Array<number>;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:checkedKeys', e);
|
||||
} else {
|
||||
emits('update:checkedKeys', []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 重命名
|
||||
const rename = (title: number, key: number) => {
|
||||
const node = findNode<TreeNodeData>(key, treeData.value);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
currName.value = title;
|
||||
node.editable = true;
|
||||
nextTick(() => {
|
||||
renameInput.value?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除节点
|
||||
const deleteNode = async (key: number) => {
|
||||
try {
|
||||
emits('loading', true);
|
||||
// 删除
|
||||
await deleteHostGroup(key);
|
||||
// 页面删除
|
||||
const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
|
||||
if (!parentNode) {
|
||||
return;
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增根节点
|
||||
const addRootNode = () => {
|
||||
const newKey = `${createGroupGroupPrefix}${Date.now()}`;
|
||||
treeData.value.push({
|
||||
title: '新分组',
|
||||
key: newKey
|
||||
});
|
||||
// 编辑子节点
|
||||
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: '新分组',
|
||||
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) {
|
||||
// 根节点
|
||||
if (parent.root) {
|
||||
parent.children = treeData.value;
|
||||
}
|
||||
// 移除子节点
|
||||
if (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 (force = false) => {
|
||||
if (cacheStore.hostGroups.length && !force) {
|
||||
// 缓存有数据并且非强制加载 直接从缓存中加载
|
||||
treeData.value = cacheStore.hostGroups;
|
||||
} else {
|
||||
// 无数据/强制加载
|
||||
try {
|
||||
emits('loading', true);
|
||||
const { data } = await getHostGroupTree();
|
||||
treeData.value = data;
|
||||
cacheStore.hostGroups = data;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
}
|
||||
// 未选择则选择首个
|
||||
if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
|
||||
await nextTick(() => {
|
||||
tree.value?.selectNode(treeData.value[0].key);
|
||||
emits('selectNode', treeData.value[0]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ addRootNode, fetchTreeData });
|
||||
|
||||
onMounted(() => {
|
||||
fetchTreeData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree-container {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
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) {
|
||||
cursor: unset;
|
||||
|
||||
.arco-tree-node-switcher {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-selected) {
|
||||
background-color: var(--color-fill-2);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-title) {
|
||||
padding: 0 68px 0 0;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
|
||||
.arco-tree-node-title-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.node-title-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
font-size: 12px;
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
// 创建前缀
|
||||
export const createGroupGroupPrefix = 'create-';
|
||||
|
||||
// 根id
|
||||
export const rootId = 0;
|
||||
@@ -26,8 +26,8 @@
|
||||
<a-space>
|
||||
<!-- 创建 -->
|
||||
<div v-permission="addPermission"
|
||||
v-show="!handleVisible.disableAdd"
|
||||
class="click-icon-wrapper header-icon-wrapper"
|
||||
v-if="!handleVisible.disableAdd"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="创建"
|
||||
@click="emits('add')">
|
||||
<icon-plus />
|
||||
@@ -57,7 +57,7 @@
|
||||
<a-popover position="br" trigger="click" content-class="card-filter-wrapper">
|
||||
<div v-if="!handleVisible.disableFilter"
|
||||
ref="filterRef"
|
||||
class="click-icon-wrapper header-icon-wrapper"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="选择过滤条件">
|
||||
<a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
|
||||
<icon-filter />
|
||||
@@ -77,14 +77,14 @@
|
||||
</a-popover>
|
||||
<!-- 搜索 -->
|
||||
<div v-if="!handleVisible.disableSearch"
|
||||
class="click-icon-wrapper header-icon-wrapper"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="搜索"
|
||||
@click="emits('search')">
|
||||
<icon-search />
|
||||
</div>
|
||||
<!-- 重置 -->
|
||||
<div v-if="!handleVisible.disableReset"
|
||||
class="click-icon-wrapper header-icon-wrapper"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="重置"
|
||||
@click="emits('reset')">
|
||||
<icon-refresh />
|
||||
@@ -377,6 +377,8 @@
|
||||
margin: -16px -16px 0 -16px;
|
||||
padding: 16px 16px 12px 16px;
|
||||
position: fixed;
|
||||
// FIXME 颜色不对 文件拆了
|
||||
background: var(--color-fill-2);
|
||||
z-index: 999;
|
||||
height: @top-height;
|
||||
transition: none;
|
||||
@@ -430,11 +432,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon-wrapper {
|
||||
height: 27px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.filter-bottom-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Reference in New Issue
Block a user