角色管理，用户管理完善，增加权限分配功能

src/api/role.js

@@ -17,7 +17,7 @@ api.save = (data) => {
 	return request({
 		url: url,
 		method: 'post',
-		params:  data
+		data:  data
 	});
 }
 	
@@ -30,6 +30,22 @@ api.del = (data) => {
 }
 
 
+api.loadAuth=(roleId)=>{
+	return request({
+	    url: '/auth/loadRoleAuth',
+	    method: 'post',
+		data:  {roleId}
+	});
+}
+
+api.saveAuth=(authData)=>{
+	return request({
+	    url: '/auth/saveRoleAuth',
+	    method: 'post',
+		data:  authData
+	});
+}
+
 
 
 export  default api

src/api/user.js

@@ -30,7 +30,27 @@ api.del = (data) => {
 	    });
 }
 
+api.loadMyOrgTree=()=>{
+	return request({
+	    url: '/org/loadOrgTree',
+	    method: 'get'
+	});
+}
 
+api.loadAllRole=()=>{
+	return request({
+	    url: '/role/loadAll',
+	    method: 'get'
+	});
+}
+
+api.setpwd = (data) => {
+	    return request({
+	        url: '/user/setpwd',
+	        method: 'post',
+			data:  data
+	    });
+}
 
 
 export  default api

src/pages/auth/Role.vue

@@ -0,0 +1,296 @@
+<template>
+ <div class="qpage">
+	<el-row :gutter="10" style="height:100%;">
+		<el-col :md="9" style="height:100%;">
+			
+			<div style="height: 100%;">
+				<CrudTable
+				ref="crudTable"
+				page-info-opts=""
+				url="/role/query"
+				:pageSize="100"
+				@row-click="tabRowClickHandle"
+				>
+				  <template #toolMid>
+					  <!-- <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button> -->
+					  <el-form :inline="true" :model="queryForm" class="query-form-inline">
+					     <el-form-item label="">
+					       <el-input v-model="queryForm.roleName" placeholder="请输入角色名关键字" />
+					     </el-form-item>
+					     
+					     <el-form-item>
+					       <el-button type="primary"  @click="queryHandle">检索</el-button>
+						  </el-form-item>
+						  <el-form-item>
+						   <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
+						  </el-form-item>
+					  </el-form>
+					  
+				  </template>
+				  <template #tabColumns>
+					  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
+					  <el-table-column fixed prop="roleName" label="角色名" width="180" />
+					  <el-table-column prop="zip" label="操作" width="180" 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(scope.row)">删除</el-button>
+					  						</div>
+					  					    
+					  					</template>
+					  </el-table-column>
+				  </template>
+					
+				</CrudTable> 
+			</div>
+			
+		</el-col>
+		<el-col :md="8">
+			<el-card class="box-card">
+			    <template #header>
+			      <div class="card-header">
+			        <span>模块权限</span>
+			        <el-button type="primary" plain style="float:right;" :loading="menuSaveLoading" @click="saveAuth('menu')">保存</el-button>
+			      </div>
+			    </template>
+			    <el-tree :data="menus" :props="menuTreeProps" ref="menuTreeRef" :highlight-current="true" class="tree" show-checkbox node-key="menuId" default-expand-all 
+				
+				>
+			    	  
+			    </el-tree>
+			</el-card>
+		</el-col>
+		<el-col :md="7">
+			<el-card class="box-card">
+			    <template #header>
+			      <div class="card-header">
+			        <span>数据权限</span>
+			        <el-button type="primary" plain style="float:right;" :loading="dataSaveLoading" @click="saveAuth('data')">保存</el-button>
+			      </div>
+			    </template>
+			    <el-tree 
+					:load="loadOrgTree" 
+					lazy  
+					:highlight-current="true"  
+					:props="orgTreeProps"  
+					ref="orgTreeRef" 
+					class="tree"  show-checkbox node-key="id">
+			    	   
+			    </el-tree> 
+			</el-card>
+		</el-col>
+	</el-row>
+	 
+	<el-dialog v-model="editDialogShow" title="角色编辑" :close-on-click-modal="false" 
+	:destroy-on-close="true"
+	>
+		<UserEdit ref="userEdit"  :record="crtEditRecord"></UserEdit>
+		<template #footer>
+		    <span class="dialog-footer">
+		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
+		        <el-button type="primary" @click="beforeCloseHandle('sure')">
+		         确定
+		        </el-button>
+		    </span>
+		</template>
+	</el-dialog>
+ </div>
+  
+</template>
+
+<script  setup>
+	import {reactive,ref,toRaw,onMounted} from 'vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import UserEdit from "./RoleEdit.vue"
+	import roleAPI from "@/api/role.js"
+	import headerAPI from "../../api/header.js"
+	import stationAPI from "../../api/station.js"
+	import utils from "../../utils/utils.js"
+	
+	const crudTable=ref(null)
+	
+	const menuTreeRef=ref(null)
+	const orgTreeRef=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const menuSaveLoading=ref(false)
+	
+	const dataSaveLoading=ref(false)
+	
+	const editDialogShow=ref(false)
+	
+	const queryForm = reactive({
+	  roleName: ''
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			isQuerying.value=false
+		})
+		
+	}
+	
+	const delHandle=(record)=>{
+		ElMessageBox.confirm(
+			'确定要删除该角色吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).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')
+		})
+	}
+	
+	
+	const userEdit=ref(null)
+	const crtEditRecord=ref(null)
+	const openEditHandle=(record)=>{
+		editDialogShow.value=true
+		crtEditRecord.value=record		
+	}
+	const beforeCloseHandle=async (tag)=>{	
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			try{
+				await userEdit.value.submitForm()
+				editDialogShow.value=false
+				queryHandle()
+			}
+			catch(err){
+				console.log(err)
+			}
+			
+		}
+	}
+	
+	onMounted(()=>{
+		loadMenus()
+		
+	})
+	
+	let curRole=null
+	
+	const menus = ref([])
+	const menuTreeProps = {
+		children: 'subMenus',
+		label: 'menuName',
+		value:'menuId'           //兼容treeSelect
+	}
+	const loadMenus=()=>{
+		headerAPI.fetchData().then( resp => {
+			if(resp.code===0){
+				menus.value=headerAPI.processMenus(resp.data||[])
+			}
+			else{
+				console.log(resp.msg)
+			}
+		    
+			
+		});
+	}
+	
+	const orgs=ref([])
+	const orgTreeProps = {
+		children: 'children',
+		label: 'name',
+		isLeaf:'isLeaf'
+	}
+	
+	let rootNode=null
+	
+	const loadOrgTree=(node,resolve)=>{
+		if(node.level == 0){
+			rootNode=node
+		}
+		let srcNode=toRaw(node.data)
+		let {id,nodeType,typeEnd}=srcNode
+		stationAPI.loadSubNodes({id,nodeType,typeEnd}).then((resp) => {
+			if(resp.code===0&&resp.data){
+				resolve(resp.data)
+			}
+		})
+	}
+	
+	
+	const tabRowClickHandle=(row, column, event)=>{
+		curRole=row
+		menuTreeRef.value.setCheckedKeys([])
+		orgTreeRef.value.setCheckedKeys([])
+		roleAPI.loadAuth(row.roleId).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error('加载角色权限数据失败')
+				return
+			}
+			//console.log(resp.data)
+			menuTreeRef.value.setCheckedKeys(resp.data.menus||[])
+			orgTreeRef.value.setCheckedKeys(resp.data.authDatas||[])
+		})
+	}
+	
+	const saveAuth=(type)=>{
+		if(!curRole){
+			ElMessage.error('还未选择角色')
+			return
+		}
+		let authIds=null
+		if(type=="menu"){
+			menuSaveLoading.value=true
+			authIds=getChkedMenuIds()
+		}
+		else if(type=="data"){
+			dataSaveLoading.value=true
+			authIds=getChkedOrgIds()
+		}
+		authIds=authIds&&authIds.length>0?authIds.join(','):null
+		roleAPI.saveAuth({authIds,roleId:curRole.roleId,authType:type}).then(resp=>{
+			menuSaveLoading.value=false
+			dataSaveLoading.value=false
+			if(resp.code!=0){
+				ElMessage.error(resp.msg)
+			}
+			else{
+				ElMessage.success('操作成功')
+			}
+		}).catch(err=>{
+			menuSaveLoading.value=false
+			dataSaveLoading.value=false
+			console.log('save auth failed')
+		})
+	}
+	
+	const getChkedMenuIds=()=>{
+		return menuTreeRef.value.getCheckedKeys(true)
+	}
+	
+	const getChkedOrgIds=()=>{
+		return orgTreeRef.value.getCheckedKeys(true)
+	}
+	
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.box-card{
+		height:100%;
+	}
+</style>

src/pages/sys/Role.vue

@@ -1,141 +0,0 @@
-<template>
- <div class="qpage">
-	<el-form :inline="true" :model="queryForm" class="query-form-inline">
-	   <el-form-item label="">
-	     <el-input v-model="queryForm.roleName" placeholder="请输入角色名关键字" />
-	   </el-form-item>
-	   
-	   <el-form-item>
-	     <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
-	   </el-form-item>
-	</el-form>
-	 
-	<div class="qpage-body">
-		<CrudTable
-		ref="crudTable"
-		page-info-opts="total, prev, pager, next,sizes"
-		url="/api/role/query"
-		:pageSize="20"
-		
-		>
-		  <template #toolGroup>
-			  <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
-			  
-		  </template>
-		  <template #tabColumns>
-			  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
-			  <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(scope.row)">删除</el-button>
-			  						</div>
-			  					    
-			  					</template>
-			  </el-table-column>
-		  </template>
-			
-		</CrudTable> 
-		
-	</div>
-	 
-	<el-dialog v-model="editDialogShow" title="角色编辑" :close-on-click-modal="false" 
-	:destroy-on-close="true"
-	>
-		<UserEdit ref="userEdit"  :record="crtEditRecord"></UserEdit>
-		<template #footer>
-		    <span class="dialog-footer">
-		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
-		        <el-button type="primary" @click="beforeCloseHandle('sure')">
-		         确定
-		        </el-button>
-		    </span>
-		</template>
-	</el-dialog>
- </div>
-  
-</template>
-
-<script  setup>
-	import {reactive,ref,toRaw } from 'vue'
-	import {ElMessageBox,ElMessage} from 'element-plus'
-	import CrudTable from "../../components/crudtable/CrudTable.vue"
-	import UserEdit from "./RoleEdit.vue"
-	import roleAPI from "@/api/role.js"
-	
-	const crudTable=ref(null)
-	
-	const isQuerying=ref(false)
-	
-	const editDialogShow=ref(false)
-	
-	const queryForm = reactive({
-	  roleName: ''
-	})
-	
-	const queryHandle=()=>{
-		isQuerying.value=true
-		crudTable.value.query(queryForm).then(resp=>{
-			isQuerying.value=false
-		})
-		
-	}
-	
-	const delHandle=(record)=>{
-		ElMessageBox.confirm(
-			'确定要删除该角色吗?',
-			'操作确认',
-			{
-				confirmButtonText:'确定',
-				cancelButtonText:'取消',
-				type: 'warning'
-			}
-		).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')
-		})
-	}
-	
-	
-	const userEdit=ref(null)
-	const crtEditRecord=ref(null)
-	const openEditHandle=(record)=>{
-		editDialogShow.value=true
-		crtEditRecord.value=record		
-	}
-	const beforeCloseHandle=async (tag)=>{	
-		if(tag==='cancel'){
-			editDialogShow.value=false
-		}
-		else{
-			try{
-				await userEdit.value.submitForm()
-				editDialogShow.value=false
-				queryHandle()
-			}
-			catch(err){
-				console.log(err)
-			}
-			
-		}
-	}
-	
-</script>
-
-<style scoped>
-	@import url('../../assets/css/qpage.css');
-	
-</style>

src/pages/sys/User.vue

@@ -25,13 +25,18 @@
 			  <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="roleName" label="角色" width="320" />
-			  <el-table-column prop="createTime" label="创建时间" width="600" />
-			  <el-table-column prop="zip" label="操作" width="160" fixed="right">
+			  <el-table-column prop="orgName" label="所属机构" width="200" />
+			  <el-table-column prop="roleNames" label="角色" width="200" />
+			  <el-table-column prop="disabledIf" label="状态" width="120">
+			  				  <template #default="scope">
+			  					  {{scope.row.disabledIf?'禁用':'启用'}}
+			  				  </template>
+			  </el-table-column>
+			  <el-table-column prop="note" label="备注" width="200" />
+			  <el-table-column prop="zip" label="操作" width="260" fixed="right">
 			  					<template #default="scope">
 			  						<div class="tool-column">
+										<el-button type="success" icon="lock" size="small" @click="openEditHandle(scope.row,true)">设置密码</el-button>
 			  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
 			  							
 			  							<el-button type="warning" icon="delete" size="small" @click="delHandle(scope.row)">删除</el-button>
@@ -47,7 +52,7 @@
 	<el-dialog v-model="editDialogShow" title="用户编辑" :close-on-click-modal="false" 
 	:destroy-on-close="true"
 	>
-		<UserEdit ref="userEdit"  :record="crtEditRecord"></UserEdit>
+		<component :is="editComp.editor" ref="userEdit" :record="crtEditRecord"></component>
 		<template #footer>
 		    <span class="dialog-footer">
 		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
@@ -62,10 +67,11 @@
 </template>
 
 <script  setup>
-	import {reactive,ref} from 'vue'
+	import {reactive,ref,shallowReactive} from 'vue'
 	import {ElMessageBox,ElMessage} from 'element-plus'
 	import CrudTable from "../../components/crudtable/CrudTable.vue"
 	import UserEdit from "./UserEdit.vue"
+	import UserPwdEdit from "./UserPwdEdit.vue"
 	import userAPI from "@/api/user.js"
 	const crudTable=ref(null)
 	
@@ -73,6 +79,8 @@
 	
 	const editDialogShow=ref(false)
 	
+	const editComp=shallowReactive({editor:UserEdit})
+	
 	const queryForm = reactive({
 		realName: ''
 	})
@@ -111,7 +119,8 @@
 	
 	const userEdit=ref(null)
 	const crtEditRecord=ref(null)
-	const openEditHandle=(record)=>{	
+	const openEditHandle=(record,forpwd)=>{	
+		editComp.editor=forpwd?UserPwdEdit:UserEdit
 		editDialogShow.value=true
 		crtEditRecord.value=record
 	}

src/pages/sys/UserEdit.vue

@@ -1,147 +1,223 @@
 <template>
 	<div class="edit-page">
-		<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-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 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 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-select v-model="formModel.roleName" placeholder="请选择角色" class="edit-form-item"
-				      multiple
-				      collapse-tags
-				      collapse-tags-tooltip
-					  clearable 
-				>
-				  <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"/>			    
-			    </el-select>
-			  </el-form-item>
-			  
-			  <!-- <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 :model="formModel" ref="formUser" label-position="top" label-width="auto" :inline="true"
+			:rules="rules">
+			<el-row :gutter="20">
+				<el-col :sm="24" :md="12">
+					<el-form-item label="账号" prop="loginId">
+						<el-input v-model="formModel.loginId" autocomplete="off" clearable/>
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="姓名">
+						<el-input v-model="formModel.realName" autocomplete="off" placeholder="请输入姓名" clearable />
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="密码" prop="pwd" v-if="visiblePwd">
+						<el-input v-model="formModel.pwd" type="password" autocomplete="off" placeholder="请输入密码"
+							clearable />
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="密码确认" v-if="visiblePwd">
+					 <el-input v-model="formModel.pwdagain" type="password" autocomplete="off" placeholder="请再输入一次密码"
+							clearable />
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="所属机构">
+						<el-tree-select v-model="formModel.orgId" :data="treeNodes" :props="treeNodeProps"
+							:render-after-expand="false" check-strictly style="width:100%" />
+
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="角色">
+						<el-select v-model="formModel.roleIds" placeholder="请选择角色" style="width:100%"  multiple
+							collapse-tags collapse-tags-tooltip >
+							<el-option v-for="item in roleOpts" :key="item.roleId" :label="item.roleName"
+								:value="item.roleId" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="状态" prop="status">
+						<el-select v-model="formModel.disabledIf" placeholder="选择状态" style="width:100%">
+							<el-option label="启用" :value="false" />
+							<el-option label="禁用" :value="true" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :sm="24" :md="12">
+					<el-form-item label="备注">
+						<el-input v-model="formModel.note" autocomplete="off" placeholder="请输入备注" clearable />
+					</el-form-item>
+				</el-col>
+			</el-row>
 		</el-form>
 	</div>
 </template>
 
 <script setup>
 	import {reactive,ref,onMounted,toRaw} from 'vue'
-	import userAPI from "@/api/user.js"
-	import roleAPI from "@/api/role.js"
+	import userAPI from '@/api/user.js'
 	import {ElMessageBox,ElMessage} from 'element-plus'
 	import md5 from '@/utils/md5.js'
-	const roleList = ref([]);
-	const props=defineProps({
-		record:Object
+	import utils from '@/utils/utils.js'
+
+	const props = defineProps({
+		record: Object
 	})
-	const visiblePwd =ref(null);
-	
+	const visiblePwd = ref(null);
+
 	const formUser = ref(null);
+
 	const formModel = reactive({
-		userId:'',  
-		realName:'',
-		loginId:'',
-		pwd:'',
-		roleName:''
+		userId: null,
+		realName: null,
+		loginId: null,
+		pwd: null,
+		pwdagain: null,
+		roleIds: null,
+		orgId: null,
+		disabledIf: false,
+		note: null
+
 	})
-	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) => {
-				
-			if(resp.code===0){				
-				formModel.roleName=resp.data	
-			}	       
-	    });
-			Object.assign(formModel,{userId,realName,loginId})
-		}else{
-			visiblePwd.value= true
+
+	const roleOpts = ref([])
+
+	const treeNodes = ref([])
+
+	const treeNodeProps = {
+		children: 'children',
+		label: 'name',
+		value: 'id'
+	}
+
+	onMounted(async () => {
+		try {
+			await initForm()
+			if (props.record) {
+				let {userId,realName,loginId,roleIds,orgId,disabledIf,note} = props.record
+				roleIds=roleIds?roleIds.split(','):null
+				Object.assign(formModel, {userId,realName,loginId,roleIds,orgId,disabledIf,note})
+			} else {
+				visiblePwd.value = true
+			}
+		} catch (err) {
+			console.log('init form error')
 		}
+
 	})
-	
-	const rules =reactive({
-		loginId:[
-			{required:true,message:'账号还未填写',trigger:'blur'},
-			{ min: 3, max: 20, message: '账号长度应该为3-20', trigger: 'blur' }
-			],
-		pwd:[
-			{required:true,message:'密码还未填写',trigger:'blur'},
-			{ min: 3, max: 32, message: '密码长度应该为3-32', trigger: 'blur' }
-			]
+
+	const rules = reactive({
+		loginId: [{
+				required: true,
+				message: '账号还未填写',
+				trigger: 'blur'
+			},
+			{
+				min: 2,
+				max: 20,
+				message: '账号长度应该为2-20',
+				trigger: 'blur'
+			}
+		],
+		pwd: [{
+				required: true,
+				message: '密码还未填写',
+				trigger: 'blur'
+			},
+			{
+				min: 3,
+				max: 32,
+				message: '密码长度应该为3-32',
+				trigger: 'blur'
+			}
+		]
 	})
-	
-	const submitForm= async()=>{	
-		let validateRst=false
-		try{
-			validateRst = await formUser.value.validate()
+
+	const initForm = async () => {
+		try {
+			let resp = await userAPI.loadMyOrgTree()
+			console.log(resp)
+			if (resp.code == 0) {
+				let converDef = {
+					id: 'id',
+					name: 'name',
+					superId: 'superId',
+					superName: 'superName',
+					children: 'children'
+				}
+				let treeDatas = utils.list2Tree(resp.data || [], converDef)
+				treeNodes.value = treeDatas['topNodes']
+			}
+
+			resp = await userAPI.loadAllRole()
+			if (resp.code == 0) {
+				roleOpts.value = resp.data
+			}
+
+
+			return Promise.resolve('ok')
+		} catch (err) {
+			return Promise.reject('err')
 		}
-		catch(err){
+	}
+
+	const submitForm = async () => {
+		let validateRst = false
+		try {
+			validateRst = await formUser.value.validate()
+		} catch (err) {
 			ElMessage.error("请按要求填写数据");
 			console.log(err)
 			return Promise.reject('invalidate')
 		}
-		if(validateRst){  //验证通过，准备提交数据
-		  try{
-				if(visiblePwd.value){
-					formModel.pwd =md5(formModel.pwd);
+		if (validateRst) { //验证通过，准备提交数据
+			try {
+				let reqData = toRaw(formModel)
+
+				if (visiblePwd.value) {
+					if (formModel.pwd != formModel.pwdagain) {
+						ElMessage.error('两次输入的密码不一致')
+						return Promise.reject('invalidate')
+					}
+					reqData.pwd = md5(reqData.pwd);
 				}
-								
-				formModel.roleName= formModel.roleName.join(',');
 				
-				//return 
-			   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||'操作失败')
+				reqData.roleIds=reqData.roleIds?reqData.roleIds.join(','):null
+				console.log(reqData.roleIds)
+
+				let resp = await userAPI.save(reqData)
+				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>
+
+
+</style>

src/pages/sys/UserPwdEdit.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formUser" label-position="left" label-width="auto" :inline="false" :rules="rules">
+			<el-form-item label="账号">
+				{{formModel.loginId}}
+			</el-form-item>
+			
+			<el-form-item label="姓名">
+				{{formModel.realName}}
+			</el-form-item>
+			
+			<el-form-item label="密码" prop="pwd">
+				<el-input v-model="formModel.pwd" type="password" autocomplete="off" placeholder="请输入密码" clearable  style="width:400px"/>
+			</el-form-item>
+			
+			<el-form-item label="密码确认" prop="pwdagain">
+			 <el-input v-model="formModel.pwdagain" type="password" autocomplete="off" placeholder="请再输入一次密码" clearable  style="width:400px"/>
+			</el-form-item>	
+
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	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'
+	import utils from '@/utils/utils.js'
+
+	const props = defineProps({
+		record: Object
+	})
+	
+
+	const formUser = ref(null);
+
+	const formModel = reactive({
+		userId: null,
+		realName: null,
+		loginId:null,
+		pwd: null,
+		pwdagain: null
+		
+
+	})
+
+
+
+	const rules = reactive({
+		
+		pwd: [{
+				required: true,
+				message: '密码还未填写',
+				trigger: 'blur'
+			},
+			{
+				min: 1,
+				max: 32,
+				message: '密码长度应该为1-32',
+				trigger: 'blur'
+			}
+		],
+		pwdagain: [{
+				required: true,
+				message: '确认密码还未填写',
+				trigger: 'blur'
+			},
+			{
+				min: 1,
+				max: 32,
+				message: '确认密码长度应该为1-32',
+				trigger: 'blur'
+			}
+		]
+	})
+
+	onMounted( () => {
+		let {userId,realName,loginId} = props.record
+		Object.assign(formModel, {userId,realName,loginId})
+	
+	})
+
+	const submitForm = async () => {
+		let validateRst = false
+		try {
+			validateRst = await formUser.value.validate()
+		} catch (err) {
+			ElMessage.error("请按要求填写数据");
+			console.log(err)
+			return Promise.reject('invalidate')
+		}
+		if (validateRst) { //验证通过，准备提交数据
+			try {
+				let reqData = toRaw(formModel)
+
+				if (reqData.pwd != reqData.pwdagain) {
+					ElMessage.error('两次输入的密码不一致')
+					return Promise.reject('invalidate')
+				}
+				reqData.pwd = md5(reqData.pwd);
+
+
+				let resp = await userAPI.setpwd(reqData)
+				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-col{
+		height:80px;
+	}
+
+</style>