From e1a3d536c352eb9fd756d6d672d2dc8be8d7148d Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Thu, 5 Mar 2020 15:29:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=8A=E4=BC=A0=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/api/system/user.js                     |  2 +-
 vue/src/assets/styles/index.scss               | 10 ++++++++++
 vue/src/utils/file.js                          |  2 +-
 vue/src/views/system/user/index.vue            | 13 ++++++++++---
 vue/src/views/userCenter/components/Avatar.vue | 10 +++-------
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/vue/src/api/system/user.js b/vue/src/api/system/user.js
index ae9457a..2d2cd88 100644
--- a/vue/src/api/system/user.js
+++ b/vue/src/api/system/user.js
@@ -39,7 +39,7 @@ export function updateUserPwd(data) {
 }
 
 export function updateAvatar(key) {
-    return request.get(baseUrl + '/updateAvatar?key=' + encodeURIComponent(key)).then(({data}) => data)
+    return request.get(baseUrl + '/updateAvatar?key=' + encodeURIComponent(key)).then(({data}) => ({...data, key}))
 }
 
 export function validate(pwd) {
diff --git a/vue/src/assets/styles/index.scss b/vue/src/assets/styles/index.scss
index eb36973..a573051 100644
--- a/vue/src/assets/styles/index.scss
+++ b/vue/src/assets/styles/index.scss
@@ -96,6 +96,16 @@ a:hover {
     margin-top: 10px;
 }
 
+.table-image {
+    cursor: pointer;
+    display: inline-block;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    vertical-align: middle;
+    overflow: hidden;
+}
+
 .card-container {
     position: relative;
 
diff --git a/vue/src/utils/file.js b/vue/src/utils/file.js
index d4a7038..084b8d0 100644
--- a/vue/src/utils/file.js
+++ b/vue/src/utils/file.js
@@ -41,7 +41,7 @@ export function upload(blob, filename = '快照.png') {
             param.append('file', blob, filename)
             return request.post(attachmentUploadUrl, param, {...formConfig, baseUrl: ''})
         })
-        .then(data => data.key)
+        .then(({data}) => data.key)
 }
 
 //自动补全附件链接前缀
diff --git a/vue/src/views/system/user/index.vue b/vue/src/views/system/user/index.vue
index e95ddc0..4815494 100644
--- a/vue/src/views/system/user/index.vue
+++ b/vue/src/views/system/user/index.vue
@@ -44,9 +44,13 @@
             >
                 <el-table-column align="center" label="#" type="index" width="80"/>
                 <el-table-column align="center" label="头像" width="100">
-                    <template v-slot="{row}">
-                        <el-avatar :size="40" :src="row.avatar" v-if="row.avatar"/>
-                    </template>
+                    <img
+                            slot-scope="{row}"
+                            v-if="row.avatar"
+                            :src="row.avatar"
+                            class="table-image"
+                            @click.stop="previewAvatar(row.avatar)"
+                    >
                 </el-table-column>
                 <el-table-column align="center" label="用户名" prop="name" show-overflow-tooltip/>
                 <el-table-column align="center" label="角 色" prop="role_name" show-overflow-tooltip/>
@@ -206,6 +210,9 @@
                 elSuccess(msg)
                 this.editDialog = false
                 this.search()
+            },
+            previewAvatar(src) {
+                this.$image({index: 0, urlList: [src]})
             }
         }
     }
diff --git a/vue/src/views/userCenter/components/Avatar.vue b/vue/src/views/userCenter/components/Avatar.vue
index b7b1cf3..93593ae 100644
--- a/vue/src/views/userCenter/components/Avatar.vue
+++ b/vue/src/views/userCenter/components/Avatar.vue
@@ -78,15 +78,11 @@
                 if (!this.img) return elError('请先上传图片')
                 if (this.loading) return
                 this.loading = true
-                let url
                 this.$refs.cropper.getCropBlob(data => {
                     upload(new Blob([data]), this.name)
-                        .then(key => {
-                            url = key
-                            return updateAvatar(key)
-                        })
-                        .then(({msg}) => {
-                            this.$store.commit('user/SET_AVATAR', autoCompleteUrl(url))
+                        .then(key => updateAvatar(key))
+                        .then(({key, msg}) => {
+                            this.$store.commit('user/SET_AVATAR', autoCompleteUrl(key))
                             this.$store.dispatch('user/refresh')
                             elSuccess(msg)
                         })