分配角色fixed

src/pages/authority/user/userRoles.vue

@@ -16,9 +16,9 @@
         </el-button>
       </template>
       <div class="apass_table" slot="list">
-        <el-table class="user_roles_table" :border="false" :data="roleData">
+        <el-table class="user_roles_table" :border="false" :data="roleList">
           <el-table-column width="50" align="right"></el-table-column>
-          <el-table-column>
+          <el-table-column width="300">
             <template slot="header">
               <span style="margin-left: 25px;">角色</span>
             </template>
@@ -50,13 +50,14 @@ export default {
   components: { apassList },
   data: () => ({
     roleTotal: 0,
-    roleData: [],
+    roleList: [],
     showDialog: false,
+    userRoles: null,
     roles: null,
   }),
   computed: {
     roleIds() {
-      return this.roleData.map((item) => item.role_id);
+      return this.roleList.map((item) => item.role_id);
     },
   },
   methods: {
@@ -65,13 +66,13 @@ export default {
 
       if (this.roles === null) {
         this.getUserRoles(() => {
-          this.getRoles(filters);
+          this.getRoleList(filters);
         });
       } else {
-        this.getRoles(filters);
+        this.getRoleList(filters);
       }
     },
-    getRoles(filters) {
+    getRoleList(filters) {
       this.$http
         .get(`/apaas/backmgt/role/list`, {
           params: {
@@ -86,20 +87,22 @@ export default {
           });
 
           this.roleTotal = data.total;
-          this.roleData = data.data;
+          this.roleList = data.data;
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    getUserRoles(callback) {
+    getUserRoles(cb) {
       this.$http
         .get(`/apaas/backmgt/user/roles/${this.$route.params.id}`)
         .then(({ data }) => {
-          this.roles = data.data.map((item) => item.role_id);
-          // console.log(this.roles);
+          let userRoles = data.data.map((item) => item.role_id);
 
-          typeof callback === "function" && callback();
+          this.userRoles = userRoles;
+          this.roles = userRoles;
+
+          typeof cb === "function" && cb();
         })
         .catch((error) => {
           console.log(error);
@@ -111,7 +114,7 @@ export default {
           return this.roleIds.indexOf(item) === -1;
         })
         .concat(
-          this.roleData
+          this.roleList
             .filter((item) => {
               return item.selected;
             })
@@ -123,18 +126,48 @@ export default {
       // console.log(this.roles);
     },
     setUserRoles() {
-      if (this.roles.length > 0) {
-        this.$http
-          .post(`/apaas/backmgt/user/addRole`, {
+      let add = [];
+      let remove = [];
+
+      this.roles.forEach((item) => {
+        if (this.userRoles.indexOf(item) === -1) {
+          add.push(item);
+        }
+      });
+
+      this.userRoles.forEach((item) => {
+        if (this.roles.indexOf(item) === -1) {
+          remove.push(item);
+        }
+      });
+
+      let requests = [];
+
+      if (add.length > 0) {
+        requests.push(
+          this.$http.post(`/apaas/backmgt/user/addRole`, {
+            user_id: this.$route.params.id,
+            role_id: add,
+          })
+        );
+      }
+
+      if (remove.length > 0) {
+        requests.push(
+          this.$http.post(`/apaas/backmgt/role/userDel`, {
             user_id: this.$route.params.id,
-            role_id: this.roles,
+            role_id: remove,
           })
+        );
+      }
+
+      if (requests.length > 0) {
+        Promise.all(requests)
           .then(({ data }) => {
             this.$message({
               message: `分配角色成功.`,
               type: "success",
             });
-            this.$router.push("/authority/users");
           })
           .catch((error) => {
             this.$message({
@@ -144,10 +177,12 @@ export default {
           });
       } else {
         this.$message({
-          message: "用户角色不能为空！",
+          message: "您没有进行任何修改.",
           type: "warning",
         });
       }
+
+      // this.$router.push("/authority/users");
     },
   },
 };