Browse Source

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

clientSet-zq-1128
zq 2 weeks ago
parent
commit
9cd93f267b
  1. 93
      src/components/clientSet/searchInput.vue
  2. 48
      src/views/super/paiban/college.vue

93
src/components/clientSet/searchInput.vue

@ -8,6 +8,7 @@
:loading="loading" :loading="loading"
@select="handleSelect" @select="handleSelect"
@input="handleInput" @input="handleInput"
@clear="handleManualClear"
:clearable="clearable" :clearable="clearable"
:size="size" :size="size"
:disabled="disabled" :disabled="disabled"
@ -78,7 +79,19 @@
loading: false, loading: false,
timeout: null, timeout: null,
lastSearchKeyword: '', lastSearchKeyword: '',
schoolList: [] schoolList: [],
//
lastValidSelection: null
}
},
mounted() {
//
if (this.selectedSchoolId && this.value) {
this.lastValidSelection = {
id: this.selectedSchoolId,
name: this.value
}
} }
}, },
@ -89,13 +102,10 @@
methods: { methods: {
/** /**
* 异步搜索学校 * 异步搜索学校
* @param {string} queryString 搜索关键字
* @param {Function} callback 回调函数
*/ */
async querySearchAsync(queryString, callback) { async querySearchAsync(queryString, callback) {
const keyword = queryString.trim() const keyword = queryString.trim()
//
if (!keyword || keyword === this.lastSearchKeyword) { if (!keyword || keyword === this.lastSearchKeyword) {
callback([]) callback([])
return return
@ -104,7 +114,6 @@
this.lastSearchKeyword = keyword this.lastSearchKeyword = keyword
this.loading = true this.loading = true
// 使
clearTimeout(this.timeout) clearTimeout(this.timeout)
this.timeout = setTimeout(async () => { this.timeout = setTimeout(async () => {
try { try {
@ -122,8 +131,6 @@
/** /**
* 搜索学校API调用 * 搜索学校API调用
* @param {string} keyword 搜索关键字
* @returns {Promise<Array>} 学校列表
*/ */
async searchSchools(keyword) { async searchSchools(keyword) {
try { try {
@ -143,66 +150,76 @@
/** /**
* 处理选择事件 * 处理选择事件
* @param {Object} item 选中的学校对象
*/ */
handleSelect(item) { handleSelect(item) {
// console.log('选中学校:', item)
//
this.lastValidSelection = {
id: item.id,
name: item.name
}
this.$emit('select', item) this.$emit('select', item)
// ID
this.$emit('update:selectedSchoolId', item.id) this.$emit('update:selectedSchoolId', item.id)
//
this.$emit('input', item.name) this.$emit('input', item.name)
this.$emit('change', item) this.$emit('change', item)
}, },
/** /**
* 处理输入事件 * 处理输入事件 - 安全版本
* @param {string} value 输入的值
*/ */
handleInput(value) { handleInput(value) {
console.log('输入变化:', value, '当前选中:', this.selectedSchoolId)
//
this.$emit('input', value) this.$emit('input', value)
//
if (!value) { //
this.$emit('clear') // handleManualClear
this.$emit('update:selectedSchoolId', null) },
this.lastSearchKeyword = '' 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) { setSelectedSchool(school) {
if (school && school.id && school.name) { if (school && school.id && school.name) {
this.lastValidSelection = {
id: school.id,
name: school.name
}
this.$emit('input', school.name) this.$emit('input', school.name)
this.$emit('update:selectedSchoolId', school.id) this.$emit('update:selectedSchoolId', school.id)
this.$emit('select', school) this.$emit('select', school)
} }
}, },
/**
* 清空选择
*/
clear() { 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) { async triggerSearch(keyword) {
return await this.searchSchools(keyword || this.value) return await this.searchSchools(keyword || this.value)
},
/**
* 恢复上一次的有效选择
*/
restoreLastSelection() {
if (this.lastValidSelection) {
this.setSelectedSchool(this.lastValidSelection)
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.school-auto-complete { .school-auto-complete {
width: 100%; width: 100%;

48
src/views/super/paiban/college.vue

@ -7,7 +7,18 @@
<label for="">收录申请</label> <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="statusList" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
<GuipSelect width="180px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" @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> </div>
<GuipButton type="primary" :btnstyle="{ width: '120px' }">收录成功通知 <GuipButton type="primary" :btnstyle="{ width: '120px' }">收录成功通知
</GuipButton> </GuipButton>
@ -73,9 +84,11 @@ import SvgIcon from '@/components/SvgIcon.vue';
import GuipButton from "@/components/GuipButton.vue"; import GuipButton from "@/components/GuipButton.vue";
import GuipTable from "@/components/GuipTable.vue"; import GuipTable from "@/components/GuipTable.vue";
import GuipSelect from "@/components/GuipSelect.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 GuipDialog from "@/components/GuipDialog.vue";
import GuipTextarea from "@/components/GuipTextarea.vue"; import GuipTextarea from "@/components/GuipTextarea.vue";
import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; //
import GuipFormItem from '@/components/GuipFormItem.vue'
// //
// status:{ // status:{
@ -89,12 +102,13 @@ export default {
components: { components: {
GuipTextarea, GuipTextarea,
GuipDialog, GuipDialog,
GuipInput, // GuipInput,
GuipSelect, GuipSelect,
GuipTable, GuipTable,
GuipButton, GuipButton,
SvgIcon SvgIcon,
SchoolAutoComplete,
GuipFormItem
}, },
options: { styleIsolation: "shared" }, options: { styleIsolation: "shared" },
data() { data() {
@ -102,6 +116,8 @@ export default {
tableLoading:false, tableLoading:false,
tableKey: '', tableKey: '',
school:'', school:'',
schoolName:'',
lastSearchKeyword:'',
degree:'', degree:'',
review_status: -1, review_status: -1,
@ -117,6 +133,16 @@ export default {
statusList:[] statusList:[]
} }
}, },
watch: {
schoolName(newVal) {
//
if (!newVal) {
this.school = null;
this.lastSearchKeyword = '';
this.$emit('clear');
}
}
},
mounted() { mounted() {
this.$nextTick(()=>{ this.$nextTick(()=>{
this.init() this.init()
@ -132,6 +158,18 @@ export default {
this.getList() this.getList()
this.getStatusList() 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() { getList() {
try { try {
this.$http('POST', '/supernew/ajax_get_paiban_review_list', {//ok this.$http('POST', '/supernew/ajax_get_paiban_review_list', {//ok

Loading…
Cancel
Save