perf: Optimize multiple selections

Author: wangdan-fit2cloud

ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue

@@ -130,6 +130,7 @@
       collapse-tags
       filterable
       clearable
+      :reserve-keyword="false"
       v-model="formValue.default_value"
       :teleported="false"
       popper-class="default-select"

ui/src/components/dynamics-form/items/select/MultiSelect.vue

@@ -5,6 +5,7 @@
     filterable
     allow-create
     clearable
+    :reserve-keyword="false"
     v-bind="$attrs"
     v-model="_modelValue"
   >

ui/src/components/resource-authorization-drawer/index.vue

@@ -48,6 +48,7 @@
           filterable
           clearable
           multiple
+          :reserve-keyword="false"
           collapse-tags
           collapse-tags-tooltip
           style="width: 220px"

ui/src/views/application/component/McpServersDialog.vue

@@ -38,7 +38,7 @@
           {{ `MCP ${$t('views.tool.title')}` }}
           <span class="color-danger">*</span>
         </template>
-        <el-select v-model="form.mcp_tool_ids" filterable multiple>
+        <el-select v-model="form.mcp_tool_ids" filterable multiple :reserve-keyword="false">
           <el-option
             v-for="mcpTool in mcpToolSelectOptions"
             :key="mcpTool.id"

ui/src/views/document/tag/CreateTagDialog.vue

@@ -52,7 +52,7 @@
             </el-col>
             <el-col :span="1">
               <el-button
-                :disabled="index === 0"
+                :disabled="tags.length === 1"
                 link
                 type="info"
                 @click="deleteTag(index)"

ui/src/views/document/tag/MulAddTagDialog.vue

@@ -82,7 +82,7 @@
             </el-col>
             <el-col :span="1">
               <el-button
-                :disabled="index === 0"
+                :disabled="tagList.length === 1"
                 text
                 @click="deleteTag(index)"
                 :style="{ marginTop: index === 0 ? '35px' : '5px' }"

ui/src/views/document/upload/SetRules.vue

@@ -47,6 +47,7 @@
                           <el-select
                             v-model="form.patterns"
                             multiple
+                            :reserve-keyword="false"
                             allow-create
                             default-first-option
                             filterable

ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue

@@ -1,17 +1,34 @@
 <template>
-  <el-dialog :title="$t('views.role.member.add')" v-model="dialogVisible"
-             :close-on-click-modal="false"
-             :close-on-press-escape="false" :destroy-on-close="true">
-    <el-form label-position="top" ref="formRef" :rules="rules" :model="form"
-             require-asterisk-position="right">
+  <el-dialog
+    :title="$t('views.role.member.add')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <el-form
+      label-position="top"
+      ref="formRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
       <el-form-item :label="$t('views.chatUser.group.usernameOrName')" prop="user">
-        <el-select v-model="form.user" multiple filterable
-                   :placeholder="$t('common.selectPlaceholder')"
-                   :loading="optionLoading"
-                   :filter-method="filterUser"
+        <el-select
+          v-model="form.user"
+          multiple
+          filterable
+          :reserve-keyword="false"
+          :placeholder="$t('common.selectPlaceholder')"
+          :loading="optionLoading"
+          :filter-method="filterUser"
         >
-          <el-option v-for="item in chatUserList" :key="item.id" :label="item.nick_name"
-                     :value="item.id">
+          <el-option
+            v-for="item in chatUserList"
+            :key="item.id"
+            :label="item.nick_name"
+            :value="item.id"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -28,83 +45,85 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, onBeforeMount} from 'vue'
-import type {FormInstance} from 'element-plus'
-import {MsgSuccess} from '@/utils/message'
-import {t} from '@/locales'
+import { ref, reactive, onBeforeMount } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
 import SystemGroupApi from '@/api/system/user-group'
 import userManageApi from '@/api/system/chat-user'
-import type {ChatUserItem} from '@/api/type/systemChatUser'
-import {loadPermissionApi} from "@/utils/dynamics-api/permission-api.ts";
+import type { ChatUserItem } from '@/api/type/systemChatUser'
+import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
 
 const emit = defineEmits<{
-  (e: 'refresh'): void;
-}>();
+  (e: 'refresh'): void
+}>()
 
 const dialogVisible = ref<boolean>(false)
 const defaultForm = {
-  user: []
+  user: [],
 }
 const form = ref<{ user: string[] }>({
   ...defaultForm,
 })
 
 const optionLoading = ref(false)
 const chatUserList = ref<ChatUserItem[]>([])
-const originalChatUserList = ref<ChatUserItem[]>([]);
+const originalChatUserList = ref<ChatUserItem[]>([])
 async function getChatUserList() {
   try {
     const res = await loadPermissionApi('chatUser').getChatUserList(optionLoading)
-    originalChatUserList.value = res.data;
-    chatUserList.value = [...res.data];
+    originalChatUserList.value = res.data
+    chatUserList.value = [...res.data]
   } catch (e) {
     console.error(e)
   }
 }
 
 const filterUser = (query: string) => {
   if (!query) {
-    chatUserList.value = originalChatUserList.value;
-    return;
+    chatUserList.value = originalChatUserList.value
+    return
   }
 
-  const q = query.toLowerCase();
+  const q = query.toLowerCase()
   chatUserList.value = originalChatUserList.value.filter(
-    (item) => item.nick_name?.toLowerCase().includes(q) || item.username?.toLowerCase().includes(q)
-  );
-};
+    (item) => item.nick_name?.toLowerCase().includes(q) || item.username?.toLowerCase().includes(q),
+  )
+}
 
 onBeforeMount(() => {
   getChatUserList()
 })
 
-const groupId = ref('');
+const groupId = ref('')
 
 function open(id: string) {
-  form.value = {...defaultForm}
+  form.value = { ...defaultForm }
   groupId.value = id
   dialogVisible.value = true
 }
 
-const formRef = ref<FormInstance>();
+const formRef = ref<FormInstance>()
 
 const rules = reactive({
-  user: [{required: true, message: t('common.selectPlaceholder'), trigger: 'blur'}],
+  user: [{ required: true, message: t('common.selectPlaceholder'), trigger: 'blur' }],
 })
 
 const loading = ref<boolean>(false)
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
-      loadPermissionApi('userGroup').postAddMember(groupId.value, {"user_ids": form.value.user}, loading).then(() => {
-        MsgSuccess(t('common.addSuccess'))
-        emit('refresh')
-        dialogVisible.value = false
-      })
+      loadPermissionApi('userGroup')
+        .postAddMember(groupId.value, { user_ids: form.value.user }, loading)
+        .then(() => {
+          MsgSuccess(t('common.addSuccess'))
+          emit('refresh')
+          dialogVisible.value = false
+        })
     }
   })
 }
 
-defineExpose({open})
+defineExpose({ open })
 </script>

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

@@ -46,7 +46,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :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>

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

@@ -45,7 +45,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :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>