fix: personal info not update on checkout user

ww
1 parent 5f23a4ae
Showing 2 changed files with 53 additions and 102 deletions
src/layouts/default/header/components/personal/index.vue
src/layouts/default/header/components/user-dropdown/index.vue
--- a/src/layouts/default/header/components/personal/index.vue
View file @4af920f
+++ b/src/layouts/default/header/components/personal/index.vue
View file @4af920f
 <template>
   <BasicModal
     width="80%"
-    :height="compHeight"
     v-bind="$attrs"
     @register="registerModal"
     @ok="handleSubmit"
@@ -19,13 +18,13 @@
               list-type="picture-card"
               class="round !flex justify-center items-center"
               :show-upload-list="false"
-              :customRequest="customUploadqrcodePic"
-              :before-upload="beforeUploadqrcodePic"
+              :customRequest="customUpload"
+              :before-upload="beforeUpload"
             >
               <img
                 class="round"
-                v-if="peresonalPic || headerImg"
-                :src="peresonalPic || headerImg"
+                v-if="personalPicture || headerImg"
+                :src="personalPicture || headerImg"
                 alt="avatar"
               />
               <div v-else>
@@ -38,13 +37,7 @@
           </div>
         </div>
-        <Description
-          class="mt-8 p-4"
-          :column="1"
-          :bordered="true"
-          :data="getPersonalDetailValue"
-          :schema="schema"
-        />
+        <Description @register="registerDesc" class="mt-8 p-4" />
       </div>
       <div class="ml-4 border border-gray-200">
         <div class="text-lg p-2 border border-gray-200"> 基本资料 </div>
@@ -56,21 +49,22 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed } from 'vue';
+  import { defineComponent, ref, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './config';
-  import { Description, DescItem } from '/@/components/Description/index';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
   import { uploadApi, personalPut } from '/@/api/personal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-  import { getAuthCache } from '/@/utils/auth';
   import { Upload } from 'ant-design-vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import headerImg from '/@/assets/images/logo.png';
+  import { getMyInfo } from '/@/api/sys/user';
+  import { UserInfoModel } from '/@/api/sys/model/userModel';
+  import { UserInfo } from '/#/store';
   const schema: DescItem[] = [
     {
@@ -98,46 +92,41 @@
       label: '创建时间：',
     },
   ];
-  const mockData: Recordable = {
-    username: 'test',
-    phoneNumber: 'VB',
-    email: '123',
-    realName: '15695909xxx',
-    accountExpireTime: '190848757@qq.com',
-    createTime: '厦门市思明区',
-  };
+
   export default defineComponent({
     name: 'Index',
     components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
-    emits: ['refreshPersonl', 'register'],
+    emits: ['refreshPersonal', 'register'],
     setup(_, { emit }) {
       const loading = ref(false);
-      const userInfo = getAuthCache(USER_INFO_KEY);
       const { createMessage } = useMessage();
-      const getPersonalValue: any = ref({});
-      const getPersonalDetailValue: any = ref({});
-      const updatePersonalData: any = ref({});
-      const getBackendV: any = ref({});
-      const getData: any = ref({});
-      const updataPersonlData: any = ref({});
+
       const userStore = useUserStore();
-      const peresonalPic = ref();
+      const personalPicture = ref<string>();
+
+      const personalInfo = ref<UserInfoModel>();
-      const customUploadqrcodePic = async ({ file }) => {
-        if (beforeUploadqrcodePic(file)) {
-          peresonalPic.value = '';
+      const [registerDesc, { setDescProps }] = useDescription({
+        schema,
+        column: 1,
+        bordered: true,
+      });
+
+      const customUpload = async ({ file }) => {
+        if (beforeUpload(file)) {
+          personalPicture.value = '';
           loading.value = true;
           const formData = new FormData();
           formData.append('file', file);
           const response = await uploadApi(formData);
           if (response.fileStaticUri) {
-            peresonalPic.value = response.fileStaticUri;
+            personalPicture.value = response.fileStaticUri;
             loading.value = false;
           }
         }
       };
-      const beforeUploadqrcodePic = (file: FileItem) => {
+      const beforeUpload = (file: FileItem) => {
         const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
         if (!isJpgOrPng) {
           createMessage.error('只能上传图片文件!');
@@ -153,79 +142,41 @@
         showActionButtonGroup: false,
         schemas: formSchema,
       });
-      const refreshCacheGetData = () => {
-        const getItem = window.localStorage.getItem('updateUserInfo');
-        const newItem = JSON.parse(getItem);
-        updataPersonlData.value = newItem;
-      };
+
       const [registerModal, { closeModal }] = useModalInner(async () => {
-        refreshCacheGetData();
-        const userInfo = userStore.getUserInfo;
-        try {
-          if (updataPersonlData.value != null) {
-            (peresonalPic.value = updataPersonlData.value.avatar),
-              setFieldsValue({
-                realName: updataPersonlData.value.realName,
-                phoneNumber: updataPersonlData.value.phoneNumber,
-                email: updataPersonlData.value.email,
-              });
-            getPersonalDetailValue.value = userInfo;
-          } else {
-            if (userInfo) {
-              getPersonalDetailValue.value = userInfo;
-              peresonalPic.value = userInfo.avatar;
-              setFieldsValue({
-                realName: userInfo.realName,
-                phoneNumber: userInfo.phoneNumber,
-                email: userInfo.email,
-              });
-            }
-          }
-        } catch (e) {
-          return e;
-        }
-        if (Object.keys(updatePersonalData.value).length != 0) {
-          getPersonalDetailValue.value = updatePersonalData.value;
-          peresonalPic.value = updatePersonalData.value.avatar;
-          setFieldsValue({
-            realName: updatePersonalData.value.realName,
-            phoneNumber: updatePersonalData.value.phoneNumber,
-            email: updatePersonalData.value.email,
-          });
-        }
+        const info = await getMyInfo();
+        personalInfo.value = info;
+        personalPicture.value = info.avatar;
+        setFieldsValue(info);
+        setDescProps({ data: info });
       });
+
       const handleSubmit = async () => {
-        const getUserInfo = await userInfo;
-        getPersonalValue.value = await validate();
-        getPersonalValue.value.id = getUserInfo.userId;
-        getPersonalValue.value.username = getBackendV.value.username;
-        getPersonalValue.value.avatar = peresonalPic.value;
-        getData.value = await personalPut(getPersonalValue.value);
-        console.log(getData.value.realName);
-        userStore.setUserInfo(getData.value);
-        updatePersonalData.value = getData.value;
+        const value = await validate();
+        const userInfo = userStore.getUserInfo;
+        const record = await personalPut({
+          ...value,
+          id: userInfo.userId,
+          avatar: unref(personalPicture),
+        });
+
+        userStore.setUserInfo(record as unknown as UserInfo);
         createMessage.success('修改成功');
-        const setUpdateUserInfo = JSON.stringify(getData.value);
-        window.localStorage.setItem('updateUserInfo', setUpdateUserInfo);
         closeModal();
         resetFields();
-        emit('refreshPersonl', updatePersonalData.value);
+        emit('refreshPersonal', record);
       };
-      const compHeight = computed(() => {
-        return 1000;
-      });
+
       return {
-        peresonalPic,
-        beforeUploadqrcodePic,
-        customUploadqrcodePic,
-        compHeight,
+        personalInfo,
+        registerDesc,
+        personalPicture,
+        beforeUpload,
+        customUpload,
         handleSubmit,
-        getPersonalDetailValue,
-        schema,
         registerModal,
         registerForm,
         loading,
-        mockData,
         headerImg,
       };
     },
--- a/src/layouts/default/header/components/user-dropdown/index.vue
View file @4af920f
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
View file @4af920f
@@ -53,7 +53,7 @@
   </Dropdown>
   <LockAction @register="register" />
   <PersonalChild
-    @refreshPersonl="refreshPersonlFunc"
+    @refreshPersonal="refreshPersonalFunc"
     ref="personalRef"
     @register="registerPersonal"
   />
@@ -156,7 +156,7 @@
       };
       refreshCacheGetData();
-      const refreshPersonlFunc = (v) => {
+      const refreshPersonalFunc = (v) => {
         refreshPersonlData.avatar = v.avatar;
         refreshPersonlData.realName = v.realName;
       };
@@ -168,7 +168,7 @@
       return {
         updataPersonlData,
         refreshPersonlData,
-        refreshPersonlFunc,
+        refreshPersonalFunc,
         personalRef,
         registerPersonal,
         openPersonalFunc,