一、操作员管理

操作员就是登陆进来的用户。用户相关信息。

实现代码

SysAdmin.vue

<template><div><!-- center 居中。向上举例10px --><div style="display: flex;justify-content: center;margin-top: 10px"><el-input v-model="keywords" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search"style="width: 400px;margin-right: 10px"></el-input><el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button></div><div class="admin-container"> <!-- 循环将所有的操作员进行打印--><el-card class="admin-card" v-for="(admin,index) in admins" :key="index"><div slot="header" class="clearfix"><span>{{admin.name}}</span><el-button style="float: right; padding: 3px 0;color: red" type="text"icon="el-icon-delete" @click="deleteAdmin(admin)"></el-button></div><div><div class="img-container"><img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userface-img"></div></div><div class="userinfo-container"><div>用户名：{{admin.name}}</div><div>手机号码：{{admin.phone}}</div><div>电话号码：{{admin.telephone}}</div><div>地址：{{admin.address}}</div><div>用户状态：<el-switchv-model="admin.enabled"active-color="#13ce66"inactive-color="#ff4949"@change="enabledChange(admin)"active-text="启用"inactive-text="禁用"></el-switch></div><div>用户角色：<el-tag style="margin-right: 4px" type="success" v-for="(role,indexj) in admin.roles":key="indexj">{{role.nameZh}}</el-tag><el-popoverplacement="right"title="角色列表"width="200"@show="showPop(admin)"@hide="hidePop(admin)"trigger="click"><el-select v-model="selectedRoles" multiple placeholder="请选择"><el-optionv-for="(r,index) in allRoles":key="index":label="r.nameZh":value="r.id"></el-option></el-select><el-button slot="reference" type="text" icon="el-icon-more"></el-button></el-popover></div><div>备注：{{admin.remark}}</div></div></el-card></div></div>
</template><script>export default {name: "SysAdmin",data() {return {admins: [], //调用的数组keywords: '',allRoles: [],selectedRoles: []}},mounted() {/* 调用事件 */this.initAdmins();},methods: {hidePop(admin) {let roles = [];Object.assign(roles, admin.roles);let flag = false;if (roles.length != this.selectedRoles.length) {flag = true;} else {for (let i = 0; i < roles.length; i++) {let role = roles[i];for (let j = 0; j < this.selectedRoles.length; j++) {let sr = this.selectedRoles[j];if (role.id == sr) {roles.splice(i, 1);i--;break;}}}if (roles.length != 0) {flag = true;}}if (flag) {let url = '/system/admin/role?adminId=' + admin.id;this.selectedRoles.forEach(sr => {url += '&rids=' + sr;});this.putRequest(url).then(resp => {if (resp) {this.initAdmins();}})}},showPop(admin) {this.initAllRoles();let roles = admin.roles;this.selectedRoles = [];roles.forEach(r => {this.selectedRoles.push(r.id);});},initAllRoles() {this.getRequest('/admin/roles').then(resp => {if (resp) {this.allRoles = resp;}})},enabledChange(admin) {this.putRequest('/admin/update', admin).then(resp => {if (resp) {this.initAdmins();}})},deleteAdmin(admin) {this.$confirm('此操作将永久删除该【' + admin.name + '】操作员, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteRequest('/admin/delete' + admin.id).then(resp => {if (resp) {this.initAdmins();}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},doSearch() {this.initAdmins();},initAdmins() {//this.getRequest('/admin/list?keywords=' + this.keywords).then(resp => {this.getRequest('/admin/list').then(resp => {if (resp) {this.admins = resp;}})}}}
</script>

用户状态更新

SysAdmin.vue

<div class="userinfo-container"><div>用户名：{{admin.name}}</div><div>手机号码：{{admin.phone}}</div><div>电话号码：{{admin.telephone}}</div><div>地址：{{admin.address}}</div><div>用户状态：<el-switchv-model="admin.enabled"active-color="#13ce66"inactive-color="#ff4949"@change="enabledChange(admin)"active-text="启用"inactive-text="禁用"></el-switch></div><div>用户角色：<el-tag style="margin-right: 4px" type="success" v-for="(role,indexj) in admin.roles":key="indexj">{{role.nameZh}}</el-tag><el-popoverplacement="right"title="角色列表"width="200"@show="showPop(admin)"@hide="hidePop(admin)"trigger="click"><el-select v-model="selectedRoles" multiple placeholder="请选择"><el-optionv-for="(r,index) in allRoles":key="index":label="r.nameZh":value="r.id"></el-option></el-select><el-button slot="reference" type="text" icon="el-icon-more"></el-button></el-popover></div><div>备注：{{admin.remark}}</div></div>

删除

deleteAdmin(admin) {this.$confirm('此操作将永久删除该【' + admin.name + '】操作员, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteRequest('/admin/delete' + admin.id).then(resp => {if (resp) {this.initAdmins();}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

角色更新

<div class="admin-container"> <!-- 循环将所有的操作员进行打印--><el-card class="admin-card" v-for="(admin,index) in admins" :key="index"><div slot="header" class="clearfix"><span>{{admin.name}}</span><el-button style="float: right; padding: 3px 0;color: red" type="text"icon="el-icon-delete" @click="deleteAdmin(admin)"></el-button></div><div><div class="img-container"><img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userface-img"></div></div>enabledChange(admin) {this.putRequest('/admin/update', admin).then(resp => {if (resp) {this.initAdmins();}})},

操作员搜索

<div style="display: flex;justify-content: center;margin-top: 10px"><el-input v-model="keywords" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search"style="width: 400px;margin-right: 10px"></el-input><el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
</div>return {admins: [], //调用的数组keywords: '',allRoles: [],selectedRoles: []
}

008-云E办_操作员管理相关推荐

027-云E办_员工管理
027-云E办_员工管理一.员工管理基础介绍 1.数据库表介绍 2.页面功能介绍: 二.员工查询 1.前期工作: 1.mybatis分页配置类,分页插件 2. 分页公共返回对象 3.转换类:日期转换 ...
融云发送自定义消息_数据源管理 | Kafka集群环境搭建，消息存储机制详解
一.Kafka集群环境 1.环境版本版本:kafka2.11,zookeeper3.4 注意:这里zookeeper3.4也是基于集群模式部署. 2.解压重命名 tar -zxvf kafka_2. ...
云E办项目之部门管理
文章目录云E办---部门管理一.展示所有部门 1. 后台接口及数据格式 2. 使用Element-ui中的Tree树形控件 3. 初始化部门信息二. 添加部门 1. 后台接口及数据格式 2. 使 ...
云e办（后端）——员工管理
云e办(后端)--员工管理员工表: 关联表:外键id 1.员工表:名族类型是int,所以说是通过id找到民族表[t_nation] 2.政治面貌类型是int,通过id找到政治面貌表t_politic ...
（B站云e办）SpringBoot开发项目实战记录（七）(员工管理（分页知识）)
(B站云e办)SpringBoot开发项目实战记录(七) 一.员工管理 1.1 准备工作(分页配置类.日期格式化类) 1. mybatisplus配置类分页 2. 日期格式化类(converter) ...
云e办前端学习（六）职称管理
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
云e办前端学习笔记（十一）员工基本资料管理
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
001-云E办_后端项目搭建
001-云E办_后端项目介绍一.项目介绍: 二.项目搭建 1.创建数据库 2.创建父项目 3.创建子项目:yeb-server 4.更改yeb-server 1.在xml文件中,添加依赖于父工程. ...

008-云E办_操作员管理

008-云E办_操作员管理

一、操作员管理

实现代码

用户状态更新

删除

角色更新

操作员搜索

008-云E办_操作员管理相关推荐

最新文章

热门文章