新增赋予用户角色

src/api/user.js

@@ -100,11 +100,20 @@ export function deleteUser(data) {
 // 获取用户赋予角色信息
 export function getUserOwnRoles(id) {
   return request({
-    url: 'sys/user/roles/'+id,
+    url: 'sys/user/roles/' + id,
     method: 'get'
   })
 }
 
+// 更新用户角色信息
+export function updateUserOwnRoles(id,data) {
+  return request({
+    url: `sys/user/roles/${id}`,
+    method: 'put',
+    data
+  })
+}
+
 
 // 以用户行为统计排序分页查询资源
 export function getListByPageSort(data) {
@@ -144,7 +153,7 @@ export function upadateRole(data) {
 // 删除角色
 export function deleteRole(id) {
   return request({
-    url: '/sys/role/'+id,
+    url: '/sys/role/' + id,
     method: 'delete',
   })
 }
@@ -152,7 +161,7 @@ export function deleteRole(id) {
 // 根据id获取角色详细信息
 export function getRoleById(id) {
   return request({
-    url: '/sys/role/'+id,
+    url: '/sys/role/' + id,
     method: 'get',
   })
 }

src/views/user/components/EditRole.vue

@@ -13,8 +13,8 @@
     </div>
     <div class="dialog-content">
       <el-transfer
-        v-model="roles"
-        :data="data"
+        v-model="own"
+        :data="roles"
         :titles="['赋予角色', '拥有角色']"
       ></el-transfer>
     </div>
@@ -28,6 +28,7 @@
 </template>
   
   <script>
+import { updateUserOwnRoles } from "@/api/user";
 export default {
   name: "EditRole",
   components: {},
@@ -36,10 +37,14 @@ export default {
       type: Boolean,
       default: false,
     },
-    currentRoleData: {
+    roleData: {
       type: Object,
       default: () => ({}),
     },
+    id: {
+      type: String,
+      default: null,
+    },
   },
   computed: {},
   watch: {
@@ -50,14 +55,33 @@ export default {
       deep: true,
       immediate: true,
     },
+    roleData(value) {
+      if (Object.keys(value).length > 0) {
+        const { allRole, ownRoles } = value;
+        this.roles = allRole.map((item) => {
+          return {
+            key: item.id,
+            label: item.name,
+          };
+        });
+        this.own = ownRoles;
+      }
+    },
+    id(value) {
+      if (value) {
+        this.userId = value;
+      }
+    },
   },
   data() {
     return {
       dialogForm: {},
       formLabelWidth: "100px",
       dialogVisible: false,
-      data: [{ value: 1, key: "测试" }],
+      data: [],
       roles: [],
+      own: [],
+      userId: null,
     };
   },
   methods: {
@@ -66,7 +90,23 @@ export default {
       this.$emit("handleClose");
     },
 
-    async handleSubmit() {},
+    async handleSubmit() {
+      console.log("this.own", this.own);
+      console.log("this.roles", this.roles);
+
+      let params = this.own;
+      //   console.log(params);
+      //   console.log(this.userId);
+      let res = await updateUserOwnRoles(this.userId, params);
+      console.log("res", res);
+      if (res.code == 0) {
+        this.$message.success("修改成功！");
+        this.roles = [];
+        this.own = [];
+        this.userId = null;
+        this.$emit("handleClose");
+      }
+    },
     reload() {
       this.$emit("refresh");
       this.$emit("handleClose");

src/views/user/index.vue

@@ -67,7 +67,12 @@
       @handleClose="handleClose"
       @refresh="loadListData"
     />
-    <EditRole :visible="editRoleVisible" :currentRoleData="currentRoleData" @handleClose="handleCloseEditRole" />
+    <EditRole
+      :visible="editRoleVisible"
+      :roleData="currentRoleData"
+      :id="currentId"
+      @handleClose="handleCloseEditRole"
+    />
   </div>
 </template>
 
@@ -84,6 +89,7 @@ import {
 } from "@/api/user";
 import InfoEditDialog from "./components/InfoEditDialog.vue";
 import EditRole from "./components/EditRole.vue";
+
 export default {
   components: {
     TablePage,
@@ -150,7 +156,8 @@ export default {
       },
       dialogVisible: false,
       editRoleVisible: false,
-      currentRoleData:{}
+      currentRoleData: {},
+      currentId: null,
     };
   },
   mounted() {
@@ -233,7 +240,8 @@ export default {
         case "editRole":
           this.editRoleVisible = true;
           let roleRes = await getUserOwnRoles(row.id);
-          this.currentRoleData = roleRes.data
+          this.currentRoleData = roleRes.data;
+          this.currentId = row.id;
           break;
       }
     },
@@ -246,6 +254,8 @@ export default {
     },
     handleCloseEditRole() {
       this.editRoleVisible = false;
+      this.currentRoleData ={};
+      this.currentId = null;
     },
   },
 };