|
|
@@ -0,0 +1,262 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Version: 1.0
|
|
|
+ * @Autor: zhuyijun
|
|
|
+ * @Date: 2021-11-21 21:32:18
|
|
|
+ * @LastEditTime: 2021-11-21 23:54:52
|
|
|
+-->
|
|
|
+<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="12">
|
|
|
+ <el-input placeholder="请输入内容"
|
|
|
+ class="input-with-select"
|
|
|
+ v-model="queryInfo.query"
|
|
|
+ clearable
|
|
|
+ @clear="getUserList">
|
|
|
+ <el-button slot="append"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="getUserList"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-button type="primary"
|
|
|
+ icon="el-icon-user"
|
|
|
+ @click="addDialogVisible = true">添加用户</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 用户列表区 -->
|
|
|
+ <el-table :data="userList"
|
|
|
+ border
|
|
|
+ stripe>
|
|
|
+ <el-table-column label="序号"
|
|
|
+ type="index">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="姓名"
|
|
|
+ prop="username">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="邮箱"
|
|
|
+ prop="email">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="电话"
|
|
|
+ prop="mobile">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="角色"
|
|
|
+ prop="role_name">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip effect="dark"
|
|
|
+ :content="!scope.row.mg_state ?'启用':'禁用'"
|
|
|
+ placement="top"
|
|
|
+ :enterable="false">
|
|
|
+ <el-switch v-model="scope.row.mg_state"
|
|
|
+ @change="userStateChanegd(scope.row)">
|
|
|
+ </el-switch>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作"
|
|
|
+ width="180px">
|
|
|
+ <template>
|
|
|
+ <!-- 修改按钮 -->
|
|
|
+ <el-tooltip effect="dark"
|
|
|
+ content="修改"
|
|
|
+ placement="top"
|
|
|
+ :enterable="false">
|
|
|
+ <el-button type="primary"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ size="mini"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <!-- 删除按钮 -->
|
|
|
+ <el-tooltip effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ :enterable="false">
|
|
|
+ <el-button type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <!-- 分配权限 -->
|
|
|
+ <el-tooltip effect="dark"
|
|
|
+ content="分配角色"
|
|
|
+ placement="top"
|
|
|
+ :enterable="false">
|
|
|
+ <el-button type="success"
|
|
|
+ icon="el-icon-setting"
|
|
|
+ size="mini"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="queryInfo.pagenum"
|
|
|
+ :page-sizes="[2, 5, 10, 20]"
|
|
|
+ :page-size="queryInfo.pagesize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </el-card>
|
|
|
+ <!-- 添加用户对话框 -->
|
|
|
+ <el-dialog title="添加用户"
|
|
|
+ :visible.sync="addDialogVisible"
|
|
|
+ width="50%">
|
|
|
+ <!-- 内容主体区 -->
|
|
|
+ <el-form :model="addForm"
|
|
|
+ :rules="addFormRules"
|
|
|
+ ref="addFormRef"
|
|
|
+ label-width="70px">
|
|
|
+
|
|
|
+ <!-- 用户名称 -->
|
|
|
+ <el-form-item label="用户名"
|
|
|
+ prop="username">
|
|
|
+ <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
|
|
|
+ <el-input v-model="addForm.username"
|
|
|
+ prefix-icon="el-icon-user"
|
|
|
+ type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 密码 -->
|
|
|
+ <el-form-item label="密码"
|
|
|
+ prop="password">
|
|
|
+ <!-- <el-input prefix-icon="iconfont icon-3702mima"></el-input> -->
|
|
|
+ <el-input v-model="addForm.password"
|
|
|
+ prefix-icon="el-icon-lock"
|
|
|
+ type="password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 邮箱 -->
|
|
|
+ <el-form-item label="邮箱"
|
|
|
+ prop="email">
|
|
|
+ <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
|
|
|
+ <el-input v-model="addForm.email"
|
|
|
+ prefix-icon="el-icon-user"
|
|
|
+ type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="手机号"
|
|
|
+ prop="mobile">
|
|
|
+ <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
|
|
|
+ <el-input v-model="addForm.mobile"
|
|
|
+ prefix-icon="el-icon-user"
|
|
|
+ type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 底部区 -->
|
|
|
+ <span slot="footer"
|
|
|
+ class="dialog-footer">
|
|
|
+ <el-button @click="addDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="info"
|
|
|
+ @click="resetAddForm">重 置</el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="addDialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ // 验证邮箱规则
|
|
|
+ var checkEmail = (rule, value, cb) => {
|
|
|
+ const regEmail = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi
|
|
|
+ if (regEmail.test(value)) {
|
|
|
+ return cb
|
|
|
+ }
|
|
|
+ cb(new Error('请输入合法邮箱'))
|
|
|
+ }
|
|
|
+ // 校验手机号
|
|
|
+ var checkMobile = (rule, value, cb) => {
|
|
|
+ const regMobile = /1[34578]\d{9}$/g
|
|
|
+ if (regMobile.test(value)) {
|
|
|
+ return cb
|
|
|
+ }
|
|
|
+ cb(new Error('请输入合法手机号'))
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ userList: [],
|
|
|
+ queryInfo: {
|
|
|
+ query: '',
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: 2
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ addDialogVisible: false,
|
|
|
+ addForm: {},
|
|
|
+ addFormRules: {
|
|
|
+ // 验证用户名是否合法
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入登录名称', trigger: 'blur' },
|
|
|
+ { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ // 验证密码是否合法
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { min: 6, max: 20, message: '长度在 6到 20 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ { required: true, message: '请输入邮箱' },
|
|
|
+ { trigger: 'blur', validator: checkEmail }
|
|
|
+ ],
|
|
|
+ mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
|
+ { trigger: 'blur', validator: checkMobile }]
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getUserList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getUserList () {
|
|
|
+ const { data: res } = await this.$http.get('users', { params: this.queryInfo })
|
|
|
+ // console.log(res)
|
|
|
+ if (res.meta.status !== 200) return this.$message.error("数据获取失败")
|
|
|
+ this.userList = res.data.users
|
|
|
+ this.total = res.data.total
|
|
|
+ },
|
|
|
+ // 监听pagesize值改变事件
|
|
|
+ handleSizeChange (newSize) {
|
|
|
+ this.queryInfo.pagesize = newSize
|
|
|
+ this.getUserList()
|
|
|
+ },
|
|
|
+ // 监听页码值改变的事件
|
|
|
+ handleCurrentChange (newPage) {
|
|
|
+ this.queryInfo.pagenum = newPage
|
|
|
+ this.getUserList()
|
|
|
+ },
|
|
|
+ async userStateChanegd (userinfo) {
|
|
|
+ const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
|
|
|
+ if (res.meta.status !== 200) {
|
|
|
+ return this.$message.error('更新用户状态失败')
|
|
|
+ }
|
|
|
+ this.$message.success('更新用户状态成功')
|
|
|
+ },
|
|
|
+ // 点击重置按钮 重置登录表单
|
|
|
+ resetAddForm () {
|
|
|
+ // console.log(this)
|
|
|
+ this.$refs.addFormRef.resetFields()
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.el-table {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.el-pagination {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+</style>
|
