feat: add type search option and improve select input formatting

Author: wxg0103

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

@@ -15,9 +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.name')" value="name"/>
+            <el-option :label="$t('views.system.resource_management.type')" value="type"/>
           </el-select>
           <el-input
             v-if="search_type === 'name'"
@@ -35,7 +36,17 @@
             filterable
             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'"
+            v-model="search_form.type"
+            @change="getList"
+            clearable
+            filterable
+            style="width: 220px"
+          >
+            <el-option v-for="u in type_options" :value="u.value" :label="u.label"/>
           </el-select>
         </div>
       </div>
@@ -53,7 +64,7 @@
             <div class="table-name flex align-center">
               <el-icon size="24" class="mr-8">
                 <el-avatar shape="square" :size="24" style="background: none" class="mr-8">
-                  <img :src="resetUrl(scope.row?.icon)" alt="" />
+                  <img :src="resetUrl(scope.row?.icon)" alt=""/>
                 </el-avatar>
               </el-icon>
               {{ scope.row.name }}
@@ -93,7 +104,7 @@
                     @click="statusVisible = !statusVisible"
                   >
                     <el-icon>
-                      <Filter />
+                      <Filter/>
                     </el-icon>
                   </el-button>
                 </template>
@@ -116,10 +127,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>
@@ -128,7 +139,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('views.application.status.published') }}
@@ -161,7 +172,7 @@
                     @click="workspaceVisible = !workspaceVisible"
                   >
                     <el-icon>
-                      <Filter />
+                      <Filter/>
                     </el-icon>
                   </el-button>
                 </template>
@@ -187,24 +198,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) }}
@@ -299,23 +310,24 @@
 </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 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']
@@ -340,31 +352,33 @@ const MoreFilledPermission = () => {
 }
 
 const ResourceAuthorizationDrawerRef = ref()
+
 function openAuthorization(item: any) {
   ResourceAuthorizationDrawerRef.value.open(item.id)
 }
 
 const apiInputParams = ref([])
+
 function toChat(row: any) {
   row?.work_flow?.nodes
     ?.filter((v: any) => v.id === 'base-node')
     .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)
@@ -402,7 +416,8 @@ function deleteApplication(row: any) {
         MsgSuccess(t('common.deleteSuccess'))
       })
     })
-    .catch(() => {})
+    .catch(() => {
+    })
 }
 
 const exportApplication = (application: any) => {
@@ -419,9 +434,19 @@ const search_type = ref('name')
 const search_form = ref<any>({
   name: '',
   create_user: '',
+  type: '',
 })
 const user_options = ref<any[]>([])
-
+const type_options = ref<any[]>([
+  {
+    label: t('views.application.workflow'),
+    value: 'WORK_FLOW',
+  },
+  {
+    label: t('views.application.simple'),
+    value: 'SIMPLE',
+  },
+])
 const loading = ref(false)
 const applicationList = ref<any[]>([])
 const paginationConfig = reactive({
@@ -459,7 +484,7 @@ watch(
       v.label.toLowerCase().includes(filterText.value.toLowerCase()),
     )
   },
-  { immediate: true },
+  {immediate: true},
 )
 
 function filterWorkspaceChange(val: string) {
@@ -490,7 +515,7 @@ async function getWorkspaceList() {
 }
 
 const search_type_change = () => {
-  search_form.value = { name: '', create_user: '' }
+  search_form.value = {name: '', create_user: '', type: ''}
 }
 
 function getList() {