Просмотр исходного кода

调整会议项目信息使用组件

Zimo 3 дней назад
Родитель
Сommit
98fc76ed66
1 измененных файлов с 28 добавлено и 15 удалено
  1. 28 15
      src/views/pms/operation-meeting/meeting-form.vue

+ 28 - 15
src/views/pms/operation-meeting/meeting-form.vue

@@ -483,13 +483,33 @@ const saveDetailItem = async () => {
   handleDetailDrawerChange(false)
 }
 
-const projectNameOptions = ref([])
+interface ProjectNameSuggestion {
+  value: string
+}
+
+const projectNameOptions = ref<string[]>([])
+const projectNameSuggestions = computed<ProjectNameSuggestion[]>(() =>
+  projectNameOptions.value.map((item) => ({ value: item }))
+)
+
+const queryProjectNameSearch = (
+  queryString: string,
+  cb: (results: ProjectNameSuggestion[]) => void
+) => {
+  const keyword = queryString.trim().toLowerCase()
+
+  if (!keyword) {
+    cb(projectNameSuggestions.value)
+    return
+  }
+
+  cb(projectNameSuggestions.value.filter((item) => item.value.toLowerCase().includes(keyword)))
+}
 
 async function loadProjectNameOptions() {
   try {
     const data = await OperationMeetingApi.getProjectNameOptions()
-    console.log(data)
-    projectNameOptions.value = data || []
+    projectNameOptions.value = Array.isArray(data) ? data.filter(Boolean).map(String) : []
   } catch (error) {
     projectNameOptions.value = []
   }
@@ -757,21 +777,14 @@ onMounted(() => {
         <section class="detail-section">
           <div class="detail-section__grid detail-section__grid--single">
             <el-form-item label="项目名称" prop="projectName">
-              <el-select
+              <el-autocomplete
                 v-model="detailForm.projectName"
+                class="w-full!"
                 placeholder="请选择或输入项目名称"
                 clearable
-                filterable
-                allow-create
-                :reserve-keyword="false"
-              >
-                <el-option
-                  v-for="item in projectNameOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
+                :fetch-suggestions="queryProjectNameSearch"
+                :trigger-on-focus="true"
+              />
             </el-form-item>
           </div>
         </section>