收款单收款账户分页

src/views/ecw/financial/creatCollection.vue

@@ -319,7 +319,7 @@
                 style="margin-bottom: 0"
                 :prop="`receiptAccountList.${scope.$index}.platformAccountId`"
               >
-                <el-select
+<!--                <el-select
                   v-model="scope.row.platformAccountId"
                   :placeholder="$t('请选择收款账户')"
                   @change="(platformAccountId)=>changePlatformAccountId(platformAccountId,scope.$index)"
@@ -330,6 +330,21 @@
                     :label="item.baAccountName + '(' + item.baAccountNum + ')'"
                     :value="item.id"
                   />
+                </el-select> -->
+                <el-select
+                    filterable
+                    clear
+                    v-model="scope.row.platformAccountId"
+                    :placeholder="$t('请选择收款账户')"
+                    @change="(platformAccountId)=>changePlatformAccountId(platformAccountId,scope.$index)"
+                    v-el-select-loadmore="loadmore"
+                    :loading="codeLoading">
+                    <el-option
+                      v-for="(item, i) in bankData"
+                      :key="'opt-code' + i"
+                      :label="item.baAccountName + '(' + item.baAccountNum + ')'"
+                      :value="item.id"
+                      ></el-option>
                 </el-select>
               </el-form-item>
             </template>
@@ -742,7 +757,13 @@ export default {
       warehouseList:[],
       selectedUsers:[],
       dialogVisible:false,
-      isUpdate:false
+      isUpdate:false,
+      codeLoading: false,
+      codePage: {
+         pageNo: 1,
+         pageSize: 100
+      },
+      pages:1
     };
   },
   activated(){
@@ -757,6 +778,22 @@ export default {
       this.getReceivableInfo()
     }
   },
+  directives: {
+      'el-select-loadmore': {
+        bind (el, binding) {
+          const SELECTWRAP_DOM = el.querySelector(
+            '.el-select-dropdown .el-select-dropdown__wrap'
+          )
+          SELECTWRAP_DOM.addEventListener('scroll', function () {
+            const condition =
+              this.scrollHeight - this.scrollTop <= this.clientHeight
+            if (condition) {
+              binding.value()
+            }
+          })
+        }
+      }
+    },
   async created() {
     getUserProfile().then(res => {
       this.discountForm.author = res.data.username
@@ -800,9 +837,7 @@ export default {
     listSimpleUsers().then((res) => (that.creatorData = res.data));
     getChannelList().then((res) => (that.channelList = res.data));
     getTradeCityList().then((res) => (that.tradeCityList = res.data));
-    getBankAccountPage(that.params).then(
-      (res) => (that.bankData = res.data.list)
-    );
+    this.getCodeList()
     listSimpleDepts().then((res) => {
       res.data.forEach((item) => {
         if (item.parentId == 0) {
@@ -854,6 +889,29 @@ export default {
     }
   },
   methods: {
+// 懒加载
+    loadmore () {
+      this.codePage.pageNo++
+      // 大于页码不请求了
+      console.log(111)
+      if (this.codePage.pageNo > this.pages) {
+        return
+      }
+      this.getCodeList()
+    },
+   getCodeList (flag) {
+        if (flag) {
+          this.bankData = []
+          this.codeLoading = true
+        }
+        setTimeout(() => {
+          getBankAccountPage(this.codePage).then(res => {
+            this.codeLoading = false
+            this.pages = res.data.pages
+            this.bankData = this.bankData.concat(res.data.list)
+            })
+        }, 200)
+    },
     getReceivableData(){
       getReceiptInfoByIds({ id: this.id }).then(res => {
         if(res.data.rateValidateDate) res.data.rateValidateDate = dayjs(res.data.rateValidateDate).format('YYYY-MM-DD HH:mm:ss')