fix 修改个人信息同时更新登录用户信息

src/views/personal/index.vue

@@ -6,22 +6,30 @@
         <el-card shadow="hover" header="个人信息">
           <div class="personal-user">
             <div class="personal-user-left">
-							<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
+              <el-upload
-								<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
+                  class=" h100 personal-user-left-upload avatar-uploader"
+                  :action="baseURL+'/api/v1/system/upload/singleImg'"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :data="dataParam"
+              >
+                <img v-if="imageUrl" :src="proxy.getUpFileUrl(imageUrl)" class="avatar" />
+                <el-icon v-else class="avatar-uploader-icon"><ele-Plus  /></el-icon>
+
               </el-upload>
             </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 }}，{{ personalForm.nickname }}，{{ personalForm.describe }}！ </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">	{{ personalForm.nickname }}</div>
                     </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">超级管理</div>
+                      <div class="personal-item-value">{{ personalForm.mobile }}</div>
                     </el-col>
                   </el-row>
                 </el-col>
@@ -29,11 +37,23 @@
                   <el-row>
                     <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>
+                      <div class="personal-item-value">{{personalForm.lastLoginIp}}</div>
                     </el-col>
                     <el-col :xs="24" :sm="16" class="personal-item mb6">
                       <div class="personal-item-label">登录时间：</div>
-											<div class="personal-item-value">2021-02-05 18:47:26</div>
+                      <div class="personal-item-value">{{personalForm.lastLoginTime}}</div>
+                    </el-col>
+                  </el-row>
+                </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">{{ deptName }}</div>
+                    </el-col>
+                    <el-col :xs="24" :sm="16" class="personal-item mb6">
+                      <div class="personal-item-label">所属角色：</div>
+                      <div class="personal-item-value">{{ roles.join(',') }}</div>
                     </el-col>
                   </el-row>
                 </el-col>
@@ -85,22 +105,22 @@
             <el-row :gutter="35">
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="昵称">
-									<el-input v-model="personalForm.name" placeholder="请输入昵称" clearable></el-input>
+                  <el-input v-model="personalForm.nickname" placeholder="请输入昵称" clearable></el-input>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="邮箱">
-									<el-input v-model="personalForm.email" placeholder="请输入邮箱" clearable></el-input>
+                  <el-input v-model="personalForm.userEmail" placeholder="请输入邮箱" clearable></el-input>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="签名">
-									<el-input v-model="personalForm.autograph" placeholder="请输入签名" clearable></el-input>
+                  <el-input v-model="personalForm.describe" placeholder="请输入签名" clearable></el-input>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="职业">
-									<el-select v-model="personalForm.occupation" placeholder="请选择职业" clearable class="w100">
+                  <el-select v-model="personalForm.remark" placeholder="请选择职业" clearable class="w100">
                     <el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
                     <el-option label="生产 / 工艺 / 制造" value="2"></el-option>
                     <el-option label="医疗 / 护理 / 制药" value="3"></el-option>
@@ -109,7 +129,7 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="手机">
-									<el-input v-model="personalForm.phone" placeholder="请输入手机" clearable></el-input>
+                  <el-input v-model="personalForm.mobile" placeholder="请输入手机" clearable></el-input>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
@@ -122,7 +142,7 @@
               </el-col>
               <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                 <el-form-item>
-									<el-button type="primary">
+                  <el-button type="primary"  @click="handleUpload">
                     <el-icon>
                       <ele-Position />
                     </el-icon>
@@ -140,7 +160,7 @@
                 <div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
               </div>
               <div class="personal-edit-safe-item-right">
-								<el-button text type="primary">立即修改</el-button>
+                <el-button text type="primary" @click="handleEditPass">立即修改</el-button>
               </div>
             </div>
           </div>
@@ -184,38 +204,136 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from 'vue';
+import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+import {getPersonalInfo, editPersonal, resetPwdPersonal} from "/@/api/system/personal";
+import type { UploadProps } from 'element-plus'
+import {ElMessage} from "element-plus";
+import {ElMessageBox} from 'element-plus'
+import {getToken} from "/@/utils/gfast"
 import { newsInfoList, recommendList } from './mock';
-
+import {Session} from "/@/utils/storage";
 // 定义接口来定义对象的类型
 interface PersonalState {
+  imageUrl:'',
+  deptName: '';
+  roles: [];
+  personalForm: any;
   newsInfoList: any;
   recommendList: any;
-	personalForm: any;
 }
 
 export default defineComponent({
-	name: 'personal',
+  name: 'personals',
   setup() {
+    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+    const {proxy} = <any>getCurrentInstance();
+    const stores = useUserInfo();
+    const { userInfos } = storeToRefs(stores);
+    const dataParam = reactive({
+      token:getToken(),
+    })
     const state = reactive<PersonalState>({
       newsInfoList,
       recommendList,
+      imageUrl:'',
+      deptName:'',
+      roles:[],
       personalForm: {
-				name: '',
+        nickname: '',
-				email: '',
+        userEmail: '',
-				autograph: '',
+        describe: '',
-				occupation: '',
+        mobile: '',
-				phone: '',
         sex: '',
+        remark:'',
+        avatar:'',
+        lastLoginIp:'',
+        lastLoginTime:''
       },
     });
+
+    // const  handleUpload =
+    const handleUpload = () => {
+      // console.log(state.personalForm)
+      editPersonal(state.personalForm).then((res:any)=>{
+          const userInfo = res.data.userInfo
+          userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
+          // 存储 token 到浏览器缓存
+          Session.set('token', res.data.token);
+          // 存储用户信息到浏览器缓存
+          Session.set('userInfo', userInfo);
+          useUserInfo().setUserInfos();
+          ElMessage.success('已更新');
+      });
+    };
     // 当前时间提示语
     const currentTime = computed(() => {
+
       return formatAxis(new Date());
     });
+    const handleAvatarSuccess: UploadProps['onSuccess'] = (
+        response,
+        uploadFile
+    ) => {
+       if(response.code == 0){
+          state.imageUrl = response.data.path;
+          state.personalForm.avatar = response.data.path;
+         handleUpload();
+       }
+
+    };
+
+    /** 重置密码按钮操作 */
+    const handleEditPass = ()=> {
+      ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+        if(!value || value==''){
+          ElMessage.success('密码不能为空');
+          return
+        }
+        resetPwdPersonal({password:value}).then(() => {
+          ElMessage.success("修改成功，新密码是：" + value);
+        });
+      }).catch(() => {});
+    };
+    // 初始化用户数据
+    const initUserInfo = () => {
+      getPersonalInfo().then((res:any)=>{
+        const user = res.data.user;
+        state.imageUrl = user.avatar;
+        state.personalForm = {
+          nickname:user.userNickname,
+          userEmail:user.userEmail,
+          describe: user.describe,
+          mobile: user.mobile,
+          sex: String(user.sex),
+          remark:user.remark,
+          avatar:user.avatar,
+          lastLoginIp:user.lastLoginIp,
+          lastLoginTime:user.lastLoginTime
+        }
+        state.deptName = res.data.deptName;
+        state.roles = res.data.roles;
+      })
+
+    };
+    // 页面加载时
+    onMounted(() => {
+      initUserInfo();
+    });
     return {
+      proxy,
+      baseURL,
+      userInfos,
       currentTime,
+      handleUpload,
+      handleEditPass,
+      handleAvatarSuccess,
+      dataParam,
       ...toRefs(state),
     };
   },
@@ -223,19 +341,29 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@import '../../theme/mixins/index.scss';
+@import '../../../theme/mixins/index.scss';
 .personal {
   .personal-user {
     height: 130px;
     display: flex;
     align-items: center;
     .personal-user-left {
-			width: 100px;
+      width: 130px;
       height: 130px;
       border-radius: 3px;
       :deep(.el-upload) {
         height: 100%;
       }
+      .avatar-uploader{
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: var(--el-transition-duration-fast);
+        text-align: center;
+        font-size: 20px;
+      }
       .personal-user-left-upload {
         img {
           width: 100%;
@@ -260,6 +388,7 @@ export default defineComponent({
         display: flex;
         align-items: center;
         font-size: 13px;
+        line-height: 26px;
         .personal-item-label {
           color: var(--el-text-color-secondary);
           @include text-ellipsis(1);