用户选择组件支持批量选择操作

src/modules/base/components/ModifyRoleUser.vue

@@ -62,6 +62,7 @@
       ref="SelectUserDialog"
       :users="curUserMember"
       :user-limit-count="0"
+      can-select-all
       @modified="userModified"
     ></select-user-dialog>
   </div>

src/modules/base/components/SelectUserDialog.vue

@@ -41,15 +41,19 @@
             ref="UserTree"
             :data="userTree"
             node-key="id"
-            :default-checked-keys="selectedUserIds"
             :props="defaultProps"
             @check-change="userChange"
           >
-            <span slot-scope="{ node, data }">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
               <el-checkbox v-if="data.isUser" v-model="node.checked">
                 {{ node.label }}
               </el-checkbox>
               <span v-else>{{ node.label }}</span>
+              <el-checkbox
+                v-if="!data.isUser && canSelectAll && data.children.length"
+                v-model="data.selected"
+                @change="val => selectNodeAll(val, data)"
+              ></el-checkbox>
             </span>
           </el-tree>
         </div>
@@ -97,6 +101,10 @@ export default {
     userLimitCount: {
       type: Number,
       default: 5
+    },
+    canSelectAll: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -130,6 +138,7 @@ export default {
             id: item.id,
             label: item.name,
             isUser: false,
+            selected: false,
             children: []
           };
 
@@ -143,12 +152,14 @@ export default {
                 label: user.realName,
                 name: user.realName,
                 orgName: item.name,
+                selected: false,
                 isUser: true
               };
               if (!roleUserMap[user.roleId]) {
                 roleUserMap[user.roleId] = {
                   id: user.roleId,
                   label: user.roleName,
+                  selected: false,
                   children: []
                 };
               }
@@ -225,6 +236,33 @@ export default {
     open() {
       this.modalIsShow = true;
     },
+    selectNodeAll(checked, data) {
+      let userIds = [];
+      const getUserIds = list => {
+        list.forEach(item => {
+          item.selected = checked;
+          if (item.children && item.children.length) {
+            getUserIds(item.children);
+          } else {
+            if (item.isUser) userIds.push(item.id);
+          }
+        });
+      };
+      getUserIds(data.children);
+
+      userIds.forEach(userId => {
+        const userPos = this.selectedUserIds.indexOf(userId);
+        const includeUser = userPos !== -1;
+        if (checked) {
+          if (!includeUser) this.selectedUserIds.push(userId);
+        } else {
+          if (includeUser) {
+            this.selectedUserIds.splice(userPos, 1);
+          }
+        }
+      });
+      this.$refs.UserTree.setCheckedKeys(this.selectedUserIds);
+    },
     switchUserType(type) {
       this.userType = type;
       this.userTree = type === "org" ? this.orgUsers : this.roleUsers;