搜索输入url更改为动态传参

src/components/clientSet/searchInput.vue

@@ -0,0 +1,247 @@
+<template>
+    <el-autocomplete
+      class="school-auto-complete"
+      :value="value"
+      :fetch-suggestions="querySearchAsync"
+      :placeholder="placeholder"
+      :debounce="debounce"
+      :loading="loading"
+      @select="handleSelect"
+      @input="handleInput"
+      @clear="handleManualClear" 
+      :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: {
+      url: {
+        type: String,
+        default: ''
+      },
+      // 双向绑定的值（学校名称）
+      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: [],
+        // 新增：记录最后一次有效选择
+        lastValidSelection: null
+      }
+    },
+    
+    mounted() {
+      // 初始化时记录当前选择
+      if (this.selectedSchoolId && this.value) {
+        this.lastValidSelection = {
+          id: this.selectedSchoolId,
+          name: this.value
+        }
+      }
+    },
+    
+    beforeDestroy() {
+      clearTimeout(this.timeout)
+    },
+    
+    methods: {
+      /**
+       * 异步搜索学校
+       */
+      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调用
+       */
+      async searchSchools(keyword) {
+        try {
+          const response = await this.$http('POST', this.url, {
+            keyword
+          })
+          
+          if (response.status && response.data) {
+            return response.data
+          }
+          return []
+        } catch (error) {
+          this.$message.error('搜索学校列表失败')
+          throw error
+        }
+      },
+      
+      /**
+       * 处理选择事件
+       */
+      handleSelect(item) {
+        console.log('选中学校:', item)
+        
+        // 更新记录
+        this.lastValidSelection = {
+          id: item.id,
+          name: item.name
+        }
+        
+        this.$emit('select', item)
+        this.$emit('update:selectedSchoolId', item.id)
+        this.$emit('input', item.name)
+        this.$emit('change', item)
+      },
+      
+      /**
+       * 处理输入事件 - 安全版本
+       */
+      handleInput(value) {
+        console.log('输入变化:', value, '当前选中:', this.selectedSchoolId)
+        
+        // 只更新显示的值
+        this.$emit('input', value)
+        
+        // 重要：这里不自动触发清空
+        // 清空只会在 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
+      },
+      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.clearSelection()
+      },
+      
+      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%;
+  }
+  
+  .school-option {
+    width: 100%;
+    span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    img {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+  </style>

src/views/elementGroups.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
-            <div id="example1" class="mb24 ele-item gap10">
+            <section id="example1" class="demo-section column gap12">
-                <label for="">输入+下拉 组合框</label>
+                <h2>输入+下拉 组合框</h2>
                 <domainBind label="域名设置" @handleEvent="handleEvent" />
-            </div>
+            </section>
-            <div id="example2" class="ele-item">
+            <section id="example2" class="demo-section column gap12">
-                <label style="font-weight: 600;text-align: left;" for="">文案提示框</label>
+                <h2>文案提示框</h2>
-                <div class="column gap10">
                 <PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
                 <PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
                 <PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
@@ -21,8 +20,8 @@
                     </template>
                     <template #desc>
                         <p class="mt12 flex">
-                                1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
+                            1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
-                                    target="_blank">
+                                class="flex" target="_blank">
                                 <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                         </p>
                         <p class="mt10 flex">
@@ -32,11 +31,11 @@
                         </p>
                     </template>
                 </PromptText>
-                </div>
+            </section>
-            </div>
 
-            <div class="ele-item" id="example3">
+            <section id="example3" class="demo-section">
-                <label for="">实时预览外层嵌套</label>
+                <h2 for="">实时预览外层嵌套</h2>
+                <div class="ele-item">
                     <!-- 默认 显示电脑端、手机端 -->
                     <!--  :showMobile="false"  :showPc="false" -->
                     <DevicePreview>
@@ -49,16 +48,21 @@
                         </template>
                     </DevicePreview>
                 </div>
-            <div class="ele-item gap12" id="example4">
+            </section>
-                <label for="">不同状态：</label>
+
+            <section id="example4" class="demo-section">
+                <h2>状态标签</h2>
+                <div class="ele-item gap12">
                     <div class="status-item divgreen"><span class="fontgreen">状态标签</span></div>
                     <div class="status-item divorange"><span class="fontorange">状态标签</span></div>
                     <div class="status-item divgray"><span class="fontgray">状态标签</span></div>
                     <div class="status-item divred"><span class="fontred">状态标签</span></div>
                     <div class="status-item divblue"><span class="fontblue">状态标签</span></div>
                 </div>
+            </section>
+            <section id="example4" class="demo-section">
+                <h2 for="">卡片默认及选中样式</h2>
                 <div class="ele-item gap12" id="example5">
-                <label for="">卡片默认及选中样式</label>
                     <div class="wallet-item point ">
                         <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false">
                         <div class="wallet-name">这是默认</div>
@@ -70,31 +74,35 @@
                         <div class="desc">小文案小文案小文案小文案小文案</div>
                     </div>
                 </div>
+            </section>
+
 
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-                <div id="example6">
+                <section id="example6" class="demo-section">
+                    <h2 for="">copy固定内容</h2>
                     <div class="ele-item">
-                        <label for="">copy固定内容</label>
                         <!-- 复制固定文本 -->
                         <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
 
                         <!-- 复制动态文本 -->
                         <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
                     </div>
-                </div>
+                </section>
-                <div id="example7">
+                <section id="example7" class="demo-section">
-                    <div class="ele-item">
+                    <h2 for="">手动点击copy</h2>
-                        <label for="">手动点击copy</label>
+                    <div class="ele-item gap24">
                         <GuipInput v-model="form.input1">
                             <!-- 提示可以不添加 、图标可更换 -->
                             <GuipToolTip content="点击复制到粘贴板" slot="suffix">
                                 <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
                             </GuipToolTip>
                         </GuipInput>
+                        <GuipInput width="300px" placeholder="复制完毕后，粘贴试一下" v-model="form.input4" />
                     </div>
-                </div>
+                </section>
-                <div id="example8">
+                <section id="example8" class="demo-section">
+                    <h2>单选框</h2>
                     <div class="ele-item">
                         <label for="">单选框(对象格式)：</label>
                         <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@@ -102,23 +110,38 @@
                     </div>
                     <div class="ele-item">
                         <label for="">单选框2（数组格式 + 自定义取值）：</label>
-                        <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
+                        <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
-                            @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
+                            selectedLabelKey="selectedLabel" @change="radioChange" :rules="rules.language"
-                            value-key="id" />
+                            label-key="name" :disabledKeys="['1']" value-key="id" />
+                    </div>
+                    <div class="ele-item">
+                        <label for="">单选框：</label>
+                        <el-radio v-model="radio1" :label="1">选项一</el-radio>
+                        <el-radio v-model="radio1" :label="2">选项二</el-radio>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
 
+                    <div class="ele-item">
+                        <label for="">单选框组：</label>
+                        <el-radio-group v-model="radio" @input="radioChange">
+                            <el-radio :label="3">备选项</el-radio>
+                            <el-radio :label="6">备选项</el-radio>
+                            <el-radio :label="9">备选项</el-radio>
+                        </el-radio-group>
                     </div>
-                <div id="example9">
+                </section>
+                <section id="example9" class="demo-section">
+                    <h2>下拉选择框</h2>
                     <div class="ele-item">
                         <label for="">数组套对象类型下拉框：</label>
                         <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
                         <div class="flex">
-                        <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
+                            <GuipSelect width="150px" v-model="form.card" clearable label="卡片"
-                            prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
+                                :default-value="form.card" @change="selectChangeTest" prop="card" :options="options"
+                                valueKey="id1" labelKey="id2" :extraItem="{ label: '全部', value: '99999' }" />
                             <p>j卢卡斯就到啦</p>
                             <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
-                            @blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
+                                @blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput"
+                                placeholder="这是自定义默认提示语" />
                         </div>
                     </div>
                     <div class="ele-item">
@@ -128,18 +151,19 @@
                     </div>
                     <div class="ele-item">
                         <label for="">对象格式下拉框：</label>
-                        <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
+                        <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card"
-                            prop="card" :options="languageOptions"/>
+                            @change="selectChangeTest" prop="card" :options="languageOptions" />
-                    </div>
                     </div>
+                </section>
 
                 <el-button type="primary" @click="submitForm">Submit</el-button>
 
-                <div id="example10">
+                <section id="example10" class="demo-section">
                     <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                     <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
-                    <GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange"
+                    <GuipTable :tableData="[{ payment: 0, name2: 10008.9, price: 200 }]" ref="multipleTable"
-                        :multiple="true" autoColumn="true" :loading="tableLoading">
+                        @selectChange="handleSelectionChange" :multiple="true" autoColumn="true"
+                        :loading="tableLoading">
                         <!-- <template slot="header"> -->
                         <el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
                         <el-table-column prop="created_at" label="时间" width="200">
@@ -175,18 +199,19 @@
                             </template>
 
                         </el-table-column>
-                        <el-table-column prop="name2" label="姓名" width="150" :formatter="$stateFormat"></el-table-column>
+                        <el-table-column prop="name2" label="姓名" width="150"
+                            :formatter="$stateFormat"></el-table-column>
                         <el-table-column prop="statu" label="价格" width="150">
                             <template slot-scope="scope">
-                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭" :active-value="1" :inactive-value="0"
+                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭"
-                                    @change="onSwitchChange1(scope.row)">
+                                    :active-value="1" :inactive-value="0" @change="onSwitchChange1(scope.row)">
                                 </GuipSwitch>
                             </template>
                         </el-table-column>
                         <el-table-column prop="price" label="价格" width="300">
                             <template slot-scope="scope">
-                                <GuipSelect width="200px"  v-model="scope.row.price"
+                                <GuipSelect width="200px" v-model="scope.row.price" :options="[{ value: 1, label: '哈哈' }]"
-                                     :options="[{value:1,label:'哈哈'}]" defaultValue="选项1" />
+                                    defaultValue="选项1" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="address" label="地址1" width="150">
@@ -242,9 +267,10 @@
                         </template>
                     </GuipTable> -->
                     </div>
-                </div>
+                </section>
 
-                <div id="example11">
+                <section id="example11" class="demo-section">
+                    <h2>文本域相关</h2>
                     <div class="ele-item">
                         <label for="">文本域：固定行数</label>
                         <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
@@ -258,22 +284,15 @@
                         <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
                             placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
+                </section>
-                </div>
+                <section id="example12" class="demo-section">
-
+                    <h2 for="">输入框：</h2>
-
+                    <div class="flex gap24">
-                <div class="ele-item" id="example12">
-                    <label for="">输入框：</label>
                         <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
                             placeholder="这是自定义默认提示语" />
-                
-                    <div style="width: 20px;height: 10px;"></div>
-
                         <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
                             @blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
 
-                    <div style="width: 20px;height: 10px;"></div>
-
                         <GuipInput v-model="form.input3" width="400px">
                             <span slot="prependshow">http:</span>
                             <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
@@ -287,10 +306,12 @@
                             <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
                             <span slot="appendshow">.checkcopy.com</span>
                         </GuipInput>
-                    <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
                     </div>
-                <div class="ele-item gap12" id="example13">
+
-                    <label for="">带间隔的label:</label>
+                    <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
+                </section>
+                <section id="example13" class="demo-section">
+                    <h2 for="">带间隔的label:</h2>
                     <div class="column">
                         <div class="flex mb12">
                             <div class="flex-label">
@@ -303,31 +324,13 @@
                             placeholder="label有间隔的" label="输入框" :client-form-flex="true" />
                         <GuipSelect ref="GuipSelect" :column="true" v-model="form.input1" width="200px" height="30px"
                             placeholder="label有间隔的" label="下拉框" :client-form-flex="true" />
-                        <GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language" selectedLabelKey="selectedLabel"
+                        <GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language"
-                            @change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true"
+                            selectedLabelKey="selectedLabel" @change="radioChange" label-key="name"
-                            value-key="id" />
+                            :disabledKeys="['1']" :client-form-flex="true" value-key="id" />
-                    </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-                <div id="example13">
-                    <div class="ele-item">
-                        <label for="">单选框：</label>
-                        <el-radio v-model="radio1" :label="1">选项一</el-radio>
-                        <el-radio v-model="radio1" :label="2">选项二</el-radio>
-                    </div>
-
-                    <div class="ele-item">
-                        <label for="">单选框组：</label>
-                        <el-radio-group v-model="radio" @input="radioChange">
-                            <el-radio :label="3">备选项</el-radio>
-                            <el-radio :label="6">备选项</el-radio>
-                            <el-radio :label="9">备选项</el-radio>
-                        </el-radio-group>
-                    </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-
                     </div>
-                <div id="example14">
+                </section>
+                <section id="example14" class="demo-section">
+                    <h2>按钮集合</h2>
                     <div class="ele-item">
                         <label for="">按钮尺寸：</label>
                         <GuipButton size="superBig">加盟并进入后台</GuipButton>
@@ -424,23 +427,23 @@
                         <label for="">自定义宽高按钮：</label>
                         <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
+                </section>
-                </div>
+                <section id="example15" class="demo-section">
-
+                    <h2>提示</h2>
-
+                    <div class="ele-item">
-                <div class="ele-item" id="example15">
-                    <label for="">提示：</label>
                         <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
                         <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
                         <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
                     </div>
-                <div id="example15">
+                </section>
+
+                <section id="example16" class="demo-section">
+                    <h2>表单布局</h2>
                     <div style="width: 600px;">
                         <h3>表单左右布局（直接使用封装好的input）</h3>
                         <!-- 表单左右布局 -->
-                        <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
+                        <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username"
-                            :rules="usernameRules" placeholder="这是自定义默认提11示语" />
+                            prop="username" :rules="usernameRules" placeholder="这是自定义默认提11示语" />
                     </div>
 
                     <div style="width: 800px;height: 150px;">
@@ -465,15 +468,15 @@
                                 prop="card" :options="['麻辣烫', '提拉米苏']" />
                         </GuipFormItem>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
+                </section>
-                </div>
+
-                <div id="example17">
+                <section id="example17" class="demo-section">
+                    <h2>开关集合</h2>
                     <div class="ele-item">
-                        <label for="">开关L</label>
                         <!-- active-value 开启状态的值 -->
                         <!-- inactive-value 关闭状态的值 -->
-                        <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
+                        <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭"
-                            @change="onSwitchChange">
+                            :active-value="true" :inactive-value="false" @change="onSwitchChange">
                         </GuipSwitch>
                     </div>
                     <div class="ele-item">
@@ -493,11 +496,10 @@
                         </GuipSwitch>
                         <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
+                </section>
-                </div>
-                <div id="example18">
-
 
+                <section id="example18" class="demo-section">
+                    <h2>输入框与下拉框组合</h2>
                     <div class="flex ele-item">
                         <label for="">input、drop组合使用(默认使用)</label>
                         <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
@@ -595,10 +597,10 @@
                             </template>
                         </CustomDropdown>
                     </div>
-                </div>
+                </section>
+
 
             </el-form>
-            <div class="shortLine">--------------------分割线------------------------------</div>
 
             <div style="" class="ele-item">
                 <label for="">日期选择器</label>
@@ -623,22 +625,32 @@
                     <el-button @click="save" type="primary">保存</el-button>
                 </div> -->
             </div>
-            <div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example19">
+
-                <label for="">指定位置提示</label>
+            <section id="example19" class="demo-section">
-                <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示
+                <h2>指定位置提示</h2>
+                <div class="flex ele-item gap10" style="flex-wrap: wrap;">
+                    <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }"
+                        @click="openDialog3('button1', 'bottom')">下方弹出消息提示
                     </GuipButton>
-                <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示
+                    <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }"
+                        @click="openDialog3('button2', 'top')">
+                        上方弹出消息提示
                     </GuipButton>
-                <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示
+                    <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }"
+                        @click="openDialog4('button3', 'top')">
+                        一直显示消息提示
                     </GuipButton>
                     <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
                     </GuipButton>
-                <GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
+                    <GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">
+                        动态更改提示文案
                     </GuipButton>
                 </div>
+            </section>
 
-            <div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example20">
+            <section id="example20" class="demo-section">
-                <label for="">弹出框内布局集合</label>
+                <h2>弹出框内布局集合</h2>
+                <div class="flex ele-item gap10" style="flex-wrap: wrap;">
                     <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
                     </GuipButton>
                     <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
@@ -646,13 +658,18 @@
                     <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
                     </GuipButton>
                 </div>
-            <div id="example21" class="flex ele-item gap10">
+            </section>
-                <label for="">展示加载</label>
+
+            <section id="example21" class="demo-section">
+                <h2>展示加载</h2>
+                <div class="flex ele-item gap10">
                     <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
                 </div>
+            </section>
 
-            <div class="flex ele-item" id="example22">
+            <section id="example22" class="demo-section">
-                <label for="">提示信息</label>
+                <h2>提示信息</h2>
+                <div class="flex ele-item">
                     <GuipToolTip content="这是一个提示">
                         <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
                     </GuipToolTip>
@@ -672,10 +689,14 @@
                             :hoverColor="'#006AFF'" />
                     </GuipToolTip>
                 </div>
+            </section>
 
-            <div class="flex ele-item" id="example50">
+            <section id="example50" class="demo-section">
+                <h2>文档链接</h2>
+                <div class="flex ele-item">
                     <a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
                 </div>
+            </section>
 
             <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
                 :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@@ -685,15 +706,14 @@
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
+            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" @close="handleClose"
-                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
+                @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <div>
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮"
+            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮" :showFooterButton="false"
-            :showFooterButton="false"
                 @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <div>
@@ -835,9 +855,10 @@ export default {
                 domainSuffix1: '.chachongz.com',
                 card: '1',
                 card1: '20',
-                input1: '跨年的烟火,绽放天空',
+                input1: '跨年的烟火',
                 input2: '',
                 input3: '',
+                input4: '',
             },
             languageOptions1: [
                 { label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: 0, name: 0 },
@@ -1224,27 +1245,45 @@ export default {
         getStagePurchase() {
             this.tableLoading = true
             const that = this
-            that.tableData = []
+            that.tableData = [
-            this.$http('POST', '/supernew/ajax_get_stage_purchase', {
+                {
-                type: 0,
+                    id: 1,
-                cur_page: 1,
+                    created_at: '张三模拟数据',
-                page_size: 5,
+                    age: 25,
-            }, {
+                    email: 'zhangsan@example.com'
-                headers: {
+                },
-                    'AUTH': '3c901fa4a19a7ad9d01238890863d499'
+                {
-                }
+                    id: 2,
-            }).then(response => {
+                    created_at: '李四模拟数据',
-                this.tableLoading = false
+                    age: 30,
-                this.$nextTick(() => {
+                    email: 'lisi@example.com'
-                    that.tableData = response.data.list
+                },
-                    // console.log(that.tableData,'---that.tableData');
+                // ... 更多数据项
-                    // that.type2name = response.data.type2name
+            ]
-                    that.total = response.data.total
+            that.total = 100 // 总条数，用于分页组件显示总页数
-                })
+            setTimeout(() => {
-            }).catch(error => {
+                that.tableLoading = false
-                this.tableLoading = false
+            }, 1000)
-                console.error(error, 'error')
+            // this.$http('POST', '/supernew/ajax_get_stage_purchase', {
-            })
+            //     type: 0,
+            //     cur_page: 1,
+            //     page_size: 5,
+            // }, {
+            //     headers: {
+            //         'AUTH': '3c901fa4a19a7ad9d01238890863d499'
+            //     }
+            // }).then(response => {
+            //     this.tableLoading = false
+            //     this.$nextTick(() => {
+            //         that.tableData = response.data.list
+            //         // console.log(that.tableData,'---that.tableData');
+            //         // that.type2name = response.data.type2name
+            //         that.total = response.data.total
+            //     })
+            // }).catch(error => {
+            //     this.tableLoading = false
+            //     console.error(error, 'error')
+            // })
         },
         btnClick() {
 
@@ -1459,6 +1498,7 @@ export default {
     text-align: center;
     background-color: antiquewhite;
 }
+
 .elementWrap {
     /* width: 100%; */
     padding: 30px 40px;
@@ -1568,9 +1608,25 @@ export default {
         background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
     }
 }
+
 .btns {
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }
+
+.demo-section {
+    margin: 30px 0;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    h2 {
+        text-align: left;
+        color: #333;
+        margin: 0;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+}
 </style>

src/views/super/paiban/college.vue

@@ -5,9 +5,21 @@
                 <div class="flex-between">
                     <div class="flex filter-area">
                         <label for="">收录申请</label>
-                        <GuipSelect width="150px" clearable label="状态" :options="['麻辣烫','提拉米苏']" v-model="review_status" />
+                        <GuipSelect width="180px" clearable label="状态" :options="statusList" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
-                        <GuipSelect width="150px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" />
+                        <GuipSelect width="180px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" @change="getList"/>
-                        <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" v-model="school" />
+
+                        <GuipFormItem label="学校">    
+                            <SchoolAutoComplete
+                                slot="formDom"
+                                v-model="schoolName"
+                                url="/supernew/ajax_get_paiban_schools"
+                                :selected-school-id="school"
+                                @select="handleSchoolSelect"
+                                @clear="handleSchoolClear"
+                                placeholder="请输入学校名称"
+                                style="width: 300px;"
+                            />                        
+                        </GuipFormItem>
                     </div>
                     <GuipButton>收录成功通知</GuipButton>
                 </div>
@@ -53,7 +65,6 @@
 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 GuipDialog from "@/components/GuipDialog.vue";
 import GuipTextarea from "@/components/GuipTextarea.vue";
 
@@ -61,7 +72,7 @@ export default {
     components: {
         GuipTextarea,
         GuipDialog,
-        GuipInput, GuipSelect,
+        GuipSelect,
         GuipTable,
         GuipButton,