update: 选择成员-添加查询条件

src/views/salesleads/actCodeManage/components/select-clerk/select-clerk.vue

 <template>
   <el-dialog :visible="visible" title="选择成员" width="1000px" @close="onCancel">
-    <div class="select-clerk">
+    <div class="select-clerk" v-loading="loading">
       <!-- 选择导购 -->
       <div class="clerk-list">
         <!-- 筛选条件 -->
         <div class="search-bar">
           <el-select clearable style="width: 182px"></el-select>
-          <el-input placeholder="请输入门店名称" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 180px"></el-input>
-          <el-input placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
+          <el-input v-model="params.storeSearchParams" @change="onSearch" placeholder="请输入门店名称" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 180px"></el-input>
+          <el-input v-model="params.clerkSearchParams" @change="onSearch" placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
         </div>
         <!-- 导购列表的表头 -->
         <el-table :class="['clerk-list-header', { 'hide-empty': storeClerkList.length > 0 }]">
           <el-table-column min-width="67px">
             <template #header>
-              <el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selected.disabled"></el-checkbox>
+              <el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selectAll.disabled"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="导购" min-width="230px"></el-table-column>
@@ -21,7 +21,7 @@
           <el-table-column label="备注" min-width="161px"></el-table-column>
         </el-table>
         <!-- 导购列表 -->
-        <div v-if="storeClerkList.length > 0" class="clerk-list-body">
+        <div v-if="storeClerkList.length > 0" ref="clerkList" class="clerk-list-body">
           <div v-for="el in storeClerkList" :key="el.storeId" class="clerk-list-cell">
             <!-- 门店信息 -->
             <el-table :data="[{}]" class="clerk-store-info" :show-header="false">
@@ -54,6 +54,7 @@
             </el-table>
           </div>
         </div>
+        <el-pagination @current-change="onCurrentChange" :total="params.total" :page-size="params.pageSize" :current-page="params.pageNum" layout="prev, pager, next" style="margin-bottom: 0;text-align: right"></el-pagination>
       </div>
       <!-- 选中的导购 -->
       <div class="selected-clerk">
@@ -111,6 +112,15 @@ export default {
   },
   data() {
     return {
+      params: {
+        storeGroupId: '', // 分组ID
+        storeSearchParams: '', // 门店条件
+        clerkSearchParams: '', // 导购条件
+        pageNum: 1,
+        pageSize: 20,
+        total: 0
+      },
+      loading: false,
       // 门店-导购列表
       storeClerkList: [],
       selectAll: {
@@ -127,31 +137,52 @@ export default {
   },
   methods: {
     getStoreClerkList() {
-      getRequest('/haoban-manage3-web/hm/store-clerk-list', { pageNum: 1, pageSize: 20 }).then(res => {
-        const { code, message, result } = res.data || {};
-        if (code != 0) {
-          return this.$message.error(message);
-        }
-        result.result = Array.isArray(result.result) ? result.result : [];
-        this.storeClerkList = result.result.map(el => {
-          el.clerkList = Array.isArray(el.clerkList) ? el.clerkList : [];
-          // 设置导购的禁用状态和选中状态
-          el.clerkList = el.clerkList.map(item => {
-            item.disabled = this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3;
-            item.disabled = false;
-            item.selected = this.data.some(clerk => clerk.clerkId == item.clerkId);
-            return item;
+      const { storeGroupId, storeSearchParams, clerkSearchParams, pageNum, pageSize } = this.params;
+      const params = {
+        storeGroupId: storeGroupId || undefined,
+        storeSearchParams: storeSearchParams || undefined,
+        clerkSearchParams: clerkSearchParams || undefined,
+        pageNum,
+        pageSize
+      };
+      this.loading = true;
+
+      getRequest('/haoban-manage3-web/hm/store-clerk-list', params)
+        .then(res => {
+          const { code, message, result } = res.data || {};
+          if (code != 0) {
+            return this.$message.error(message);
+          }
+          result.result = Array.isArray(result.result) ? result.result : [];
+          this.params.total = result.totalCount;
+          this.storeClerkList = result.result.map(el => {
+            el.clerkList = Array.isArray(el.clerkList) ? el.clerkList : [];
+            // 设置导购的禁用状态和选中状态
+            el.clerkList = el.clerkList.map(item => {
+              item.disabled = this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3;
+              item.disabled = false;
+              item.selected = this.data.some(clerk => clerk.clerkId == item.clerkId);
+              return item;
+            });
+            // 设置门店禁用状态、选中状态和半选状态
+            el.disabled = el.clerkList.length == 0 || el.clerkList.every(el => el.disabled);
+            el.selected = el.clerkList.length > 0 && el.clerkList.every(el => el.selected);
+            el.indeterminate = !el.selected && el.clerkList.some(el => el.selected);
+            return el;
           });
-          // 设置门店禁用状态、选中状态和半选状态
-          el.disabled = el.clerkList == 0 || el.clerkList.every(el => el.disabled);
-          el.selected = el.clerkList.length > 0 && el.clerkList.every(el => el.selected);
-          el.indeterminate = !el.selected && el.clerkList.some(el => el.selected);
-          return el;
-        });
-        this.selectAll.disabled = this.storeClerkList.every(el => el.disabled);
-        this.selectAll.selected = this.storeClerkList.every(el => el.selected);
-        this.selectAll.indeterminate = !this.selectAll.selected && this.storeClerkList.some(el => el.selected || el.indeterminate);
-      });
+          this.selectAll.disabled = this.storeClerkList.length == 0 || this.storeClerkList.every(el => el.disabled);
+          this.selectAll.selected = this.storeClerkList > 0 && this.storeClerkList.every(el => el.selected);
+          this.selectAll.indeterminate = !this.selectAll.selected && this.storeClerkList.some(el => el.selected || el.indeterminate);
+          this.$refs.clerkList.scrollTop = 0;
+        })
+        .finally(() => (this.loading = false));
+    },
+    onSearch() {
+      this.onCurrentChange(1);
+    },
+    onCurrentChange(currentPage) {
+      this.params.pageNum = currentPage;
+      this.getStoreClerkList();
     },
     // 解析备注
     formatRemark(status) {
@@ -324,7 +355,7 @@ export default {
       }
     }
     .clerk-list-body {
-      height: calc(100% - 74px);
+      height: calc(100% - 120px);
       overflow-y: auto;
       .clerk-list-cell {
         margin-top: 10px;