护工绑定人员，人员分页

src/views/worker/component/peopleBind.vue

@@ -6,7 +6,15 @@
       :visible.sync="drawer"
       direction="rtl">
       <div style="padding: 20px;">
-        <el-transfer v-model="value" filterable :button-texts="['解绑', '绑定']" :titles="['未绑定', '已绑定']" :data="data"></el-transfer>
+        <el-transfer v-model="value" :button-texts="['解绑', '绑定']" :titles="['未绑定', '已绑定']" :data="mergeData">
+          <template #left-footer>
+            <div style="padding: 4px 6px;">
+              <el-input size="small" placeholder="请输入名称" v-model="query" class="input-with-select">
+                <el-button slot="append" icon="el-icon-search" @click="customerRemote"></el-button>
+              </el-input>
+            </div>
+          </template>
+        </el-transfer>
 
         <div class="btns">
           <Button type="primary" @click="submit">保存</Button>
@@ -30,7 +38,15 @@ export default {
       row: {},
 
       data: [],
-
+      isInit: true,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: ""
+      },
+      total: 0,
+      loading: false,
+      query: ""
     }
   },
   methods: {
@@ -47,15 +63,39 @@ export default {
     setNurseId (id) {
       this.nurseId = id
     },
+    customerRemote () {
+      let keyword = this.query ? this.query.trim() : "";
+      this.data = [];
+      this.total = 0;
+      this.select.page = 1;
+      this.select.keyword = keyword;
+
+      this.getCustomers();
+    },
     async getCustomers () {
-      const res = (await getList({
-        page: 1,
-        page_size: 9999
-      },false)).data.data
-      this.data = res.map(i => ({
-        key: i.id,
-        label: i.name
-      }))
+      if ((this.data.length >= this.total) && this.data.length !== 0) return;
+      this.loading = true;
+      try {
+        const res = await getList(this.select,false)
+        this.data.push(...res.data.data.map(i => ({
+          key: i.id,
+          label: i.name
+        })));
+        this.total = res.data.total;
+        this.select.page++;
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+
+      // const res = (await getList({
+      //   page: 1,
+      //   page_size: 9999
+      // },false)).data.data
+      // this.data = res.map(i => ({
+      //   key: i.id,
+      //   label: i.name
+      // }))
     },
     submit () {
       this.row.nurse_customer_links = this.value.map(i => ({ customer_id: i }))
@@ -69,20 +109,34 @@ export default {
     },
 
     initLoadMore () {
+      if (!this.isInit) return
+      const _this = this;
       const scrollFn = function () {
         let sign = 0
         const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
         if (scrollDistance <= sign) {
-          console.log('end')
+          _this.getCustomers()
         }
       }
       const coverDom = this.$el.querySelector(".el-transfer-panel__body > div[role=group]")
-      console.log(coverDom)
       coverDom.removeEventListener('scroll',scrollFn)
       coverDom.addEventListener('scroll', scrollFn)
+      this.isInit = false
+    }
+  },
+  computed: {
+    hasCustomers () {
+      return this.row?.nurse_customer_links?.map(i => ({
+        key: i.customer_id,
+        label: i.customer?.name
+      })) || []
+    },
+    mergeData () {
+      return [...this.data,...this.hasCustomers].filter((item, index, self) => {
+        return self.findIndex(t => JSON.stringify(t) === JSON.stringify(item)) === index;
+      })
     }
   },
-  computed: {},
   created() {
     this.getCustomers()
   },