<template> <el-dialog :title="userObj.title" :visible.sync="userObj.show" :modal="false" :fullscreen="true"> <div> <el-form label-width="90px" inline> <el-form-item style="float: right"> <el-button type="success" @click="addShow = true">+添加用户</el-button> </el-form-item> </el-form> <el-table :data="userTable" style="width: 100%"> <el-table-column label="头像"> <template slot-scope="scope"> <img :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50px"> </template> </el-table-column> <el-table-column prop="user_id" label="用户ID"> </el-table-column> <el-table-column prop="nickname" label="用户名"> </el-table-column> <el-table-column label="看课权限"> <template slot-scope="scope"> {{ scope.row.is_view_course | isOrNot}} </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="warning" size="mini" @click="changeUser(scope.row)">更改看课权限</el-button> <el-button type="danger" size="mini" @click="onDel(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <el-dialog :modal="false" :visible.sync="addShow"> <el-form label-width="90px"> <el-form-item label="用户id"> <el-input v-model="addId"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="addShow = false">取 消</el-button> <el-button type="primary" @click="onAdd">确 定</el-button> </span> </el-dialog> </el-dialog> </template> <script> import {addClassUesrApi,getClassUserApi,changeUserApi,delClassUserApi} from "../../service/api"; import {ISORNOT} from "../../util/wordbook"; export default { name: "userList", props:[ 'userObj' ], data(){ return { userTable:[], addId:'', addShow:false } }, filters:{ isOrNot(value){ return ISORNOT[value] } }, methods:{ initPage(){ getClassUserApi(this.userObj.classId).then(res=>{ this.userTable = res.list }) }, changeUser(data){ this.$confirm('此操作将修改成员看课权限?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { changeUserApi(data.id,{is_view_course:data.is_view_course === 0 ? 1 : 0}).then(res=>{ this.$message({ type: 'success', message: '修改成功!' }); }); this.initPage() }); }, onDel(data){ this.$confirm('此操作将删除该成员?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delClassUserApi(data.id).then(res=>{ this.$message({ type: 'success', message: '删除成功!' }); }); this.initPage() }); }, onAdd(){ addClassUesrApi(this.userObj.classId,this.addId).then(res=>{ this.$message({ type: 'success', message: '添加成功!' }); this.initPage() }) } }, watch:{ 'userObj'(){ this.initPage() } } } </script> <style scoped lang="less"> </style>