修改新增用户弹窗

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

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

@ -88,10 +88,9 @@
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
{{ scope.row.status === '0' ? '正常' : '禁用' }}
</template> </template>
</el-table-column> </el-table-column>
@ -121,92 +120,94 @@
</el-row> </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-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="18">
<el-form-item label="用户昵称" prop="nickName"> <el-row>
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" /> <el-col :span="12">
</el-form-item> <el-form-item label="用户昵称" prop="nickName">
</el-col> <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
<el-col :span="12"> </el-form-item>
<el-form-item label="归属部门" prop="deptId"> </el-col>
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" /> <el-col :span="12">
</el-form-item> <el-form-item label="用户ID">
</el-col> <el-input value="自动生成" readonly />
</el-row> </el-form-item>
<el-row> </el-col>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber"> </el-row>
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="手机号" prop="phonenumber">
<el-col :span="12"> <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
<el-form-item label="邮箱" prop="email"> </el-form-item>
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> </el-col>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="微信昵称" prop="wechatNickName">
</el-row> <el-input v-model="form.wechatNickName" placeholder="请输入微信昵称" maxlength="50" />
<el-row> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName"> </el-row>
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" /> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="性别">
<el-col :span="12"> <el-select v-model="form.sex" placeholder="请选择性别">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password"> <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password /> :value="dict.value"></el-option>
</el-form-item> </el-select>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item label="钱包余额" prop="balance">
<el-form-item label="用户性别"> <el-input-number v-model="form.balance" :precision="2" :step="0.01" />
<el-select v-model="form.sex" placeholder="请选择性别"> </el-form-item>
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" </el-col>
:value="dict.value"></el-option> </el-row>
</el-select> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item v-if="form.userId == undefined" label="登陆密码" prop="password">
<el-col :span="12"> <el-input v-model="form.password" placeholder="默认123456" type="password" maxlength="20"
<el-form-item label="状态"> show-password />
<el-radio-group v-model="form.status"> </el-form-item>
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ </el-col>
dict.label </el-row>
}}</el-radio> <el-row>
</el-radio-group> <el-col :span="12">
</el-form-item> <el-form-item label="推荐人">
</el-col> <el-autocomplete :fetch-suggestions="queryByPhone" :trigger-on-focus="false" clearable
</el-row> placeholder="请输入手机号" v-model="form.referrerPhone" @select="item => form.referrerId = item.userId" />
<el-row> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="岗位"> <el-col :span="12">
<el-select v-model="form.postIds" multiple placeholder="请选择岗位"> <el-form-item label="推荐人ID">
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" <el-input v-model="form.referrerId" readonly />
:disabled="item.status == 1"></el-option> </el-form-item>
</el-select> </el-col>
</el-form-item> </el-row>
<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>
<el-col :span="12"> <el-col :span="5" :offset="1">
<el-form-item label="角色"> <userAvatar :circle="false" show-bottom-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>
</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-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer" style="text-align:center">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm">保存</el-button>
<el-button @click="cancel"> </el-button> <el-button @click="reset">重置</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -235,16 +236,17 @@
</template> </template>
<script> <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 { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getAvatar } from "../../../utils"; import { getAvatar } from "../../../utils";
import userAvatar from "./profile/userAvatar";
export default { export default {
name: "User", name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'], dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect }, components: { userAvatar, Treeselect },
data() { data() {
return { return {
// //
@ -319,10 +321,6 @@ export default {
], ],
// //
rules: { rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [ nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" } { required: true, message: "用户昵称不能为空", trigger: "blur" }
], ],
@ -361,6 +359,21 @@ export default {
}); });
}, },
methods: { 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, getAvatar,
/** 查询用户列表 */ /** 查询用户列表 */
getList() { getList() {
@ -418,7 +431,10 @@ export default {
status: "0", status: "0",
remark: undefined, remark: undefined,
postIds: [], postIds: [],
roleIds: [] roleIds: [],
balance: "0.00",
wechatNickName: undefined,
referrerId: undefined
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -461,7 +477,7 @@ export default {
this.postOptions = response.posts; this.postOptions = response.posts;
this.roleOptions = response.roles; this.roleOptions = response.roles;
this.open = true; this.open = true;
this.title = "添加用户"; this.title = "新增用户";
this.form.password = this.initPassword; this.form.password = this.initPassword;
}); });
}, },
@ -510,6 +526,7 @@ export default {
this.getList(); this.getList();
}); });
} else { } else {
this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '')
addUser(this.form).then(response => { addUser(this.form).then(response => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
@ -563,4 +580,10 @@ export default {
} }
} }
}; };
</script> </script>
<style>
.custom-divider.el-divider {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
</style>

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

Loading…
Cancel
Save