<template>
<div class="userManagePage H100">
<div class="head_box">
<h6>系统管理 / 用户管理</h6>
<h4>用户管理</h4>
</div>
<div class="content_box">
<div class="form_box h778px" >
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="">
<el-input size="mini" placeholder="请输入账号/姓名/角色/网点" v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
</el-form-item>
<el-form-item class="r-float">
<el-button size="mini" type="primary" class="btn_form_add" icon="el-icon-plus" @click="addUser()">新 建</el-button>
<el-button size="mini" type="primary" class="btn_form_add" @click="exportExcel">下载模板</el-button>
<el-button size="mini" type="primary" @click="handleImport" class="import btn_form_add">导入数据</el-button>
<el-dropdown>
<el-button style="margin-left: 10px;" size="mini" class="btn_form_add">批量操作</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item @click.native="multipleDelete">批量删除</el-dropdown-item>
<el-dropdown-item @click.native="multipleDisable">批量禁用</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
</el-form>
<div class="scrool">
<el-table style="width:100%;" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="账号" show-overflow-tooltip prop="username" ></el-table-column>
<el-table-column label="角色" show-overflow-tooltip prop="roleName" ></el-table-column>
<el-table-column label="姓名" show-overflow-tooltip prop="name" ></el-table-column>
<el-table-column label="员工号" show-overflow-tooltip prop="code" ></el-table-column>
<el-table-column label="电话" show-overflow-tooltip prop="mobile" ></el-table-column>
<el-table-column label="归属网点" show-overflow-tooltip prop="bankBranchName" ></el-table-column>
<el-table-column label="状态" prop="status" >
<template slot-scope="scope">
<div class="statusBox">
<span class="active" :style="{'backgroundColor':(scope.row.status ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
<span class="openKey">{{scope.row.status ? '启用':'禁用'}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center" width="190">
<template slot-scope="scope">
<el-button-group>
<el-button title="编辑" size="mini" type="text" @click="openEdit(scope.row)">编辑 | </el-button>
<el-button title="删除" size="mini" type="text" @click="handleDelete(scope.row)">删除 | </el-button>
<el-button title="密码重置" type="text" size="mini" @click="resetPassWord(scope.row)">密码重置</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination small background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total">
</el-pagination>
</div>
<!--新建弹框-->
<el-dialog title="新建" class="newuser" :visible.sync="FormVisible1" :before-close="close1">
<div class="form_box">
<el-form :model="userform" ref="userform" :rules="rules" >
<el-form-item label="账 号：" prop="username" :label-width="formLabelWidth">
<el-input v-model="userform.username" clearable auto-complete="off"
placeholder="请输入您想注册的账号" size="small"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password" :label-width="formLabelWidth">
<el-input type="password" size="small" v-model="userform.password" clearable auto-complete="off" placeholder="设置您的登录密码" ></el-input>
</el-form-item>
<el-form-item label="重复密码：" prop="repassword" :label-width="formLabelWidth">
<el-input type="password" size="small" v-model="userform.repassword" clearable auto-complete="off" placeholder="再次输入您的密码" ></el-input>
</el-form-item>
<el-form-item label="姓 名：" prop="name" :label-width="formLabelWidth">
<el-input v-model="userform.name" size="small" clearable auto-complete="off" placeholder="请输入用户姓名"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="员工号：" prop="code" :label-width="formLabelWidth">
<el-input v-model="userform.code" size="small" clearable auto-complete="off" placeholder="请输入8位员工号"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="手机号码：" prop="mobile" :label-width="formLabelWidth">
<el-input v-model="userform.mobile" size="small" clearable auto-complete="off" placeholder="请输入手机号码"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="归属网点：" prop="bankBranchId" :label-width="formLabelWidth" >
<el-select v-model="userform.bankBranchId" size="small" filterable clearable value-key="name" placeholder="请选择" >
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
<el-form-item label="角 色：" prop="roleId" :label-width="formLabelWidth" >
<el-select v-model="userform.roleId" size="small" clearable value-key="name" placeholder="请选择" >
<el-option v-for="item in typeList1" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户状态：" prop="status" :label-width="formLabelWidth">
<el-radio v-model="userform.status" label="1">启用</el-radio>
<el-radio v-model="userform.status" label="0">禁用</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="userSave">确定</el-button>
<el-button class="r-float" size="mini" @click="close1">取 消</el-button>
</div>
</div>
</el-dialog>
<!--编辑弹框-->
<el-dialog title="编辑" :visible.sync="FormVisible" :before-close="close">
<div class="form_box">
<el-form :model="editform" ref="editform" :rules="rules1">
<el-form-item label="账户：" prop="username" :label-width="formLabelWidth" >
<span>{{editform.username}}</span>
</el-form-item>
<el-form-item label="姓名：" prop="name" :label-width="formLabelWidth">
<span>{{editform.name}}</span>
</el-form-item>
<el-form-item label="员工号：" prop="code" :label-width="formLabelWidth" >
<el-input v-model="editform.code" size="small" clearable auto-complete="off" placeholder="请输入8位员工号"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="电话号码：" prop="mobile" :label-width="formLabelWidth">
<el-input v-model="editform.mobile" size="small" clearable auto-complete="off" placeholder="请输入电话号码"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="角色：" prop="roleId" :label-width="formLabelWidth">
<el-select v-model="editform.roleId" size="small" value-key="name" placeholder="请选择角色" filterable>
<el-option v-for="item in typeList1" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="归属网点：" prop="bankBranchId" :label-width="formLabelWidth" >
<el-select v-model="editform.bankBranchId" size="small" value-key="name" placeholder="请选择归属网点" filterable>
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状 态：" prop="status" :label-width="formLabelWidth">
<el-radio v-model="editform.status" label="0">启用</el-radio>
<el-radio v-model="editform.status" label="1">禁用</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="submitForm()">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
<!--上传弹窗-->
<el-dialog title="提示" :visible.sync="importVisible" width="30%">
<el-upload class="upload-demo" drag :file-list="dataList" action=""
:http-request="handleUploadImg"
:limit="1"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
<i class="el-icon-upload"></i>
<div class="el-upload__text"><em>点击上传,只能上传.xls和.xlsx文件</em></div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="importVisible = false,dataList=[]">取 消</el-button>
<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
</span>
</el-dialog>
<!--上传失败提示-->
<el-dialog
title="提示"
:visible.sync="tipVisible"
width="30%">
<span style="padding: 10px 20px;display: inline-block;" v-html="tipMessage"></span>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="tipVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="tipVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value == '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.userform.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
logid: '',
form:{
name: '',
},
page: {
currentPage: 1, //当前页
pageSize: null, //每页条数
total: null, //总条数
},
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
editform: {
id: '',
name: '',
code: '',
mobile: '',
roleId: '',
bankBranchId: '',
status: '',
},
userform: {
username: '',
password: '',
repassword: '',
name: '',
code: '',
mobile: '',
bankBranchId: '',
roleId: '',
status: '1'
},
status: '',
typeList: [],
typeList1: [],
rules: {
username: [
{required: true, message: '请输入账号'},
{max: 20, message: '不能超过20个字符'},
{pattern: /^[a-zA-Z0-9_-]{0,20}$/, message: '请输入正确的账号'}
],
password: [
{required: true, message: '请输入密码'},
{min: 6, message: '请输入正确密码'},
{max: 20, message: '不能超过20个字符'},
],
repassword: [
{required: true, message: '请确认密码'},
{validator: validatePass, trigger: 'blur'}
],
mobile: [
{required: true, message: '请输入电话号码'},
{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的电话号码',trigger: 'blur'}
],
name: [
{required: true, message: '请输入姓名'},
{max: 20, message: '不能超过20个字符'},
{pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, message: '请输入正确的姓名'}
],
code: [
{required: true, message: '请输入8位员工号'},
{max: 8, message: '不能超过8个字符'},
{pattern: /^(\d{8})?$/, message: '员工号为8位纯数字'}
],
bankBranchId: [
{required: true, message: '请选择所属网点'},
],
roleId: [
{required: true,message: '请选择所属角色'},
]
},
rules1: {
mobile: [
{required: true, message: '请输入电话号码'},
{pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的电话号码'}
],
code: [
{required: true, message: '请输入8位员工号'},
{max: 8, message: '不能超过8个字符'},
{pattern: /^(\d{8})?$/, message: '员工号为8位纯数字'}
],
bankBranchId: [
{required: true, message: '请选择所属网点'},
],
roleId: [
{required: true,message: '请选择所属角色'},
]
},
value: '',
importVisible: false,
tipVisible: false,
dataList: [],
tipMessage:'',
islist: [],
}
},
computed: {},
mounted() {
this.onSearch();
this.initData();
},
components: {},
methods: {
initData () {
this.logid = localStorage.getItem('userId');
},
addUser() {
let _this = this;
_this.FormVisible1 = true;
$('.el-dialog__title').html('新建');
_this.getBranch();
_this.getRole();
},
exportExcel () {
window.location.href= this.$baseUrl+'employee/userTemplateDownload';
},
handleUploadImg(file) {
this.dataList.push(file.file);
},
handleExceed() {
this.$message.warning(`当前限制选择 1 个文件，如需更改请删除后重选`);
},
beforeRemove(file, fileList) {
let vm = this;
vm.dataList = fileList;
},
handleRemove(file) {
// this.contentForm.icon = '';
},
handleImport() {
this.importVisible = true
$('.el-dialog__title').html('上传');
},
//导入
handleUpload(file, timeout) {
let vm = this;
let formData = new FormData();
formData.append("excelFile", file);
return new Promise(function (resolve, reject) {
vm.$https({
url: 'employee/userImport',
method: 'post'
}, formData, "file").then((res) => {
// console.log(res);
if (res.data.status == 200) {
vm.$message({
type: 'success',
message: res.data.message
});
} else if (res.data.status == 405) {
vm.tipVisible = true;
$('.el-dialog__title').html('错误提示');
vm.tipMessage = res.data.message||'上传失败';
} else {
vm.$message({
type: 'error',
message: res.data.message||'上传失败'
});
}
vm.dataList = []
resolve(res)
}, (error) => {
console.log(error)
})
})
},
//导入提交
onSubmit() {
let vm = this
let uploadList = vm.dataList.concat([]);
if (uploadList.length == 0) {
vm.$message({
message: '请选择文件',
type: 'warning'
});
} else {
vm.handleUpload(uploadList[0]).then(function (response) {
vm.importVisible = false;
vm.dataList = [];
vm.onSearch();
})
}
},
getBranch(val) {
let _this = this;
let params = {
action: 'createUser',
};
_this.$https({
method: 'get',
url: 'bankBranchInfo/getBankBox',
authType: this.backToken
},params).then((res) => {
_this.typeList = res.data;
}, (error) => {
console.log(error)
}
)
},
// 角色列表渲染
getRole() {
let _this = this;
_this.$https({
method: 'get',
url: 'role/getRoleBox',
authType: this.backToken
}).then((res) => {
_this.typeList1 = res.data;
}, (error) => {
console.log(error)
}
)
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https({
url : "employee/getUserList",
method: 'get',
authType: this.backToken
},param).then((res)=>{
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
}).catch(function(err){
console.log(err);
})
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param)
},
Search(){
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
"_index": 1,
"_size": _this.page.pageSize,
"employName": _this.form.name,
};
this.getTableData(searchObj);
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
"_index": _this.page.currentPage,
"_size": _this.page.pageSize,
"employName": _this.form.name,
};
return searchObj;
},
// 新增弹窗
userSave() {
let _this = this;
_this.$refs.userform.validate((valid) => {
if (valid) {
_this.$https({
url: 'employee/add',
method: 'post',
authType: this.backToken
}, _this.$qs.stringify(_this.userform))
.then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
// //关闭窗口
this.FormVisible1 = false;
for (let key in this.userform) {
this.userform[key]=null;
}
this.userform.status = '1';
this.$refs['userform'].resetFields();
//重新查询数据
_this.Search();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
}
)
}
});
},
// 编辑弹框
openEdit(row){
let _this=this;
$('.el-dialog__title').html('编辑');
_this.getRole();
_this.getBranch();
let id = row.id;
_this.$https({
url : "employee/get/?Id="+id,
method: 'get',
authType: this.backToken
}).then((res)=>{
let data = res.data;
_this.editform= data;
/*判断该网点是否存在*/
let obj = _this.typeList.find((item) => {
return item.id === _this.editform.bankBranchId
});
if(!obj) {_this.editform.bankBranchId = "";}
let status = data.status == true? '0':'1';
_this.editform.status= status;
}).catch(function(err){
console.log(err);
})
_this.FormVisible = true;
},
// 编辑后提交
submitForm() {
let _this = this;
let searchObj = {}
_this.$refs.editform.validate((valid) => {
if (valid) {
searchObj.id =_this.editform.id;
searchObj.roleId =_this.editform.roleId;
searchObj.name =_this.editform.name;
searchObj.mobile =_this.editform.mobile;
searchObj.bankBranchId =_this.editform.bankBranchId;
searchObj.code =_this.editform.code;
if(_this.editform.id == _this.logid){
searchObj.status = true;
_this.$message({
type: 'error',
message: '不可禁用自己'
});
}else{
let status = _this.editform.status == '0'? true:false;
searchObj.status = status;
}
_this.$https({
url: 'employee/modify',
method: 'put',
authType: this.backToken
}, _this.$qs.stringify(searchObj))
.then((res) => {
if (res.status == 200 ||res.status == 201) {
_this.$message({
type: 'success',
message: '修改成功!'
});
//重新查询数据
_this.onSearch();
// //关闭窗口
this.FormVisible = false;
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
}
)
}
});
},
close() {
this.FormVisible = false;
},
close1() {
this.FormVisible1 = false;
for (let key in this.userform) {
this.userform[key]=null;
}
this.userform.status = '1';
this.$refs['userform'].resetFields();
},
// 删除
handleDelete(row) {
let _this = this;
if(row.id == _this.logid){
_this.$message({
type: 'error',
message: '不可删除自己'
});
}else{
this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'delete',
url: 'employee/delete?employeeId='+ row.id,
authType: this.backToken
}).then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({type: 'success', message: res.data.message});
}else{
this.$message({type: 'error', message: res.data.message});
}
_this.Search();
}, (error) => {
this.$message({type: 'fail', message: "删除失败!" + error.response.data});
})
})
}
},
// 重置密码
resetPassWord(row) {
let _this = this;
this.$confirm('确定要重置密码吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'put',
url: 'employee/resetPassword?employeeId='+row.id,
authType: this.backToken
}).then((res) => {
if(res.status == 201 || res.status == 200){
let newpass = res.data.password;
_this.onSearch();
this.$alert('已重置! 用户名：'+ row.name +', 重置密码为: '+ newpass, '密码重置', {
confirmButtonText: '确定',
});
}
}, (error) => {
this.$message({
type: 'fail',
message: "重置失败!" + error.response.data
});
}
)
}).catch(() => {
});
},
// 批量操作
handleSelectionChange(selection){
let _this = this;
_this.selection = selection;
},
getMultipleSelect () {
let _this = this;
let arr = [];
let str = '';
if (_this.selection){
_this.selection.forEach(function (e) {
arr.push(e.id);
})
str = arr.join(',');
}else{
str = '';
}
return str;
},
// 批量禁用
multipleDisable () {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm('此操作将禁用用户权限, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
url:'employee/batchDis?employeeIds='+str,
method:'put',
authType: this.backToken
}).then((res) => {
//重新查询数据
_this.onSearch();
if(res.data.status == 201 || res.data.status == 200){
this.$message({type: 'success', message: res.data.message});
}else{
this.$message({type: 'error', message: res.data.message});
}
}, (error) => {
})
})
} else {
this.$message({
type: 'info',
message: '请至少选择一个选项'
});
}
},
// 批量删除
multipleDelete () {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm('此操作将删除选中用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
url:'employee/batchDel?employeeIds='+str,
method:'DELETE',
authType: this.backToken
}).then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({type: 'success', message: res.data.message});
}else{
this.$message({type: 'error', message: res.data.message});
}
//重新查询数据
_this.onSearch();
}, (error) => {})
}).catch(() => {});
} else {
this.$message({
type: 'info',
message: '请至少选择一个选项！'
});
}
},
}
}
</script>
<style lang="less">
@import '../../style/common';
.userManagePage{
.content_box{
.input_box{
width: 100%;
min-width: 815px;
margin-bottom: 32px;
.el-input, .el-select{
max-width:272px;
height:32px;
background:rgba(255,255,255,1);
border-radius:4px;
.el-input__inner{
height:32px;
}
}
.btn_form_search,.btn_form_add{
height: 32px;
text-align: center;
padding: 0 15px;
}
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr td {
padding: 6px 0px;
}
}
}
}
/*!*弹窗*!*/
.el-dialog{
width: 600px;
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
margin-top: 10vh!important;
.el-dialog__header{
padding: 15px;
border-bottom: 1px solid rgba(0,0,0,0.09);
}
.el-dialog__body{
padding: 0px!important;
border: 1px solid transparent;
.form_box{
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item{
margin: 10px 50px 20px;
.el-form-item__content{
width: 280px;
}
}
.el-input{
width: 100%;
}
}
.dialog-footer{
border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button{
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
.upload-demo{
padding: 10px 20px;
}
.el-upload-dragger{
max-width: 330px!important;
}
}
}
</style>