perf: Resource management filters optimization (#3815)

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>
This commit is contained in:
shaohuzhang1 2025-08-05 15:21:49 +08:00 committed by GitHub
parent 6ba6ed065e
commit f43fa25f6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 124 additions and 30 deletions

View File

@ -93,7 +93,7 @@
<template #header>
<div>
<span>{{ $t('common.status.label') }}</span>
<el-popover :width="200" trigger="click" :visible="statusVisible">
<el-popover :width="100" trigger="click" :visible="statusVisible">
<template #reference>
<el-button
style="margin-top: -2px"
@ -109,19 +109,17 @@
<div class="filter">
<div class="form-item mb-16">
<div @click.stop>
<el-scrollbar height="300" style="margin: 0 0 0 10px">
<el-checkbox-group
v-model="statusArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</el-scrollbar>
<el-checkbox-group
v-model="statusArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</div>
</div>
</div>
@ -177,21 +175,28 @@
</el-button>
</template>
<div class="filter">
<div class="form-item mb-16">
<div class="form-item mb-16 ml-4">
<div @click.stop>
<el-scrollbar height="300" style="margin: 0 0 0 10px">
<el-input
v-model="filterText"
:placeholder="$t('common.search')"
prefix-icon="Search"
clearable
/>
<el-scrollbar height="300" v-if="filterData.length">
<el-checkbox-group
v-model="workspaceArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in workspaceOptions"
v-for="item in filterData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</el-scrollbar>
<el-empty v-else :description="$t('common.noData')" />
</div>
</div>
</div>
@ -289,7 +294,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ApplicationResourceApi from '@/api/system-resource-management/application'
import { t } from '@/locales'
@ -427,10 +432,28 @@ const statusOptions = ref<any[]>([
},
])
const filterText = ref('')
const filterData = ref<any[]>([])
watch(
[() => workspaceOptions.value, () => filterText.value],
() => {
if (!filterText.value.length) {
filterData.value = workspaceOptions.value
}
filterData.value = workspaceOptions.value.filter((v: any) =>
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
)
},
{ immediate: true },
)
function filterWorkspaceChange(val: string) {
if (val === 'clear') {
workspaceArr.value = []
}
filterText.value = ''
getList()
workspaceVisible.value = false
}

View File

@ -98,21 +98,28 @@
</el-button>
</template>
<div class="filter">
<div class="form-item mb-16">
<div class="form-item mb-16 ml-4">
<div @click.stop>
<el-scrollbar height="300" style="margin: 0 0 0 10px">
<el-input
v-model="filterText"
:placeholder="$t('common.search')"
prefix-icon="Search"
clearable
/>
<el-scrollbar height="300" v-if="filterData.length">
<el-checkbox-group
v-model="workspaceArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in workspaceOptions"
v-for="item in filterData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</el-scrollbar>
<el-empty v-else :description="$t('common.noData')" />
</div>
</div>
</div>
@ -245,7 +252,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import KnowledgeResourceApi from '@/api/system-resource-management/knowledge'
import UserApi from '@/api/user/user'
@ -349,10 +356,28 @@ function reEmbeddingKnowledge(row: any) {
const workspaceOptions = ref<any[]>([])
const workspaceVisible = ref(false)
const workspaceArr = ref<any[]>([])
const filterText = ref('')
const filterData = ref<any[]>([])
watch(
[() => workspaceOptions.value, () => filterText.value],
() => {
if (!filterText.value.length) {
filterData.value = workspaceOptions.value
}
filterData.value = workspaceOptions.value.filter((v: any) =>
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
)
},
{ immediate: true },
)
function filterWorkspaceChange(val: string) {
if (val === 'clear') {
workspaceArr.value = []
}
filterText.value = ''
getList()
workspaceVisible.value = false
}

View File

@ -120,21 +120,28 @@
</el-button>
</template>
<div class="filter">
<div class="form-item mb-16">
<div class="form-item mb-16 ml-4">
<div @click.stop>
<el-scrollbar height="300" style="margin: 0 0 0 10px">
<el-input
v-model="filterText"
:placeholder="$t('common.search')"
prefix-icon="Search"
clearable
/>
<el-scrollbar height="300" v-if="filterData.length">
<el-checkbox-group
v-model="workspaceArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in workspaceOptions"
v-for="item in filterData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</el-scrollbar>
<el-empty v-else :description="$t('common.noData')" />
</div>
</div>
</div>
@ -230,7 +237,7 @@
</template>
<script lang="ts" setup>
import { onBeforeMount, onMounted, ref, reactive, nextTick, computed } from 'vue'
import { onBeforeMount, onMounted, ref, reactive, watch, computed } from 'vue'
import type { Provider, Model } from '@/api/type/model'
import EditModel from '@/views/model/component/EditModel.vue'
import ParamSettingDialog from '@/views/model/component/ParamSettingDialog.vue'
@ -314,6 +321,22 @@ const getRowProvider = computed(() => {
}
})
const filterText = ref('')
const filterData = ref<any[]>([])
watch(
[() => workspaceOptions.value, () => filterText.value],
() => {
if (!filterText.value.length) {
filterData.value = workspaceOptions.value
}
filterData.value = workspaceOptions.value.filter((v: any) =>
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
)
},
{ immediate: true },
)
function filterWorkspaceChange(val: string) {
if (val === 'clear') {
workspaceArr.value = []

View File

@ -119,21 +119,28 @@
</el-button>
</template>
<div class="filter">
<div class="form-item mb-16">
<div class="form-item mb-16 ml-4">
<div @click.stop>
<el-scrollbar height="300" style="margin: 0 0 0 10px">
<el-input
v-model="filterText"
:placeholder="$t('common.search')"
prefix-icon="Search"
clearable
/>
<el-scrollbar height="300" v-if="filterData.length">
<el-checkbox-group
v-model="workspaceArr"
style="display: flex; flex-direction: column"
>
<el-checkbox
v-for="item in workspaceOptions"
v-for="item in filterData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-checkbox-group>
</el-scrollbar>
<el-empty v-else :description="$t('common.noData')" />
</div>
</div>
</div>
@ -269,7 +276,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { cloneDeep } from 'lodash'
import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
import ToolResourceApi from '@/api/system-resource-management/tool'
@ -444,6 +451,22 @@ async function changeState(row: any) {
}
}
const filterText = ref('')
const filterData = ref<any[]>([])
watch(
[() => workspaceOptions.value, () => filterText.value],
() => {
if (!filterText.value.length) {
filterData.value = workspaceOptions.value
}
filterData.value = workspaceOptions.value.filter((v: any) =>
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
)
},
{ immediate: true },
)
function filterWorkspaceChange(val: string) {
if (val === 'clear') {
workspaceArr.value = []