fix 80839

src/components/company/SelectContacts.vue

@@ -3,7 +3,24 @@
   <div>
     <a-row>
       <a-col :span="20">
+        <!-- 懒加载的下拉 -->
         <a-select :value="value"
+                  v-if="lazy"
+                  v-bind="$attrs"
+                  v-on="$listeners"
+                  show-search
+                  allowClear
+                  option-filter-prop="children"
+                  :filterOption="false"
+                  :not-found-content="null"
+                  @search="lazySearch"
+                  @popupScroll="lazyPopupScroll"
+                  @dropdownVisibleChange="handleDropdownOpen">
+          <a-select-option v-for="item in lazyContactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+        </a-select>
+        <!-- 正常的下拉 -->
+        <a-select :value="value"
+                  v-else
                   v-bind="$attrs"
                   v-on="$listeners"
                   show-search
@@ -29,6 +46,7 @@
 <script>
 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)
             }

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}`"></select-contacts>
                   </a-form-item>
                 </a-col>