update: 分组列表优化

src/components/tag/batch-list.vue

@@ -12,6 +12,11 @@
           <p class="batch-txt">{{ list.length ? '存在分组正在被以下模块使用，请先删除对应的内容后再来删除分组。' : '删除后无法恢复，确认要删除该分组吗？' }}</p>
         </div>
         <div v-if="operNum == 2">
+          选择分类：<el-select v-model="groupId" placeholder="清选择分类" v-loadmore="loadMoreGroupList" filterable remote :remote-method="searchGroupList" style="width: 305px">
+            <el-option v-for="el in groupList" :key="el.memberTagGroupClassifyId" :value="el.memberTagGroupClassifyId" :label="el.classifyName"></el-option>
+          </el-select>
+        </div>
+        <!-- <div v-if="operNum == 2">
           <p class="title">
             所有分类
           </p>
@@ -22,7 +27,7 @@
             </li>
           </ul>
           <p class="group-name">选中的分类：{{ groupName }}</p>
-        </div>
+        </div> -->
         <template  v-if="operNum == 0 || operNum == 1">
           <p v-for="(item, index) in list" :key="index" class="item">
             {{ item.groupName }}：<a :href="item.businessLink" target="_blank" @click="isOpenPage = true">{{ item.businessModuleName }}-{{ item.businessName }}</a>
@@ -56,11 +61,30 @@ export default {
       operNum: -1,
       groupList: [],
       groupName: '',
+      groupId: '',
       listIndex: -1,
       list: [],
+      params: {
+        classifyName: '',
+        pageNum: 1,
+        totalPage: 1
+      },
       loading: false
     };
   },
+  directives: {
+    loadmore: {
+      inserted(el, binding) {
+        const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
+        SELECTDOWN_DOM.addEventListener('scroll', function() {
+          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
+          if (CONDITION) {
+            binding.value();
+          }
+        })
+      }
+    }
+  },
 
   methods: {
     confirmBatch() {
@@ -96,14 +120,13 @@ export default {
           }
         });
       } else if (batchNum == 2) {
-        if (!this.groupName) {
+        if (!this.groupId) {
           this.$message.warning({
             message: '请先选择的会员分组的分类'
           });
           return;
         }
-        let index = this.groupList.findIndex(el => el.classifyName === this.groupName);
-        param.memberTagGroupClassifyId = this.groupList[index].memberTagGroupClassifyId;
+        param.memberTagGroupClassifyId = this.groupId;
         batchChangeGroup(param)
           .then(res => {
             if (res.errorCode == 0) {
@@ -129,27 +152,41 @@ export default {
     // 关
     closeBatch() {
       this.batchDialog = false;
+      this.groupId = '';
       this.$emit('update:batchVisiable', false);
     },
+    searchGroupList(classifyName) {
+      this.params.classifyName = classifyName;
+      this.params.pageNum = 0;
+      this.loadMoreGroupList();
+    },
+    loadMoreGroupList() {
+      if (this.params.pageNum + 1 > this.params.totalPage) {
+        return
+      }
+      this.params.pageNum = this.params.pageNum + 1;
+      this.getMemberGroupList();
+    },
     getMemberGroupList() {
+      const { classifyName, pageNum } = this.params;
+      this.loading = true;
+      if (pageNum == 1) {
+        this.groupList = [];
+      }
       memberGroupList({
+        classifyName,
+        pageNum,
+        pageSize: 20,
         type: 0,
         requestProject: 'gic-member-tag-web',
-        pageSize: 99999
-      })
-        .then(res => {
-          if (res.errorCode == 0) {
-            console.log(res.result)
-            const { result} = res.result;
-            this.groupList =  result.filter(el => el.classifyName != '未分类' && el.classifyName != null).map(item => ({
-              ...item,
-              edit: false
-            }));
-          }
-        })
-        .catch(err => {
-          console.log(err);
-        });
+      }).then(res => {
+        const { errorCode, result } = res;
+        if (errorCode != 0) return;
+        if (Array.isArray(result.result)) {
+          this.groupList = this.groupList.concat(result.result.filter(el => el.classifyName != '未分类' && el.classifyName != null));
+        }
+        this.params.totalPage = result.totalPage;
+      }).finally(() => this.loading = false);
     },
     checkGroup() {
       this.loading = true;