From aa22dd60917049935897e8ab80d44161b8ba23d0 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Mon, 20 Feb 2023 01:05:42 +0800
Subject: [PATCH] =?UTF-8?q?:rocket:=20=E4=BC=98=E5=8C=96=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/userInfo/index.vue | 58 ++++++++++++++----------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/views/system/user/userInfo/index.vue b/src/views/system/user/userInfo/index.vue
index e73df39..abde766 100644
--- a/src/views/system/user/userInfo/index.vue
+++ b/src/views/system/user/userInfo/index.vue
@@ -79,8 +79,7 @@
           <BasicForm v-show="state.currentCardKey === 'baseInfo'" @register="registerForm"/>
           <AForm v-show="state.currentCardKey === 'uploadAvatar'"
                  ref="formElRef"
-                 :labelCol="{ style: { width: '120px' } }"
-                 :wrapperCol="{ style: { width: '100%' } }"
+                 class="upload-avatar-form"
                  :model="state.userInfo"
                  :scrollToFirstError="true"
                  @keypress.enter="handleSubmit"
@@ -90,8 +89,9 @@
                        class="avatar-uploader"
                        accept="image/*"
                        :multiple="false"
+                       :customRequest="handleUploadAvatar"
                        :show-upload-list="false"
-                       :before-upload="beforeUpload"
+                       :before-upload="handleBeforeUpload"
               >
                 <img v-if="state.imageUrl" :src="state.imageUrl">
                 <div v-else>
@@ -101,8 +101,11 @@
                 </div>
               </AUpload>
             </AFormItem>
-            <AFormItem>
-              <a-button type="primary">保存</a-button>
+            <AFormItem :wrapperCol="{ style: { 'text-align': 'left' } }">
+              <a-button preIcon="fa-regular:save"
+                        :loading="state.uploadAvatarBtnLoading"
+                        type="primary"
+              >保存</a-button>
             </AFormItem>
           </AForm>
         </ACard>
@@ -130,6 +133,7 @@
   interface InfoState {
     currentCardKey: string;
     baseInfoBtnLoading: boolean;
+    uploadAvatarBtnLoading: boolean;
     uploadAvatarLoading: boolean;
     userInfo: User | any;
     imageUrl?: string;
@@ -152,6 +156,7 @@
     currentCardKey: 'baseInfo',
     baseInfoBtnLoading: false,
     uploadAvatarLoading: false,
+    uploadAvatarBtnLoading: false,
     userInfo: undefined,
     imageUrl: undefined,
     tabList: [
@@ -217,31 +222,30 @@
     'font-size': '14px'
   }));
 
-  const beforeUpload = async (file: File) => {
+  function handleBeforeUpload (file: File) {
     const isJpgOrPng = file.type?.includes('image/'),
           isLt2M = file.size / 1024 / 1024 < 10;
 
     !isJpgOrPng &&  createMessage.error('您只能上传 image/* 格式的文件!');
     !isLt2M && createMessage.error('图片必须小于 10MB!');
+    return isJpgOrPng && isLt2M;
+  }
 
-    // 开始上传图片
-    if (isJpgOrPng && isLt2M) {
-      try {
-        state.uploadAvatarLoading = true;
-        const { data } = await commonUpload({
-          file: file,
-          name: 'file',
-        }, (progressEvent: ProgressEvent) => {
-          const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-          if (complete >= 100) state.uploadAvatarLoading = false;
-        });
-        state.imageUrl = apiUrl + data.url;
-      } finally {
-        state.uploadAvatarLoading = false;
-      }
+  async function handleUploadAvatar(file) {
+    try {
+      state.uploadAvatarLoading = true;
+      const { data } = await commonUpload({
+        file: file.file,
+        name: 'file',
+      }, (progressEvent: ProgressEvent) => {
+        const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+        if (complete >= 100) state.uploadAvatarLoading = false;
+      });
+      state.imageUrl = apiUrl + data.url;
+    } finally {
+      state.uploadAvatarLoading = false;
     }
-    return false;
-  };
+  }
 
 </script>
 
@@ -284,14 +288,18 @@
   margin: 10px 10px 10px 0px;
 
   ::v-deep(.avatar-uploader) > .ant-upload {
-    width: 128px;
-    height: 128px;
+    width: 180px;
+    height: 180px;
   }
 
   ::v-deep(.ant-upload-select-picture-card .ant-upload-text) {
     margin-top: 8px;
     color: #666;
   }
+
+  ::v-deep(.upload-avatar-form) > .ant-row {
+    margin-bottom: 0px;
+  }
 }
 
 </style>