From 6f07565840633cd3c06a069b1c940d013293a3e4 Mon Sep 17 00:00:00 2001
From: zhangfh <jyyzzfh@126.com>
Date: Thu, 26 Aug 2021 17:11:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A6=86=E5=B1=B1=E5=A4=A7=E5=B1=8F=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E5=A2=9E=E5=8A=A0=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E4=B8=8A=E4=BC=A0=E5=8F=8A=E7=AE=B4=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/sys/user-add-or-update.vue | 65 +++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/views/modules/sys/user-add-or-update.vue b/src/views/modules/sys/user-add-or-update.vue
index dfd21dd..2b67eb9 100644
--- a/src/views/modules/sys/user-add-or-update.vue
+++ b/src/views/modules/sys/user-add-or-update.vue
@@ -83,6 +83,25 @@
         <el-input v-model="dataForm.mobile"
                   :placeholder="$t('user.mobile')"></el-input>
       </el-form-item>
+      <el-row>
+        <el-form-item label="头像" v-loading="loading" prop="headUrl">
+          <el-upload class="avatar-uploader"
+                     :action="uploadUrl"
+                     :show-file-list="false"
+                     :on-success="handleAvatarActSuccess"
+                     :on-error="handelError"
+                     :before-upload="beforeAvatarUpload">
+            <img v-if="dataForm.headUrl"
+                 :src="dataForm.headUrl"
+                 class="avatar">
+            <i v-else
+               class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-row>
+      <el-form-item label="箴言" prop="proverbs">
+        <el-input v-model="dataForm.proverbs" placeholder="请输入内容"></el-input>
+      </el-form-item>
       <el-form-item prop="staffName"
                     label="关联网格员">
         <div>
@@ -151,6 +170,7 @@ export default {
       deptListVisible: false,
       roleList: [],
       roleIdListDefault: [],
+      uploadUrl: '',
       dataForm: {
         id: '',
         username: '',
@@ -162,6 +182,8 @@ export default {
         gender: 1,
         email: '',
         mobile: '',
+        headUrl: '',
+        proverbs: '',
         roleIdList: [],
         status: 1,
         verifyFlag: '0',
@@ -179,7 +201,8 @@ export default {
         }
       },
       verifyMobileList: [],
-      userTagDictList: []
+      userTagDictList: [],
+      loading: false
     }
   },
   computed: {
@@ -235,6 +258,9 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { validator: validateMobile, trigger: 'blur' }
         ],
+        headUrl: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
         userTagKey: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
@@ -395,7 +421,19 @@ export default {
           })
         }).catch(() => { })
       })
-    }, 1000, { 'leading': true, 'trailing': false })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    handleAvatarActSuccess (res, file) {
+      this.loading = false
+      this.dataForm.headUrl = res.data.url
+      this.btnAble = false
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+      this.btnAble = false
+    },
+    handelError () {
+      this.loading = false
+    }
   }
 }
 </script>
@@ -414,4 +452,27 @@ export default {
     }
   }
 }
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+  text-align: center;
+}
+.avatar {
+  width: 80px;
+  height: 80px;
+  display: block;
+}
 </style>