panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整总平台用户管理组件文件结构

Browse Source
master
panqihua 2 years ago
parent 0b1c033c9e
commit fabbfb0e13
5 changed files with 1760 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 841
      src/api/platform/user.js
  2. 15
      src/views/manufacturer/index.vue
  3. 195
      src/views/platform/user/baseForm.vue
  4. 513
      src/views/platform/user/index.vue
  5. 196
      src/views/platform/user/userAvatar.vue

841
src/api/platform/user.js
Unescape View File

@ -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
})
}

15
src/views/manufacturer/index.vue
Unescape View File

@ -0,0 +1,15 @@
<template>
<div class="app-container">
厂商首页
</div>
</template>
<script>
export default {
name: 'index.vue'
}
</script>
<style scoped>
</style>

195
src/views/platform/user/baseForm.vue
Unescape View File

@ -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>

513
src/views/platform/user/index.vue
Unescape View File

@ -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>

196
src/views/platform/user/userAvatar.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save