parent
89fd9e235f
commit
5b4408724c
@ -0,0 +1,247 @@
|
|||||||
|
<template>
|
||||||
|
<div v-loading="loading">
|
||||||
|
<div style="margin-top: 10px;display: flex;justify-content: center">
|
||||||
|
<el-input
|
||||||
|
placeholder="默认展示部分用户，可以通过用户名搜索用户..."
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
v-model="keywords" style="width: 400px" size="small">
|
||||||
|
</el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 3px" @click="searchClick">搜索
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;justify-content: space-around;flex-wrap: wrap">
|
||||||
|
<el-card style="width:330px;margin-top: 10px;" v-for="(user,index) in users" :key="index"
|
||||||
|
v-loading="cardloading[index]">
|
||||||
|
<div slot="header" style="text-align: left">
|
||||||
|
<span>{{user.nickname}}</span>
|
||||||
|
<el-button style="float: right; padding: 3px 0;color: #ff0509" type="text" icon="el-icon-delete"
|
||||||
|
@click="deleteUser(user.id)">删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div><img :src="user.userface" :alt="user.nickname" style="width: 70px;height: 70px"></div>
|
||||||
|
<div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
|
||||||
|
<span>用户名:</span><span>{{user.username}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
|
||||||
|
<span>电子邮箱:</span><span>{{user.email}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
|
||||||
|
<span>注册时间:</span><span>{{user.regTime | formatDateTime}}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px;display: flex;align-items: center">
|
||||||
|
<span>用户状态:</span>
|
||||||
|
<el-switch
|
||||||
|
v-model="user.enabled"
|
||||||
|
active-text="启用"
|
||||||
|
active-color="#13ce66"
|
||||||
|
@change="enabledChange(user.enabled,user.id,index)"
|
||||||
|
inactive-text="禁用" style="font-size: 12px">
|
||||||
|
</el-switch>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
|
||||||
|
<span>用户角色:</span>
|
||||||
|
<el-tag
|
||||||
|
v-for="role in user.roles"
|
||||||
|
:key="role.id"
|
||||||
|
size="mini"
|
||||||
|
style="margin-right: 8px"
|
||||||
|
type="success">
|
||||||
|
{{role.name}}
|
||||||
|
</el-tag>
|
||||||
|
<el-popover
|
||||||
|
placement="right"
|
||||||
|
title="角色列表"
|
||||||
|
width="200"
|
||||||
|
:key="index+''+user.id"
|
||||||
|
@hide="saveRoles(user.id,index)"
|
||||||
|
trigger="click" v-loading="eploading[index]">
|
||||||
|
<el-select v-model="roles" :key="user.id" multiple placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in allRoles"
|
||||||
|
:key="user.id+'-'+item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="text" icon="el-icon-more" style="padding-top: 0px" slot="reference"
|
||||||
|
@click="showRole(user.roles,user.id,index)"></el-button>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {getRequest} from '../utils/api'
|
||||||
|
import {putRequest} from '../utils/api'
|
||||||
|
import {deleteRequest} from '../utils/api'
|
||||||
|
export default{
|
||||||
|
mounted: function () {
|
||||||
|
this.loading = true;
|
||||||
|
this.loadUserList();
|
||||||
|
this.cardloading = Array.apply(null, Array(20)).map(function (item, i) {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
this.eploading = Array.apply(null, Array(20)).map(function (item, i) {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
saveRoles(id, index){
|
||||||
|
var selRoles = this.roles;
|
||||||
|
if (this.cpRoles.length == selRoles.length) {
|
||||||
|
for (var i = 0; i < this.cpRoles.length; i++) {
|
||||||
|
for (var j = 0; j < selRoles.length; j++) {
|
||||||
|
if (this.cpRoles[i].id == selRoles[j]) {
|
||||||
|
selRoles.splice(j, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (selRoles.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var _this = this;
|
||||||
|
_this.cardloading.splice(index, 1, true)
|
||||||
|
putRequest("/admin/user/role", {rids: this.roles, id: id}).then(resp=> {
|
||||||
|
if (resp.status == 200 && resp.data.status == 'success') {
|
||||||
|
_this.$message({type: resp.data.status, message: resp.data.msg});
|
||||||
|
_this.loadOneUserById(id, index);
|
||||||
|
} else {
|
||||||
|
_this.cardloading.splice(index, 1, false)
|
||||||
|
_this.$message({type: 'error', message: '更新失败!'});
|
||||||
|
}
|
||||||
|
}, resp=> {
|
||||||
|
_this.cardloading.splice(index, 1, false)
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
var data = resp.response.data;
|
||||||
|
_this.$message({type: 'error', message: data});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showRole(aRoles, id, index){
|
||||||
|
this.cpRoles = aRoles;
|
||||||
|
this.roles = [];
|
||||||
|
this.loadRoles(index);
|
||||||
|
for (var i = 0; i < aRoles.length; i++) {
|
||||||
|
this.roles.push(aRoles[i].id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteUser(id){
|
||||||
|
var _this = this;
|
||||||
|
this.$confirm('删除该用户, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
_this.loading = true;
|
||||||
|
deleteRequest("/admin/user/" + id).then(resp=> {
|
||||||
|
if (resp.status == 200 && resp.data.status == 'success') {
|
||||||
|
_this.$message({type: 'success', message: '删除成功!'})
|
||||||
|
_this.loadUserList();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
_this.loading = false;
|
||||||
|
_this.$message({type: 'error', message: '删除失败!'})
|
||||||
|
}, resp=> {
|
||||||
|
_this.loading = false;
|
||||||
|
_this.$message({type: 'error', message: '删除失败!'})
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
_this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '已取消删除'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
enabledChange(enabled, id, index){
|
||||||
|
var _this = this;
|
||||||
|
_this.cardloading.splice(index, 1, true)
|
||||||
|
putRequest("/admin/user/enabled", {enabled: enabled, uid: id}).then(resp=> {
|
||||||
|
if (resp.status != 200) {
|
||||||
|
_this.$message({type: 'error', message: '更新失败!'})
|
||||||
|
_this.loadOneUserById(id, index);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
_this.cardloading.splice(index, 1, false)
|
||||||
|
_this.$message({type: 'success', message: '更新成功!'})
|
||||||
|
}, resp=> {
|
||||||
|
_this.$message({type: 'error', message: '更新失败!'})
|
||||||
|
_this.loadOneUserById(id, index);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadRoles(index){
|
||||||
|
var _this = this;
|
||||||
|
_this.eploading.splice(index, 1, true)
|
||||||
|
getRequest("/admin/roles").then(resp=> {
|
||||||
|
_this.eploading.splice(index, 1, false)
|
||||||
|
if (resp.status == 200) {
|
||||||
|
_this.allRoles = resp.data;
|
||||||
|
} else {
|
||||||
|
_this.$message({type: 'error', message: '数据加载失败!'});
|
||||||
|
}
|
||||||
|
}, resp=> {
|
||||||
|
_this.eploading.splice(index, 1, false)
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
var data = resp.response.data;
|
||||||
|
_this.$message({type: 'error', message: data});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadOneUserById(id, index){
|
||||||
|
var _this = this;
|
||||||
|
getRequest("/admin/user/" + id).then(resp=> {
|
||||||
|
_this.cardloading.splice(index, 1, false)
|
||||||
|
if (resp.status == 200) {
|
||||||
|
_this.users.splice(index, 1, resp.data);
|
||||||
|
} else {
|
||||||
|
_this.$message({type: 'error', message: '数据加载失败!'});
|
||||||
|
}
|
||||||
|
}, resp=> {
|
||||||
|
_this.cardloading.splice(index, 1, false)
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
var data = resp.response.data;
|
||||||
|
_this.$message({type: 'error', message: data});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadUserList(){
|
||||||
|
var _this = this;
|
||||||
|
getRequest("/admin/user?nickname="+this.keywords).then(resp=> {
|
||||||
|
_this.loading = false;
|
||||||
|
if (resp.status == 200) {
|
||||||
|
_this.users = resp.data;
|
||||||
|
} else {
|
||||||
|
_this.$message({type: 'error', message: '数据加载失败!'});
|
||||||
|
}
|
||||||
|
}, resp=> {
|
||||||
|
_this.loading = false;
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
var data = resp.response.data;
|
||||||
|
_this.$message({type: 'error', message: data});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
searchClick(){
|
||||||
|
this.loading = true;
|
||||||
|
this.loadUserList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
eploading: [],
|
||||||
|
cardloading: [],
|
||||||
|
keywords: '',
|
||||||
|
users: [],
|
||||||
|
allRoles: [],
|
||||||
|
roles: [],
|
||||||
|
cpRoles: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue