<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-11 17:38:01
|
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
|
* @LastEditTime: 2023-09-05 17:46:59
|
* @Description: 账户管理
|
-->
|
<template>
|
<div class="account-list-page">
|
<!-- 搜索栏 -->
|
<div class="search-box">
|
<el-row>
|
<el-col :span="6">
|
<span class="tit">查询表格</span>
|
</el-col>
|
<el-col :span="18">
|
<div style="float:right;">
|
<button class="btn-creat" @click="showPop(null,1)">+ 新建</button>
|
<el-input
|
v-model="form.keyWord"
|
size="small"
|
style="width:280px;display: inline-block;"
|
@change="searchList"
|
placeholder="请输入用户名称/手机号"
|
>
|
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 表格 -->
|
<Etable :searchData="defaultVal" :columns="column" httpUrl="userList"></Etable>
|
<!-- 新增弹出层 -->
|
<el-dialog :title="title" width="480px" :visible.sync="dialogFormVisible">
|
<!-- :rules="rules" -->
|
<el-form :model="creatForm" ref="ruleForm" size="small" :label-width="formLabelWidth" >
|
<el-form-item label="用户名称：" prop="name">
|
<el-input
|
v-model.trim="creatForm.name"
|
maxlength="30"
|
autocomplete="off"
|
placeholder="请输入用户名称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="用户手机号：" prop="phone">
|
<el-input
|
v-if="isCreat"
|
v-model.trim="creatForm.phone"
|
maxlength="11"
|
autocomplete="off"
|
placeholder="请输入用户手机号"
|
></el-input>
|
<span v-else>{{creatForm.phone}}</span>
|
</el-form-item>
|
<el-form-item label="用户角色：" prop="role">
|
<el-select v-model="creatForm.role" placeholder="请选择" style="width:200px">
|
<el-option
|
v-for="item in roleList"
|
:key="item.roleId"
|
:label="item.roleName"
|
:value="item.roleId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="cancelCreat">取 消</el-button>
|
<el-button size="mini" type="primary" @click="confrimCreat">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import md5 from "blueimp-md5";
|
import Etable from "../../components/table.vue";
|
import {roleGetRoleList,userAdd,userUpdate,userManageDisabled} from '@/api/user';
|
export default {
|
components:{ Etable },
|
data() {
|
return {
|
title: '',//弹出层title
|
rowsInfo: {},//选中操作某行行数据
|
roleList: [],
|
isCreat: true,
|
dialogFormVisible: false,
|
formLabelWidth:'120px',
|
form: { keyWord: null},
|
creatForm:{
|
name:'',
|
phone:'',
|
password:null,
|
resPassword:null,
|
role:''
|
},// 新建用户表单
|
defaultVal: {},
|
refresh: {},
|
column: [
|
{
|
prop: "userName",
|
lable: "用户名称",
|
align: "center"
|
},
|
{
|
prop: "userNo",
|
lable: "用户手机号",
|
align: "center"
|
},
|
{
|
prop: "roleName",
|
lable: "用户角色",
|
align: "center"
|
},
|
{
|
lable: "停启用",
|
align: "center",
|
render: (h, params) => {
|
return h("div", [
|
h("el-switch", {
|
props: {
|
value: params.row.status === 1,
|
"active-color": "#66DD42",
|
"inactive-color": "#eeeeee"
|
},
|
on: {
|
change: () => {
|
params.row.status = params.row.status === 1 ? 0 : 1;
|
this.updateContract(params);
|
}
|
}
|
})
|
]);
|
}
|
},
|
{
|
key: "",
|
name: "操作",
|
fixed: "right",
|
align: "center",
|
render: (h, params) => {
|
return h("div", [
|
h(
|
"span",
|
{
|
style: {
|
"font-size": "12px",
|
"font-family": "Microsoft YaHei",
|
"font-weight": 400,
|
"text-decoration": "underline",
|
color: "rgba(60,142,254,1)",
|
cursor: "pointer",
|
},
|
on: {
|
click: () => {
|
this.showPop(params.row,2);
|
}
|
}
|
},
|
"编辑"
|
)
|
]);
|
}
|
}
|
]
|
// },// 表格数据
|
};
|
},
|
watch: {
|
dialogFormVisible: function(newVal) {
|
if (!newVal) {
|
this.creatForm.name = "";
|
this.creatForm.phone = "";
|
this.creatForm.role = '';
|
}
|
}
|
},
|
created(){
|
roleGetRoleList().then(res => {
|
if (res) {
|
this.roleList = res.body
|
}
|
}).catch(err => {})
|
},
|
methods: {
|
// 显示弹出层
|
showPop(params, item) {
|
if (params && item != 1) {
|
this.creatForm.phone = params.userNo;
|
this.creatForm.role = params.roleId;
|
this.$set(this.creatForm,'role',params.roleId)
|
this.$set(this.creatForm,'name',params.userName)
|
this.creatForm.password = params.password;
|
this.creatForm.resPassword = params.resPassword;
|
this.isCreat = false;
|
this.rowsInfo = params
|
this.title = '编辑账户'
|
}
|
if (item == 1) {
|
this.isCreat = true;
|
this.title = '新建账户'
|
}
|
this.dialogFormVisible = true;
|
},
|
/**搜索框**/
|
searchList() {
|
this.qureys();
|
},
|
/**搜索用户列表**/
|
qureys() {
|
let obj = {};
|
obj = {...this.form};
|
if (this.form.keyWord == "") {
|
obj.keyWord = null;
|
}
|
this.defaultVal = { ...obj };
|
this.refresh = this.defaultVal;
|
},
|
/**新建用户或编辑用户**/
|
confrimCreat(){
|
let v = this.$tool
|
if(v.checkValEmpty(this.creatForm.name)){
|
this.$message.error('请输入用户名称');
|
return
|
}
|
if(v.checkValEmpty(this.creatForm.phone)){
|
this.$message.error('请输入用户手机号');
|
return
|
}
|
if(!v.checkPhone(this.creatForm.phone)){
|
this.$message.error('请输入正确的用户手机号');
|
return
|
}
|
if(v.checkValEmpty(this.creatForm.role)){
|
this.$message.error('请选择角色');
|
return
|
}
|
|
if(this.title === '新建账户') {
|
let temPassWord = md5(this.creatForm.phone+this.creatForm.password)
|
let temconfirmPwd = md5(this.creatForm.phone+this.creatForm.resPassword)
|
let data = {userNo: this.creatForm.phone, userName: this.creatForm.name, roleId: this.creatForm.role, pwd: temPassWord, confirmPwd: temconfirmPwd}
|
userAdd(data).then(res => {
|
if(res) {
|
this.$notify({
|
title: '提示',
|
message: '新增成功',
|
type: 'success'
|
})
|
this.dialogFormVisible = false
|
this.qureys()
|
}
|
}).catch(err => {
|
this.dialogFormVisible = false
|
})
|
} else if (this.title === '编辑账户') {
|
let data = {userName: this.creatForm.name, userId: this.rowsInfo.userId, roleId:this.creatForm.role}
|
userUpdate(data).then(res => {
|
if(res) {
|
this.$notify({
|
title: '提示',
|
message: '编辑成功',
|
type: 'success'
|
})
|
this.dialogFormVisible = false
|
this.qureys();
|
}
|
}).catch(err => {});
|
}
|
},
|
/**取消新建、编辑账户**/
|
cancelCreat(){
|
this.creatForm = {};
|
this.dialogFormVisible = false
|
},
|
/**更新用户状态**/
|
updateContract(params) {
|
let {userId,status} = params.row;
|
let data = { userId,status};
|
userManageDisabled(data).then(res => {
|
if(res) {
|
this.$notify({
|
title: '提示',
|
message: '状态更新成功',
|
type: 'success'
|
})
|
this.qureys()
|
}
|
}).catch(err => {})
|
},
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.account-list-page {
|
& {
|
background: #fff;
|
box-sizing: border-box;
|
padding: 24px 16px 40px 16px;
|
}
|
.btn-creat {
|
margin-right: 16px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
width: 64px;
|
height: 32px;
|
background: rgba(60, 142, 254, 1);
|
border-radius: 2px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
