diff --git a/src/components/company/SelectContacts.vue b/src/components/company/SelectContacts.vue index cba8e3f..0c5585d 100644 --- a/src/components/company/SelectContacts.vue +++ b/src/components/company/SelectContacts.vue @@ -3,7 +3,24 @@
+ + {{ item.name }} + + + import ContactManagementModule from '@comp/company/ContactManagementModule' import {getContactsByCompany,getContactsByCompanyNoLimit} from '@api/incomePaymentsApi' +import {debounce} from 'lodash' export default { name: 'SelectContacts', @@ -72,11 +90,24 @@ export default { type: Boolean, required: false, default: false + }, + // 懒加载(滚动到底部再渲染剩余数据) + lazy: { + type: Boolean, + require: false, + default: false + }, + // 懒加载每次加载的个数 + lazySize: { + type: Number, + require: false, + default: 50 } }, data() { return { contactsList: [], // 该企业下联系人列表 + lazyContactsList: [], // 该企业下联系人列表 (懒加载) isFirstOpen: true, // 编辑状态下是否为第一次打开 contactId: this.value } @@ -84,6 +115,7 @@ export default { created() { // this.initContacts = null this.contactsList = [] + this.lazyContactsList = [] // 编辑 第一次不回显的问题 this.getContactsList() }, @@ -115,6 +147,33 @@ export default { } }, methods: { + // 懒加载搜索 + lazySearch (val) { + this.lazyContactsList = [] + this.lazyContactsList = this.contactsList.filter(item => item.name.includes(val)).slice(0, this.lazySize) + }, + // 懒加载滚动 + lazyPopupScroll: debounce(function (e) { + console.log('scroll') + const { target } = e + const scrollHeight = target.scrollHeight - target.scrollTop + const clientHeight = target.clientHeight + // 下拉框不下拉的时候 + if (scrollHeight === 0 && clientHeight === 0) { + this.lazyContactsList = [] + } else { + // 当下拉框滚动条到达底部的时候 + if (scrollHeight < clientHeight + 5) { + console.log('scroll end') + const allLen = this.contactsList.length + const showLen = this.lazyContactsList.length + // 如果总长度大于显示长度,那就添加 + if (allLen > showLen) { + this.lazyContactsList = this.contactsList.slice(0, showLen + this.lazySize) + } + } + } + }, 50), /** * 获取联系人数据 */ @@ -131,6 +190,12 @@ export default { return new Promise(resolve => { getContactsByCompanyNoLimit(params).then(res => { this.contactsList = res.result + if (this.lazy) { + // 回显的用户显示再最前面 + const findIndex = this.contactsList.findIndex(item => item.id === this.value) + this.contactsList.unshift(this.contactsList.splice(findIndex, 1)[0]) + this.lazyContactsList = this.contactsList.slice(0, this.lazySize) + } if (this.initContacts && this.initContacts.id) { this.contactsList.push(this.initContacts) } @@ -141,6 +206,12 @@ export default { return new Promise(resolve => { getContactsByCompany(params).then(res => { this.contactsList = res.result || [] + if (this.lazy) { + // 回显的用户显示再最前面 + const findIndex = this.contactsList.findIndex(item => item.id === this.value) + this.contactsList.unshift(this.contactsList.splice(findIndex, 1)) + this.lazyContactsList = this.contactsList.slice(0, this.lazySize) + } if (this.initContacts && this.initContacts.id) { this.contactsList.push(this.initContacts) } diff --git a/src/views/draftTeam/SignUpDraftTeamPage.vue b/src/views/draftTeam/SignUpDraftTeamPage.vue index f226ff3..bec0b93 100644 --- a/src/views/draftTeam/SignUpDraftTeamPage.vue +++ b/src/views/draftTeam/SignUpDraftTeamPage.vue @@ -87,6 +87,7 @@ v-decorator="[`payDraftingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]" :maxLength='50' isLimit + lazy :ref="`selectContacts${index}`">