refactor: optimize user options fetching and improve select component integration

Author: wxg0103

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

@@ -15,10 +15,10 @@
             style="width: 120px"
             @change="search_type_change"
           >
-            <el-option :label="$t('common.creator')" value="create_user" />
+            <el-option :label="$t('common.creator')" value="create_user"/>
 
-            <el-option :label="$t('common.name')" value="name" />
-            <el-option :label="$t('common.type')" value="type" />
+            <el-option :label="$t('common.name')" value="name"/>
+            <el-option :label="$t('common.type')" value="type"/>
           </el-select>
           <el-input
             v-if="search_type === 'name'"
@@ -34,9 +34,11 @@
             @change="getList"
             clearable
             filterable
+            remote
+            :remote-method="getUserList"
             style="width: 220px"
           >
-            <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name" />
+            <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name"/>
           </el-select>
           <el-select
             v-else-if="search_type === 'type'"
@@ -46,7 +48,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :key="u.id" :value="u.value" :label="u.label" />
+            <el-option v-for="u in type_options" :key="u.id" :value="u.value" :label="u.label"/>
           </el-select>
         </div>
       </div>
@@ -63,7 +65,7 @@
           <template #default="{ row }">
             <el-space :size="8">
               <el-avatar shape="square" :size="24" style="background: none">
-                <img :src="resetUrl(row?.icon)" alt="" />
+                <img :src="resetUrl(row?.icon)" alt=""/>
               </el-avatar>
               <span class="ellipsis" style="max-width: 160px">
                 {{ row.name }}
@@ -100,7 +102,7 @@
                     @click="statusVisible = !statusVisible"
                   >
                     <el-icon>
-                      <Filter />
+                      <Filter/>
                     </el-icon>
                   </el-button>
                 </template>
@@ -123,10 +125,10 @@
                 </div>
                 <div class="text-right">
                   <el-button size="small" @click="filterStatusChange('clear')"
-                    >{{ $t('common.clear') }}
+                  >{{ $t('common.clear') }}
                   </el-button>
                   <el-button type="primary" @click="filterStatusChange" size="small"
-                    >{{ $t('common.confirm') }}
+                  >{{ $t('common.confirm') }}
                   </el-button>
                 </div>
               </el-popover>
@@ -135,7 +137,7 @@
           <template #default="scope">
             <div v-if="scope.row.is_publish" class="flex align-center">
               <el-icon class="color-success mr-8" style="font-size: 16px">
-                <SuccessFilled />
+                <SuccessFilled/>
               </el-icon>
               <span class="color-text-primary">
                 {{ $t('common.status.published') }}
@@ -173,7 +175,7 @@
                     @click="workspaceVisible = !workspaceVisible"
                   >
                     <el-icon>
-                      <Filter />
+                      <Filter/>
                     </el-icon>
                   </el-button>
                 </template>
@@ -199,24 +201,24 @@
                           />
                         </el-checkbox-group>
                       </el-scrollbar>
-                      <el-empty v-else :description="$t('common.noData')" />
+                      <el-empty v-else :description="$t('common.noData')"/>
                     </div>
                   </div>
                 </div>
                 <div class="text-right">
                   <el-button size="small" @click="filterWorkspaceChange('clear')"
-                    >{{ $t('common.clear') }}
+                  >{{ $t('common.clear') }}
                   </el-button>
                   <el-button type="primary" @click="filterWorkspaceChange" size="small"
-                    >{{ $t('common.confirm') }}
+                  >{{ $t('common.confirm') }}
                   </el-button>
                 </div>
               </el-popover>
             </div>
           </template>
         </el-table-column>
 
-        <el-table-column prop="nick_name" :label="$t('common.creator')" show-overflow-tooltip />
+        <el-table-column prop="nick_name" :label="$t('common.creator')" show-overflow-tooltip/>
         <el-table-column :label="$t('views.application.publishTime')" width="180">
           <template #default="{ row }">
             {{ datetimeFormat(row.update_time) }}
@@ -323,25 +325,25 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, computed, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import {onMounted, ref, reactive, computed, watch} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
 import ApplicationResourceApi from '@/api/system-resource-management/application'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'
-import { t } from '@/locales'
-import { isAppIcon, resetUrl } from '@/utils/common'
+import {t} from '@/locales'
+import {isAppIcon, resetUrl} from '@/utils/common'
 import ResourceTriggerDrawer from '@/views/trigger/ResourceTriggerDrawer.vue'
 import useStore from '@/stores'
-import { datetimeFormat } from '@/utils/time'
-import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
-import { isWorkFlow } from '@/utils/application.ts'
+import {datetimeFormat} from '@/utils/time'
+import {loadPermissionApi} from '@/utils/dynamics-api/permission-api.ts'
+import {isWorkFlow} from '@/utils/application.ts'
 import UserApi from '@/api/user/user.ts'
 import permissionMap from '@/permission'
-import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
-import { SourceTypeEnum } from '@/enums/common'
+import {MsgSuccess, MsgConfirm, MsgError} from '@/utils/message'
+import {SourceTypeEnum} from '@/enums/common'
 
 const router = useRouter()
 const route = useRoute()
-const { user, application } = useStore()
+const {user, application} = useStore()
 
 const permissionPrecise = computed(() => {
   return permissionMap['application']['systemManage']
@@ -385,20 +387,20 @@ function toChat(row: any) {
     .map((v: any) => {
       apiInputParams.value = v.properties.api_input_field_list
         ? v.properties.api_input_field_list.map((v: any) => {
-            return {
-              name: v.variable,
-              value: v.default_value,
-            }
-          })
+          return {
+            name: v.variable,
+            value: v.default_value,
+          }
+        })
         : v.properties.input_field_list
           ? v.properties.input_field_list
-              .filter((v: any) => v.assignment_method === 'api_input')
-              .map((v: any) => {
-                return {
-                  name: v.variable,
-                  value: v.default_value,
-                }
-              })
+            .filter((v: any) => v.assignment_method === 'api_input')
+            .map((v: any) => {
+              return {
+                name: v.variable,
+                value: v.default_value,
+              }
+            })
           : []
     })
   const apiParams = mapToUrlParams(apiInputParams.value)
@@ -438,7 +440,8 @@ function deleteApplication(row: any) {
         MsgSuccess(t('common.deleteSuccess'))
       })
     })
-    .catch(() => {})
+    .catch(() => {
+    })
 }
 
 const exportApplication = (application: any) => {
@@ -505,7 +508,7 @@ watch(
       v.label.toLowerCase().includes(filterText.value.toLowerCase()),
     )
   },
-  { immediate: true },
+  {immediate: true},
 )
 
 function filterWorkspaceChange(val: string) {
@@ -536,7 +539,7 @@ async function getWorkspaceList() {
 }
 
 const search_type_change = () => {
-  search_form.value = { name: '', create_user: '', type: '' }
+  search_form.value = {name: '', create_user: '', type: ''}
 }
 
 function getList() {
@@ -556,13 +559,21 @@ function getList() {
   })
 }
 
+function getUserList(query: string) {
+  UserApi.getAllMemberList(query ? {nick_name: query} : '')
+    .then((res: any) => {
+      user_options.value = res.data || []
+    })
+    .catch(() => {
+      user_options.value = []
+    })
+}
+
 onMounted(() => {
   getWorkspaceList()
   getList()
 
-  UserApi.getAllMemberList('').then((res: any) => {
-    user_options.value = res.data
-  })
+  getUserList('')
 })
 </script>