From fabbfb0e13fb4896a9b295af31f7631a7ef37126 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Thu, 26 Jan 2023 20:29:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=80=BB=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E7=BB=84=E4=BB=B6=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/platform/user.js               | 841 +++++++++++++++++++++++++
 src/views/manufacturer/index.vue       |  15 +
 src/views/platform/user/baseForm.vue   | 195 ++++++
 src/views/platform/user/index.vue      | 513 +++++++++++++++
 src/views/platform/user/userAvatar.vue | 196 ++++++
 5 files changed, 1760 insertions(+)
 create mode 100644 src/api/platform/user.js
 create mode 100644 src/views/manufacturer/index.vue
 create mode 100644 src/views/platform/user/baseForm.vue
 create mode 100644 src/views/platform/user/index.vue
 create mode 100644 src/views/platform/user/userAvatar.vue

diff --git a/src/api/platform/user.js b/src/api/platform/user.js
new file mode 100644
index 0000000..51e9f90
--- /dev/null
+++ b/src/api/platform/user.js
@@ -0,0 +1,841 @@
+import request from '@/utils/request'
+
+// 查询用户列表
+export function listUser(query) {
+  return new Promise(resolve => {
+    resolve({
+      'total': 15,
+      'rows': [
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '管理员',
+          'userId': 1,
+          'deptId': 103,
+          'userName': 'admin',
+          'nickName': '若依',
+          'email': 'ry@163.com',
+          'phonenumber': '15888888888',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '127.0.0.1',
+          'loginDate': '2023-01-26T19:53:26.000+08:00',
+          'dept': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'deptId': 103,
+            'parentId': null,
+            'ancestors': null,
+            'deptName': '研发部门',
+            'orderNum': null,
+            'leader': '若依',
+            'phone': null,
+            'email': null,
+            'status': null,
+            'delFlag': null,
+            'parentName': null,
+            'children': []
+          },
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': null,
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': true
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '测试员',
+          'userId': 2,
+          'deptId': 105,
+          'userName': 'ry',
+          'nickName': '若依',
+          'email': 'ry@qq.com',
+          'phonenumber': '15666666666',
+          'sex': '1',
+          'avatar': '',
+          'password': null,
+          'status': '1',
+          'delFlag': '0',
+          'loginIp': '127.0.0.1',
+          'loginDate': '2023-01-11T09:24:46.000+08:00',
+          'dept': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'deptId': 105,
+            'parentId': null,
+            'ancestors': null,
+            'deptName': '测试部门',
+            'orderNum': null,
+            'leader': '若依',
+            'phone': null,
+            'email': null,
+            'status': null,
+            'delFlag': null,
+            'parentName': null,
+            'children': []
+          },
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': null,
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'userId': null,
+            'deptId': null,
+            'userName': null,
+            'nickName': '若依',
+            'email': null,
+            'phonenumber': null,
+            'sex': null,
+            'avatar': null,
+            'password': null,
+            'status': null,
+            'delFlag': null,
+            'loginIp': null,
+            'loginDate': null,
+            'dept': null,
+            'roles': null,
+            'roleIds': null,
+            'postIds': null,
+            'roleId': null,
+            'wechatNickName': null,
+            'balance': null,
+            'referrerId': null,
+            'referrerSysUser': null,
+            'admin': false
+          },
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 21:50:10',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 115,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'dfsg345',
+          'email': '',
+          'phonenumber': '13250211954',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '1',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'fuck222',
+          'balance': 4.66,
+          'referrerId': null,
+          'referrerSysUser': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'userId': null,
+            'deptId': null,
+            'userName': null,
+            'nickName': '若依',
+            'email': null,
+            'phonenumber': null,
+            'sex': null,
+            'avatar': null,
+            'password': null,
+            'status': null,
+            'delFlag': null,
+            'loginIp': null,
+            'loginDate': null,
+            'dept': null,
+            'roles': null,
+            'roleIds': null,
+            'postIds': null,
+            'roleId': null,
+            'wechatNickName': null,
+            'balance': null,
+            'referrerId': null,
+            'referrerSysUser': null,
+            'admin': false
+          },
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:16:00',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 116,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'dsfgfd234234',
+          'email': '',
+          'phonenumber': '13250211978',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'dfg345',
+          'balance': 3.96,
+          'referrerId': null,
+          'referrerSysUser': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'userId': null,
+            'deptId': null,
+            'userName': null,
+            'nickName': '若依',
+            'email': null,
+            'phonenumber': null,
+            'sex': null,
+            'avatar': null,
+            'password': null,
+            'status': null,
+            'delFlag': null,
+            'loginIp': null,
+            'loginDate': null,
+            'dept': null,
+            'roles': null,
+            'roleIds': null,
+            'postIds': null,
+            'roleId': null,
+            'wechatNickName': null,
+            'balance': null,
+            'referrerId': null,
+            'referrerSysUser': null,
+            'admin': false
+          },
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:22:33',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 117,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'dgh345',
+          'email': '',
+          'phonenumber': '13225021194',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '1',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'ertsdfg345',
+          'balance': 3.99,
+          'referrerId': null,
+          'referrerSysUser': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'userId': null,
+            'deptId': null,
+            'userName': null,
+            'nickName': '若依',
+            'email': null,
+            'phonenumber': null,
+            'sex': null,
+            'avatar': null,
+            'password': null,
+            'status': null,
+            'delFlag': null,
+            'loginIp': null,
+            'loginDate': null,
+            'dept': null,
+            'roles': null,
+            'roleIds': null,
+            'postIds': null,
+            'roleId': null,
+            'wechatNickName': null,
+            'balance': null,
+            'referrerId': null,
+            'referrerSysUser': null,
+            'admin': false
+          },
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:25:08',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 118,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'ertert435',
+          'email': '',
+          'phonenumber': '13250211855',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'dsfg345',
+          'balance': 3.66,
+          'referrerId': null,
+          'referrerSysUser': {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'userId': null,
+            'deptId': null,
+            'userName': null,
+            'nickName': '若依',
+            'email': null,
+            'phonenumber': null,
+            'sex': null,
+            'avatar': null,
+            'password': null,
+            'status': null,
+            'delFlag': null,
+            'loginIp': null,
+            'loginDate': null,
+            'dept': null,
+            'roles': null,
+            'roleIds': null,
+            'postIds': null,
+            'roleId': null,
+            'wechatNickName': null,
+            'balance': null,
+            'referrerId': null,
+            'referrerSysUser': null,
+            'admin': false
+          },
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:26:10',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 119,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'sdfasdf234',
+          'email': '',
+          'phonenumber': '13250519883',
+          'sex': '0',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '1',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'sdfaf',
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:27:51',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 120,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'yutyu',
+          'email': '',
+          'phonenumber': '13250211444',
+          'sex': '0',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'dsfgfd345',
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:28:47',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 121,
+          'deptId': null,
+          'userName': null,
+          'nickName': '234dfgsfdg',
+          'email': '',
+          'phonenumber': '13248956546',
+          'sex': '0',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'saf2345',
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-12 09:30:38',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': 122,
+          'deptId': null,
+          'userName': null,
+          'nickName': 'sdfaf234',
+          'email': '',
+          'phonenumber': '13250485465',
+          'sex': '1',
+          'avatar': '/profile/avatar/2023/01/12/blob_20230112055008A001.png',
+          'password': null,
+          'status': '0',
+          'delFlag': '0',
+          'loginIp': '',
+          'loginDate': null,
+          'dept': null,
+          'roles': [],
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': 'sdaf3425',
+          'balance': 1.44,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': false
+        }
+      ],
+      'code': 200,
+      'msg': '查询成功'
+    })
+  })
+}
+
+// 查询用户详细
+export function getUser(userId) {
+  return new Promise(resolve => {
+    resolve({
+      'msg': '操作成功',
+      'code': 200,
+      'roleIds': [
+        2
+      ],
+      'data': {
+        'createBy': 'admin',
+        'createTime': '2023-01-11 09:24:46',
+        'updateBy': null,
+        'updateTime': null,
+        'remark': '测试员',
+        'userId': 2,
+        'deptId': 105,
+        'userName': 'ry',
+        'nickName': '若依',
+        'email': 'ry@qq.com',
+        'phonenumber': '15666666666',
+        'sex': '1',
+        'avatar': '',
+        'password': '$2a$10$7JB720yubVSZvUI0rEqK/.VqGOZTH.ulu33dHOiBE8ByOhJIrdAu2',
+        'status': '1',
+        'delFlag': '0',
+        'loginIp': '127.0.0.1',
+        'loginDate': '2023-01-11T09:24:46.000+08:00',
+        'dept': {
+          'createBy': null,
+          'createTime': null,
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'deptId': 105,
+          'parentId': 101,
+          'ancestors': '0,100,101',
+          'deptName': '测试部门',
+          'orderNum': 3,
+          'leader': '若依',
+          'phone': null,
+          'email': null,
+          'status': '0',
+          'delFlag': null,
+          'parentName': null,
+          'children': []
+        },
+        'roles': [
+          {
+            'createBy': null,
+            'createTime': null,
+            'updateBy': null,
+            'updateTime': null,
+            'remark': null,
+            'roleId': 2,
+            'roleName': '普通角色',
+            'roleKey': 'common',
+            'roleSort': 2,
+            'dataScope': '2',
+            'menuCheckStrictly': false,
+            'deptCheckStrictly': false,
+            'status': '0',
+            'delFlag': null,
+            'flag': false,
+            'menuIds': null,
+            'deptIds': null,
+            'permissions': null,
+            'admin': false
+          }
+        ],
+        'roleIds': null,
+        'postIds': null,
+        'roleId': null,
+        'wechatNickName': null,
+        'balance': null,
+        'referrerId': 1,
+        'referrerSysUser': {
+          'createBy': null,
+          'createTime': null,
+          'updateBy': null,
+          'updateTime': null,
+          'remark': null,
+          'userId': null,
+          'deptId': null,
+          'userName': null,
+          'nickName': '若依',
+          'email': null,
+          'phonenumber': '15888888888',
+          'sex': null,
+          'avatar': null,
+          'password': null,
+          'status': null,
+          'delFlag': null,
+          'loginIp': null,
+          'loginDate': null,
+          'dept': null,
+          'roles': null,
+          'roleIds': null,
+          'postIds': null,
+          'roleId': null,
+          'wechatNickName': null,
+          'balance': null,
+          'referrerId': null,
+          'referrerSysUser': null,
+          'admin': false
+        },
+        'admin': false
+      },
+      'postIds': [
+        2
+      ],
+      'roles': [
+        {
+          'createBy': null,
+          'createTime': '2023-01-26 12:03:44',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '厂商',
+          'roleId': 101,
+          'roleName': '厂商',
+          'roleKey': 'manufacturer',
+          'roleSort': 0,
+          'dataScope': '1',
+          'menuCheckStrictly': true,
+          'deptCheckStrictly': true,
+          'status': '0',
+          'delFlag': '0',
+          'flag': false,
+          'menuIds': null,
+          'deptIds': null,
+          'permissions': null,
+          'admin': false
+        },
+        {
+          'createBy': null,
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '普通角色',
+          'roleId': 2,
+          'roleName': '普通角色',
+          'roleKey': 'common',
+          'roleSort': 2,
+          'dataScope': '2',
+          'menuCheckStrictly': true,
+          'deptCheckStrictly': true,
+          'status': '0',
+          'delFlag': '0',
+          'flag': false,
+          'menuIds': null,
+          'deptIds': null,
+          'permissions': null,
+          'admin': false
+        }
+      ],
+      'posts': [
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '',
+          'postId': 1,
+          'postCode': 'ceo',
+          'postName': '董事长',
+          'postSort': 1,
+          'status': '0',
+          'flag': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '',
+          'postId': 2,
+          'postCode': 'se',
+          'postName': '项目经理',
+          'postSort': 2,
+          'status': '0',
+          'flag': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '',
+          'postId': 3,
+          'postCode': 'hr',
+          'postName': '人力资源',
+          'postSort': 3,
+          'status': '0',
+          'flag': false
+        },
+        {
+          'createBy': 'admin',
+          'createTime': '2023-01-11 09:24:46',
+          'updateBy': null,
+          'updateTime': null,
+          'remark': '',
+          'postId': 4,
+          'postCode': 'user',
+          'postName': '普通员工',
+          'postSort': 4,
+          'status': '0',
+          'flag': false
+        }
+      ]
+    })
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户
+export function updateUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户
+export function delUser(userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  })
+}
+
+// 用户密码重置
+export function resetUserPwd(userId, password) {
+  const data = {
+    userId,
+    password
+  }
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户状态修改
+export function changeUserStatus(userId, status) {
+  const data = {
+    userId,
+    status
+  }
+  return request({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 查询用户个人信息
+export function getUserProfile() {
+  return request({
+    url: '/system/user/profile',
+    method: 'get'
+  })
+}
+
+// 修改用户个人信息
+export function updateUserProfile(data) {
+  return request({
+    url: '/system/user/profile',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户密码重置
+export function updateUserPwd(oldPassword, newPassword) {
+  const data = {
+    oldPassword,
+    newPassword
+  }
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    params: data
+  })
+}
+
+// 用户头像上传
+export function uploadAvatar(data) {
+  return request({
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询授权角色
+export function getAuthRole(userId) {
+  return request({
+    url: '/system/user/authRole/' + userId,
+    method: 'get'
+  })
+}
+
+// 保存授权角色
+export function updateAuthRole(data) {
+  return request({
+    url: '/system/user/authRole',
+    method: 'put',
+    params: data
+  })
+}
+
+// 查询部门下拉树结构
+export function deptTreeSelect() {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  })
+}
+
+//根据手机号模糊查询
+export function phoneSelect(phonenumber) {
+  return request({
+    url: `/system/user/phonenumber/${phonenumber}`,
+    method: 'get'
+  })
+}
+
+//批量更新状态
+export function updateStatus(data) {
+  return request({
+    url: '/system/user/updateStatus',
+    method: 'put',
+    params: data
+  })
+}
diff --git a/src/views/manufacturer/index.vue b/src/views/manufacturer/index.vue
new file mode 100644
index 0000000..e5a575c
--- /dev/null
+++ b/src/views/manufacturer/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="app-container">
+    厂商首页
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index.vue'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/platform/user/baseForm.vue b/src/views/platform/user/baseForm.vue
new file mode 100644
index 0000000..46de608
--- /dev/null
+++ b/src/views/platform/user/baseForm.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <h3>基本信息</h3>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <el-col :span="18">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" v-if="showDetail">
+              <el-form-item label="用户ID">
+                <el-input v-model="form.userId" readonly/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="手机号" prop="phonenumber">
+                <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="微信昵称" prop="wechatNickName">
+                <el-input v-model="form.wechatNickName" placeholder="请输入微信昵称" maxlength="50"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="性别">
+                <el-select v-model="form.sex" placeholder="请选择性别">
+                  <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value"
+                             :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="钱包余额" prop="balance">
+                <el-input-number v-model="form.balance" :precision="2" :step="0.01"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item v-if="form.userId == undefined" label="登陆密码" prop="password">
+                <el-input v-model="form.password" placeholder="默认123456" type="password" maxlength="20"
+                          show-password/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="推荐人">
+                <el-autocomplete :fetch-suggestions="queryByPhone" :trigger-on-focus="false" clearable
+                                 placeholder="请输入手机号" v-model="form.referrerPhone"
+                                 @select="item => form.referrerId = item.userId"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="推荐人ID">
+                <el-input v-model="form.referrerId" readonly/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <template v-if="showDetail">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="注册时间">
+                  <el-input :value="parseTime(form.createTime)" readonly disable/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="最近登陆时间">
+                  <el-input :value="parseTime(form.loginDate)" readonly disable/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="状态">
+                <el-radio-group v-model="form.status">
+                  <el-radio v-for="dict in   dict.type.sys_normal_disable" :key="dict.value"
+                            :label="dict.value">{{
+                      dict.label
+                    }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <user-avatar :circle="false" show-bottom-label title="头像"/>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="text-align:center">
+      <el-button type="primary" @click="submitForm">保存</el-button>
+      <el-button @click="reset">重置</el-button>
+    </div>
+  </div>
+</template>
+<script>
+
+import userAvatar from './userAvatar'
+import { addUser, phoneSelect, updateUser } from '@/api/system/user'
+
+export default {
+  name: 'BaseForm',
+  components: { userAvatar },
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  props: {
+    reset: Function,
+    form: Object,
+    showDetail: {
+      type: Boolean,
+      default: false
+    },
+    onSuccess: {
+      type: Function,
+      required: false
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '用户密码不能为空', trigger: 'blur' },
+          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+        ],
+        email: [
+          {
+            type: 'email',
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change']
+          }
+        ],
+        phonenumber: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ]
+      }
+
+    }
+  },
+
+  methods: {
+    // 模糊查询手机号
+    queryByPhone(queryString, cb) {
+      phoneSelect(queryString).then(response => {
+        const data = response.data.map(item => {
+          return {
+            value: item.phonenumber,
+            userId: item.userId
+          }
+        })
+        cb(data)
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.userId != undefined) {
+            updateUser(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.onSuccess && this.onSuccess()
+            })
+          } else {
+            this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '')
+            addUser(this.form).then(response => {
+              console.info(this.onSuccess)
+              this.$modal.msgSuccess('新增成功')
+              this.onSuccess && this.onSuccess()
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/platform/user/index.vue b/src/views/platform/user/index.vue
new file mode 100644
index 0000000..6a681c3
--- /dev/null
+++ b/src/views/platform/user/index.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="68px">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="ID" prop="userId">
+            <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable>
+              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
+                         :value="dict.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="注册时间">
+            <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+                            range-separator="-" start-placeholder="开始日期"
+                            end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+                <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
+                           :value="dict.value"/>
+              </el-select>
+            </el-form-item>
+
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" size="mini" @click="handleAdd">新增用户</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button size="mini" @click="updateStatusByUserId('0')">批量开启</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button size="mini" @click="updateStatusByUserId('1')">批量禁用</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button size="mini" @click="handleExport">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center"/>
+          <el-table-column label="ID" align="center" key="userId" prop="userId" v-if="columns[0].visible"/>
+          <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="phonenumber" prop="phonenumber" v-if="columns[4].visible"
+                           width="120"/>
+          <el-table-column label="微信昵称" align="center" key="wechatNickName" prop="wechatNickName"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="账号余额" align="center" key="balance" prop="balance"/>
+          <el-table-column label="头像" align="center">
+            <template slot-scope="scope">
+              <el-avatar :size="50" :src="getAvatar(scope.row)"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="性别" align="center">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="推荐人" align="center">
+            <template slot-scope="scope" v-if="scope.row.referrerSysUser">
+              <span>{{ scope.row.referrerSysUser.nickName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="登陆时间" align="center">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.loginDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="注册时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+            <template slot-scope="scope" v-if="scope.row.userId !== 1">
+              <el-button size="mini" type="text" @click="showDetail(scope.row.userId)"
+              >详情
+              </el-button>
+              <el-button size="mini" type="text"
+                         @click="updateStatusByUserId(scope.row.status === '0' ? '1' : '0', scope.row.userId)"
+              >{{ scope.row.status === '0' ? '禁用' : '开启' }}
+              </el-button>
+              <el-button size="mini" type="text" @click="showBuyDetail(scope.row.userId)"
+              >购买明细
+              </el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize" @pagination="getList"/>
+      </el-col>
+    </el-row>
+
+    <!-- 添加对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-divider class="custom-divider"/>
+      <base-form :reset="reset" :form="form" :onSuccess="() => { this.open = false; this.getList() }"/>
+    </el-dialog>
+
+    <!-- 用户详情对话框 -->
+    <el-dialog :title="title" :visible.sync="detail.open" width="1200px" append-to-body
+               @close="getList(); detail.activeName = null">
+      <el-tabs v-model="detail.activeName" type="card">
+        <el-tab-pane label="基本信息" name="base">
+          <base-form :reset="reset" :form="form" show-detail/>
+        </el-tab-pane>
+        <el-tab-pane label="钱包明细" name="balance">
+          <platform-wallet-detail :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="购买明细" name="buy_detail">
+          <platform-buy-detail :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="收货地址" name="address">
+          <platform-address :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="浏览记录" name="browser_history">
+          <platform-history :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="收藏记录" name="star_history">
+          <platform-collect :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="购物车" name="cart">
+          <platform-cart :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="粉丝" name="fans">
+          <platform-follower :user-id="form.userId"/>
+        </el-tab-pane>
+        <el-tab-pane label="优惠券" name="discount_coupon">
+          <platform-discount :user-id="form.userId"/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport"/>
+            是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
+                   @click="importTemplate">下载模板
+          </el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { changeUserStatus, delUser, getUser, listUser, resetUserPwd, updateStatus } from '@/api/platform/user'
+import { getToken } from '@/utils/auth'
+import { getAvatar } from '@/utils'
+import baseForm from './baseForm'
+import platformAddress from './address'
+import platformFollower from './follower'
+import platformCart from './cart'
+import platformCollect from './result/collect'
+import platformHistory from './result/history'
+import platformDiscount from './discount'
+import platformBuyDetail from './buyDetail'
+import platformWalletDetail from './walletDetail'
+
+export default {
+  name: 'User',
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: {
+    baseForm,
+    platformAddress,
+    platformFollower,
+    platformCart,
+    platformCollect,
+    platformDiscount,
+    platformHistory,
+    platformBuyDetail,
+    platformWalletDetail
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      //用户详情
+      detail: {
+        // 是否显示弹出层
+        open: false,
+        //激活标签页
+        activeName: null
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: '',
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: 'Bearer ' + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/system/user/importData'
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        nickName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        sex: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ]
+
+    }
+  },
+  created() {
+    this.getList()
+    this.getConfigKey('sys.user.initPassword').then(response => {
+      this.initPassword = response.msg
+    })
+  },
+  methods: {
+    showBuyDetail(userId) {
+      this.detail.activeName = 'buy_detail'
+      this.clickUserId = userId
+      this.detail.open = true
+    },
+    showDetail(userId) {
+      this.detail.activeName = 'base'
+      this.clickUserId = userId
+    },
+    //批量更新用户状态
+    updateStatusByUserId(status, userId) {
+      updateStatus({
+        userIds: userId === undefined ? this.ids.join(',') : userId,
+        status
+      }).then(response => {
+        this.$modal.msgSuccess(`批量${status === '0' ? '开启' : '禁用'}成功`)
+        this.getList()
+      })
+    },
+
+    getAvatar,
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.handleQuery()
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.status === '0' ? '启用' : '停用'
+      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
+        return changeUserStatus(row.userId, row.status)
+      }).then(() => {
+        this.$modal.msgSuccess(text + '成功')
+      }).catch(function() {
+        row.status = row.status === '0' ? '1' : '0'
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        userId: undefined,
+        userName: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: undefined,
+        status: '0',
+        remark: undefined,
+        postIds: [],
+        roleIds: [],
+        balance: '0.00',
+        wechatNickName: undefined,
+        referrerId: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case 'handleResetPwd':
+          this.handleResetPwd(row)
+          break
+        case 'handleAuthRole':
+          this.handleAuthRole(row)
+          break
+        default:
+          break
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      getUser().then(response => {
+        this.postOptions = response.posts
+        this.roleOptions = response.roles
+        this.open = true
+        this.title = '新增用户'
+        this.form.password = this.initPassword
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate() {
+      this.reset()
+      const userId = this.clickUserId
+      getUser(userId).then(response => {
+        this.form = response.data
+        this.postOptions = response.posts
+        this.roleOptions = response.roles
+        this.$set(this.form, 'postIds', response.postIds)
+        this.$set(this.form, 'roleIds', response.roleIds)
+        this.title = '用户详情'
+        this.form.password = ''
+        this.detail.open = true
+        this.form.referrerPhone = this.form.referrerSysUser.phonenumber
+      })
+    },
+    /** 重置密码按钮操作 */
+    handleResetPwd(row) {
+      this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        closeOnClickModal: false,
+        inputPattern: /^.{5,20}$/,
+        inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
+      }).then(({ value }) => {
+        resetUserPwd(row.userId, value).then(response => {
+          this.$modal.msgSuccess('修改成功，新密码是：' + value)
+        })
+      }).catch(() => {
+      })
+    },
+    /** 分配角色操作 */
+    handleAuthRole: function(row) {
+      const userId = row.userId
+      this.$router.push('/system/user-auth/role/' + userId)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids
+      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
+        return delUser(userIds)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/export', {
+        ...this.queryParams
+      }, `user_${new Date().getTime()}.xlsx`)
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = '用户导入'
+      this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.$alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
+      this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit()
+    }
+  },
+  watch: {
+    'detail.activeName': function(value) {
+      if (value === 'base' && !this.detail.open) {
+        this.handleUpdate()
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.custom-divider.el-divider {
+  margin-top: 0 !important;
+  margin-bottom: 20px !important;
+}
+</style>
diff --git a/src/views/platform/user/userAvatar.vue b/src/views/platform/user/userAvatar.vue
new file mode 100644
index 0000000..27edde7
--- /dev/null
+++ b/src/views/platform/user/userAvatar.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <div class="user-info-head" :class="{ 'img-circle': circle }" @click="editCropper()"><img v-bind:src="options.img"
+                                                                                              :title="'点击上传' + title"
+                                                                                              class="img-lg"
+                                                                                              :class="{ 'img-circle': circle }"/>
+
+    </div>
+    <div v-if="showBottomLabel" style="width: 120px;text-align: center;margin-top: 10px;">{{ title }}</div>
+    <el-dialog :title="'修改' + title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"
+               @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop"
+                       :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
+                       :fixedBox="options.fixedBox"
+                       :outputType="options.outputType" @realTime="realTime" v-if="visible"/>
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <div class="avatar-upload-preview" :class="{ 'img-circle': circle }">
+            <img :src="previews.url" :style="previews.img"/>
+          </div>
+        </el-col>
+      </el-row>
+      <br/>
+      <el-row>
+        <el-col :lg="2" :sm="3" :xs="3">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              选择
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { VueCropper } from 'vue-cropper'
+import { uploadAvatar } from '@/api/system/user'
+import { debounce } from '@/utils'
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    },
+    circle: {
+      type: Boolean,
+      default: true
+    },
+    showBottomLabel: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+
+      options: {
+        img: store.getters.avatar, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true, // 固定截图框大小 不允许改变
+        outputType: 'png' // 默认生成截图为PNG格式
+      },
+      previews: {},
+      resizeHandler: null
+    }
+  },
+  methods: {
+    // 编辑
+    editCropper() {
+      this.open = true
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true
+      if (!this.resizeHandler) {
+        this.resizeHandler = debounce(() => {
+          this.refresh()
+        }, 100)
+      }
+      window.addEventListener('resize', this.resizeHandler)
+    },
+    // 刷新组件
+    refresh() {
+      this.$refs.cropper.refresh()
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft()
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight()
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
+      } else {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          this.options.img = reader.result
+        }
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData()
+        formData.append('avatarfile', data)
+
+        // TODO:厂商修改LOGO需要更换接口，目前未实现
+        uploadAvatar(formData).then(response => {
+          this.open = false
+          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
+          store.commit('SET_AVATAR', this.options.img)
+          this.$modal.msgSuccess('修改成功')
+          this.visible = false
+        })
+      })
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.options.img = store.getters.avatar
+      this.visible = false
+      window.removeEventListener('resize', this.resizeHandler)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+}
+</style>