123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <!--
- * @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>
|