完成系统管理-用户角色关系管理模块和用户新增关系

src/api/role.js

@@ -1,7 +1,14 @@
 import request from '../utils/request';
 
 const api={}
-	
+
+
+api.fetchData = () => {
+    return request({
+        url: '/api/role/loadAll',
+        method: 'get'
+    });
+};	
 api.save = (data) => {
 	let url='/api/role/add'
 	if(data.roleId){

src/api/user.js

@@ -1,7 +1,15 @@
 import request from '../utils/request';
 
 const api={}
-	
+
+api.queryByRoleUserId = (data) => {
+	return request({
+		url: '/user/queryByRoleUserId',
+		method: 'post',
+		params:  data
+	});
+}
+
 api.save = (data) => {
 	let url='/user/add'
 	if(data.userId){

src/pages/sys/User.vue

@@ -25,9 +25,9 @@
 			  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
 			  <el-table-column fixed prop="realName" label="姓名" width="150" />
 			  <el-table-column prop="loginId" label="账号" width="120" />
-			  <el-table-column prop="state" label="所属部门" width="120" />
-			  <el-table-column prop="state2" label="所辖部门" width="120" />
-			  <el-table-column prop="city" label="角色" width="320" />
+			  <!-- <el-table-column prop="state" label="所属部门" width="120" />
+			  <el-table-column prop="state2" label="所辖部门" width="120" /> -->
+			  <el-table-column prop="roleName" label="角色" width="320" />
 			  <el-table-column prop="createTime" label="创建时间" width="600" />
 			  <el-table-column prop="zip" label="操作" width="160" fixed="right">
 			  					<template #default="scope">

src/pages/sys/UserEdit.vue

@@ -24,17 +24,16 @@
 			    <el-input v-model="formModel.pwd" type="password" autocomplete="off" placeholder="请输入密码" class="edit-form-item" clearable/>
 			  </el-form-item>
 			  
-			  <!-- <el-form-item label="角色">
+			   <el-form-item label="角色">
 			    <el-select v-model="formModel.roleName" placeholder="请选择角色" class="edit-form-item"
 				      multiple
 				      collapse-tags
 				      collapse-tags-tooltip
-					  clearable
+					  clearable 
 				>
-			      <el-option label="Zone No.1" value="shanghai" />
-			      <el-option label="Zone No.2" value="beijing" />
+				  <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"/>			    
 			    </el-select>
-			  </el-form-item> -->
+			  </el-form-item>
 			  
 			  <!-- <el-form-item label="密码确认">
 			    <el-input v-model="formModel.pwdagain" type="password"  autocomplete="off" placeholder="请再输入一次密码" class="edit-form-item" clearable/>
@@ -46,8 +45,10 @@
 <script setup>
 	import {reactive,ref,onMounted,toRaw} from 'vue'
 	import userAPI from "@/api/user.js"
+	import roleAPI from "@/api/role.js"
 	import {ElMessageBox,ElMessage} from 'element-plus'
 	import md5 from '@/utils/md5.js'
+	const roleList = ref([]);
 	const props=defineProps({
 		record:Object
 	})
@@ -58,11 +59,27 @@
 		userId:'',  
 		realName:'',
 		loginId:'',
-		pwd:''
+		pwd:'',
+		roleName:''
 	})
 	onMounted(() => {
+		//动态获取角色		
+		roleAPI.fetchData().then((resp) => {
+			if(resp.code===0){
+				//console.log(JSON.stringify(resp.data));	
+				roleList.value=resp.data	
+			}	       
+	    });
 		if(props.record){
+			
+			//formModel.roleName=['40289f3c87073161018707391f350003','40289f3c87076a0c0187076a0c060000']
 			let {userId,realName,loginId}=props.record
+			userAPI.queryByRoleUserId({userId:userId}).then((resp) => {
+				console.log("8888")
+			if(resp.code===0){				
+				formModel.roleName=resp.data	
+			}	       
+	    });
 			Object.assign(formModel,{userId,realName,loginId})
 		}else{
 			visiblePwd.value= true
@@ -94,7 +111,11 @@
 		  try{
 				if(visiblePwd.value){
 					formModel.pwd =md5(formModel.pwd);
-				}			   
+				}
+				console.log("formModel1>>>>:"+JSON.stringify(formModel));				
+				formModel.roleName= formModel.roleName.join(',');
+				console.log("formModel2>>>>:"+JSON.stringify(formModel));
+				//return 
 			   let resp =await userAPI.save(toRaw(formModel))
 			   if(resp.code!=0){
 			   	ElMessage.error(resp.msg)