From f0bf63e43f45283d378be07cee78c2f3ac7b1c03 Mon Sep 17 00:00:00 2001
From: quantulr <35954003+quantulr@users.noreply.github.com>
Date: Mon, 31 Jul 2023 09:12:25 +0800
Subject: [PATCH] bugfix

---
 src/store/modules/user.js                    |  4 +-
 src/views/system/user/profile/userAvatar.vue | 75 ++++++++++++--------
 2 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index a87c437..bc56801 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -59,9 +59,9 @@ const useUserStore = defineStore("user", {
           .then((res) => {
             const user = res.user;
             const avatar =
-              user.avatar == "" || user.avatar == null
+             /* user.avatar == "" || user.avatar == null
                 ? defAva
-                : import.meta.env.VITE_APP_BASE_API + user.avatar;
+                : import.meta.env.VITE_APP_BASE_API + */user.avatar;
 
             if (res.roles && res.roles.length > 0) {
               // 验证返回的roles是否是一个非空数组
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
index 7050cf6..362ae8a 100644
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/src/views/system/user/profile/userAvatar.vue
@@ -1,47 +1,49 @@
 <template>
   <div class="user-info-head" @click="editCropper()">
-    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <img :src="options.img" class="img-circle img-lg" title="点击上传头像"/>
   </div>
   <el-dialog
-    :title="title"
-    v-model="open"
-    width="800px"
-    append-to-body
-    @opened="modalOpened"
-    @close="closeDialog"
+      v-model="open"
+      :title="title"
+      append-to-body
+      width="800px"
+      @close="closeDialog"
+      @opened="modalOpened"
   >
     <el-row>
-      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+      <el-col :md="12" :style="{ height: '350px' }" :xs="24">
         <vue-cropper
-          ref="cropper"
-          :img="options.img"
-          :info="true"
-          :autoCrop="options.autoCrop"
-          :autoCropWidth="options.autoCropWidth"
-          :autoCropHeight="options.autoCropHeight"
-          :fixedBox="options.fixedBox"
-          @realTime="realTime"
-          v-if="visible"
+            v-if="visible"
+            ref="cropper"
+            :autoCrop="options.autoCrop"
+            :autoCropHeight="options.autoCropHeight"
+            :autoCropWidth="options.autoCropWidth"
+            :fixedBox="options.fixedBox"
+            :img="options.img"
+            :info="true"
+            @realTime="realTime"
         />
       </el-col>
-      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+      <el-col :md="12" :style="{ height: '350px' }" :xs="24">
         <div class="avatar-upload-preview">
-          <img :src="options.previews.url" :style="options.previews.img" />
+          <img :src="options.previews.url" :style="options.previews.img"/>
         </div>
       </el-col>
     </el-row>
-    <br />
+    <br/>
     <el-row>
       <el-col :lg="2" :md="2">
         <el-upload
-          action="#"
-          :http-request="requestUpload"
-          :show-file-list="false"
-          :before-upload="beforeUpload"
+            :before-upload="beforeUpload"
+            :http-request="requestUpload"
+            :show-file-list="false"
+            action="#"
         >
           <el-button>
             选择
-            <el-icon class="el-icon--right"><Upload /></el-icon>
+            <el-icon class="el-icon--right">
+              <Upload/>
+            </el-icon>
           </el-button>
         </el-upload>
       </el-col>
@@ -66,16 +68,17 @@
 
 <script setup>
 import "vue-cropper/dist/index.css";
-import { VueCropper } from "vue-cropper";
-import { uploadAvatar } from "@/api/system/user";
+import {VueCropper} from "vue-cropper";
+import {uploadAvatar} from "@/api/system/user";
 import useUserStore from "@/store/modules/user";
 
 const userStore = useUserStore();
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 
 const open = ref(false);
 const visible = ref(false);
 const title = ref("修改头像");
+const emit = defineEmits(["uploaded"])
 
 //图片裁剪数据
 const options = reactive({
@@ -91,30 +94,37 @@ const options = reactive({
 function editCropper() {
   open.value = true;
 }
+
 /** 打开弹出层结束时的回调 */
 function modalOpened() {
   visible.value = true;
 }
+
 /** 覆盖默认上传行为 */
-function requestUpload() {}
+function requestUpload() {
+}
+
 /** 向左旋转 */
 function rotateLeft() {
   proxy.$refs.cropper.rotateLeft();
 }
+
 /** 向右旋转 */
 function rotateRight() {
   proxy.$refs.cropper.rotateRight();
 }
+
 /** 图片缩放 */
 function changeScale(num) {
   num = num || 1;
   proxy.$refs.cropper.changeScale(num);
 }
+
 /** 上传预处理 */
 function beforeUpload(file) {
   if (file.type.indexOf("image/") == -1) {
     proxy.$modal.msgError(
-      "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
+        "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
     );
   } else {
     const reader = new FileReader();
@@ -124,24 +134,29 @@ function beforeUpload(file) {
     };
   }
 }
+
 /** 上传图片 */
 function uploadImg() {
   proxy.$refs.cropper.getCropBlob((data) => {
     let formData = new FormData();
     formData.append("avatarfile", data);
     uploadAvatar(formData).then((response) => {
+      console.log(response)
       open.value = false;
       options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
       userStore.avatar = options.img;
       proxy.$modal.msgSuccess("修改成功");
       visible.value = false;
+      emit("uploaded")
     });
   });
 }
+
 /** 实时预览 */
 function realTime(data) {
   options.previews = data;
 }
+
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar;