修改搜索输入框重复请求问题

src/components/clientSet/searchInput.vue

@@ -8,6 +8,7 @@
       :loading="loading"
       @select="handleSelect"
       @input="handleInput"
+      @clear="handleManualClear" 
       :clearable="clearable"
       :size="size"
       :disabled="disabled"
@@ -78,7 +79,19 @@
         loading: false,
         timeout: null,
         lastSearchKeyword: '',
-        schoolList: []
+        schoolList: [],
+        // 新增：记录最后一次有效选择
+        lastValidSelection: null
+      }
+    },
+    
+    mounted() {
+      // 初始化时记录当前选择
+      if (this.selectedSchoolId && this.value) {
+        this.lastValidSelection = {
+          id: this.selectedSchoolId,
+          name: this.value
+        }
       }
     },
     
@@ -89,13 +102,10 @@
     methods: {
       /**
        * 异步搜索学校
-       * @param {string} queryString 搜索关键字
-       * @param {Function} callback 回调函数
        */
       async querySearchAsync(queryString, callback) {
         const keyword = queryString.trim()
         
-        // 如果搜索内容为空或与上次相同，直接返回
         if (!keyword || keyword === this.lastSearchKeyword) {
           callback([])
           return
@@ -104,7 +114,6 @@
         this.lastSearchKeyword = keyword
         this.loading = true
         
-        // 使用防抖
         clearTimeout(this.timeout)
         this.timeout = setTimeout(async () => {
           try {
@@ -122,8 +131,6 @@
       
       /**
        * 搜索学校API调用
-       * @param {string} keyword 搜索关键字
-       * @returns {Promise<Array>} 学校列表
        */
       async searchSchools(keyword) {
         try {
@@ -143,66 +150,76 @@
       
       /**
        * 处理选择事件
-       * @param {Object} item 选中的学校对象
        */
       handleSelect(item) {
-        // 派发选中事件
+        console.log('选中学校:', item)
+        
+        // 更新记录
+        this.lastValidSelection = {
+          id: item.id,
+          name: item.name
+        }
+        
         this.$emit('select', item)
-        // 更新选中的学校ID
         this.$emit('update:selectedSchoolId', item.id)
-        // 更新输入框显示的值
         this.$emit('input', item.name)
         this.$emit('change', item)
       },
       
       /**
-       * 处理输入事件
+       * 处理输入事件 - 安全版本
-       * @param {string} value 输入的值
        */
       handleInput(value) {
+        console.log('输入变化:', value, '当前选中:', this.selectedSchoolId)
+        
+        // 只更新显示的值
         this.$emit('input', value)
-        // 如果输入框被清空，触发清空事件
+        
-        if (!value) {
+        // 重要：这里不自动触发清空
-          this.$emit('clear')
+        // 清空只会在 handleManualClear 中触发
+      },
+      handleManualClear() {
+        console.log('用户手动清空')
+        this.clearSelection()
+      },
+      clearSelection() {
+        console.log('执行清空操作')
+        this.$emit('input', '')
         this.$emit('update:selectedSchoolId', null)
+        this.$emit('clear')
         this.lastSearchKeyword = ''
-        }
+        this.lastValidSelection = null
       },
-      
-      /**
-       * 手动设置选中的学校
-       * @param {Object} school 学校对象
-       */
       setSelectedSchool(school) {
         if (school && school.id && school.name) {
+          this.lastValidSelection = {
+            id: school.id,
+            name: school.name
+          }
           this.$emit('input', school.name)
           this.$emit('update:selectedSchoolId', school.id)
           this.$emit('select', school)
         }
       },
-      
-      /**
-       * 清空选择
-       */
       clear() {
-        this.$emit('input', '')
+        this.clearSelection()
-        this.$emit('update:selectedSchoolId', null)
-        this.$emit('clear')
-        this.lastSearchKeyword = ''
       },
       
-      /**
-       * 手动触发搜索
-       * @param {string} keyword 搜索关键字
-       * @returns {Promise<Array>} 学校列表
-       */
       async triggerSearch(keyword) {
         return await this.searchSchools(keyword || this.value)
+      },
+      
+      /**
+       * 恢复上一次的有效选择
+       */
+      restoreLastSelection() {
+        if (this.lastValidSelection) {
+          this.setSelectedSchool(this.lastValidSelection)
+        }
       }
     }
   }
   </script>
-  
   <style lang="scss" scoped>
   .school-auto-complete {
     width: 100%;

src/views/super/paiban/college.vue

@@ -7,7 +7,18 @@
                         <label for="">收录申请</label>
                         <GuipSelect width="180px" clearable label="状态" :options="statusList" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
                         <GuipSelect width="180px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" @change="getList"/>
-                        <GuipInput ref="GuipInput" width="280px" label="学校" placeholder="输入学校名称" @blur="getList" v-model="school" />
+
+                        <GuipFormItem label="学校">    
+                            <SchoolAutoComplete
+                                slot="formDom"
+                                v-model="schoolName"
+                                :selected-school-id="school"
+                                @select="handleSchoolSelect"
+                                @clear="handleSchoolClear"
+                                placeholder="请输入学校名称"
+                                style="width: 300px;"
+                            />                        
+                        </GuipFormItem>
                     </div>
                     <GuipButton type="primary" :btnstyle="{ width: '120px' }">收录成功通知
                     </GuipButton>
@@ -73,9 +84,11 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import GuipButton from "@/components/GuipButton.vue";
 import GuipTable from "@/components/GuipTable.vue";
 import GuipSelect from "@/components/GuipSelect.vue";
-import GuipInput from "@/components/GuipInput.vue";
+// import GuipInput from "@/components/GuipInput.vue";
 import GuipDialog from "@/components/GuipDialog.vue";
 import GuipTextarea from "@/components/GuipTextarea.vue";
+import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; // 引入公共组件
+import GuipFormItem from '@/components/GuipFormItem.vue'
 
 // 假设一下状态
 // status:{
@@ -89,12 +102,13 @@ export default {
     components: {
         GuipTextarea,
         GuipDialog,
-        GuipInput,
+        // GuipInput,
         GuipSelect,
         GuipTable,
         GuipButton,
-        SvgIcon
+        SvgIcon,
-
+        SchoolAutoComplete,
+        GuipFormItem
     },
     options: { styleIsolation: "shared" },
     data() {
@@ -102,6 +116,8 @@ export default {
             tableLoading:false,
             tableKey: '',
             school:'',
+            schoolName:'',
+            lastSearchKeyword:'',
             degree:'',
             review_status: -1,
 
@@ -117,6 +133,16 @@ export default {
             statusList:[]
         }
     },
+    watch: {
+        schoolName(newVal) {
+        // 如果手动清空了输入框，也清空选中的学校
+        if (!newVal) {
+                this.school = null;
+                this.lastSearchKeyword = '';
+                this.$emit('clear');
+            }
+        }
+    },
     mounted() {
         this.$nextTick(()=>{
             this.init()
@@ -132,6 +158,18 @@ export default {
             this.getList()
             this.getStatusList()
         },
+        handleSchoolSelect(item) {
+            console.log('选中学校:', item);
+            this.school = item.id;
+            this.schoolName = item.name;
+            this.getList();
+        },
+        handleSchoolClear() {
+            console.log('学校选择已清空');
+            this.school = '';
+            this.schoolName = '';
+            this.getList();
+        },
         getList() {
             try {
                 this.$http('POST', '/supernew/ajax_get_paiban_review_list', {//ok