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"
@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')
this.$emit('update:selectedSchoolId', null)
this.lastSearchKeyword = ''
}
//
// 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.$emit('update:selectedSchoolId', null)
this.$emit('clear')
this.lastSearchKeyword = ''
this.clearSelection()
},
/**
* 手动触发搜索
* @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%;

48
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

Loading…
Cancel
Save