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
2024-01-24 22:40:00 +08:00
parent af4d4d99a6
commit 6e62cabcdf
7 changed files with 115 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/CommandSnippetGroupVO.java
View File

@@ -7,6 +7,7 @@ import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
import java.util.List;
/**
* 命令片段分组 视图响应对象
@@ -30,4 +31,7 @@ public class CommandSnippetGroupVO implements Serializable {
@Schema(description = "分组名称")
private String name;
@Schema(description = "命令片段列表")
private List<CommandSnippetVO> items;
}

4
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/CommandSnippetWrapperVO.java
View File

@@ -28,7 +28,7 @@ public class CommandSnippetWrapperVO implements Serializable {
@Schema(description = "分组")
private List<CommandSnippetGroupVO> groups;
@Schema(description = "命令片段")
private List<CommandSnippetVO> items;
@Schema(description = "未分组的命令片段")
private List<CommandSnippetVO> ungroupedItems;
}

19
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/CommandSnippetServiceImpl.java
View File

@@ -3,6 +3,7 @@ package com.orion.ops.module.asset.service.impl;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.orion.lang.utils.collect.Lists;
import com.orion.ops.framework.common.constant.ErrorMessage;
import com.orion.ops.framework.common.utils.Valid;
import com.orion.ops.framework.redis.core.utils.RedisMaps;
@@ -25,7 +26,10 @@ import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.function.Function;
import java.util.stream.Collectors;
/**
@@ -92,9 +96,22 @@ public class CommandSnippetServiceImpl implements CommandSnippetService {
List<CommandSnippetGroupVO> groups = commandSnippetGroupService.getCommandSnippetGroupList();
// 查询命令片段
List<CommandSnippetVO> items = this.getCommandSnippetList();
// 设置组内数据
Map<Long, CommandSnippetGroupVO> groupMap = groups.stream()
.collect(Collectors.toMap(CommandSnippetGroupVO::getId, Function.identity()));
groupMap.forEach((groupId, group) -> {
List<CommandSnippetVO> groupedItems = items.stream()
.filter(s -> groupId.equals(s.getGroupId()))
.collect(Collectors.toList());
group.setItems(groupedItems);
});
// 未分组数据
List<CommandSnippetVO> ungroupedItems = items.stream()
.filter(s -> s.getGroupId() == null)
.collect(Collectors.toList());
return CommandSnippetWrapperVO.builder()
.groups(groups)
.items(items)
.ungroupedItems(ungroupedItems)
.build();
}

2
orion-ops-ui/src/api/asset/command-snippet-group.ts
View File

@@ -1,3 +1,4 @@
import type { CommandSnippetQueryResponse } from './command-snippet';
import axios from 'axios';
/**
@@ -20,6 +21,7 @@ export interface CommandSnippetGroupUpdateRequest extends CommandSnippetGroupCre
export interface CommandSnippetGroupQueryResponse {
id: number;
name: string;
items: Array<CommandSnippetQueryResponse>;
}
/**

12
orion-ops-ui/src/api/asset/command-snippet.ts
View File

@@ -20,12 +20,16 @@ export interface CommandSnippetUpdateRequest extends CommandSnippetCreateRequest
/**
* 命令片段查询响应
*/
export interface CommandSnippetQueryResponse {
export interface CommandSnippetQueryResponse extends CommandSnippetQueryResponseExtra {
id: number;
groupId: number;
name: string;
command: string;
expand?: boolean;
}
export interface CommandSnippetQueryResponseExtra {
visible: boolean;
expand: boolean;
}
/**
@@ -33,7 +37,7 @@ export interface CommandSnippetQueryResponse {
*/
export interface CommandSnippetWrapperResponse {
groups: Array<CommandSnippetGroupQueryResponse>;
items: Array<CommandSnippetQueryResponse>;
ungroupedItems: Array<CommandSnippetQueryResponse>;
}
/**
@@ -54,7 +58,7 @@ export function updateCommandSnippet(request: CommandSnippetUpdateRequest) {
* 查询全部命令片段
*/
export function getCommandSnippetList() {
return axios.get<Array<CommandSnippetQueryResponse>>('/asset/command-snippet/list');
return axios.get<CommandSnippetWrapperResponse>('/asset/command-snippet/list');
}
/**

76
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
View File

@@ -10,7 +10,7 @@
</span>
</template>
<!-- 命令容器 -->
<div class="snippet-container">
<a-spin class="snippet-container" :loading="loading">
<!-- 命令头部 -->
<div class="snippet-header">
<!-- 创建命令 -->
@@ -19,19 +19,26 @@
</span>
<!-- 搜索框 -->
<a-input-search class="snippet-header-input"
v-model="filterValue"
placeholder="名称"
allow-clear />
allow-clear
@search="filterSnippet"
@keyup.enter="filterSnippet" />
</div>
<!-- 命令片段 -->
<div class="snippet-list-container">
<div v-if="snippet" class="snippet-list-container">
<!-- 命令片段组 -->
<snippet-group :snippet="snippet" />
<div>
<snippet-item v-for="item in snippet.items"
:key="item.id"
:item="item" />
<!-- 未分组命令片段 -->
<div class="ungrouped-snippet-container">
<template v-for="item in snippet.ungroupedItems">
<snippet-item v-if="item.visible"
:key="item.id"
:item="item" />
</template>
</div>
</div>
</div>
</a-spin>
</a-drawer>
</template>
@@ -46,26 +53,59 @@
import { onMounted, ref } from 'vue';
import useVisible from '@/hooks/visible';
import useLoading from '@/hooks/loading';
import { getCommandSnippetList } from '@/api/asset/command-snippet';
import SnippetItem from './snippet-item.vue';
import SnippetGroup from './snippet-group.vue';
const { loading, toggle } = useLoading();
const { loading, setLoading } = useLoading();
const { visible, setVisible } = useVisible();
const snippet = ref<CommandSnippetWrapperResponse>({
groups: [],
items: []
});
const filterValue = ref<string>();
const snippet = ref<CommandSnippetWrapperResponse>();
// 打开
const open = () => {
const open = async () => {
setVisible(true);
console.log('loading');
// loading
// 加载数据
await fetchData();
};
defineExpose({ open });
// 加载数据
const fetchData = async () => {
if (snippet.value) {
return;
}
setLoading(true);
try {
// 查询
const { data } = await getCommandSnippetList();
snippet.value = data;
// 设置状态
filterSnippet();
} catch (e) {
} finally {
setLoading(false);
}
};
// 过滤
const filterSnippet = () => {
snippet.value?.groups.forEach(g => {
g.items?.forEach(s => {
s.visible = !filterValue.value
|| s.name.toLowerCase().includes(filterValue.value.toLowerCase())
|| s.command.toLowerCase().includes(filterValue.value.toLowerCase());
});
});
snippet.value?.ungroupedItems.forEach(s => {
s.visible = !filterValue.value
|| s.name.toLowerCase().includes(filterValue.value.toLowerCase())
|| s.command.toLowerCase().includes(filterValue.value.toLowerCase());
});
};
onMounted(() => {
open();
});
@@ -82,6 +122,8 @@
position: relative;
background: var(--color-bg-2);
height: 100%;
width: 100%;
display: block;
.snippet-header {
padding: 12px;

33
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-group.vue
View File

@@ -1,16 +1,21 @@
<template>
<a-collapse :bordered="false">
<a-collapse-item v-for="group in snippet.groups"
:key="group.id"
:header="group.name">
<!-- 总量 -->
<template #extra>
{{ 1 }} 条
</template>
<snippet-item v-for="item in snippet.items"
:key="item.id"
:item="item" />
</a-collapse-item>
<template v-for="group in snippet.groups">
<a-collapse-item v-if="calcTotal(group) > 0"
:key="group.id"
:header="group.name">
<!-- 总量 -->
<template #extra>
{{ calcTotal(group) }} 条
</template>
<!-- snippet -->
<template v-for="item in group.items">
<snippet-item v-if="item.visible"
:key="item.id"
:item="item" />
</template>
</a-collapse-item>
</template>
</a-collapse>
</template>
@@ -21,6 +26,7 @@
</script>
<script lang="ts" setup>
import type { CommandSnippetGroupQueryResponse } from '@/api/asset/command-snippet-group';
import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
import SnippetItem from './snippet-item.vue';
@@ -28,6 +34,11 @@
snippet: CommandSnippetWrapperResponse
}>();
// 计算总量
const calcTotal = (group: CommandSnippetGroupQueryResponse) => {
return group.items.filter(s => s.visible).length;
};
</script>
<style lang="less" scoped>