修改新增用户弹窗

master
panqihua 2 years ago
parent f6b2028138
commit dfa31d833a
  1. 124
      src/api/system/user.js
  2. 1
      src/assets/styles/ruoyi.scss
  3. 125
      src/views/system/user/index.vue
  4. 54
      src/views/system/user/profile/userAvatar.vue

@ -1,135 +1,143 @@
import request from '@/utils/request'
import request from "@/utils/request";
import { parseStrEmpty } from "@/utils/ruoyi";
// 查询用户列表
export function listUser(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query
})
url: "/system/user/list",
method: "get",
params: query,
});
}
// 查询用户详细
export function getUser(userId) {
return request({
url: '/system/user/' + parseStrEmpty(userId),
method: 'get'
})
url: "/system/user/" + parseStrEmpty(userId),
method: "get",
});
}
// 新增用户
export function addUser(data) {
return request({
url: '/system/user',
method: 'post',
data: data
})
url: "/system/user",
method: "post",
data: data,
});
}
// 修改用户
export function updateUser(data) {
return request({
url: '/system/user',
method: 'put',
data: data
})
url: "/system/user",
method: "put",
data: data,
});
}
// 删除用户
export function delUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'delete'
})
url: "/system/user/" + userId,
method: "delete",
});
}
// 用户密码重置
export function resetUserPwd(userId, password) {
const data = {
userId,
password
}
password,
};
return request({
url: '/system/user/resetPwd',
method: 'put',
data: data
})
url: "/system/user/resetPwd",
method: "put",
data: data,
});
}
// 用户状态修改
export function changeUserStatus(userId, status) {
const data = {
userId,
status
}
status,
};
return request({
url: '/system/user/changeStatus',
method: 'put',
data: data
})
url: "/system/user/changeStatus",
method: "put",
data: data,
});
}
// 查询用户个人信息
export function getUserProfile() {
return request({
url: '/system/user/profile',
method: 'get'
})
url: "/system/user/profile",
method: "get",
});
}
// 修改用户个人信息
export function updateUserProfile(data) {
return request({
url: '/system/user/profile',
method: 'put',
data: data
})
url: "/system/user/profile",
method: "put",
data: data,
});
}
// 用户密码重置
export function updateUserPwd(oldPassword, newPassword) {
const data = {
oldPassword,
newPassword
}
newPassword,
};
return request({
url: '/system/user/profile/updatePwd',
method: 'put',
params: data
})
url: "/system/user/profile/updatePwd",
method: "put",
params: data,
});
}
// 用户头像上传
export function uploadAvatar(data) {
return request({
url: '/system/user/profile/avatar',
method: 'post',
data: data
})
url: "/system/user/profile/avatar",
method: "post",
data: data,
});
}
// 查询授权角色
export function getAuthRole(userId) {
return request({
url: '/system/user/authRole/' + userId,
method: 'get'
})
url: "/system/user/authRole/" + userId,
method: "get",
});
}
// 保存授权角色
export function updateAuthRole(data) {
return request({
url: '/system/user/authRole',
method: 'put',
params: data
})
url: "/system/user/authRole",
method: "put",
params: data,
});
}
// 查询部门下拉树结构
export function deptTreeSelect() {
return request({
url: '/system/user/deptTree',
method: 'get'
})
url: "/system/user/deptTree",
method: "get",
});
}
//根据手机号模糊查询
export function phoneSelect(phonenumber) {
return request({
url: `/system/user/phonenumber/${phonenumber}`,
method: "get",
});
}

@ -259,7 +259,6 @@
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}

@ -88,10 +88,9 @@
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
<el-table-column label="状态" align="center" v-if="columns[5].visible">
<template slot-scope="scope">
{{ scope.row.status === '0' ? '正常' : '禁用' }}
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
@ -121,8 +120,13 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-divider class="custom-divider" />
<h3>基本信息</h3>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="18">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
@ -130,83 +134,80 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
<el-form-item label="用户ID">
<el-input value="自动生成" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号" prop="phonenumber">
<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="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
<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 v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
<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 v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
<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 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="状态">
<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 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-select v-model="form.postIds" multiple placeholder="请选择岗位">
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"
:disabled="item.status == 1"></el-option>
</el-select>
<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="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
:disabled="item.status == 1"></el-option>
</el-select>
<el-form-item label="推荐人ID">
<el-input v-model="form.referrerId" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<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">
<userAvatar :circle="false" show-bottom-label />
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
<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>
</el-dialog>
@ -235,16 +236,17 @@
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect, phoneSelect } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getAvatar } from "../../../utils";
import userAvatar from "./profile/userAvatar";
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
components: { userAvatar, Treeselect },
data() {
return {
//
@ -319,10 +321,6 @@ export default {
],
//
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
@ -361,6 +359,21 @@ export default {
});
},
methods: {
handleSelectPhone(item) {
debugger
form.referrerId = item.userId
},
queryByPhone(queryString, cb) {
phoneSelect(queryString).then(response => {
const data = response.data.map(item => {
return {
value: item.phonenumber,
userId: item.userId
}
})
cb(data)
})
},
getAvatar,
/** 查询用户列表 */
getList() {
@ -418,7 +431,10 @@ export default {
status: "0",
remark: undefined,
postIds: [],
roleIds: []
roleIds: [],
balance: "0.00",
wechatNickName: undefined,
referrerId: undefined
};
this.resetForm("form");
},
@ -461,7 +477,7 @@ export default {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加用户";
this.title = "新增用户";
this.form.password = this.initPassword;
});
},
@ -510,6 +526,7 @@ export default {
this.getList();
});
} else {
this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '')
addUser(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
@ -564,3 +581,9 @@ export default {
}
};
</script>
<style>
.custom-divider.el-divider {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
</style>

@ -1,24 +1,20 @@
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<div class="user-info-head" :class="{ 'img-circle': circle }" @click="editCropper()"><img v-bind:src="options.img"
title="点击上传头像" class="img-lg" :class="{ 'img-circle': circle }" />
</div>
<div v-if="showBottomLabel" style="width: 120px;text-align: center;margin-top: 10px;">头像</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 :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">
<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>
@ -33,19 +29,19 @@
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<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-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-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-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-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()"> </el-button>
</el-col>
</el-row>
@ -64,6 +60,14 @@ export default {
props: {
user: {
type: Object
},
circle: {
type: Boolean,
default: true
},
showBottomLabel: {
type: Boolean,
default: false
}
},
data() {
@ -80,7 +84,7 @@ export default {
autoCropWidth: 200, //
autoCropHeight: 200, //
fixedBox: true, //
outputType:"png" // PNG
outputType: "png" // PNG
},
previews: {},
resizeHandler: null
@ -164,7 +168,7 @@ export default {
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
background: rgba(0, 0, 0, 0.5);
}
.user-info-head:hover:after {
@ -175,13 +179,11 @@ export default {
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>

Loading…
Cancel
Save