users.vue · 我的网页程序

``` <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">  <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">   <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>  <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>  <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>  <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> ```