update: 选中成员

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

@@ -13,12 +13,12 @@
         <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" @change="onSelectAll" :indeterminate="indeterminate" :disabled="storeClerkList.every(el => el.disabled)"></el-checkbox>
+              <el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selected.disabled"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="导购" min-width="230px"></el-table-column>
-          <el-table-column label="手机号码" min-width="160px"></el-table-column>
-          <el-table-column label="备注" min-width="168px"></el-table-column>
+          <el-table-column label="手机号码" min-width="155px"></el-table-column>
+          <el-table-column label="备注" min-width="161px"></el-table-column>
         </el-table>
         <!-- 导购列表 -->
         <div v-if="storeClerkList.length > 0" class="clerk-list-body">
@@ -28,7 +28,7 @@
               <el-table-column min-width="67px">
                 <el-checkbox v-if="multiple" v-model="el.selected" @change="onSelectStore(el)" :indeterminate="el.indeterminate" :disabled="el.disabled"></el-checkbox>
               </el-table-column>
-              <el-table-column min-width="558px">
+              <el-table-column min-width="546px">
                 <div class="clerk-store-name">{{ el.storeName }}</div>
                 <div class="clerk-store-code">code：{{ el.storeCode }}</div>
               </el-table-column>
@@ -47,8 +47,8 @@
                   <div class="clerk-code">{{ row.clerkCode }}</div>
                 </template>
               </el-table-column>
-              <el-table-column label="手机号码" prop="phoneNumber" min-width="160px"></el-table-column>
-              <el-table-column label="备注" min-width="168px">
+              <el-table-column label="手机号码" prop="phoneNumber" min-width="155px"></el-table-column>
+              <el-table-column label="备注" min-width="161px">
                 <div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
               </el-table-column>
             </el-table>
@@ -113,10 +113,14 @@ export default {
     return {
       // 门店-导购列表
       storeClerkList: [],
+      selectAll: {
         // 全选的选中状态
-      selectAll: false,
+        selected: false,
         // 全选的半选状态
         indeterminate: false,
+        // 全选的禁用状态
+        disabled: false
+      },
       // 选中的导购
       selected: []
     };
@@ -131,26 +135,22 @@ export default {
         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 => {
-            // this.$set(item, 'disabled', this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3);
             item.disabled = this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3;
             item.disabled = false;
-            // this.$set(
-            //   item,
-            //   'selected',
-            //   this.data.some(clerk => clerk.clerkId == item.clerkId)
-            // );
             item.selected = this.data.some(clerk => clerk.clerkId == item.clerkId);
             return item;
           });
-          this.$set(el, 'disabled', el.clerkList == 0 || el.clerkList.every(el => el.disabled));
-          // el.disabled = el.clerkList == 0 || el.clerkList.every(el => el.disabled);
-          this.$set(el, 'selected', el.clerkList.length > 0 && el.clerkList.every(el => el.selected));
-          // el.selected = el.clerkList.length > 0 && el.clerkList.every(el => el.selected);
-          this.$set(el, 'indeterminate', !el.selected && el.clerkList.some(el => el.selected));
-          // el.indeterminate = !el.selected && el.clerkList.some(el => el.selected);
+          // 设置门店禁用状态、选中状态和半选状态
+          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);
       });
     },
     // 解析备注
@@ -173,18 +173,28 @@ export default {
       }
       return result;
     },
+    // 更新全选的复选框样式
+    updateAllState() {
+      // 计算全选的选中状态，计算半选的选中状态
+      this.selectAll.selected = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
+      this.selectAll.indeterminate = !this.selectAll.selected && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
+    },
+    // 更新门店全选的复选框样式
+    updateStoreState(store) {
+      // 计算门店的选中状态，计算门店的半选状态
+      store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
+      store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
+    },
     // 全选所有导购
     onSelectAll() {
       // 只能全选本页，或者取消本页的全选
       this.storeClerkList.forEach(el => {
         if (!el.disabled && this.selected.length < this.max) {
-          el.selected = this.selectAll;
+          el.selected = this.selectAll.selected;
           this.onSelectStore(el, true);
         }
       });
-      // 计算全选的选中状态，计算半选的选中状态
-      this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
-      this.indeterminate = !this.selectAll && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
+      this.updateAllState();
     },
     // 全选门店下的导购
     onSelectStore(store, isAll) {
@@ -194,18 +204,14 @@ export default {
           this.onSelectClerk(el, store, true);
         }
       });
-      // 计算门店的选中状态，计算门店的半选状态
-      store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
-      store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
+      this.updateStoreState(store);
       if (!isAll) {
-        // 计算全选的选中状态，计算半选的选中状态
-        this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
-        this.indeterminate = !this.selectAll && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
+        this.updateAllState();
       }
     },
     // 选择单个导购
     onSelectClerk(clerk, store, isAll) {
-      // 单选时只能选一个导购，不存在全选门店和全选所有的选择框
+      // 单选时只能选一个导购，不需要更新全选所有的复选框的样式，也不需要更新门店全选的复选框的样式
       if (!this.multiple) {
         if (this.selected.length > 0) {
           this.selected[0].selected = false;
@@ -214,6 +220,7 @@ export default {
         this.selected.push(clerk);
         return;
       }
+
       // 选择单个导购时
       if (clerk.selected) {
         // 计算有没有超过上限
@@ -227,16 +234,13 @@ export default {
         this.selected.splice(index, 1);
       }
       if (!isAll) {
-        // 计算门店的选中状态，计算门店的半选状态
-        store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
-        store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
-        // 计算全选的选中状态，计算半选的选中状态
-        this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
-        this.indeterminate = !this.selectAll && this.storeClerkList.some(el => el.selected || el.indeterminate);
+        this.updateStoreState(store);
+        this.updateAllState();
       }
     },
     onDelAll() {
-      this.selectAll = false;
+      this.selectAll.selected = false;
+      this.selectAll.indeterminate = false;
       this.onSelectAll();
     },
     onDel(index) {
@@ -248,6 +252,9 @@ export default {
       );
     },
     onCancel() {
+      this.selectAll.selected = false;
+      this.selectAll.indeterminate = false;
+      this.selectAll.disabled = false;
       this.selected = [];
       this.$emit('update:visible', false);
     },