From 9ba9bf22977d298b1fc27e94dae18f3e8ff59b67 Mon Sep 17 00:00:00 2001
From: "autumn.g@foxmail.com" <autumn.g@foxmail.com>
Date: Sat, 15 Apr 2023 11:55:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsowell-ui/src/main.js                        | 12 ++++++
 .../src/views/pile/station/pileList.vue       | 43 +++++++++++++++++--
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/jsowell-ui/src/main.js b/jsowell-ui/src/main.js
index 48104b6f6..a6a9067c4 100644
--- a/jsowell-ui/src/main.js
+++ b/jsowell-ui/src/main.js
@@ -84,3 +84,15 @@ new Vue({
   store,
   render: h => h(App)
 })
+
+Vue.directive('selectLoadMore', {
+  bind (el, binding) {
+    // 获取element-ui定义好的scroll盒子
+    const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
+    selectDom .addEventListener('scroll', function () {
+      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
+        binding.value()
+      }
+    })
+  }
+})
diff --git a/jsowell-ui/src/views/pile/station/pileList.vue b/jsowell-ui/src/views/pile/station/pileList.vue
index d390132e8..8db30fe5a 100644
--- a/jsowell-ui/src/views/pile/station/pileList.vue
+++ b/jsowell-ui/src/views/pile/station/pileList.vue
@@ -135,7 +135,10 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="产品型号" prop="modelId">
-              <el-select v-model="updateData.modelId" placeholder="请选择产品型号">
+              <el-select v-model="updateData.modelId" placeholder="请选择产品型号"
+                         v-selectLoadMore="selectLoadMore"
+                         :remote-method="remoteMethod"
+              >
                 <el-option
                   v-for="item in modelList"
                   :key="item.modelName"
@@ -212,16 +215,50 @@ export default {
       },
       // 型号列表
       modelList: [],
+      modelTotal: 0,
+      loadMoreFlag: true,
+      searchModelParam: {
+        name: '',
+        pageNo: 1,
+        pageSize: 10
+      },
     };
   },
   created() {
     // this.getPileList();
   },
   methods: {
+    // 下拉加载更多
+    selectLoadMore () {
+      console.log("触底了 ", this.searchModelParam.pageSize)
+      if (this.loadMoreFlag === false) {
+        return;
+      }
+      this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10;
+      console.log('触底了执行查询', this.searchModelParam);
+      this.getModelList();
+    },
+
+    // 远程搜索
+    remoteMethod (val) {
+      console.log('输入了', val)
+      this.loading = true
+      this.search.name = val
+      this.search.start = 1
+      this.list= []
+      setTimeout(() => {
+        this.loading = false
+        this.getModelList()
+      }, 500)
+    },
+
+    // 分页查询
     getModelList() {
-      listModel().then((response) => {
-        // console.log(this.modelList);
+      listModel(this.searchModelParam).then((response) => {
+        console.log("分页查询response", response);
+        this.modelTotal = response.total;
         this.modelList = response.rows;
+        this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal;
       });
     },
     /** 搜索按钮操作 */