完成系统管理-用户管理模块

src/api/user.js

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

src/pages/sys/User.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.user" placeholder="请输入用户名关键字" />
+	     <el-input v-model="queryForm.realName" 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="/user/query"
 		:initWhere="{a:1,b:2}"
 		:pageSize="20"
 		>
@@ -24,18 +24,18 @@
 		  </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="120" />
+			  <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="address" label="创建时间" width="600" />
+			  <el-table-column prop="createTime" label="创建时间" width="600" />
 			  <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>
@@ -49,7 +49,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>
@@ -65,10 +65,10 @@
 
 <script  setup>
 	import {reactive,ref} from 'vue'
-	import {ElMessageBox} from 'element-plus'
+	import {ElMessageBox,ElMessage} from 'element-plus'
 	import CrudTable from "../../components/crudtable/CrudTable.vue"
 	import UserEdit from "./UserEdit.vue"
-	
+	import userAPI from "@/api/user.js"
 	const crudTable=ref(null)
 	
 	const isQuerying=ref(false)
@@ -76,7 +76,7 @@
 	const editDialogShow=ref(false)
 	
 	const queryForm = reactive({
-	  user: ''
+		realName: ''
 	})
 	
 	const queryHandle=()=>{
@@ -87,7 +87,7 @@
 		
 	}
 	
-	const delHandle=()=>{
+	const delHandle=(record)=>{
 		ElMessageBox.confirm(
 			'确定要删除该用户吗?',
 			'操作确认',
@@ -97,29 +97,41 @@
 				type: 'warning'
 			}
 		).then(()=>{
-			alert('ok');
+			userAPI.del({userId:record.userId}).then(resp=>{
+				if(resp.code!=0){
+							ElMessage.error(resp.msg)
+							return
+						}
+				ElMessage.success('操作成功')
+				queryHandle()
+			})
 		}).catch(()=>{
-			console.log('cancel del user')
+			
 		})
 	}
 	
 	
 	const userEdit=ref(null)
-	
-	const openEditHandle=(record)=>{
-		console.log(record)
+	const crtEditRecord=ref(null)
+	const openEditHandle=(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/UserEdit.vue

@@ -1,30 +1,30 @@
 <template>
 	<div class="edit-page">
-		<el-form :model="formModel" label-position="top" label-width="auto" :inline="true" :rules="rules">
+		<el-form :model="formModel" ref="formUser" label-position="top" label-width="auto" :inline="true" :rules="rules">
 		      <el-form-item label="账号" prop="loginId">
 		        <el-input v-model="formModel.loginId" autocomplete="off"  class="edit-form-item"/>
 		      </el-form-item>
 			  <el-form-item label="姓名">
 			    <el-input v-model="formModel.realName" autocomplete="off" placeholder="请输入姓名" class="edit-form-item" clearable/>
 			  </el-form-item>
-		      <el-form-item label="所属部门">
+		      <!-- <el-form-item label="所属部门">
 				<el-tree-select v-model="formModel.orgId" :data="data" check-strictly :render-after-expand="false"  class="edit-form-item">
 					  
 				</el-tree-select>
 		       
-		      </el-form-item>
-			 
+		      </el-form-item> -->
+<!-- 			 
 			  <el-form-item label="所辖部门">
 			    <el-tree-select v-model="formModel.authOrgIds" :data="data" check-strictly :render-after-expand="false"  class="edit-form-item">
 			    	  
 			    </el-tree-select>
-			  </el-form-item>
+			  </el-form-item> -->
 			  
-			  <el-form-item label="密码" prop="pwd">
+			  <el-form-item label="密码" prop="pwd" v-if="visiblePwd">
 			    <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
@@ -34,32 +34,41 @@
 			      <el-option label="Zone No.1" value="shanghai" />
 			      <el-option label="Zone No.2" value="beijing" />
 			    </el-select>
-			  </el-form-item>
+			  </el-form-item> -->
 			  
-			  <el-form-item label="密码确认">
+			  <!-- <el-form-item label="密码确认">
 			    <el-input v-model="formModel.pwdagain" type="password"  autocomplete="off" placeholder="请再输入一次密码" class="edit-form-item" clearable/>
-			  </el-form-item>
+			  </el-form-item> -->
 		</el-form>
 	</div>
 </template>
 
 <script setup>
-	import {reactive,ref} from 'vue'
+	import {reactive,ref,onMounted,toRaw} from 'vue'
+	import userAPI from "@/api/user.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import md5 from '@/utils/md5.js'
 	const props=defineProps({
-		recordId:String
+		record:Object
 	})
+	const visiblePwd =ref(null);
 	
+	const formUser = ref(null);
 	const formModel = reactive({
-	  loginId:'',
-	  realName: '',
-	  orgId:'',
-	  orgName:'',
-	  authOrgIds:'',
-	  authOrgNames:'',
-	  roleId:'',
-	  roleName:'',
-	  pwd:null,
-	  pwdagain:null
+		userId:'',  
+		realName:'',
+		loginId:'',
+		pwd:''
+	})
+	onMounted(() => {
+		if(props.record){
+			let {userId,realName,loginId}=props.record
+			Object.assign(formModel,{userId,realName,loginId})
+			console.log("-----修改---");
+		}else{
+			console.log("-----新增---");
+			visiblePwd.value= true
+		}
 	})
 	
 	const rules =reactive({
@@ -73,13 +82,36 @@
 			]
 	})
 	
-	const data =ref([{
-		 value: '1',
-		 label: 'Level one 1'
-	}])
-	
-	const submitForm=async ()=>{
-		console.log('start submit form')
+	const submitForm= async()=>{	
+		console.log("sssssssss");
+		let validateRst=false
+		try{
+			validateRst = await formUser.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			console.log(err)
+			return Promise.reject('invalidate')
+		}
+		if(validateRst){  //验证通过，准备提交数据
+		  try{
+			console.log("111111111111111");
+				if(visiblePwd.value){
+					formModel.pwd =md5(formModel.pwd);
+				}			   
+			   let resp =await userAPI.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({