主页增加修改密码功能

src/api/header.js

@@ -40,5 +40,13 @@ api.logout=(tokenId)=>{
 	});
 }
 
+api.modifypwd=(data)=>{
+	return request({
+	    url: '/login/modifypwd',
+	    method: 'post',
+		params:data
+	});
+}
+
 export  default api
 

src/components/Header.vue

@@ -53,6 +53,18 @@
                 </el-dropdown>
             </div>
         </div>
+		
+		<el-dialog v-model="editDialogShow" title="修改密码" :close-on-click-modal="false"
+		:destroy-on-close="true"
+		>
+			<Modifypwd ref="editWin"></Modifypwd>
+			<template #footer>
+			    <span class="dialog-footer">
+			        <el-button @click="DialogCloseHandle('cancel')">取消</el-button>
+			        <el-button type="primary" @click="DialogCloseHandle('sure')">确定</el-button>
+			    </span>
+			</template>
+		</el-dialog>
     </div>
 </template>
 <script setup>
@@ -63,6 +75,8 @@
 	import headerAPI from "../api/header.js"
 	import navmenuItem from "./NavmenuItem.vue"
 	import app from "../utils/app.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import Modifypwd from './Modifypwd.vue'
 	
 	const store=useHomeStore()
 	
@@ -70,6 +84,10 @@
 	
 	const menus = ref([])
 	
+	const editDialogShow=ref(false)
+	
+	const editWin=ref(null)
+	
 	const getData = () => {
 	    headerAPI.fetchData().then( resp => {
 			console.log(resp)
@@ -104,12 +122,9 @@
 	const router = useRouter();
 	const handleCommand = (command) => {
 	    if (command == "logout") {
-			headerAPI.logout(app.takeSetting('token'))
-			app.clearSetting()
-			router.push("/login")
-			
-	    } else if (command == "modifypwd") {
-	        router.push("/user");
+			logout()
+		} else if (command == "modifypwd") {
+	        editDialogShow.value=true
 	    }
 	};
 	
@@ -121,6 +136,42 @@
 		
 	}
 	
+	const logout=()=>{
+		ElMessageBox.confirm(
+			'确定要退出系统吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			headerAPI.logout(app.takeSetting('token'))
+			app.clearSetting()
+			router.push("/login")
+		}).catch(err=>{
+			
+		})
+	}
+	
+	const DialogCloseHandle=async (tag)=>{
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			
+			try{
+				await editWin.value.submitForm()
+				editDialogShow.value=false
+				
+			}
+			catch(err){
+				console.log(err)
+			}
+			
+		}
+	}
+	
 </script>
 <style scoped>
 .header {

src/components/Modifypwd.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formcomp"  label-position="right" label-width="auto" :inline="false" :rules="rules" :inline-message="true">
+		     
+			 <el-form-item label="旧密码" prop="oldpwd">
+			   <el-input v-model="formModel.oldpwd" type="password" autocomplete="off" placeholder="请输入旧密码" class="edit-form-item" clearable/>
+			 </el-form-item>
+			  
+			  <el-form-item label="新密码" prop="newpwd">
+			    <el-input v-model="formModel.newpwd" type="password" autocomplete="off" placeholder="请输入新密码" class="edit-form-item" clearable/>
+			  </el-form-item>
+			  
+			  
+			  
+			  <el-form-item label="新密码确认" prop="pwdagain">
+			    <el-input v-model="formModel.pwdagain" type="password"  autocomplete="off" placeholder="请再输入一次新密码" class="edit-form-item" clearable/>
+			  </el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw} from 'vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import headerAPI from '../api/header.js'
+	import md5 from '../utils/md5.js'
+	
+	const formcomp = ref(null);
+	
+	const formModel = reactive({
+	  oldpwd:'',
+	  newpwd: '',
+	  pwdagain:''
+	})
+	
+	const rules =reactive({
+		oldpwd:[
+			{required:true,message:'旧密码还未输入',trigger:'blur'},
+			{ min: 1, max: 20, message: '密码长度应该为1-20', trigger: 'blur' }
+			],
+		newpwd:[
+			{required:true,message:'新密码还未输入',trigger:'blur'},
+			{ min: 1, max: 20, message: '密码长度应该为1-20', trigger: 'blur' }
+			],
+		pwdagain:[
+			{required:true,message:'新密码再输入一次',trigger:'blur'},
+			{ min: 1, max: 20, message: '密码长度应该为1-20', trigger: 'blur' }
+			]
+	})
+	
+	
+	
+	const submitForm=async ()=>{
+		let validateRst=false
+		try{
+			validateRst = await formcomp.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			return Promise.reject('form invalidate')
+		}
+		
+		if(validateRst){ 
+			if(formModel.newpwd!=formModel.pwdagain){
+				ElMessage.error('新密码两次输入不一样')
+				return Promise.reject('form invalidate')
+			}
+			try{
+				let {oldpwd,newpwd}=formModel
+				oldpwd=md5(oldpwd)
+				newpwd=md5(newpwd)
+				let resp =await headerAPI.modifypwd({oldpwd,newpwd})
+				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>
+	
+	.edit-form-item{
+		width:260px;
+	}
+	
+</style>