增加工作台

src/views/modules/sys/user-add-or-update.vue

@@ -84,6 +84,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>
@@ -152,6 +171,7 @@ export default {
       deptListVisible: false,
       roleList: [],
       roleIdListDefault: [],
+      uploadUrl: '',
       dataForm: {
         id: '',
         username: '',
@@ -163,6 +183,8 @@ export default {
         gender: 1,
         email: '',
         mobile: '',
+        headUrl: '',
+        proverbs: '',
         roleIdList: [],
         status: 1,
         verifyFlag: '0',
@@ -180,7 +202,8 @@ export default {
         }
       },
       verifyMobileList: [],
-      userTagDictList: []
+      userTagDictList: [],
+      loading: false
     }
   },
   computed: {
@@ -236,6 +259,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' }
         ]
@@ -396,7 +422,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>
@@ -420,4 +458,27 @@ export default {
   height: 600px;
   overflow: auto;
 }
+.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>