Skip to content

Commit f43fa25

Browse files
shaohuzhang1wangdan-fit2cloud
shaohuzhang1
and
wangdan-fit2cloud
authored
perf: Resource management filters optimization (#3815)
Co-authored-by: wangdan-fit2cloud <[email protected]>
1 parent 6ba6ed0 commit f43fa25

File tree

4 files changed

+124
-30
lines changed

4 files changed

+124
-30
lines changed

‎ui/src/views/system-resource-management/ApplicationResourceIndex.vue

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<template #header>
9494
<div>
9595
<span>{{ $t('common.status.label') }}</span>
96-
<el-popover :width="200" trigger="click" :visible="statusVisible">
96+
<el-popover :width="100" trigger="click" :visible="statusVisible">
9797
<template #reference>
9898
<el-button
9999
style="margin-top: -2px"
@@ -109,19 +109,17 @@
109109
<div class="filter">
110110
<div class="form-item mb-16">
111111
<div @click.stop>
112-
<el-scrollbar height="300" style="margin: 0 0 0 10px">
113-
<el-checkbox-group
114-
v-model="statusArr"
115-
style="display: flex; flex-direction: column"
116-
>
117-
<el-checkbox
118-
v-for="item in statusOptions"
119-
:key="item.value"
120-
:label="item.label"
121-
:value="item.value"
122-
/>
123-
</el-checkbox-group>
124-
</el-scrollbar>
112+
<el-checkbox-group
113+
v-model="statusArr"
114+
style="display: flex; flex-direction: column"
115+
>
116+
<el-checkbox
117+
v-for="item in statusOptions"
118+
:key="item.value"
119+
:label="item.label"
120+
:value="item.value"
121+
/>
122+
</el-checkbox-group>
125123
</div>
126124
</div>
127125
</div>
@@ -177,21 +175,28 @@
177175
</el-button>
178176
</template>
179177
<div class="filter">
180-
<div class="form-item mb-16">
178+
<div class="form-item mb-16 ml-4">
181179
<div @click.stop>
182-
<el-scrollbar height="300" style="margin: 0 0 0 10px">
180+
<el-input
181+
v-model="filterText"
182+
:placeholder="$t('common.search')"
183+
prefix-icon="Search"
184+
clearable
185+
/>
186+
<el-scrollbar height="300" v-if="filterData.length">
183187
<el-checkbox-group
184188
v-model="workspaceArr"
185189
style="display: flex; flex-direction: column"
186190
>
187191
<el-checkbox
188-
v-for="item in workspaceOptions"
192+
v-for="item in filterData"
189193
:key="item.value"
190194
:label="item.label"
191195
:value="item.value"
192196
/>
193197
</el-checkbox-group>
194198
</el-scrollbar>
199+
<el-empty v-else :description="$t('common.noData')" />
195200
</div>
196201
</div>
197202
</div>
@@ -289,7 +294,7 @@
289294
</template>
290295

291296
<script lang="ts" setup>
292-
import { onMounted, ref, reactive, computed } from 'vue'
297+
import { onMounted, ref, reactive, computed, watch } from 'vue'
293298
import { useRouter, useRoute } from 'vue-router'
294299
import ApplicationResourceApi from '@/api/system-resource-management/application'
295300
import { t } from '@/locales'
@@ -427,10 +432,28 @@ const statusOptions = ref<any[]>([
427432
},
428433
])
429434
435+
const filterText = ref('')
436+
const filterData = ref<any[]>([])
437+
438+
watch(
439+
[() => workspaceOptions.value, () => filterText.value],
440+
() => {
441+
if (!filterText.value.length) {
442+
filterData.value = workspaceOptions.value
443+
}
444+
filterData.value = workspaceOptions.value.filter((v: any) =>
445+
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
446+
)
447+
},
448+
{ immediate: true },
449+
)
450+
451+
430452
function filterWorkspaceChange(val: string) {
431453
if (val === 'clear') {
432454
workspaceArr.value = []
433455
}
456+
filterText.value = ''
434457
getList()
435458
workspaceVisible.value = false
436459
}

‎ui/src/views/system-resource-management/KnowledgeResourceIndex.vue

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,28 @@
9898
</el-button>
9999
</template>
100100
<div class="filter">
101-
<div class="form-item mb-16">
101+
<div class="form-item mb-16 ml-4">
102102
<div @click.stop>
103-
<el-scrollbar height="300" style="margin: 0 0 0 10px">
103+
<el-input
104+
v-model="filterText"
105+
:placeholder="$t('common.search')"
106+
prefix-icon="Search"
107+
clearable
108+
/>
109+
<el-scrollbar height="300" v-if="filterData.length">
104110
<el-checkbox-group
105111
v-model="workspaceArr"
106112
style="display: flex; flex-direction: column"
107113
>
108114
<el-checkbox
109-
v-for="item in workspaceOptions"
115+
v-for="item in filterData"
110116
:key="item.value"
111117
:label="item.label"
112118
:value="item.value"
113119
/>
114120
</el-checkbox-group>
115121
</el-scrollbar>
122+
<el-empty v-else :description="$t('common.noData')" />
116123
</div>
117124
</div>
118125
</div>
@@ -245,7 +252,7 @@
245252
</template>
246253

247254
<script lang="ts" setup>
248-
import { onMounted, ref, reactive, computed } from 'vue'
255+
import { onMounted, ref, reactive, computed, watch } from 'vue'
249256
import { useRouter, useRoute } from 'vue-router'
250257
import KnowledgeResourceApi from '@/api/system-resource-management/knowledge'
251258
import UserApi from '@/api/user/user'
@@ -349,10 +356,28 @@ function reEmbeddingKnowledge(row: any) {
349356
const workspaceOptions = ref<any[]>([])
350357
const workspaceVisible = ref(false)
351358
const workspaceArr = ref<any[]>([])
359+
360+
const filterText = ref('')
361+
const filterData = ref<any[]>([])
362+
363+
watch(
364+
[() => workspaceOptions.value, () => filterText.value],
365+
() => {
366+
if (!filterText.value.length) {
367+
filterData.value = workspaceOptions.value
368+
}
369+
filterData.value = workspaceOptions.value.filter((v: any) =>
370+
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
371+
)
372+
},
373+
{ immediate: true },
374+
)
375+
352376
function filterWorkspaceChange(val: string) {
353377
if (val === 'clear') {
354378
workspaceArr.value = []
355379
}
380+
filterText.value = ''
356381
getList()
357382
workspaceVisible.value = false
358383
}

‎ui/src/views/system-resource-management/ModelResourceIndex.vue

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,21 +120,28 @@
120120
</el-button>
121121
</template>
122122
<div class="filter">
123-
<div class="form-item mb-16">
123+
<div class="form-item mb-16 ml-4">
124124
<div @click.stop>
125-
<el-scrollbar height="300" style="margin: 0 0 0 10px">
125+
<el-input
126+
v-model="filterText"
127+
:placeholder="$t('common.search')"
128+
prefix-icon="Search"
129+
clearable
130+
/>
131+
<el-scrollbar height="300" v-if="filterData.length">
126132
<el-checkbox-group
127133
v-model="workspaceArr"
128134
style="display: flex; flex-direction: column"
129135
>
130136
<el-checkbox
131-
v-for="item in workspaceOptions"
137+
v-for="item in filterData"
132138
:key="item.value"
133139
:label="item.label"
134140
:value="item.value"
135141
/>
136142
</el-checkbox-group>
137143
</el-scrollbar>
144+
<el-empty v-else :description="$t('common.noData')" />
138145
</div>
139146
</div>
140147
</div>
@@ -230,7 +237,7 @@
230237
</template>
231238

232239
<script lang="ts" setup>
233-
import { onBeforeMount, onMounted, ref, reactive, nextTick, computed } from 'vue'
240+
import { onBeforeMount, onMounted, ref, reactive, watch, computed } from 'vue'
234241
import type { Provider, Model } from '@/api/type/model'
235242
import EditModel from '@/views/model/component/EditModel.vue'
236243
import ParamSettingDialog from '@/views/model/component/ParamSettingDialog.vue'
@@ -314,6 +321,22 @@ const getRowProvider = computed(() => {
314321
}
315322
})
316323
324+
const filterText = ref('')
325+
const filterData = ref<any[]>([])
326+
327+
watch(
328+
[() => workspaceOptions.value, () => filterText.value],
329+
() => {
330+
if (!filterText.value.length) {
331+
filterData.value = workspaceOptions.value
332+
}
333+
filterData.value = workspaceOptions.value.filter((v: any) =>
334+
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
335+
)
336+
},
337+
{ immediate: true },
338+
)
339+
317340
function filterWorkspaceChange(val: string) {
318341
if (val === 'clear') {
319342
workspaceArr.value = []

‎ui/src/views/system-resource-management/ToolResourceIndex.vue

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,21 +119,28 @@
119119
</el-button>
120120
</template>
121121
<div class="filter">
122-
<div class="form-item mb-16">
122+
<div class="form-item mb-16 ml-4">
123123
<div @click.stop>
124-
<el-scrollbar height="300" style="margin: 0 0 0 10px">
124+
<el-input
125+
v-model="filterText"
126+
:placeholder="$t('common.search')"
127+
prefix-icon="Search"
128+
clearable
129+
/>
130+
<el-scrollbar height="300" v-if="filterData.length">
125131
<el-checkbox-group
126132
v-model="workspaceArr"
127133
style="display: flex; flex-direction: column"
128134
>
129135
<el-checkbox
130-
v-for="item in workspaceOptions"
136+
v-for="item in filterData"
131137
:key="item.value"
132138
:label="item.label"
133139
:value="item.value"
134140
/>
135141
</el-checkbox-group>
136142
</el-scrollbar>
143+
<el-empty v-else :description="$t('common.noData')" />
137144
</div>
138145
</div>
139146
</div>
@@ -269,7 +276,7 @@
269276
</template>
270277

271278
<script lang="ts" setup>
272-
import { onMounted, ref, reactive, computed } from 'vue'
279+
import { onMounted, ref, reactive, computed, watch } from 'vue'
273280
import { cloneDeep } from 'lodash'
274281
import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
275282
import ToolResourceApi from '@/api/system-resource-management/tool'
@@ -444,6 +451,22 @@ async function changeState(row: any) {
444451
}
445452
}
446453
454+
const filterText = ref('')
455+
const filterData = ref<any[]>([])
456+
457+
watch(
458+
[() => workspaceOptions.value, () => filterText.value],
459+
() => {
460+
if (!filterText.value.length) {
461+
filterData.value = workspaceOptions.value
462+
}
463+
filterData.value = workspaceOptions.value.filter((v: any) =>
464+
v.label.toLowerCase().includes(filterText.value.toLowerCase()),
465+
)
466+
},
467+
{ immediate: true },
468+
)
469+
447470
function filterWorkspaceChange(val: string) {
448471
if (val === 'clear') {
449472
workspaceArr.value = []

0 commit comments

Comments
 (0)