版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/85706869
<template>
<div class="content-container">
<div class="content-operate">
<el-form :inline="true" class="search-form-inline" label-position="right">
<div class="content-col">
<el-form-item label="登录账号">
<el-input
class="content-col-input"
v-model="account"
@keyup.enter.native="enterSearch()"
@blur="inputTrimProp('account')"
maxlength="50"
placeholder="请输入登录账号搜索">
</el-input>
</el-form-item>
</div>
<div class="content-col">
<el-form-item label="姓名">
<el-input class="content-col-input"
v-model="userName"
@keyup.enter.native="enterSearch()"
@blur="inputTrimProp('userName')"
maxlength="20"
placeholder="请输入姓名搜索">
</el-input>
</el-form-item>
</div>
<div class="content-col">
<el-form-item label-width="80px">
<el-button type="primary" class="el-button-reset" @click="queryData">查询</el-button>
<el-button class="el-button-reset" @click="searchReset">重置</el-button>
</el-form-item>
</div>
</el-form>
</div>
<div class="table">
<el-table
ref="multipleTable"
:data="managers"
style="width: 100%; font-size: 13px;">
<el-table-column
align="left"
prop="account"
label="登录账号"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="left"
label="姓名"
prop="userName"
show-overflow-tooltip>
</el-table-column>
<el-table-column
label="角色"
width="200">
<template slot-scope="scope">
<el-tooltip placement="top">
<div class="contentMore">
<span v-for="(role, index) in scope.row.roles" :key="index">
{{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
</span>
</div>
<div slot="content">
<span v-for="(role, index) in scope.row.roles" :key="index">
{{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
label="管理范围"
prop="orgName"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="left"
label="上次登录时间"
width="150">
<template slot-scope="scope">
<span v-text="scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : '' "></span>
<!-- 也可以这么写<span {{scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : ''}} ></span> -->
</template>
</el-table-column>
<el-table-column
width="100px"
label="状态">
<template slot-scope="scope">
<span v-if="scope.row.status === 1">正常</span>
<span v-if="scope.row.status === 0">禁用</span>
</template>
</el-table-column>
<el-table-column
width="200"
label="操作">
<template slot-scope="scope">
<el-button class="operate" @click="forbidden(scope.row.orgManagerId, 0)" type="text" v-if="scope.row.status === 1">禁用</el-button>
<el-button class="operate" @click="use(scope.row.orgManagerId, 1)" type="text" v-if="scope.row.status === 0">启用</el-button><div class="segment">|</div>
<el-button class="operate" @click="editManager(scope.row)" type="text">编辑</el-button><div class="segment">|</div>
<el-button class="operate" @click="deleteUserConfirm(scope.row.orgId, scope.row.userId)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block">
<el-pagination
@current-change="getManagers"
:current-page.sync="pageIndex"
:page-size="pageNum"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
<el-dialog title="编辑管理员" width="590px" :visible.sync="dialogVisible" class="dialog-set">
<el-form :model="adminForm" ref="adminForm" :rules="adminRoles" label-width="79px" >
<el-form-item label="角色" prop="roleIds">
<div class="dialog-set-role" ref='roleRef' id="roleId">
<el-checkbox-group v-model="adminForm.roleIds" class="dialog-set-role-check">
<el-checkbox v-for="role in allRole" :label="role.roleId" :key="role.roleId">{{role.roleName}}</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-form-item label="管理部门" prop="orgId">
<div class="dialog-set-org">
<el-tree
ref="depTree"
:data="orgTree"
node-key="orgId"
accordion
:highlight-current='true'
default-expand-all
:props="defaultProps"
@node-click="selectDep">
</el-tree>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input
type="textarea"
:rows="4"
v-model="adminForm.remark"
maxlength="100"
placeholder="请输入内容,100字以内">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="el-button-reset" @click="restForm('adminForm')">取 消</el-button>
<el-button class="el-button-reset" type="primary" @click="setAdmin('adminForm')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import manageApi from '@/api/manageApi';
import depApi from '@/api/depApi';
import userApi from '@/api/userApi';
export default {
name: 'MenuTable',
data() {
const checkRoles = (role, value, callback) => {
if (value.length === 0) {
this.$refs.roleRef.style.borderColor = '#f56c6c';
return callback(new Error('请至少选择一个角色'));
}
this.$refs.roleRef.style.borderColor = '#DCDFE6';
return callback();
};
return {
// 分页(当前页码、每页数据条数、全部数据条数)
pageIndex: 0,
pageNum: 10,
total: 0,
// 搜索条件
account: '',
userName: '',
// 管理员数组
managers: [],
// 编辑管理员窗口
dialogVisible: false,
// 当前操作的管理员对象
nowManage: {},
// 编辑的管理员的对象
adminForm: {
roleIds: [],
remark: '',
orgId: '',
userId: '',
},
// 存储全部角色
allRole: [],
// 组织树
orgTree: [],
defaultProps: {
children: 'childs',
label: 'orgName',
},
// 管理员编辑表单校验
adminRoles: {
roleIds: [
// { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' },
{ validator: checkRoles, trigger: 'change' },
],
orgId: [
{ required: true, message: '请选择管理的部门', trigger: 'change' },
],
},
};
},
methods: {
inputTrimProp(prop) {
this[prop] = this[prop].trim();
},
enterSearch() {
this.inputTrimProp('account');
this.inputTrimProp('userName');
this.queryData();
},
queryData() {
this.pageIndex = 1;
this.getManagers();
},
// 将搜索条件重置后查询管理员
searchReset() {
this.userName = '';
this.account = '';
this.pageIndex = 1;
this.getManagers();
},
// 获取全部的管理员
getManagers() {
const params = {
params: {
userName: this.userName,
account: this.account,
pageIndex: this.pageIndex - 1,
pageNum: this.pageNum,
},
};
manageApi.getManagers({
params,
}).then((reponse) => {
if (reponse.state === 0) {
this.managers = reponse.data.data;
this.total = reponse.data.count;
} else {
this.$message.error(reponse.message);
}
}).catch((err) => {
this.$message.error(err.message);
});
},
forbidden(orgManagerId, status) {
this.$confirm('确定禁用该管理员?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const params = {
params: {
orgManagerId,
status,
},
};
manageApi.forbidden({
params,
}).then((reponse) => {
if (reponse.state === 0) {
this.$message({
type: 'success',
message: '已禁用管理员',
});
this.getManagers();
} else {
this.$message.error(reponse.message);
}
}).catch((err) => {
this.$message.error(err.message);
});
}).catch(() => {
});
},
use(orgManagerId, status) {
this.$confirm('确定启用该管理员?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const params = {
params: {
orgManagerId,
status,
},
};
manageApi.forbidden({
params,
}).then((reponse) => {
if (reponse.state === 0) {
this.$message({
type: 'success',
message: '已启用管理员',
});
this.getManagers();
} else {
this.$message.error(reponse.message);
}
}).catch((err) => {
this.$message.error(err.message);
});
}).catch(() => {
});
},
deleteUserConfirm(orgId, userId) {
this.$confirm('确定删除管理员?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.deleteUser(orgId, userId);
}).catch(() => {
});
},
deleteUser(orgId, userId) {
const params = {
params: {
orgId,
userId,
},
};
manageApi.deleteUser({
params,
}).then((reponse) => {
if (reponse.state === 0) {
this.$message({
type: 'success',
message: '已删除管理员',
});
} else {
this.$message.error(reponse.message);
}
}).catch((err) => {
this.$message.error(err.message);
});
this.getManagers();
},
// 编辑管理员
editManager(manager) {
this.dialogVisible = true;
this.nowManage = manager;
this.adminForm.roleIds = this.nowManage.roles;
this.adminForm.roleIds = [];
for (let i = 0; i < this.nowManage.roles.length; i += 1) {
this.adminForm.roleIds.push(this.nowManage.roles[i].roleId);
}
this.adminForm.remark = this.nowManage.remark;
this.adminForm.orgId = this.nowManage.orgId;
this.getAllRole();
this.getAllOrg();
},
// 获取全部角色
getAllRole() {
const params = {
params: {
searchKeyword: '',
},
};
userApi.getRole({
params,
}).then((data) => {
if (data.state === 0) {
this.allRole = data.data;
}
}).catch(() => {
this.$message({
message: '获取角色不成功',
type: 'warning',
});
});
},
// 查找全部部门
getAllOrg() {
depApi.getAllOrg().then((response) => {
if (response.state === 0) {
this.orgTree = response.data;
// 设置部门默认选中
const defSelect = [];
defSelect[0] = this.nowManage.orgId;
this.$nextTick(() => {
this.$refs.depTree.setCurrentKey(defSelect[0]);
});
} else {
this.$message.error(response.message);
}
}).catch(() => {
});
},
selectDep(data) {
this.adminForm.orgId = data.orgId;
},
setAdmin(formName) {
const params = {
data: {
orgId: this.adminForm.orgId,
orgManagerId: this.nowManage.orgManagerId,
remark: this.adminForm.remark,
roleIds: this.adminForm.roleIds,
userId: this.nowManage.userId,
},
};
this.$refs[formName].validate((valid) => {
if (valid) {
this.dialogVisible = false;
manageApi.setAdmin({
params,
}).then((response) => {
if (response.state === 0) {
this.$message({
message: '管理员信息已编辑',
type: 'success',
});
this.getManagers();
this.$refs[formName].resetFields();
}
}).catch((error) => {
console.log(error);
});
return true;
}
return false;
});
},
restForm(formName) {
this.$refs[formName].resetFields();
this.dialogVisible = false;
},
},
mounted() {
this.getManagers();
},
};
</script>
<style lang="less" scoped>
.content-container {
padding: 0 20px;
background: #fff;
overflow: hidden;
}
.content-col{
width: 33.33%;
float: left;
}
.content-col .el-form-item{
margin-bottom: 0px;
width: 100%;
}
.content-row {
overflow: hidden;
}
.content-col-input {
width: 100%;
}
.fl {
float: left;
}
.fr {
float: right;
}
.content-row--classify {
padding: 4px 0 22px 0;
border-bottom: 1px dashed #ebeef5;
}
.content-row--tool-first {
margin-top: 26px;
}
.content-row--operate {
margin-bottom: 6px;
}
.content-row--tool {
margin-bottom: 20px;
}
.content-tool {
padding: 20px;
border: 1px solid #ebeef5;
background: #fff;
font-size: 14px;
color: #606266;
overflow: hidden;
}
.content-tool--title {
margin-right: 12px;
height: 36px;
line-height: 36px;
width: 44px;
}
.content-tool--input {
width: calc(100% - 250px);
height: 36px;
}
.content-tool--input input {
height: 36px;
line-height: 36px;
}
.content-tool--operate {
float: left;
margin-left: 20px;
}
.content-tool--qry {
width: 80px;
}
.content-tool--reset {
width: 80px;
margin-left: 10px;
}
.set-ellipesd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-tool--nav {
width: 100%;
float: left;
}
.content-operate {
padding: 27px 20px;
overflow: hidden;
border: 1px solid #EBEEF5;
margin-bottom: 20px;
}
.content-operate--add {
width: 80px;
float: left;
}
.content-operate--input {
float: right;
width: 272px;
height: 36px;
}
.edit-operation {
color: #20A0FF;
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #EBEEF5;
cursor: pointer;
}
.edit-operation:first-child {
padding-left: 0px;
padding-right: 10px;
border-left: 0px solid #EBEEF5;
}
.edit-operation:last-child {
padding-left: 10px;
padding-right: 0px;
}
.block {
float: right;
margin-left: -5px;
margin-top: 20px;
}
.contentMore {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.operate {
float: left;
padding: 4px 0px 0px 0px;
}
.segment {
float: left;
position: relative;
color: #EBEEF5;
margin-left: 10px;
margin-right: 10px;
}
.dialog-set {
&-role {
height: 125px;
width: 470px;
border: 1px solid #DCDFE6;
border-radius: 4px;
overflow: auto;
margin-right: 0px;
&-check {
.el-checkbox {
margin: 0px;
width: calc(50% - 20px);
float: left;
padding-left: 20px
}
}
}
&-org {
height: 150px;
width: 470px;
border: 1px solid #DCDFE6;
border-radius: 4px;
overflow: auto;
margin-right: 0px;
.el-tree {
margin: 11px 14px
}
}
&-remark {
height: 100px;
width: 470px;
border: 1px solid #DCDFE6;
border-radius: 4px;
margin-right: 0px;
}
}
</style>
<style>
.search-form-inline .el-form-item__content{
width: 70%;
}
</style>
删除form表单中的某个字段,直接用delete。
adminForm: {
roleIds: [],
remark: '',
orgId: '',
userId: '',
},
delete this.adminForm.remark ;