<template>
|
<div class="app-container">
|
<div style="display: flex;align-items: center;margin-bottom: 16px;justify-content: space-between;">
|
<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" round @click="operate(3,undefined)">创建用户</el-button>
|
<el-input placeholder="请输入用户名" v-model="keyWord" size="mini" style="max-width: 220px;margin-left: 10px;">
|
<el-button slot="append" icon="el-icon-search" style="padding: 12px;" @click="queryUser()">查询</el-button>
|
</el-input>
|
</div>
|
<el-table :data="list" v-loading.table="listLoading" element-loading-text="Loading" fit border
|
style="width: 100%;" class="mdc-table">
|
<el-table-column prop="user"label="用户名">
|
</el-table-column>
|
<el-table-column prop="name" label="真实姓名">
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<!-- 用户编辑 -->
|
<i class="mdc-icon-font el-icon-view mdc-editor" @click="operate(0, scope.row)"></i>
|
<!-- 删除用户 -->
|
<i class="mdc-icon-font el-icon-delete mdc-delete" @click="operate(1, scope.row, scope.$index)"></i>
|
<!--用户授权-->
|
<i class="mdc-icon-font el-icon-setting mdc-setting" @click="operate(2, scope.row)"></i>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="padding-top: 10px;display: flex;justify-content: flex-end;align-items: center;">
|
<el-button-group>
|
<el-button type="primary" icon="el-icon-arrow-left" size="mini" round @click="prePage()" :disabled="canPaging[0]">上一页</el-button>
|
<el-button disabled size="mini" plain>{{currentPage}}/{{totalPage}}</el-button>
|
<el-button type="primary" size="mini" round @click="nextPage()" :disabled="canPaging[1]">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-button-group>
|
</div>
|
<!-- 添加用户dialog -->
|
<create-user-dialog @submit="addUserCallback" :is-visible="dialog.showAdd"></create-user-dialog>
|
<!--用户信息编辑查看-->
|
<user-detail-dialog :is-visible="dialog.showMsg" :user="selectUser" @submit="lookupUserInfoCallBack"></user-detail-dialog>
|
<!--用户授权dialog-->
|
<grant-auth-dialog :list="workshopList" :grant-list="grantList" @submit="grantCallback" :is-visible="dialog.showGrant"></grant-auth-dialog>
|
</div>
|
</template>
|
|
<script>
|
import createUserDialog from './dialog/CreateUser'
|
import grantAuthDialog from './dialog/GrantAuth'
|
import { mapGetters } from 'vuex'
|
import UserDetailDialog from './dialog/UserDetail'
|
import { getUserList, addUser, delUser, userAuth } from '@/api/MdcApi'
|
export default {
|
name: 'ums',
|
components: {
|
UserDetailDialog,
|
grantAuthDialog,
|
createUserDialog
|
},
|
data: function() {
|
return {
|
keyWord: '', // 关键字 用于搜索
|
listLoading: true,
|
list: [], // 用户列表
|
dialog: {
|
showAdd: false, // 添加
|
showMsg: false, // 详情
|
showGrant: false // 授权
|
},
|
selectUser: {},
|
grantList: [],
|
currentPage: 1,
|
totalPage: 1
|
}
|
},
|
computed: {
|
...mapGetters({
|
workshopList: 'workshopList'
|
}),
|
canPaging() {
|
const tem = [false, false]
|
tem[0] = (this.currentPage <= 1)
|
tem[1] = (this.currentPage >= this.totalPage)
|
return tem
|
}
|
},
|
methods: {
|
/**
|
* 初始化已有用户
|
*/
|
initUsers() {
|
getUserList(this.currentPage, this.keyWord).then(res => {
|
this.listLoading = false
|
let totalNum = parseInt(res.totalPage)
|
if (totalNum + '' === 'NaN') {
|
totalNum = 1
|
}
|
this.totalPage = totalNum
|
this.list = res.list || []
|
})
|
},
|
/**
|
* 查询用户
|
*/
|
queryUser() {
|
this.currentPage = 1
|
this.initUsers()
|
},
|
/**
|
* 检查是否有相同用户名
|
* @param userName
|
* */
|
hasSameUserName(userName) {
|
for (let i = 0; i < this.list.length; i++) {
|
if (userName === this.list[i].name) {
|
return true
|
}
|
}
|
return false
|
},
|
/**
|
* 添加用户回调
|
* action 'confirm','cancel' data action 为 confirm 时候的回调数据
|
*/
|
addUserCallback({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
if (this.hasSameUserName(data.user)) {
|
this.$message({
|
type: 'error',
|
message: '该用户名已存在，请重新输入'
|
})
|
return
|
} else {
|
// todo 网络请求 创建用户
|
addUser(data).then(res => {
|
if (res.result === 'SUCCESS') {
|
this.list.push(data)
|
} else {
|
this.$message({
|
type: 'error',
|
message: '用户创建失败，请重试...'
|
})
|
}
|
})
|
}
|
break
|
}
|
this.dialog.showAdd = false
|
},
|
/**
|
* 授权对话框回调
|
* @param { action:'confirm'或者'cancel' }
|
* */
|
grantCallback({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
// todo 调用用户授权接口
|
userAuth(this.selectUser.user, JSON.parse(data)).then(res => {
|
if (res.result === 'SUCCESS') {
|
this.selectUser.workshops = data
|
this.dialog.showGrant = false
|
} else {
|
this.$message({
|
type: 'error',
|
message: '授权失败，请后重试!'
|
})
|
}
|
})
|
break
|
case 'cancel':
|
this.dialog.showGrant = false
|
break
|
}
|
},
|
/**
|
* 查看用户信息话框回调
|
* @param { action:'confirm'或者'cancel' }
|
* */
|
lookupUserInfoCallBack({ action, data }) {
|
switch (action) {
|
case 'confirm':
|
break
|
case 'cancel':
|
break
|
}
|
this.dialog.showMsg = false
|
},
|
/**
|
* 用户操作
|
* @param type
|
* @param user { userID, userName }
|
* @param index
|
*/
|
operate(type, user, index) {
|
this.selectUser = user || {}
|
switch (type) {
|
case 0: // 编辑
|
this.dialog.showMsg = true
|
break
|
case 1: // 删除
|
this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
customClass: 'mdc-confirm-dialog',
|
type: 'warning',
|
beforeClose: (action, instance, done) => {
|
switch (action) {
|
case 'confirm':
|
instance.confirmButtonLoading = true
|
instance.confirmButtonText = '执行中...'
|
// todo 模拟调用接口 删除用户
|
delUser(this.selectUser.user).then(res => {
|
// {"result":"SUCCESS"}
|
if (res.result === 'SUCCESS') {
|
instance.confirmButtonLoading = false
|
instance.confirmButtonText = '确定'
|
done()
|
this.list.splice(index, 1)
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
} else {
|
this.$message({
|
type: 'error',
|
message: '删除失败，请收稍后重试!'
|
})
|
}
|
})
|
break
|
case 'cancel':
|
done()
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
break
|
}
|
}
|
}).catch(() => {})
|
break
|
case 2: // 授权教室
|
this.grantList = JSON.parse(this.selectUser.workshops || '[]')
|
this.dialog.showGrant = true
|
break
|
case 3: // 添加用户
|
this.dialog.showAdd = true
|
break
|
}
|
}
|
},
|
/**
|
* 上一页
|
*/
|
prePage() {
|
this.currentPage--
|
this.initUsers()
|
},
|
/**
|
* 下一页
|
*/
|
nextPage() {
|
this.currentPage++
|
this.initUsers()
|
},
|
/**
|
* 初始化数据
|
*/
|
created() {
|
this.initUsers()
|
}
|
}
|
</script>
|
|
<style scoped>
|
.mdc-icon-font{
|
font-size: 18px;margin-right: 6px;
|
}
|
.mdc-icon-font:active{
|
opacity: 0.5;
|
}
|
.mdc-editor{
|
color: #409EFF;
|
}
|
.mdc-delete{
|
color: #F56C6C;
|
}
|
.mdc-setting{
|
color: #67C23A;
|
}
|
.mdc-table{}
|
.mdc-table>>> thead th{
|
background-color: #e7f1fd;color:#606266;
|
}
|
.mdc-table>>> .el-table__body tr:hover>td{
|
background-color: transparent;
|
}
|
</style>
|
|
