```
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索与添加区域 -->
<el-row :gutter="20">
<el-col :span="7">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @click="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList" />
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<el-table :data="userlist" border stripe>
<el-table-column label="#" type="index" />
<el-table-column label="姓名" prop="username" />
<el-table-column label="邮箱" prop="email" />
<el-table-column label="电话" prop="mobile" />
<el-table-column label="角色" prop="role_neme" />
<el-table-column label="状态" prop="type">
<template slot-scope="scope">
<!-- {{scope.row.type}} -->
<el-switch v-model="scope.row.type" @change="userStateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- {{scope.row.type}} -->
<!-- 修改按钮 -->
<el-tooltip effect="dark" content="编辑角色" placement="top" :enterable="false">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDFialog(scope.row.id)"
/>
</el-tooltip>
<!-- 删除按钮 -->
<el-tooltip effect="dark" content="删除角色" placement="top" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"/>
</el-tooltip>
<!-- 分配角色 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
:current-page="queryInfo.pagenum"
:page-sizes="[10, 20, 50, 100]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="queryInfo.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<!-- 添加用户的对话框 :rules验证规则 ref=引用 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<!-- @click="addDialogVisible = false" -->
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 修改用户的对话框 -->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<!-- 内容主体区域-->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<!-- @click="addDialogVisible = false" -->
<el-button type="primary" @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱正则
const regEmail = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
if (regEmail.test(value)) {
// 合法邮箱
return cb()
}
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) => {
// 验证手机号正则
const regMobile = /^(1(([35789][0-9])|(47)))\d{8}$/
if (regMobile.test(value)) {
// 合法邮箱
return cb()
}
cb(new Error('请输入合法的手机号'))
}
return {
// 获取用户列表的参数对象
queryInfo: {
query: '', // 查询参数
pagenum: 1, // 当前页码
pagesize: 10 // 每页显示条数
},
userlist: [],
total: 5,
// 控制添加用户对话框的显示与隐藏
addDialogVisible: false,
// 添加永华表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 控制修改用户对话框显示与隐藏
editDialogVisible: false,
// 查询用户信息对象
editForm: {},
// 修改表单的验证规则对象
editFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
}
},
created () {
this.getUserList()
},
methods: {
async getUserList () {
const { data: res } = await this.$http.get('login/users', {
params: this.queryInfo
})
if (res.code !== 1) return this.$message.error(res.msg)
console.log(res)
this.userlist = res.data
this.total = res.total
},
// 监听 pagesize 改变的事件
handleSizeChange (newSize) {
console.log(newSize)
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值 改变的事件
handleCurrentChange (newPage) {
console.log(newPage)
this.queryInfo.pagenum = newPage
this.getUserList()
},
// 监听 switch 开关状态值变
async userStateChanged (userinfo) {
console.log(userinfo)
const { data: res } = await this.$http.put(
`login/users/${userinfo.id}/state/${userinfo.type}`
)
if (res.code !== 1) {
userinfo.type = !userinfo.type
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功')
},
// 监听添加用户对话框关闭事件
addDialogClosed () {
this.$refs.addFormRef.resetFields()
},
// 点击按钮添加新用户
addUser () {
this.$refs.addFormRef.validate(async valid => {
// console.log(this.addForm)
if (!valid) return
// 可以发送网络请求
// const { data: res } = await this.$http.post('login/users', this.addForm)
// if (res.code !== 1) {
// this.$message.error('添加用户失败')
// }
this.$message.success('添加用户成功')
// 隐藏添加用户的对话框
this.addDialogVisible = false
// 重新获取用户列表
this.getUserList()
})
},
// 展示编辑用户对话框
showEditDFialog (id) {
console.log(id)
// const {data:res} = await this.$http.get('login/users/'+id)
// if(res.code!==1){
// return this.$message.error('查询失败')
// }
// this.editForm = res.data
this.editDialogVisible = true
},
// 监听修改用户对话框关闭事件
editDialogClosed () {
this.$refs.editFormRef.resetFields()
},
// 修改用户信息并提交
editUserInfo () {
this.$refs.editFormRef.validate(async valid => {
// console.log(valid)
if (!valid) return
// 可以发送网络请求
// const { data: res } = await this.$http.post('login/users', this.editForm.id)
const { data: res } = await this.$http.put(
'login/users' + this.editForm.id,
{
email: this.editForm.email,
mobile: this.editForm.mobile
}
)
// if (res.code !== 1) {
// this.$message.error('添加用户失败')
// }
// 隐藏添加用户的对话框
this.editDialogVisible = false
// 重新获取用户列表
this.getUserList()
// 提示修改成功
this.$message.success('添加用户成功')
})
},
// 根据ID删除对应用户信息
async removeUserById (id) {
// 弹框提示
// .catch(err=> err)
const confirmResesult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(id)
var res = this.$http.delete('login/users/' + id)
if (res.code !== 1) {
}
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style lang="less" scoped>
</style>
```
- HTML
- 讯飞插件
- Python
- 王者荣耀
- demo_cg.py
- demo_cg_TT.py
- img.py
- MySQL
- 清空表数据
- ID自增长重置
- 用户密码及权限操作
- 外键在数据库中的作用
- MySQL增删改查语句
- DDL-数据库操作
- DDL-表操作-查询
- DDL-表操作-创建
- DDL-表操作-数据类型
- DDL-表操作-修改
- DDL-表操作-删除
- DML-语句
- DML-添加数据
- DML-修改数据
- DML-删除数据
- DQL-语法
- DQL-基本查询
- DQL-条件查询
- DQL-聚合函数
- DQL-分组查询
- DQL-排序查询
- DQL-分页查询
- DCL-介绍
- DCL-管理用户
- DCL-权限控制
- 函数
- JS
- ajax
- ajax get请求
- ajax post提交
- ajax 同时上传文本和文件到数据库(inpt text和input file)
- 路径传值+接收解析
- js 本地sessionStorage
- js Excel导出.xls
- 二维码生成插件
- VUE-CLI4
- 安装手脚架及插件
- ECharts-数据可视化
- element-ui-时间戳
- qrcode二维码生成插件
- vuedraggable-拖拽组件
- vue-drag-resize-自由拖拽、缩放组件
- gitee配置
- src
- plugins
- element.js
- echartsMixin.js
- views
- login
- login.vue
- btn.vue
- home
- home.vue
- Welcome.vue
- user
- users.vue
- router
- main.js
- App.vue
- 引入语法
- 获取路径传值
- ajax请求
- token语法
- NPM更换镜像方案
- PHP
- PHP 微信网页登录
- PHP 判断函数
- PHP 获取微信公众号openid
- PHP 实现发送模板消息(微信公众号版)
- PHP 阳历阴历转换计算生肖闰年
- PHP 接口数组形式
- PHP 同文件夹下顺序命名
- PHP 输出文件
- PHP E-mail发送
- PHP cURL资源
- PHP 远程访问控制服务器
- PHP 8.0 开启mysqli扩展
- PHP 使用 OSS 批量上传图片
- PHP md5 加密与解密
- ThinkPHP
- PT6
- TP6安装多应用
- TP5
- view渲染模板常见语法
- Visual Studio Code
- 介绍
- 插件-eslint
- vs code插件
- VSCode添加自定义模板
- SFTP
- md格式的文档
- mermaid
- frp内网穿透
- 自定义端口
- ui-china.cn
- 常用软件
- 框架
- 服务器
- 微信小程序
- 云函数 Email
- 参数传递
- 其他
- VMware虚拟机centos7设置静态ip 连接外网