首页已经修改密码的编写

src/api/user/index.ts

@@ -12,6 +12,7 @@ import { baseUrlHost } from '../baseUrlHost';
  * @method updateUser 更新用户
  * @method getuserListAll 获取全部用户
  * @method getUserDetail 查询单个用户
+ * @method updatepwd 修改用户密码
  */
 
 export function userApi() {
@@ -55,5 +56,12 @@ export function userApi() {
         method: 'get',
       });
     },
+    updatepwd: (id:Number,data:object) => {
+      return request({
+        url: baseUrlHost + `/acUser/${id}/pwdreset`,
+        method: 'post',
+        data
+      })
+    }
   };
 }

src/i18n/lang/en.ts

@@ -129,9 +129,10 @@ export default {
 		dropdownDefault: 'default',
 		dropdownSmall: 'small',
 		dropdown1: 'home page',
-		dropdown2: 'Personal Center',
+		dropdown2:'updatepwd',
-		dropdown3: '404',
+		// dropdown2: 'Personal Center',
-		dropdown4: '401',
+		// dropdown3: '404',
+		// dropdown4: '401',
 		dropdown5: 'Log out',
 		dropdown6: 'Code warehouse',
 		searchPlaceholder: 'Menu search: support Chinese, routing path',

src/i18n/lang/zh-cn.ts

@@ -132,9 +132,10 @@ export default {
 		dropdownDefault: '默认',
 		dropdownSmall: '小型',
 		dropdown1: '首页',
-		dropdown2: '个人中心',
+		// dropdown2: '个人中心',
-		dropdown3: '404',
+		// dropdown3: '404',
-		dropdown4: '401',
+		// dropdown4: '401',
+		dropdown2:'修改密码',
 		dropdown5: '退出登录',
 		dropdown6: '代码仓库',
 		searchPlaceholder: '菜单搜索：支持中文、路由路径',

src/i18n/lang/zh-tw.ts

@@ -129,9 +129,10 @@ export default {
 		dropdownDefault: '默認',
 		dropdownSmall: '小型',
 		dropdown1: '首頁',
-		dropdown2: '個人中心',
+		dropdown2:'修改密碼',
-		dropdown3: '404',
+		// dropdown2: '個人中心',
-		dropdown4: '401',
+		// dropdown3: '404',
+		// dropdown4: '401',
 		dropdown5: '登出',
 		dropdown6: '程式碼倉庫',
 		searchPlaceholder: '選單蒐索：支援中文、路由路徑',

src/layout/navBars/topBar/user.vue

@@ -73,15 +73,38 @@
 			<template #dropdown>
 				<el-dropdown-menu>
 					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
-					<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item> -->
-					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<!-- <el-dropdown-item>
-					<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
+						<el-button text  style="height: 20px; ">
+							修改密码
+						</el-button>
+					</el-dropdown-item> -->
+					<el-dropdown-item command="updatepwd">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<!-- <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
 					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
 					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
 		<Search ref="searchRef" />
+		<div class="system-menu-dialog-container">
+		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="400px">
+			<el-form ref="userDialogFormRef" :rules="state.rules" :model="state.userDetailList" size="default" label-width="120px" v-loading="state.dialog.loading">
+				<el-form-item label="旧密码：" prop="old">
+                    <el-input v-model="state.userDetailList.old"></el-input>
+                </el-form-item>
+                <el-form-item label="新密码：" prop="pwd">
+                    <el-input v-model="state.userDetailList.pwd" placeholder="请输入新密码" clearable />
+                </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button plain @click="handleSure" type="primary" size="default">确 定</el-button>
+					<el-button plain @click="onCancel" size="default">关 闭</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
 	</div>
 </template>
 
@@ -98,6 +121,7 @@ import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
 import { useLoginApi } from '/@/api/login';
+import { userApi } from '/@/api/user'
 
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));
@@ -106,6 +130,8 @@ const Search = defineAsyncComponent(() => import('/@/layout/navBars/topBar/searc
 // 引入 api 请求接口
 const loginApi = useLoginApi();
 
+const userapi = userApi();
+
 // 定义变量内容
 const userNewsRef = ref();
 const userNewsBadgeRef = ref();
@@ -120,8 +146,23 @@ const state = reactive({
 	isScreenfull: false,
 	disabledI18n: 'zh-cn',
 	disabledSize: 'large',
+	userDetailList:{
+		old:'',
+		pwd:'',
+	},
+	dialog:{
+		isShowDialog: false,
+		title: '修改密码',
+    loading: false,
+	},
+	rules:{
+		old:{ required: true, message: '旧密码不能为空', trigger: 'blur' },
+		pwd:{ required: true, message: '新密码不能为空', trigger: 'blur' }
+	}
 });
 
+const userDialogFormRef = ref();
+
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
 	let num: string | number = '';
@@ -152,7 +193,8 @@ const onLayoutSetingClick = () => {
 	mittBus.emit('openSetingsDrawer');
 };
 // 下拉菜单点击时
-const onHandleCommandClick = (path: string) => {
+const onHandleCommandClick = async(path: string) => {
+	
 	if (path === 'logOut') {
 		ElMessageBox({
 			closeOnClickModal: false,
@@ -189,10 +231,73 @@ const onHandleCommandClick = (path: string) => {
 			.catch(() => {});
 	} else if (path === 'wareHouse') {
 		window.open('https://gitee.com/lyt-top/vue-next-admin');
-	} else {
+	} else if(path === 'updatepwd'){
+		state.dialog.isShowDialog = true;
+		state.userDetailList.pwd ='';
+		try{
+			const res = await userapi.getUserDetail(localStorage.getItem('userid'));
+			if(res?.success){
+				state.userDetailList.old = res.data.password;
+				// console.log(111111111,state.userDetailList.oldpwd)
+			}
+		}catch(error){
+			console.error(error);
+		}
+	}
+	else {
 		router.push(path);
 	}
 };
+
+// 关闭弹窗
+const closeDialog = () => {
+	state.dialog.isShowDialog = false;
+};
+
+//确定
+const handleSure = () =>{
+	userDialogFormRef.value?.validate(async(valid:boolean) =>{
+		if(valid){
+			// console.log(111111111)
+			
+			try{
+				const res = await userapi.updatepwd(localStorage.getItem('userid'),state.userDetailList);
+				if(res?.success){
+					ElMessage.success('修改成功！');
+					reset();
+					closeDialog();
+					ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
+					.then(async () => {
+						// 清除缓存/token等
+						console.log('清除缓存/token等');
+						Session.clear();
+						// 使用 reload 时，不需要调用 resetRoute() 重置路由
+						window.location.reload();
+						window.location.href = import.meta.env.MODE === "development" ? '/' : '/pixelAdmin/'; // 去登录页
+					})
+					.catch(() => {});
+				}
+			}catch(error){
+				console.error(error);
+				ElMessage.error('修改失败！');
+			}
+		}
+	})
+};
+
+// 取消
+const onCancel = () => {
+	closeDialog();
+};
+
+const reset = () =>{
+	state.userDetailList = {
+		old:'',
+		pwd:''
+	}
+	
+};
+
 // 菜单搜索点击
 const onSearchClick = () => {
 	searchRef.value.openSearch();

src/views/home/index.vue

@@ -14,28 +14,28 @@
 						</div>
 						<div class="personal-user-right">
 							<el-row>
-								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
+								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{username}}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
 								<el-col :span="24">
 									<el-row>
 										<el-col :xs="24" :sm="8" class="personal-item mb6">
 											<div class="personal-item-label">昵称：</div>
-											<div class="personal-item-value">小柒</div>
+											<div class="personal-item-value">{{ username }}</div>
 										</el-col>
 										<el-col :xs="24" :sm="16" class="personal-item mb6">
 											<div class="personal-item-label">身份：</div>
-											<div class="personal-item-value">超级管理</div>
+											<div class="personal-item-value">{{ acgroup }}</div>
 										</el-col>
 									</el-row>
 								</el-col>
 								<el-col :span="24">
 									<el-row>
-										<el-col :xs="24" :sm="8" class="personal-item mb6">
+										<!-- <el-col :xs="24" :sm="8" class="personal-item mb6">
 											<div class="personal-item-label">登录IP：</div>
 											<div class="personal-item-value">192.168.1.1</div>
-										</el-col>
+										</el-col> -->
 										<el-col :xs="24" :sm="16" class="personal-item mb6">
-											<div class="personal-item-label">登录时间：</div>
+											<div class="personal-item-label">创建时间：</div>
-											<div class="personal-item-value">2021-02-05 18:47:26</div>
+											<div class="personal-item-value">{{creatime}}</div>
 										</el-col>
 									</el-row>
 								</el-col>
@@ -193,17 +193,22 @@
 </template>
 
 <script setup lang="ts" name="personal">
-import { reactive, computed,ref } from 'vue';
+import { reactive, computed,ref, onMounted } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
 import { newsInfoList, recommendList } from '../personal/mock';
+import { userApi } from '/@/api/user';
+import { ElMessage,TableColumnCtx } from 'element-plus';
+
+const userapi = userApi();
+
 
 // 定义变量内容
-const state = reactive<PersonalState>({
+const state = reactive({
 	newsInfoList,
 	recommendList,
 	personalForm: {
 		name: '',
-		email: '',
+		mail: '',
 		autograph: '',
 		occupation: '',
 		phone: '',
@@ -219,6 +224,39 @@ const catchphraseDate = ref([
 	"良好的开端是成功的一半。"
 ])
 
+//用户信息表
+const username = ref('');
+	
+const creatime = ref('');
+
+const acgroup = ref('');
+
+//获取用户详细信息
+const getuserDetail = async() =>{
+	try{
+		const res = await userapi.getUserDetail(localStorage.getItem('userid'));
+		// console.log(res);
+		if(res?.success){
+			username.value = res.data.username;
+			creatime.value = dateFormatter(res.data)		
+			acgroup.value = res.data.acgroup;
+			if(acgroup.value == '1'){
+				acgroup.value = '管理员'
+			}else{
+				acgroup.value = '用户'
+			}
+		}
+	}catch(error){
+		console.error(error);
+	}
+};
+
+// 日期格式化
+const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
+  let date = new Date(row.createtime);
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+};
+
 const value = ref(new Date())
 
 // 当前时间提示语
@@ -226,7 +264,9 @@ const currentTime = computed(() => {
 	return formatAxis(new Date());
 });
 // 图片基本路径
-
+onMounted(() => {
+	getuserDetail();
+})
 </script>
 
 <style scoped lang="scss">

src/views/login/component/account.vue

@@ -106,6 +106,7 @@ const onSignIn = async () => {
 			// 存储 token 到浏览器缓存
 			Session.set('token', res.data.token);
 			localStorage.setItem('acgroup', JSON.stringify(res.data.user.acgroup));
+			localStorage.setItem('userid',JSON.stringify(res.data.user.id))
 			// usertype判断登录角色
 			// Cookies.set('userName', res.data.records.acgroup === 1 ? 'admin' : 'user');
 			Cookies.set('userName', 'admin');