Merge branch 'master' of http://47.92.161.104:10080/chenwen/zl-opd-view

src/api/header.js

@@ -32,5 +32,21 @@ api.processMenus=(menus)=>{
 	return pMenuList
 }
 
+api.logout=(tokenId)=>{
+	return request({
+	    url: '/login/exit',
+	    method: 'post',
+		params:{tokenId}
+	});
+}
+
+api.modifypwd=(data)=>{
+	return request({
+	    url: '/login/modifypwd',
+	    method: 'post',
+		params:data
+	});
+}
+
 export  default api
 

src/components/Header.vue

@@ -33,21 +33,38 @@
                 </div>
                
                 <!-- 用户名下拉菜单 -->
-                <el-dropdown class="user-name" trigger="click">
-                    <span class="el-dropdown-link">
-                        {{username}}
-                       <el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
-                    </span>
+                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+					<div>
+						<el-tooltip effect="dark" :content="app.takeSetting('usName')">
+							<div class="el-dropdown-link">
+								{{app.takeSetting("usName")}}
+							</div>
+						</el-tooltip>
+						<el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
+					</div>
+                    
                     <template #dropdown>
                         <el-dropdown-menu>
                             
-                           <el-dropdown-item>Action 1</el-dropdown-item>
-						   <el-dropdown-item>Action 2</el-dropdown-item>
+                           <el-dropdown-item command="modifypwd">修改密码</el-dropdown-item>
+						   <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </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>
@@ -57,6 +74,9 @@
 	import { useRouter } from "vue-router"
 	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()
 	
@@ -64,6 +84,10 @@
 	
 	const menus = ref([])
 	
+	const editDialogShow=ref(false)
+	
+	const editWin=ref(null)
+	
 	const getData = () => {
 	    headerAPI.fetchData().then( resp => {
 			console.log(resp)
@@ -84,28 +108,23 @@
 	
 	
 	
-	const username=ref('测试用户')
 	
-	const message=ref(2)
 	
-	//const store = useStore();
+	const message=ref(2)
 	
-	//const collapse = computed(() => store.state.collapse);
 	const  { collapse } = storeToRefs(store)
 	
 	const collapseChage = () => {
-	   //store.commit("handleCollapse", !collapse.value);
-	   collapse.value=!collapse.value
+	  collapse.value=!collapse.value
 	};
 	
 	// 用户名下拉菜单选择事件
 	const router = useRouter();
 	const handleCommand = (command) => {
-	    if (command == "loginout") {
-	        localStorage.removeItem("ms_username");
-	        router.push("/login");
-	    } else if (command == "user") {
-	        router.push("/user");
+	    if (command == "logout") {
+			logout()
+		} else if (command == "modifypwd") {
+	        editDialogShow.value=true
 	    }
 	};
 	
@@ -117,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 {
@@ -148,7 +203,7 @@
 	
 	
 	line-height: 60px;
-	width:calc(100vw - 402px);
+	width:calc(100vw - 422px);
 }
 .header .nav-menu:deep(.el-menu--horizontal){
 	border:none;
@@ -163,7 +218,7 @@
 
 .header-right {
     float: right;
-    padding-right: 20px;
+    padding-right: 5px;
 	
 }
 .header-user-con {
@@ -200,12 +255,17 @@
 }
 .user-name {
     margin-left: 10px;
-	width:80px;
+	
 }
 
 .el-dropdown-link {
     color: #fff;
     cursor: pointer;
+	max-width:95px;
+	overflow: hidden;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	display: inline-block;
 }
 .el-dropdown-menu__item {
     text-align: center;

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>

src/pages/Login.vue

@@ -66,7 +66,9 @@ import md5 from '../utils/md5.js'
 						if(resp.code===0){
 							ElMessage.success("登录成功");
 							router.push("/home");
-							app.putSetting("token",resp.data.tokenId)
+							//app.putSetting("token",resp.data.tokenId)
+							app.setToken(resp.data.tokenId)
+							app.putSetting("usName",resp.data.usName)
 						}
 						else{
 							ElMessage.error(resp.msg);

src/router/index.js

@@ -1,16 +1,24 @@
 import {createRouter, createWebHashHistory} from "vue-router";
+import app from "../utils/app.js"
 
 const routes = [
     {
         path: '/',
-       // redirect: '/login'
-	   component: () => import ("../pages/Login.vue")
+        redirect: '/home'
+	   //component: () => import ("../pages/Login.vue")
     }, 
 	{
 	    path: "/home",
 	    name: "Home",
 		component: () => import ("../pages/Home.vue"),
-		
+		beforeEnter:(to,from)=>{
+			if(!app.getToken()){
+				return {name:'Login'}
+			}
+			else{
+				return true
+			}
+		}
 		
 	},
 	{

src/utils/app.js

@@ -1,13 +1,18 @@
 export default {
-	
+	getToken:function(){
+		return this.takeSetting("token")
+	},
+	setToken:function(token){
+		this.putSetting("token",token)
+	},
 	getSetting:function(){
-		let settingstr=sessionStorage.getItem('$settings'); //不存在时是空串
+		let settingstr=localStorage.getItem('$settings'); //不存在时是空串
 		//console.log(settingstr.length);
 		return settingstr?JSON.parse(settingstr):null;
 	},
 	setSetting:function(setting){
 		setting = setting || {};
-		sessionStorage.setItem('$settings', JSON.stringify(setting));
+		localStorage.setItem('$settings', JSON.stringify(setting));
 	},
 	addSetting:function(setting){
 		let settingObj=this.getSetting()||{};
@@ -24,7 +29,7 @@ export default {
 		return setting[key];
 	},
 	clearSetting:function(){
-		uni.clear();
+		localStorage.clear()
 	},
 	extend:function(srcObj,refObj){
 		for(let attr in refObj){

src/utils/request.js

@@ -11,7 +11,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
     config => {
-		config.headers.token=app.takeSetting("token")
+		config.headers.token=app.getToken()
         return config;
     },
     error => {