review: 修改 footer.
This commit is contained in:
lijiahang
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="tree-container">
|
||||
<a-tree
|
||||
:blockNode="true"
|
||||
:draggable="props.editMode"
|
||||
:data="treeData">
|
||||
|
||||
<template #title="node">
|
||||
<template v-if="node.editable">
|
||||
<a-input size="mini"
|
||||
v-model="currName"
|
||||
:max-length="32"
|
||||
:disabled="node.loading"
|
||||
autofocus
|
||||
@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 class="node-title" v-else>
|
||||
{{ 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)" />
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-group-tree'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, ref } from 'vue';
|
||||
import { TagProps } from '@/store/modules/tab-bar/types';
|
||||
import { TreeNodeData } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps({
|
||||
editMode: Boolean
|
||||
});
|
||||
|
||||
const currName = ref();
|
||||
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
// 保存节点
|
||||
const saveNode = async (key: string) => {
|
||||
// 寻找节点
|
||||
const node = findNode(key, treeData.value);
|
||||
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 rename = (title: string, key: string) => {
|
||||
const node = findNode(key, treeData.value);
|
||||
currName.value = title;
|
||||
node.editable = true;
|
||||
};
|
||||
|
||||
// 寻找当前节点
|
||||
const findNode = (id: string, arr: Array<TreeNodeData>): TreeNodeData | undefined => {
|
||||
for (let node of arr) {
|
||||
if (node.key === id) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
// 寻找子级
|
||||
for (let node of arr) {
|
||||
if (node?.children?.length) {
|
||||
const inChildNode = findNode(id, node.children);
|
||||
if (inChildNode) {
|
||||
return inChildNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
function onIconClick(node: any) {
|
||||
const children = node.children || [];
|
||||
children.push({
|
||||
title: 'new tree node',
|
||||
key: node.key + '-' + (children.length + 1)
|
||||
});
|
||||
node.children = children;
|
||||
|
||||
treeData.value = [...treeData.value];
|
||||
}
|
||||
|
||||
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>
|
||||
.tree-container {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-title) {
|
||||
padding-right: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
|
||||
.arco-tree-node-title-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.node-title {
|
||||
|
||||
}
|
||||
|
||||
.node-handler {
|
||||
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-selected) {
|
||||
background-color: var(--color-fill-2);
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
font-size: 12px;
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
.drag-icon {
|
||||
padding-left: -8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="view-container">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="simple-card tree-card">
|
||||
<!-- 主机分组标题 -->
|
||||
<div class="tree-card-header">
|
||||
<!-- 标题 -->
|
||||
<div class="tree-card-title">
|
||||
主机菜单
|
||||
</div>
|
||||
<div class="tree-card-switch">
|
||||
<a-switch type="round"
|
||||
v-model="editMode"
|
||||
checked-text="编辑模式"
|
||||
unchecked-text="授权模式" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机分组树 -->
|
||||
<div class="tree-card-main">
|
||||
<host-group-tree ref="tree" :editMode="editMode" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 身体部分 -->
|
||||
<div class="view-body">
|
||||
<div class="simple-card fixed-header">
|
||||
<!-- 头部左侧 -->
|
||||
<a-space>
|
||||
<a-select placeholder="选择角色" />
|
||||
<a-select placeholder="选择用户" />
|
||||
</a-space>
|
||||
<!-- 头部右侧 -->
|
||||
<a-space>
|
||||
<!-- 配置 -->
|
||||
<a-button type="primary">
|
||||
配置
|
||||
<template #icon>
|
||||
<icon-layers />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 授权 -->
|
||||
<a-button type="primary">
|
||||
授权
|
||||
<template #icon>
|
||||
<icon-safe />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 右侧数据 -->
|
||||
<div class="simple-card data-content">
|
||||
右侧数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-group-view'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const editMode = ref(true);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@tree-width: 50%;
|
||||
|
||||
.view-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree-card {
|
||||
margin-right: 16px;
|
||||
width: @tree-width;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: 1px var(--color-border-2) solid;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: rgba(var(--gray-10), .95);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: 8px 8px 8px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.view-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: calc(100% - @tree-width - 16px);
|
||||
position: absolute;
|
||||
left: calc(@tree-width + 16px);
|
||||
|
||||
.fixed-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
72
orion-ops-ui/src/views/asset/host-group/index.vue
Normal file
72
orion-ops-ui/src/views/asset/host-group/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="index-container" v-if="render">
|
||||
<host-group-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetHostGroup'
|
||||
};
|
||||
</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';
|
||||
|
||||
const render = ref(false);
|
||||
const table = ref();
|
||||
const card = ref();
|
||||
const modal = ref();
|
||||
const config = ref();
|
||||
const appStore = useAppStore();
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
// 添加回调
|
||||
const modalAddCallback = () => {
|
||||
table.value.addedCallback();
|
||||
};
|
||||
|
||||
// 修改回调
|
||||
const modalUpdateCallback = () => {
|
||||
table.value.updatedCallback();
|
||||
};
|
||||
|
||||
// 加载 tags
|
||||
const loadTags = async () => {
|
||||
try {
|
||||
// 设置到缓存
|
||||
// cacheStore.set('hostTags', data);
|
||||
} catch {
|
||||
Message.error('tag加载失败');
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
// 加载角色列表
|
||||
|
||||
// 加载用户列表
|
||||
|
||||
// 加载主机列表
|
||||
|
||||
render.value = true;
|
||||
});
|
||||
|
||||
// 卸载时清除 cache
|
||||
onUnmounted(() => {
|
||||
cacheStore.reset('user', 'roles', 'hosts');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.index-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -50,8 +50,8 @@
|
||||
<!-- 右侧操作 -->
|
||||
<div class="table-right-bar-handle">
|
||||
<a-space>
|
||||
<!-- 仅看收藏 -->
|
||||
<a-checkbox v-model="formModel.favorite" @change="fetchTableData()">
|
||||
<!-- 仅看收藏 fixme 去掉 -->
|
||||
<a-checkbox v-if="false" v-model="formModel.favorite" @change="fetchTableData()">
|
||||
<template #checkbox="{ checked }">
|
||||
<a-tag :checked="checked"
|
||||
class="only-favorite"
|
||||
|
||||
@@ -6,30 +6,48 @@ export const RoleStatus = {
|
||||
ENABLED: 1,
|
||||
};
|
||||
|
||||
// 查询操作
|
||||
const queryType = ['query', 'view'];
|
||||
const addType = ['add', 'create'];
|
||||
const updateType = ['update', 'modify'];
|
||||
const deleteType = ['delete', 'remove'];
|
||||
const standardRead = [...queryType];
|
||||
const standardWrite = [...addType, ...updateType, ...deleteType];
|
||||
|
||||
// 快速分配菜单操作
|
||||
export const quickGrantMenuOperator = [
|
||||
{
|
||||
name: '',
|
||||
rule: undefined
|
||||
}, {
|
||||
name: '常规读操作',
|
||||
rule: (perm: string) => {
|
||||
return !!standardRead.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '常规写操作',
|
||||
rule: (perm: string) => {
|
||||
return !!standardWrite.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '查询',
|
||||
rule: (perm: string) => {
|
||||
return perm.includes('query') || perm.includes('view');
|
||||
return !!queryType.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '新增',
|
||||
rule: (perm: string) => {
|
||||
return perm.includes('add') || perm.includes('create');
|
||||
return !!addType.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '修改',
|
||||
rule: (perm: string) => {
|
||||
return perm.includes('update') || perm.includes('modify');
|
||||
return !!updateType.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '删除',
|
||||
rule: (perm: string) => {
|
||||
return perm.includes('delete') || perm.includes('remove');
|
||||
return !!deleteType.find(s => perm.includes(s));
|
||||
}
|
||||
}, {
|
||||
name: '导入',
|
||||
|
||||
Reference in New Issue
Block a user