zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 应用编排-添加组件支持搜索

Browse Source
This commit is contained in:
shaohuzhang1 2024-10-15 15:56:10 +08:00 committed by shaohuzhang1
parent 9b44c9a05a
commit 464aa13d2e
1 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/views/application-workflow/component/DropdownMenu.vue
View File

@ -1,23 +1,33 @@
<template> <template>
<div v-show="show" class="workflow-dropdown-menu border border-r-4"> <div v-show="show" class="workflow-dropdown-menu border border-r-4">
<el-tabs v-model="activeName" class="workflow-dropdown-tabs"> <el-tabs v-model="activeName" class="workflow-dropdown-tabs">
<div style="display: flex; width: 100%; justify-content: center">
<el-input v-model="search_text" style="width: 240px" placeholder="按名称搜索">
<template #suffix>
<el-icon class="el-input__icon"><search /></el-icon>
</template>
</el-input>
</div>
<el-tab-pane label="基础组件" name="base"> <el-tab-pane label="基础组件" name="base">
<template v-for="(item, index) in menuNodes" :key="index"> <el-scrollbar height="400">
<div <template v-for="(item, index) in filter_menu_nodes" :key="index">
class="workflow-dropdown-item cursor flex p-8-12" <div
@click.stop="clickNodes(item)" class="workflow-dropdown-item cursor flex p-8-12"
@mousedown.stop="onmousedown(item)" @click.stop="clickNodes(item)"
> @mousedown.stop="onmousedown(item)"
<component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" /> >
<div class="pre-wrap"> <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
<div class="lighter">{{ item.label }}</div> <div class="pre-wrap">
<el-text type="info" size="small">{{ item.text }}</el-text> <div class="lighter">{{ item.label }}</div>
<el-text type="info" size="small">{{ item.text }}</el-text>
</div>
</div> </div>
</div> </template>
</template> </el-scrollbar>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="函数库" name="function"> <el-tab-pane label="函数库" name="function">
<el-scrollbar max-height="300"> <el-scrollbar height="400">
<div <div
class="workflow-dropdown-item cursor flex p-8-12" class="workflow-dropdown-item cursor flex p-8-12"
@click.stop="clickNodes(functionNode)" @click.stop="clickNodes(functionNode)"
@ -30,7 +40,7 @@
</div> </div>
</div> </div>
<template v-for="(item, index) in functionLibList" :key="index"> <template v-for="(item, index) in filter_function_lib_list" :key="index">
<div <div
class="workflow-dropdown-item cursor flex p-8-12" class="workflow-dropdown-item cursor flex p-8-12"
@click.stop="clickNodes(functionLibNode, item)" @click.stop="clickNodes(functionLibNode, item)"
@ -53,11 +63,11 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue' import { ref, onMounted, computed } from 'vue'
import { menuNodes, functionLibNode, functionNode } from '@/workflow/common/data' import { menuNodes, functionLibNode, functionNode } from '@/workflow/common/data'
import { iconComponent } from '@/workflow/icons/utils' import { iconComponent } from '@/workflow/icons/utils'
import applicationApi from '@/api/application' import applicationApi from '@/api/application'
const search_text = ref<string>('')
const props = defineProps({ const props = defineProps({
show: { show: {
type: Boolean, type: Boolean,
@ -76,7 +86,16 @@ const loading = ref(false)
const activeName = ref('base') const activeName = ref('base')
const functionLibList = ref<any[]>([]) const functionLibList = ref<any[]>([])
const filter_function_lib_list = computed(() => {
return functionLibList.value.filter((item: any) =>
item.name.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
)
})
const filter_menu_nodes = computed(() => {
return menuNodes.filter((item) =>
item.label.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
)
})
function clickNodes(item: any, data?: any) { function clickNodes(item: any, data?: any) {
if (data) { if (data) {
item['properties']['stepName'] = data.name item['properties']['stepName'] = data.name