123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469 |
- <!--
- * @Description:
- * @Version: 1.0
- * @Autor: zhuyijun
- * @Date: 2021-11-21 21:32:18
- * @LastEditTime: 2021-11-22 22:53:50
- -->
- <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 slot-scope="scope">
- <!-- 修改按钮 -->
- <el-tooltip effect="dark"
- content="修改"
- placement="top"
- :enterable="false">
- <el-button type="primary"
- icon="el-icon-edit"
- size="mini"
- @click="showEditDialog(scope.row)"></el-button>
- </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-button>
- </el-tooltip>
- <!-- 分配权限 -->
- <el-tooltip effect="dark"
- content="分配角色"
- placement="top"
- :enterable="false">
- <el-button type="success"
- icon="el-icon-setting"
- size="mini"
- @click="setRole(scope.row)"></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%"
- @close="resetAddForm">
- <!-- 内容主体区 -->
- <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="primary"
- @click="addUser">确 定</el-button>
- </span>
- </el-dialog>
- <!-- 修改用户的对话框 -->
- <el-dialog title="修改用户"
- :visible.sync="editDialogVisible"
- width="50%"
- @close="resetEditForm">
- <!-- 内容主体区 -->
- <el-form :model="editForm"
- :rules="editFormRules"
- ref="editFormRef"
- label-width="70px">
- <!-- 用户名称 -->
- <el-form-item label="编号"
- prop="id">
- <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
- <el-input v-model="editForm.id"
- prefix-icon="el-icon-user"
- type="text"
- disabled></el-input>
- </el-form-item>
- <!-- 用户名称 -->
- <el-form-item label="用户名"
- prop="username">
- <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
- <el-input v-model="editForm.username"
- prefix-icon="el-icon-user"
- type="text"
- disabled></el-input>
- </el-form-item>
- <!-- 邮箱 -->
- <el-form-item label="邮箱"
- prop="email">
- <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
- <el-input v-model="editForm.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="editForm.mobile"
- prefix-icon="el-icon-user"
- type="text"></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>
- <!-- 分配角色Dialog对话框 -->
- <el-dialog title="分配角色"
- :visible.sync="setRoleDialogVisible"
- width="50%"
- @click="setRoleDialogClosed">
- <div>
- <p>当前 用户 :{{this.userInfo.username}}</p>
- <p>当前 角色 :{{this.userInfo.role_name}}</p>
- <p>分配 新角色 :
- <el-select v-model="selectedRoleId"
- placeholder="请选择">
- <el-option v-for="item in rolesList"
- :key="item.id"
- :label="item.roleName"
- :value="item.id">
- </el-option>
- </el-select>
- </p>
- </div>
- <span slot="footer"
- class="dialog-footer">
- <el-button @click="editDialogVisible = false">取 消</el-button>
- <el-button type="primary"
- @click="saveRoleInfo">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- data () {
- // 验证邮箱规则
- var checkEmail = (rule, value, cb) => {
- console.log(value)
- 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,
- editDialogVisible: false,
- addForm: {
- username: '',
- password: '',
- email: '',
- mobile: ''
- },
- editForm: {
- id: '',
- username: '',
- email: '',
- mobile: ''
- },
- 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: '请输入邮箱' },
- { validator: checkEmail, trigger: 'blur' }
- ],
- mobile: [
- { required: true, message: '请输入手机号', trigger: 'blur' },
- { validator: checkMobile, trigger: 'blur' }
- ]
- },
- editFormRules: {
- id: [{ required: true, message: '编号不能为空' }],
- email: [
- { required: true, message: '请输入邮箱' },
- { validator: checkEmail, trigger: 'blur' }
- ],
- mobile: [
- { required: true, message: '请输入手机号', trigger: 'blur' },
- { validator: checkMobile, trigger: 'blur' }
- ]
- },
- setRoleDialogVisible: false,
- userInfo: {
- id: ''
- },
- //所有角色的数据列表
- rolesList: [],
- //选种的角色
- selectedRoleId: ''
- }
- },
- 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('更新用户状态成功')
- },
- // 重置表单 dialog监听关闭事件
- resetAddForm () {
- this.$refs.addFormRef.resetFields()
- },
- resetEditForm () {
- this.$refs.editFormRef.resetFields()
- },
- // 点击按钮,添加新用户
- addUser () {
- this.$refs.addFormRef.validate(async valid => {
- if (!valid) return
- // 可以发起添加用户的网络请求
- const { data: res } = await this.$http.post('users', this.addForm)
- if (res.meta.status !== 201) {
- this.$message.error('添加用户失败!')
- }
- this.$message.success('添加用户成功!')
- // 隐藏添加用户的对话框
- this.addDialogVisible = false
- // 重新获取用户列表数据
- this.getUserList()
- })
- },
- async showEditDialog (userinfo) {
- this.editForm = userinfo
- this.editDialogVisible = true
- },
- editUserInfo () {
- this.$refs.editFormRef.validate(async (vaild) => {
- if (!vaild) return
- // 发起修改用户请求
- const { data: res } = await this.$http.put(`users/${this.editForm.id}`, {
- email: this.editForm.email,
- mobile: this.editForm.mobile
- })
- if (res.meta.status !== 200) {
- return this.$message.error('用户修改失败')
- }
- this.$message.success('用户修改成功')
- // 隐藏添加用户的对话框
- this.editDialogVisible = false
- // 重新获取用户列表数据
- this.getUserList()
- })
- },
- async removeUserById (id) {
- const confirmResule = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).catch(err => err)
- // 用户确认删除,返回字符串 confirm
- // 用户取消删除返回字符串 chancel
- if (confirmResule !== 'confirm') {
- return this.$message.info('已经取消删除')
- }
- const { data: res } = await this.$http.delete(`users/${id}`)
- if (res.meta.status != 200) {
- return this.$message.error('删除失败')
- }
- this.getUserList()
- this.$message.success('删除成功')
- },
- async setRole (userInfo) {
- this.userInfo = userInfo
- if (this.rolesList.length == 0) {
- //获取所有角色列表
- const { data: res } = await this.$http.get('roles')
- if (res.meta.status != 200) {
- return this.$message.error('获取角色列表失败')
- }
- this.rolesList = res.data
- }
- this.setRoleDialogVisible = true
- },
- setRoleDialogClosed () {
- this.userList = []
- this.selectedRoleId = ''
- },
- async saveRoleInfo () {
- if (!this.selectedRoleId) {
- return this.$message.error('请选择要分配的角色!')
- }
- const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId })
- if (res.meta.status !== 200) {
- return this.$message.error(res.meta.msg)
- }
- this.getUserList()
- this.setRoleDialogVisible = false
- return this.$message.success(res.meta.msg)
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .el-table {
- margin-top: 15px;
- font-size: 12px;
- }
- .el-pagination {
- margin-top: 15px;
- }
- </style>
|