完成系统管理-角色管理模块

src/api/role.js

@@ -0,0 +1,28 @@
+import request from '../utils/request';
+
+const api={}
+	
+api.save = (data) => {
+	let url='/api/role/add'
+	if(data.roleId){
+		url='/api/role/update'
+	}
+	return request({
+		url: url,
+		method: 'post',
+		params:  data
+	});
+}
+	
+api.del = (data) => {
+	    return request({
+	        url: '/api/role/delete',
+	        method: 'post',
+			params:  data
+	    });
+}
+
+
+
+
+export  default api

src/pages/sys/Role.vue

@@ -2,7 +2,7 @@
  <div class="qpage">
 	<el-form :inline="true" :model="queryForm" class="query-form-inline">
 	   <el-form-item label="">
-	     <el-input v-model="queryForm.role" placeholder="请输入角色名关键字" />
+	     <el-input v-model="queryForm.roleName" placeholder="请输入角色名关键字" />
 	   </el-form-item>
 	   
 	   <el-form-item>
@@ -14,7 +14,7 @@
 		<CrudTable
 		ref="crudTable"
 		page-info-opts="total, prev, pager, next,sizes"
-		url="./test/tableDatas.json"
+		url="/api/role/query"
 		:initWhere="{a:1,b:2}"
 		:pageSize="20"
 		
@@ -25,15 +25,15 @@
 		  </template>
 		  <template #tabColumns>
 			  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
-			  <el-table-column fixed prop="date" label="角色名" width="150" />
-			  <el-table-column prop="name" label="说明" width="360" />
+			  <el-table-column fixed prop="roleName" label="角色名" width="150" />
+			  <el-table-column prop="note" label="说明" width="360" />
 			 
 			  <el-table-column prop="zip" label="操作" width="160" fixed="right">
 			  					<template #default="scope">
 			  						<div class="tool-column">
 			  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
 			  							
-			  							<el-button type="warning" icon="delete" size="small" @click="delHandle">删除</el-button>
+			  							<el-button type="warning" icon="delete" size="small" @click="delHandle(scope.row)">删除</el-button>
 			  						</div>
 			  					    
 			  					</template>
@@ -47,7 +47,7 @@
 	<el-dialog v-model="editDialogShow" title="角色编辑" :close-on-click-modal="false" 
 	:destroy-on-close="true"
 	>
-		<UserEdit ref="userEdit" key="eidt1"></UserEdit>
+		<UserEdit ref="userEdit"  :record="crtEditRecord"></UserEdit>
 		<template #footer>
 		    <span class="dialog-footer">
 		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
@@ -62,10 +62,11 @@
 </template>
 
 <script  setup>
-	import {reactive,ref} from 'vue'
-	import {ElMessageBox} from 'element-plus'
+	import {reactive,ref,toRaw } from 'vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
 	import CrudTable from "../../components/crudtable/CrudTable.vue"
-	import UserEdit from "./UserEdit.vue"
+	import UserEdit from "./RoleEdit.vue"
+	import roleAPI from "@/api/role.js"
 	
 	const crudTable=ref(null)
 	
@@ -74,7 +75,7 @@
 	const editDialogShow=ref(false)
 	
 	const queryForm = reactive({
-	  role: ''
+	  roleName: ''
 	})
 	
 	const queryHandle=()=>{
@@ -85,17 +86,25 @@
 		
 	}
 	
-	const delHandle=()=>{
+	const delHandle=(record)=>{
 		ElMessageBox.confirm(
-			'确定要删除该用户吗?',
+			'确定要删除该角色吗?',
 			'操作确认',
 			{
 				confirmButtonText:'确定',
 				cancelButtonText:'取消',
 				type: 'warning'
 			}
-		).then(()=>{
-			alert('ok');
+		).then(()=>{				
+			roleAPI.del({roleId:record.roleId}).then(resp=>{
+				if(resp.code!=0){
+							ElMessage.error(resp.msg)
+							return
+						}
+				ElMessage.success('操作成功')
+				queryHandle()
+			})
+			
 		}).catch(()=>{
 			console.log('cancel del user')
 		})
@@ -103,21 +112,25 @@
 	
 	
 	const userEdit=ref(null)
-	
+	const crtEditRecord=ref(null)
 	const openEditHandle=(record)=>{
-		console.log(record)
 		editDialogShow.value=true
+		crtEditRecord.value=record		
 	}
-	
-	const beforeCloseHandle=(tag)=>{
+	const beforeCloseHandle=async (tag)=>{	
 		if(tag==='cancel'){
 			editDialogShow.value=false
 		}
 		else{
-			userEdit.value.submitForm().then(()=>{
+			try{
+				await userEdit.value.submitForm()
 				editDialogShow.value=false
 				queryHandle()
-			})
+			}
+			catch(err){
+				console.log(err)
+			}
+			
 		}
 	}
 	

src/pages/sys/RoleEdit.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formRole" label-position="top" label-width="auto" :inline="true" :rules="rules">
+		      <el-form-item label="角色名" prop="roleName">
+		        <el-input v-model="formModel.roleName" autocomplete="off"  class="edit-form-item"/>
+		      </el-form-item>
+			  
+			  <el-form-item label="说明" prop="note">
+			    <el-input v-model="formModel.note" type="textarea" autocomplete="off" placeholder="请输入说明" class="edit-form-item" clearable/>
+			  </el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,toRaw} from 'vue'
+	import roleAPI from "@/api/role.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+
+	const props=defineProps({
+		record:Object
+	})
+
+	const formRole = ref(null);
+	const formModel = reactive({
+	  roleId:'',  
+	  roleName:'',
+	  note:''
+	})
+	onMounted(() => {
+		if(props.record){
+			let {roleId,roleName,note}=props.record
+			Object.assign(formModel,{roleId,roleName,note})
+		}
+	})
+	const rules =reactive({
+		roleName:[
+			{required:true,message:'角色名还未填写',trigger:'blur'}
+			]
+	})
+	
+	
+
+	const submitForm= async()=>{	
+		console.log("sssssssss");
+		let validateRst=false
+		try{
+			validateRst = await formRole.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			console.log(err)
+			return Promise.reject('invalidate')
+		}
+		if(validateRst){  //验证通过，准备提交数据
+		  try{
+			console.log("111111111111111");
+			   let resp =await roleAPI.save(toRaw(formModel))
+			   if(resp.code!=0){
+			   	ElMessage.error(resp.msg)
+			   	return Promise.reject(resp.msg)
+			   }
+			   ElMessage.success('操作成功')
+			   return Promise.resolve('ok')
+			}
+			catch (e) {
+				ElMessage.error(e||'操作失败')
+				return Promise.reject('操作失败')
+			}
+		}
+	}
+	
+	defineExpose({
+		submitForm
+	})
+</script>
+
+<style scoped>
+	.el-form--inline.el-form--label-top{
+		justify-content: space-between;
+	}
+	.edit-form-item{
+		width:260px;
+	}
+	
+</style>

src/utils/request.js

@@ -5,7 +5,7 @@ const service = axios.create({
     // process.env.NODE_ENV === 'development' 来判断是否开发环境
     // easy-mock服务挂了，暂时不使用了
     // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
-	baseURL:'http://192.168.77.199:8080/zl',
+	baseURL:'http://127.0.0.1:8080/zl',
     timeout: 5000
 });