zq
3 weeks ago
3 changed files with 265 additions and 120 deletions
@ -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> |
|||
Loading…
Reference in new issue