From f95e4b63471516c2d33bf9fd9beea85512083292 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 31 Dec 2025 16:59:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=AD=A6=E6=A0=A1=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A=E6=90=9C=E7=B4=A2=E4=B8=BA=E7=BB=84=E4=BB=B6=E3=80=81?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E9=A1=B5=E9=9D=A2=E5=86=85=E7=9A=84=E5=8E=9F?=
 =?UTF-8?q?=E6=9C=89=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/clientSet/searchInput.vue    | 226 ++++++++++++++++++++++++++++
 src/views/super/clientSet/coverInfoPage.vue |  81 ++--------
 src/views/super/paiban/tpl.vue              |  78 +++-------
 3 files changed, 265 insertions(+), 120 deletions(-)
 create mode 100644 src/components/clientSet/searchInput.vue

diff --git a/src/components/clientSet/searchInput.vue b/src/components/clientSet/searchInput.vue
new file mode 100644
index 0000000..70d1a39
--- /dev/null
+++ b/src/components/clientSet/searchInput.vue
@@ -0,0 +1,226 @@
+<template>
+    <el-autocomplete
+      class="school-auto-complete"
+      :value="value"
+      :fetch-suggestions="querySearchAsync"
+      :placeholder="placeholder"
+      :debounce="debounce"
+      :loading="loading"
+      @select="handleSelect"
+      @input="handleInput"
+      :clearable="clearable"
+      :size="size"
+      :disabled="disabled"
+    >
+      <!-- 自定义下拉选项 -->
+      <template #default="{ item }">
+        <div class="flex-between school-option">
+          <span>{{ item.name }}</span>
+          <img 
+            v-if="showSelectedIcon && item.id === selectedSchoolId" 
+            src="@/assets/site/dropdown_chose_ic.svg" 
+            alt="selected"
+          />
+        </div>
+      </template>
+    </el-autocomplete>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SchoolAutoComplete',
+    
+    props: {
+      // 双向绑定的值（学校名称）
+      value: {
+        type: String,
+        default: ''
+      },
+      // 选中的学校ID
+      selectedSchoolId: {
+        type: [String, Number],
+        default: null
+      },
+      // 占位符
+      placeholder: {
+        type: String,
+        default: '请输入学校名称'
+      },
+      // 防抖延迟时间
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      // 是否显示清空按钮
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      // 输入框尺寸
+      size: {
+        type: String,
+        default: 'medium'
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示选中图标
+      showSelectedIcon: {
+        type: Boolean,
+        default: true
+      }
+    },
+    
+    data() {
+      return {
+        loading: false,
+        timeout: null,
+        lastSearchKeyword: '',
+        schoolList: []
+      }
+    },
+    
+    beforeDestroy() {
+      clearTimeout(this.timeout)
+    },
+    
+    methods: {
+      /**
+       * 异步搜索学校
+       * @param {string} queryString 搜索关键字
+       * @param {Function} callback 回调函数
+       */
+      async querySearchAsync(queryString, callback) {
+        const keyword = queryString.trim()
+        
+        // 如果搜索内容为空或与上次相同，直接返回
+        if (!keyword || keyword === this.lastSearchKeyword) {
+          callback([])
+          return
+        }
+        
+        this.lastSearchKeyword = keyword
+        this.loading = true
+        
+        // 使用防抖
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(async () => {
+          try {
+            const schools = await this.searchSchools(keyword)
+            this.schoolList = schools
+            callback(schools)
+          } catch (error) {
+            console.error('搜索学校失败:', error)
+            callback([])
+          } finally {
+            this.loading = false
+          }
+        }, this.debounce)
+      },
+      
+      /**
+       * 搜索学校API调用
+       * @param {string} keyword 搜索关键字
+       * @returns {Promise<Array>} 学校列表
+       */
+      async searchSchools(keyword) {
+        try {
+          const response = await this.$http('POST', '/supernew/ajax_get_paiban_schools', {
+            keyword
+          })
+          
+          if (response.status && response.data) {
+            return response.data
+          }
+          return []
+        } catch (error) {
+          this.$message.error('搜索学校列表失败')
+          throw error
+        }
+      },
+      
+      /**
+       * 处理选择事件
+       * @param {Object} item 选中的学校对象
+       */
+      handleSelect(item) {
+        // 派发选中事件
+        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) {
+        this.$emit('input', value)
+        // 如果输入框被清空，触发清空事件
+        if (!value) {
+          this.$emit('clear')
+          this.$emit('update:selectedSchoolId', null)
+          this.lastSearchKeyword = ''
+        }
+      },
+      
+      /**
+       * 手动设置选中的学校
+       * @param {Object} school 学校对象
+       */
+      setSelectedSchool(school) {
+        if (school && school.id && school.name) {
+          this.$emit('input', school.name)
+          this.$emit('update:selectedSchoolId', school.id)
+          this.$emit('select', school)
+        }
+      },
+      
+      /**
+       * 清空选择
+       */
+      clear() {
+        this.$emit('input', '')
+        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)
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .school-auto-complete {
+    width: 100%;
+  }
+  
+  .school-option {
+    width: 100%;
+    span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    img {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/super/clientSet/coverInfoPage.vue b/src/views/super/clientSet/coverInfoPage.vue
index 15c02a6..9d912c6 100644
--- a/src/views/super/clientSet/coverInfoPage.vue
+++ b/src/views/super/clientSet/coverInfoPage.vue
@@ -6,25 +6,16 @@
             <el-form :model="coverInfo" ref="baseInfoRef">
                 <div class="flex-label mb24">
                     <div class="label-text">所属学校</div>
-                    <div class="colon">：</div>
-                    <el-autocomplete
-                        class="autoInput"
+                    <div class="colon" style="margin-right: 12px;">：</div>
+                    <SchoolAutoComplete
                         slot="formDom"
                         v-model="coverInfo.school_name"
-                        :fetch-suggestions="querySearchAsync"
+                        :selected-school-id="coverInfo.school"
+                        @select="handleSchoolSelect"
+                        @clear="handleSchoolClear"
                         placeholder="请输入学校名称"
-                        @select="handleSelect"
-                        :debounce="300"
-                        :loading="loading"
-                        >
-                        <!-- 自定义下拉选项 -->
-                        <template #default="{ item }">
-                            <div class="flex-between school-option">
-                            <span>{{ item.name }}</span>
-                            <img src="@/assets/site/dropdown_chose_ic.svg" alt="" v-if="item.id == coverInfo.school">
-                            </div>
-                        </template>
-                    </el-autocomplete>
+                        style="width: 356px;"
+                    />               
                 </div>
                 <!-- <GuipInput v-model="coverInfo.school" :client-form-flex="true" label="所属学校" width="356px" /> -->
                 <GuipRadio :options="collegeList" v-model="coverInfo.collegeId" :client-form-flex="true" label="学院" />
@@ -65,6 +56,7 @@ import GroupFormBtns from '@/components/GroupFormBtns.vue';
 import GuipRadio from '@/components/GuipRadio.vue';
 import GuipButton from '@/components/GuipButton.vue';
 // import GuipSelect from '@/components/GuipSelect.vue';
+import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; // 引入公共组件
 
 export default {
     name: 'CoverInfoPage',
@@ -73,6 +65,7 @@ export default {
         GuipInput,
         GuipRadio,
         GuipButton,
+        SchoolAutoComplete
         // GuipSelect
     },
     data() {
@@ -127,55 +120,17 @@ export default {
 
     },
     methods: {
-        handleSelect(item) {
-            console.log('选中:', item);
-            this.$emit('select', item);
+        handleSchoolSelect(item) {
+            console.log('选中学校:', item);
             this.coverInfo.school = item.id;
             this.coverInfo.school_name = item.name;
-            console.log(this.coverInfo.school,this.coverInfo.school_name,'===');
         },
-        querySearchAsync(queryString, callback) {
-            const keyword = queryString && queryString.trim();
-            
-            // 如果搜索内容为空或与上次相同，直接返回
-            if (!keyword || keyword === this.lastSearchKeyword) {
-                callback([]);
-                return;
-            }
-            
-            this.lastSearchKeyword = keyword;
-            this.loading = true;
-            
-            // 使用防抖
-            clearTimeout(this.timeout);
-            this.timeout = setTimeout(() => {
-                this.getSchoolSearchList(keyword, callback);
-            }, 300);
-        },
-        getSchoolSearchList(keyword, callback) {
-            try {
-                this.$http('POST', '/supernew/ajax_get_paiban_schools', {
-                    keyword
-                }).then(response => {
-                 if(response.status){
-                    const data = response.data || [];
-          
-                    if (data.length === 0) {
-                        // this.$Message.info('未找到相关学校')
-                    }
-                    callback(data);
-                 }else{
-                    callback([]);
-                 }
-                }).catch(error => {
-                    this.$Message.info('搜索学校列表失败')
-                    callback([]);
-                    console.error(error, 'error')
-                })
-            } catch (error) {
-                console.error('数据加载失败:', error)
-            }
+        handleSchoolClear() {
+            console.log('学校选择已清空');
+            this.coverInfo.school = '';
+            this.coverInfo.school_name = '';
         },
+       
         async getCoverInfo(){
             // this.$http('POST', '/supernew/ajax_get_paiban_template_list', {}, {
             // }).then(response => {
@@ -342,8 +297,4 @@ export default {
     align-items: flex-start;
     padding: 24px 32px;
 }
-.autoInput{
-    width: 300px;
-
-}
 </style>
\ No newline at end of file
diff --git a/src/views/super/paiban/tpl.vue b/src/views/super/paiban/tpl.vue
index a58704b..f6051bf 100644
--- a/src/views/super/paiban/tpl.vue
+++ b/src/views/super/paiban/tpl.vue
@@ -7,7 +7,7 @@
                         <label for="">模板列表</label>
                         <GuipSelect width="180px" clearable label="学历" :options="degreesList" v-model="degree" @change="getList"/>
                         <GuipFormItem label="学校">    
-                            <el-autocomplete
+                            <!-- <el-autocomplete
                                 slot="formDom"
                                 class="autoInput"
                                 v-model="schoolName"
@@ -17,14 +17,23 @@
                                 :debounce="300"
                                 :loading="loading"
                                 >
-                                <!-- 自定义下拉选项 -->
                                 <template #default="{ item }">
                                     <div class="flex-between school-option">
                                     <span>{{ item.name }}</span>
                                     <img src="@/assets/site/dropdown_chose_ic.svg" alt="" v-if="item.id == school">
                                     </div>
                                 </template>
-                            </el-autocomplete>
+                            </el-autocomplete> -->
+
+                            <SchoolAutoComplete
+                                slot="formDom"
+                                v-model="schoolName"
+                                :selected-school-id="school"
+                                @select="handleSchoolSelect"
+                                @clear="handleSchoolClear"
+                                placeholder="请输入学校名称"
+                                style="width: 300px;"
+                            />                        
                         </GuipFormItem>
                         <!-- <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" @blur="getSchoolSearchList" width="280px"  v-model="school" /> -->
                     </div>
@@ -64,15 +73,15 @@ import GuipTable from "@/components/GuipTable.vue";
 import GuipSelect from "@/components/GuipSelect.vue";
 // import GuipInput from "@/components/GuipInput.vue";
 import GuipFormItem from '@/components/GuipFormItem.vue'
-
+import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; // 引入公共组件
 export default {
     components: {
         // GuipInput,
         GuipSelect,
         GuipTable,
         GuipButton,
-        GuipFormItem
-
+        GuipFormItem,
+        SchoolAutoComplete
     },
     options: { styleIsolation: "shared" },
     data() {
@@ -120,55 +129,17 @@ export default {
             this.getList()
             this.getStatusList() //缺学历下拉列表
         },
-        handleSelect(item) {
-            console.log('选中:', item);
-            this.$emit('select', item);
+         handleSchoolSelect(item) {
+            console.log('选中学校:', item);
             this.school = item.id;
             this.schoolName = item.name;
-            console.log(this.school,this.schoolName,'===');
-            this.getList()
-        },
-        querySearchAsync(queryString, callback) {
-            const keyword = queryString.trim();
-            
-            // 如果搜索内容为空或与上次相同，直接返回
-            if (!keyword || keyword === this.lastSearchKeyword) {
-                callback([]);
-                return;
-            }
-            
-            this.lastSearchKeyword = keyword;
-            this.loading = true;
-            
-            // 使用防抖
-            clearTimeout(this.timeout);
-            this.timeout = setTimeout(() => {
-                this.getSchoolSearchList(keyword, callback);
-            }, 300);
+            this.getList();
         },
-        getSchoolSearchList(keyword, callback) {
-            try {
-                this.$http('POST', '/supernew/ajax_get_paiban_schools', {
-                    keyword
-                }).then(response => {
-                 if(response.status){
-                    const data = response.data || [];
-          
-                    if (data.length === 0) {
-                        // this.$Message.info('未找到相关学校')
-                    }
-                    callback(data);
-                 }else{
-                    callback([]);
-                 }
-                }).catch(error => {
-                    this.$Message.info('搜索学校列表失败')
-                    callback([]);
-                    console.error(error, 'error')
-                })
-            } catch (error) {
-                console.error('数据加载失败:', error)
-            }
+        handleSchoolClear() {
+            console.log('学校选择已清空');
+            this.school = '';
+            this.schoolName = '';
+            this.getList();
         },
        
         getStatusList() {
@@ -240,9 +211,6 @@ export default {
 ::v-deep .el-form-item{
   margin: 0;
 }
-.autoInput{
-    width: 300px;
-}
 
 .filter-area{
   gap: 32px;