用户管理模块添加用户照片（头像）上传功能，名册详情显示照片

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java

@@ -1,20 +1,17 @@
 package com.ruoyi.web.controller.system;
 
+import java.io.IOException;
 import java.util.List;
 import java.util.stream.Collectors;
 import javax.servlet.http.HttpServletResponse;
+
+import com.ruoyi.common.config.RuoYiConfig;
+import com.ruoyi.common.utils.file.FileUploadUtils;
 import org.apache.commons.lang3.ArrayUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 import com.ruoyi.common.annotation.Log;
 import com.ruoyi.common.core.controller.BaseController;
@@ -53,6 +50,24 @@ public class SysUserController extends BaseController
     @Autowired
     private ISysPostService postService;
 
+    /**
+     * 证件照上传
+     */
+    @PostMapping("/uploadPhoto")
+    public AjaxResult uploadFile(@RequestParam("file") MultipartFile file, String pType, String pId) throws IOException
+    {
+        if (!file.isEmpty())
+        {
+            String url = FileUploadUtils.upload(RuoYiConfig.getFilePath("/"+ pType), file);
+            SysUser user = userService.selectUserById(Long.parseLong(pId));
+            user.setPhoto(url);
+            user.setAvatar(url);
+            userService.updateUser(user);
+            return AjaxResult.success();
+        }
+        return AjaxResult.error("上传失败，请联系管理员");
+    }
+
     /**
      * 获取用户列表（不分页）
      */

ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysUser.java

@@ -92,6 +92,9 @@ public class SysUser extends BaseEntity
     /** 部门树选择项是否关联显示（0：父子不互相关联显示 1：父子互相关联显示 ） */
     private boolean isDeptCheckStrictly;
 
+    /** 照片 */
+    private String photo;
+
     public boolean isDeptCheckStrictly() {
         return isDeptCheckStrictly;
     }
@@ -105,6 +108,14 @@ public class SysUser extends BaseEntity
 
     }
 
+    public String getPhoto() {
+        return photo;
+    }
+
+    public void setPhoto(String photo) {
+        this.photo = photo;
+    }
+
     public SysUser(Long userId)
     {
         this.userId = userId;

ruoyi-system/src/main/java/com/ruoyi/branch/domain/TBranchMember.java

@@ -156,6 +156,17 @@ public class TBranchMember extends BaseEntity
     /** 申请状态（1已审核 0未审核） */
     private String apStatus;
 
+    /** 照片 */
+    private String photo;
+
+    public String getPhoto() {
+        return photo;
+    }
+
+    public void setPhoto(String photo) {
+        this.photo = photo;
+    }
+
     public String getApStatus() {
         return apStatus;
     }

ruoyi-system/src/main/resources/mapper/branch/TBranchMemberMapper.xml

@@ -40,6 +40,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="apStatus"    column="ap_status"    />
         <result property="apNo"    column="ap_no"    />
         <result property="processId"    column="process_id"    />
+        <result property="photo"    column="photo"    />
         <collection  property="roles"   javaType="java.util.List" resultMap="RoleResult" />
         <collection  property="posts"   javaType="java.util.List" resultMap="PostResult" />
     </resultMap>
@@ -63,7 +64,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 
     <sql id="selectTBranchMemberVo">
         select u.member_id, u.new_dept_id, u.old_dept_id, u.ap_no, u.process_id, u.ap_status, u.user_id, u.staff_id, u.ethnic, u.member_type, u.birthday, u.education_level, u.work_join_time, u.work_entry_time, u.party_entry_time, u.labour_entry_time, u.labour_leave_time, u.entry_time, u.leave_time, u.is_league, u.apply_time, u.form_create_time, u.current_mentor, u.plan_develop_duration, u.is_trained, u.remarks, u.del_flag, u.create_by, u.create_time, u.update_by, u.update_time, u.dept_id,
-        us.NICK_NAME, us.SEX, us.PHONENUMBER,
+        us.NICK_NAME, us.SEX, us.PHONENUMBER, us.PHOTO,
         r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status,
         p.post_id, p.post_code, p.post_name, p.post_sort, p.status as post_status
         from t_branch_member u

ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml

@@ -23,6 +23,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="updateBy"     column="update_by"    />
         <result property="updateTime"   column="update_time"  />
         <result property="remark"       column="remark"       />
+        <result property="photo"       column="photo"       />
         <association property="dept"    column="dept_id" javaType="SysDept" resultMap="deptResult" />
         <collection  property="roles"   javaType="java.util.List"           resultMap="RoleResult" />
     </resultMap>
@@ -47,7 +48,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </resultMap>
 	
 	<sql id="selectUserVo">
-        select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark, 
+        select u.user_id, u.photo, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark,
         d.dept_id, d.parent_id, d.ancestors, d.dept_name, d.order_num, d.leader, d.status as dept_status,
         r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status
         from sys_user u
@@ -193,6 +194,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  			<if test="loginDate != null">login_date = #{loginDate},</if>
  			<if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
  			<if test="remark != null">remark = #{remark},</if>
+ 			<if test="photo != null">photo = #{photo},</if>
  			update_time = sysdate
  		</set>
  		where user_id = #{userId}

ruoyi-ui/src/views/branch/zbjs/dymc/index.vue

@@ -288,6 +288,26 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="照片" prop="photo" v-if="form.userId">
+              <el-upload
+                ref="photo"
+                :headers="photo.headers"
+                :action="photo.url + '?pType=' + photo.pType + '&pId=' + photo.pId"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                list-type="picture-card">
+                <img v-if="photoUrl" :src="photoUrl" class="avatar">
+                <i v-else class="el-icon-plus "></i>
+              </el-upload>
+
+              <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -354,6 +374,7 @@
 
 <script>
   import { applyMember, listMember, getMember, delMember, addMember, updateMember, exportMember, importTemplate} from "@/api/branch/member";
+  import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
   import { treeselect } from "@/api/system/dept";
   import { getToken } from "@/utils/auth";
   import Treeselect from "@riophae/vue-treeselect";
@@ -366,6 +387,22 @@
     components: { Treeselect },
     data() {
       return {
+        // 人员照片参数
+        photo: {
+          file: "",
+          // 报告附件上传位置编号
+          ids: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+          pType: 'userPhoto',
+          pId: null
+        },
+        //照片回显
+        photoUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false,
         // 遮罩层
         loading: true,
         // 选中数组
@@ -494,6 +531,24 @@
       });
     },
     methods: {
+      handleAvatarProgress(event, file, fileList) {
+        this.photo.file = file;
+        this.photoUrl = file;
+      },
+      handleAvatarSuccess(res, file, fileList) {
+        // this.photoUrl =  URL.createObjectURL(file.raw);
+        getUser(this.photo.pId).then(response => {
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
+        });
+        this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
       /** 查询部门列表 */
       getDeptList() {
         listDept().then(response => {
@@ -526,7 +581,6 @@
         this.queryParams.memberType = 2;
         listMember(this.queryParams).then(response => {
           this.memberList = response.rows;
-          console.log(response)
           for (let i = 0; i < this.memberList.length; i++) {
             let posts = Array.from(this.memberList[i].posts);
             let roles = Array.from(this.memberList[i].roles);
@@ -645,6 +699,7 @@
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
+        this.photoUrl = null;
         this.form.memberType = "2";
         this.open = true;
         this.title = "添加党员信息";
@@ -663,12 +718,17 @@
       /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
+        this.photoUrl = null;
         const memberId = row.memberId || this.ids
         getMember(memberId).then(response => {
           this.form = response.data;
           this.open = true;
           this.title = "修改党员信息";
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
         });
+        this.photo.pId = row.userId;
       },
       /** 提交按钮 */
       submitForm() {
@@ -681,7 +741,6 @@
                 this.getList();
               });
             } else {
-              console.log(this.form);
               addMember(this.form).then(response => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;
@@ -770,6 +829,28 @@
   textarea {
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   }
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
 </style>
 
 <style scoped lang="scss">

ruoyi-ui/src/views/branch/zbjs/fzdxmc/index.vue

@@ -400,6 +400,26 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="照片" prop="photo" v-if="form.userId">
+              <el-upload
+                ref="photo"
+                :headers="photo.headers"
+                :action="photo.url + '?pType=' + photo.pType + '&pId=' + photo.pId"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                list-type="picture-card">
+                <img v-if="photoUrl" :src="photoUrl" class="avatar">
+                <i v-else class="el-icon-plus "></i>
+              </el-upload>
+
+              <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -441,6 +461,7 @@
 
 <script>
   import { listMember, getMember, delMember, addMember, updateMember, exportMember, importTemplate} from "@/api/branch/member";
+  import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
   import { treeselect } from "@/api/system/dept";
   import { getToken } from "@/utils/auth";
   import Treeselect from "@riophae/vue-treeselect";
@@ -453,6 +474,22 @@
     components: { Treeselect },
     data() {
       return {
+        // 人员照片参数
+        photo: {
+          file: "",
+          // 报告附件上传位置编号
+          ids: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+          pType: 'userPhoto',
+          pId: null
+        },
+        //照片回显
+        photoUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false,
         // 遮罩层
         loading: true,
         // 选中数组
@@ -573,6 +610,24 @@
       });
     },
     methods: {
+      handleAvatarProgress(event, file, fileList) {
+        this.photo.file = file;
+        this.photoUrl = file;
+      },
+      handleAvatarSuccess(res, file, fileList) {
+        // this.photoUrl =  URL.createObjectURL(file.raw);
+        getUser(this.photo.pId).then(response => {
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
+        });
+        this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
       /** 查询部门列表 */
       getDeptList() {
         listDept().then(response => {
@@ -615,7 +670,6 @@
           this.queryParams.memberType = 4;
           listMember(this.queryParams).then(response => {
             this.memberList = response.rows;
-            console.log(response)
             for (let i = 0; i < this.memberList.length; i++) {
               let posts = Array.from(this.memberList[i].posts);
               let roles = Array.from(this.memberList[i].roles);
@@ -746,6 +800,7 @@
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
+        this.photoUrl = null;
         this.form.memberType = "4";
         this.open = true;
         this.title = "添加发展对象信息";
@@ -753,6 +808,7 @@
       /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
+        this.photoUrl = null;
         const memberId = row.memberId || this.ids
         getMember(memberId).then(response => {
           this.form = response.data;
@@ -761,7 +817,11 @@
           }
           this.open = true;
           this.title = "修改发展对象信息";
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
         });
+        this.photo.pId = row.userId;
       },
       /** 提交按钮 */
       submitForm() {
@@ -853,4 +913,26 @@
   textarea {
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   }
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
 </style>

ruoyi-ui/src/views/branch/zbjs/sqrjjfzmc/index.vue

@@ -400,6 +400,26 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="照片" prop="photo" v-if="form.userId">
+              <el-upload
+                ref="photo"
+                :headers="photo.headers"
+                :action="photo.url + '?pType=' + photo.pType + '&pId=' + photo.pId"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                list-type="picture-card">
+                <img v-if="photoUrl" :src="photoUrl" class="avatar">
+                <i v-else class="el-icon-plus "></i>
+              </el-upload>
+
+              <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -441,6 +461,7 @@
 
 <script>
   import { listMember, getMember, delMember, addMember, updateMember, exportMember, importTemplate} from "@/api/branch/member";
+  import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
   import { treeselect } from "@/api/system/dept";
   import { getToken } from "@/utils/auth";
   import Treeselect from "@riophae/vue-treeselect";
@@ -453,6 +474,22 @@
     components: { Treeselect },
     data() {
       return {
+        // 人员照片参数
+        photo: {
+          file: "",
+          // 报告附件上传位置编号
+          ids: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+          pType: 'userPhoto',
+          pId: null
+        },
+        //照片回显
+        photoUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false,
         // 遮罩层
         loading: true,
         // 选中数组
@@ -573,6 +610,24 @@
       });
     },
     methods: {
+      handleAvatarProgress(event, file, fileList) {
+        this.photo.file = file;
+        this.photoUrl = file;
+      },
+      handleAvatarSuccess(res, file, fileList) {
+        // this.photoUrl =  URL.createObjectURL(file.raw);
+        getUser(this.photo.pId).then(response => {
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
+        });
+        this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
       /** 查询部门列表 */
       getDeptList() {
         listDept().then(response => {
@@ -745,6 +800,7 @@
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
+        this.photoUrl = null;
         this.form.memberType = "1";
         this.open = true;
         this.title = "添加积极分子信息";
@@ -752,6 +808,7 @@
       /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
+        this.photoUrl = null;
         const memberId = row.memberId || this.ids
         getMember(memberId).then(response => {
           this.form = response.data;
@@ -760,7 +817,11 @@
           }
           this.open = true;
           this.title = "修改积极分子信息";
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
         });
+        this.photo.pId = row.userId;
       },
       /** 提交按钮 */
       submitForm() {
@@ -852,4 +913,26 @@
   textarea {
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   }
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
 </style>

ruoyi-ui/src/views/branch/zbjs/wyhmc/index.vue

@@ -276,6 +276,26 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="照片" prop="photo" v-if="form.userId">
+              <el-upload
+                ref="photo"
+                :headers="photo.headers"
+                :action="photo.url + '?pType=' + photo.pType + '&pId=' + photo.pId"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                list-type="picture-card">
+                <img v-if="photoUrl" :src="photoUrl" class="avatar">
+                <i v-else class="el-icon-plus "></i>
+              </el-upload>
+
+              <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -317,6 +337,7 @@
 
 <script>
   import { listMember, getMember, delMember, addMember, updateMember, exportMember, importTemplate} from "@/api/branch/member";
+  import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
   import { treeselect } from "@/api/system/dept";
   import { getToken } from "@/utils/auth";
   import Treeselect from "@riophae/vue-treeselect";
@@ -329,6 +350,22 @@
     components: { Treeselect },
     data() {
       return {
+        // 人员照片参数
+        photo: {
+          file: "",
+          // 报告附件上传位置编号
+          ids: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+          pType: 'userPhoto',
+          pId: null
+        },
+        //照片回显
+        photoUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false,
         // 遮罩层
         loading: true,
         // 选中数组
@@ -450,6 +487,24 @@
       });
     },
     methods: {
+      handleAvatarProgress(event, file, fileList) {
+        this.photo.file = file;
+        this.photoUrl = file;
+      },
+      handleAvatarSuccess(res, file, fileList) {
+        // this.photoUrl =  URL.createObjectURL(file.raw);
+        getUser(this.photo.pId).then(response => {
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
+        });
+        this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
       /** 查询部门列表 */
       getDeptList() {
         listDept().then(response => {
@@ -600,6 +655,7 @@
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
+        this.photoUrl = null;
         this.form.memberType = "3";
         this.open = true;
         this.title = "添加委员信息";
@@ -607,12 +663,17 @@
       /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
+        this.photoUrl = null;
         const memberId = row.memberId || this.ids
         getMember(memberId).then(response => {
           this.form = response.data;
           this.open = true;
           this.title = "修改委员信息";
+          if (response.data.photo) {
+            this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          }
         });
+        this.photo.pId = row.userId;
       },
       /** 提交按钮 */
       submitForm() {
@@ -625,7 +686,6 @@
                 this.getList();
               });
             } else {
-              console.log(this.form);
               addMember(this.form).then(response => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;
@@ -702,4 +762,26 @@
   textarea {
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   }
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
 </style>

ruoyi-ui/src/views/system/user/index.vue

@@ -140,7 +140,7 @@
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
           <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
           <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
           <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
           <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
@@ -207,8 +207,8 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            <el-form-item label="姓名" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入姓名" maxlength="30" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -301,6 +301,26 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="照片" prop="photo" v-if="form.userId">
+              <el-upload
+                ref="photo"
+                :headers="photo.headers"
+                :action="photo.url + '?pType=' + photo.pType + '&pId=' + photo.pId"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                list-type="picture-card">
+                <img v-if="photoUrl" :src="photoUrl" class="avatar">
+                <i v-else class="el-icon-plus "></i>
+              </el-upload>
+
+              <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+                <img width="100%" :src="dialogImageUrl" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -352,6 +372,22 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      // 人员照片参数
+      photo: {
+        file: "",
+        // 报告附件上传位置编号
+        ids: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+        pType: 'userPhoto',
+        pId: null
+      },
+      //照片回显
+      photoUrl: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -416,7 +452,7 @@ export default {
       columns: [
         { key: 0, label: `用户编号`, visible: true },
         { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
+        { key: 2, label: `姓名`, visible: true },
         { key: 3, label: `部门`, visible: true },
         { key: 4, label: `手机号码`, visible: true },
         { key: 5, label: `状态`, visible: true },
@@ -429,7 +465,7 @@ export default {
           { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
         ],
         nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+          { required: true, message: "姓名不能为空", trigger: "blur" }
         ],
         password: [
           { required: true, message: "用户密码不能为空", trigger: "blur" },
@@ -466,6 +502,24 @@ export default {
     });
   },
   methods: {
+    handleAvatarProgress(event, file, fileList) {
+      this.photo.file = file;
+      this.photoUrl = file;
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      // this.photoUrl =  URL.createObjectURL(file.raw);
+      getUser(this.photo.pId).then(response => {
+        if (response.data.photo) {
+          this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+        }
+      });
+      this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
     /** 查询用户列表 */
     getList() {
       this.loading = true;
@@ -561,6 +615,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.photoUrl = null;
       getUser().then(response => {
         this.postOptions = response.posts;
         this.roleOptions = response.roles;
@@ -572,6 +627,7 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.photoUrl = null;
       const userId = row.userId || this.ids;
       getUser(userId).then(response => {
         this.form = response.data;
@@ -582,7 +638,11 @@ export default {
         this.open = true;
         this.title = "修改用户";
         this.form.password = "";
+        if (response.data.photo) {
+          this.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+        }
       });
+      this.photo.pId = row.userId;
     },
     /** 重置密码按钮操作 */
     handleResetPwd(row) {
@@ -667,4 +727,29 @@ export default {
     }
   }
 };
-</script>
+</script>
+
+<style scoped>
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
+</style>