<!-- 用户管理 -->
|
<template>
|
<div class="main" id="main">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">用户名：</span>
|
<el-input v-model="userName" :size="size" clearable placeholder="请输入用户名"></el-input>
|
</div>
|
<div class="header_item">
|
<span class="header_label">联系电话：</span>
|
<el-input v-model="telphone" :size="size" clearable placeholder="请输入联系电话"></el-input>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-if="showButton('search')" @click="searchUserInfo(true)">查询</el-button>
|
<el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="propInsert()">添加</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<el-table
|
v-loading="loading"
|
:data="userList"
|
height="100%" >
|
<el-table-column label="序号" width="55" align="center">
|
<template #default="scope">
|
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="realName" label="姓名" align="center"></el-table-column>
|
<el-table-column prop="username" label="用户名" align="center"></el-table-column>
|
<el-table-column prop="telphone" label="联系电话" align="center"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
|
<el-table-column label="操作" width="300" align="center">
|
<template #default="{ row }">
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(row)">修改</el-button>
|
<el-button class="table_btn" size="mini" v-if="showButton('roleConfig')" @click="propConfigRole(row)">角色配置</el-button>
|
<!-- <el-button class="table_btn" size="mini" v-if="showButton('departConfig')" @click="propConfigDepart(row)">部门配置</el-button> -->
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteUserInfo(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
@size-change="changePageSize"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle === 0 ? '添加用户' : '修改用户'"
|
:visible.sync="asyncUser"
|
width="35%">
|
<el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" class="rule_form">
|
<el-form-item label="姓名：" prop="realName">
|
<el-input v-model="ruleForm.realName" :size="size" clearable placeholder="请输入用户姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="用户名：" prop="username">
|
<el-input v-model="ruleForm.username" :size="size" clearable placeholder="请输入用户名"></el-input>
|
</el-form-item>
|
<el-form-item label="密码：" prop="password" v-if="asyncTitle === 0">
|
<el-input v-model="ruleForm.password" :size="size" clearable placeholder="请输入密码" show-password></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话：" prop="telphone">
|
<el-input v-model="ruleForm.telphone" :size="size" clearable placeholder="请输入联系电话"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱：" prop="email">
|
<el-input v-model="ruleForm.email" :size="size" clearable placeholder="请输入邮箱"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncUser = false">取 消</el-button>
|
<el-button class="submit_btn" @click="asyncTitle === 0 ? submitInsert() : submitUpdate()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
<!-- 角色配置 -->
|
<el-dialog
|
class="prop_dialog"
|
title="角色配置"
|
:visible.sync="asyncConfig"
|
width="35%">
|
<el-checkbox-group v-model="roleIdList">
|
<template v-for="item in roleList">
|
<el-checkbox :key="item.roleId" :label="item.roleId">{{item.roleName}}</el-checkbox>
|
</template>
|
</el-checkbox-group>
|
<div slot="footer">
|
<el-button @click="asyncConfig = false">取 消</el-button>
|
<el-button class="submit_btn" @click="submitConfigRole()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
<!-- 部门配置 -->
|
<el-dialog
|
class="prop_dialog"
|
title="部门配置"
|
:visible.sync="asyncDepart"
|
width="35%">
|
<el-form ref="departForm" :model="departForm" :rules="departRules" label-width="auto">
|
<el-form-item label="所属部门：" prop="departIds">
|
<el-cascader
|
v-model="departForm.departIds"
|
:props="props"
|
:options="departmentList"
|
:show-all-levels="false"
|
style="width: 100%">
|
</el-cascader>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncDepart = false">取 消</el-button>
|
<el-button class="submit_btn" @click="submitDpart()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia/index';
|
import { throttle, changeSize } from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
export default {
|
data() {
|
return {
|
size: changeSize(), // 组件尺寸
|
userName: "", // 用户姓名
|
telphone: "", // 联系电话
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
asyncTitle: 0, // 弹出框标题 0: 添加用户，1：修改用户
|
asyncUser: false, // 用户弹出框变量
|
asyncConfig: false, // 角色配置弹出框变量
|
ruleForm: {}, // form表单数据
|
asyncDepart: false, // 部门配置对话框
|
rules: {
|
realName: [{
|
required: true,
|
message: '请输入用户姓名',
|
trigger: 'blur'
|
}],
|
username: [{
|
required: true,
|
message: '请输入用户名',
|
trigger: 'blur'
|
}],
|
password: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur'
|
}],
|
telphone: [{
|
required: true,
|
message: '请输入联系电话'
|
}, {
|
validator: (rule, value, callback) => {
|
const reg = /^1[3456789]\d{9}$/
|
if(reg.test(value)) {
|
callback()
|
} else {
|
callback(new Error('请输入正确的电话格式'))
|
}
|
},
|
trigger: 'blur'
|
}],
|
email: [{
|
required: true,
|
message: '请输入邮箱',
|
trigger: 'blur'
|
},{
|
type: 'email',
|
message: '请输入正确的邮箱地址',
|
trigger: 'blur'
|
}]
|
}, // 表单验证规则
|
loading: true,
|
userList: [], // 用户信息列表
|
roleList: [], // 角色信息
|
userId: "", // 角色配置用户
|
roleIdList: [], // 角色配置信息
|
departForm: {}, // 部门配置表单
|
departRules: {
|
departIds: [{
|
required: true,
|
message: '请选择部门',
|
trigger: 'change'
|
}],
|
},
|
departmentList: [], // 部门信息
|
props: {
|
multiple: true,
|
value: 'departId',
|
label: 'departName',
|
children: 'childrens',
|
checkStrictly: true,
|
emitPath: false
|
},
|
}
|
},
|
watch: {
|
asyncUser(bol) {
|
if(!bol) {
|
this.ruleForm = {};
|
this.$refs.form.resetFields();
|
}
|
},
|
asyncDepart(bol) {
|
if(!bol) {
|
this.$refs.departForm.resetFields();
|
}
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.searchUserInfo(true);
|
},
|
methods: {
|
// 获取全部角色信息
|
async getRoleInfo() {
|
const { data } = await this.$api.System.getAllRolesInfo({})
|
this.roleList = data;
|
},
|
// 查询用户信息
|
searchUserInfo(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
let params = {
|
username: this.userName,
|
telphone: this.telphone,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
}
|
this.loading = true;
|
this.$api.System.searchUserInfo(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.total = res.data.total;
|
this.userList = res.data.list;
|
}
|
this.loading = false;
|
})
|
},
|
// 打开添加用户信息
|
propInsert() {
|
this.asyncTitle = 0;
|
this.asyncUser = true;
|
},
|
// 打开修改用户信息
|
propUpdate(row) {
|
this.asyncTitle = 1;
|
this.asyncUser = true;
|
this.$api.System.getUserInfo(row.userId).then(res => {
|
this.$set(this.ruleForm, 'userId', row.userId);
|
this.$set(this.ruleForm, 'realName', row.realName);
|
this.$set(this.ruleForm, 'username', row.username);
|
this.$set(this.ruleForm, 'telphone', row.telphone);
|
this.$set(this.ruleForm, 'email', row.email);
|
this.$set(this.ruleForm, 'version', res.data.version);
|
})
|
},
|
// 打开角色配置
|
propConfigRole(row) {
|
this.roleIdList = [];
|
this.userId = row.userId;
|
this.$api.System.getAllRolesInfo({userId: row.userId})
|
.then(res => {
|
this.roleList = res.data;
|
let list = res.data.filter(item => item.userHas === 1);
|
this.roleIdList = list.map(item => item.roleId);
|
})
|
this.asyncConfig = true;
|
},
|
// 打开部门配置
|
propConfigDepart(row) {
|
this.$set(this.departForm, 'userId', row.userId);
|
this.asyncDepart = true;
|
this.$api.System.getUserDepartmentInfo({
|
userId: row.userId
|
}).then(res => {
|
let data = this.pushDepartmentId(res.data);
|
this.$set(this.departForm, 'departIds', data);
|
})
|
},
|
// 删除用户信息
|
deleteUserInfo(row) {
|
this.$confirm("该操作将删除该用户，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.System.deleteUserInfo({id: row.userId})
|
.then(res => {
|
if(res.statusMsg === 'ok') {
|
this.searchUserInfo(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 提交添加用户信息
|
submitInsert: throttle(function() {
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
let params = Object.assign({}, this.ruleForm)
|
this.$api.System.createUserInfo(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncUser = false;
|
this.searchUserInfo(true);
|
this.$message.success("添加成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改用户信息
|
submitUpdate: throttle(function() {
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
let params = Object.assign({}, this.ruleForm);
|
this.$api.System.updateUserInfo(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncUser = false;
|
this.searchUserInfo(true);
|
this.$message.success("修改成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改角色配置
|
submitConfigRole: throttle(function () {
|
let params = {
|
roleIds: this.roleIdList.join(","),
|
userId: this.userId
|
};
|
this.$api.System.updateUserRole(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncConfig = false;
|
this.searchUserInfo(true);
|
this.$message.success("修改成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
});
|
}, 3000),
|
// 提交部门配置
|
submitDpart: throttle(function() {
|
this.$refs.departForm.validate(vaild => {
|
if(vaild) {
|
const params = Object.assign({}, this.departForm);
|
params.departIds = params.departIds.join(',')
|
this.$api.System.configUserDepartment(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncDepart = false;
|
this.$message.success('配置成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 扁平化处理最后一级多选部门转为字符串
|
getSelectData(data) {
|
let list = data.map(item => {
|
item = [item[item.length - 1]];
|
return item;
|
})
|
return list.flat(Infinity).join(",");
|
},
|
// 处理部门最后一级空白数据
|
clearLastInfo(list) {
|
let data = list.map(item => {
|
if(item?.childrens.length > 0) {
|
this.clearLastInfo(item.childrens);
|
} else {
|
item.childrens = undefined;
|
}
|
return item;
|
});
|
return data;
|
},
|
// 处理已配置的部门信息
|
flatDepartmentId(list) {
|
let data = list.map(item => {
|
let arr = []
|
if(item.childrens) {
|
arr = this.flatDepartmentId(item.childrens);
|
}
|
return [
|
{
|
departId :item.departId,
|
userHas: item.userHas
|
},
|
arr
|
].flat(Infinity)
|
})
|
return data;
|
},
|
// 处理扁平化后的已选部门信息做回显
|
pushDepartmentId(list) {
|
let data = this.flatDepartmentId(list).map(item => {
|
return item.filter(items => items.userHas === 1);
|
});
|
let newData = data.filter(item => item.length > 0);
|
return newData.map(item => {
|
return item.map(items => items.departId)
|
}).flat(Infinity);
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
// 切换页数
|
changePageNum(page) {
|
this.pageNum = page;
|
this.searchUserInfo();
|
},
|
// 切换每页条数
|
changePageSize(size) {
|
this.pageSize = size;
|
this.searchUserInfo();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
|
::v-deep .el-checkbox {
|
margin: 10px 0;
|
margin-right: 30px;
|
}
|
</style>
|
