feat: 查询命令分组.

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

@@ -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;
+
 }

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

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

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

@@ -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();
     }
 

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

@@ -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>;
 }
 
 /**

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

@@ -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');
 }
 
 /**

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

@@ -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"
+        <div class="ungrouped-snippet-container">
-                        :key="item.id"
+          <template v-for="item in snippet.ungroupedItems">
-                        :item="item" />
+            <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: [],
+  const filterValue = ref<string>();
-    items: []
+  const snippet = ref<CommandSnippetWrapperResponse>();
-  });
 
   // 打开
-  const open = () => {
+  const open = async () => {
     setVisible(true);
-
+    // 加载数据
-    console.log('loading');
+    await fetchData();
-    // loading
   };
 
   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;

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

@@ -1,16 +1,21 @@
 <template>
   <a-collapse :bordered="false">
-    <a-collapse-item v-for="group in snippet.groups"
+    <template v-for="group in snippet.groups">
-                     :key="group.id"
+      <a-collapse-item v-if="calcTotal(group) > 0"
-                     :header="group.name">
+                       :key="group.id"
-      <!-- 总量 -->
+                       :header="group.name">
-      <template #extra>
+        <!-- 总量 -->
-        {{ 1 }} 条
+        <template #extra>
-      </template>
+          {{ calcTotal(group) }} 条
-      <snippet-item v-for="item in snippet.items"
+        </template>
-                    :key="item.id"
+        <!-- snippet -->
-                    :item="item" />
+        <template v-for="item in group.items">
-    </a-collapse-item>
+          <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>