<template>
|
<div>
|
<el-table
|
:data="tableData"
|
:class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
|
row-key="id"
|
border
|
max-height="510"
|
@selection-change="handleSelectionChange">
|
<el-table-column
|
fixed
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="userName"
|
label="账号"
|
sortable
|
fixed
|
width="160">
|
</el-table-column>
|
<el-table-column
|
prop="nickName"
|
label="昵称"
|
sortable
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="belongOrgName"
|
label="所属组织"
|
sortable
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="email"
|
label="邮箱"
|
width="170">
|
</el-table-column>
|
<el-table-column
|
prop="phoneNumber"
|
label="电话"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
v-if="false"
|
prop="avatar"
|
label="头像"
|
width="130">
|
<template slot-scope="scope">
|
<el-image :src="scope.row.avatar" fit="fill" style="width: 100px; height: 100px">
|
</el-image>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="sex"
|
label="性别"
|
:formatter="sexFormtter"
|
width="60">
|
</el-table-column>
|
<el-table-column
|
prop="status"
|
label="状态"
|
:formatter="statusFormtter"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="gmtCreate"
|
label="创建时间"
|
width="160">
|
</el-table-column>
|
<el-table-column
|
prop="createBy"
|
label="创建人"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
width="390"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button v-if="scope.row.status === '0' && forbiddenShow" type="warning" @click="changeUserStatus(scope.row.id, 1)" size="mini">禁用</el-button>
|
<el-button v-else-if="forbiddenShow" type="success" @click="changeUserStatus(scope.row.id, 0)" size="mini">启用</el-button>
|
<el-button v-if="editShow" type="primary" @click="editUser(scope.row.id)" size="mini">修改</el-button>
|
<el-button v-if="permissionShow" type="primary" @click="assignRole(scope.row.id)" size="mini">分配角色</el-button>
|
<el-button v-if="resetShow" type="primary" @click="resetUserPwd(scope.row.id)" size="mini">重置密码</el-button>
|
<el-button v-if="delShow" type="danger" @click="deleteUser(scope.row.id)" size="mini">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<PageC
|
:top-level="topLevel"
|
:handleSizeChange="handleSizeChange"
|
:handleCurrentChange="handleCurrentChange"
|
:pageSize="pageSize"
|
:total="total"
|
:currentPage="currentPage"></PageC>
|
<UserRoleDialog></UserRoleDialog>
|
</div>
|
</template>
|
|
<script>
|
import PageC from "@/components/PageC";
|
import UserRoleDialog from "@/components/dialog/UserRoleDialog";
|
import {deleteUserById, getUsers, editUserStatus} from "@/api/user";
|
import {Message} from "element-ui";
|
export default {
|
name: "UserTable",
|
components: {PageC, UserRoleDialog},
|
data() {
|
return {
|
|
}
|
},
|
props: {
|
topLevel: {
|
required: false,
|
default: -1,
|
type: Number
|
},
|
editShow: {
|
required: true,
|
default: false,
|
type: Boolean
|
},
|
resetShow: {
|
required: true,
|
default: false,
|
type: Boolean
|
},
|
delShow: {
|
required: true,
|
default: false,
|
type: Boolean
|
},
|
permissionShow: {
|
required: true,
|
default: false,
|
type: Boolean
|
},
|
forbiddenShow: {
|
required: true,
|
default: false,
|
type: Boolean
|
}
|
},
|
computed: {
|
tableData: {
|
get() {
|
return this.$store.state.user.tableData;
|
},
|
set(value) {
|
this.$store.state.user.tableData = value;
|
}
|
},
|
// 选中行id
|
multipleSelection: {
|
get() {
|
return this.$store.state.user.multipleSelection;
|
},
|
set(value) {
|
this.$store.state.user.multipleSelection = value;
|
}
|
},
|
total: {
|
get() {
|
return this.$store.state.user.total;
|
},
|
set(value) {
|
this.$store.state.user.total = value;
|
}
|
},
|
pageSize: {
|
get() {
|
return this.$store.state.user.pageSize;
|
},
|
set(value) {
|
this.$store.state.user.pageSize = value;
|
}
|
},
|
currentPage: {
|
get() {
|
return this.$store.state.user.currentPage;
|
},
|
set(value) {
|
this.$store.state.user.currentPage = value;
|
}
|
}
|
},
|
methods: {
|
statusFormtter(row) {
|
return row.status === "0" ? "正常":"禁用"
|
},
|
sexFormtter(row) {
|
return row.sex === "0" ? "男":"女"
|
},
|
changeUserStatus(id, status) {
|
var params = {
|
id: id,
|
status: status
|
}
|
editUserStatus(params).then(() => {
|
this.getUsers();
|
})
|
},
|
getUsers(params) {
|
if (! params) {
|
params = {
|
currentPage: this.currentPage,
|
pageSize: this.pageSize
|
};
|
} else {
|
params.currentPage = this.currentPage;
|
params.pageSize = this.pageSize;
|
}
|
getUsers(params).then((res) => {
|
this.tableData = res.data.data;
|
this.total = res.data.total;
|
})
|
},
|
editUser(userId) {
|
this.$store.dispatch("user/editUser", userId)
|
},
|
assignRole(userId) {
|
this.$store.dispatch("user/assignRole", userId);
|
},
|
resetUserPwd(userId) {
|
console.log("TODO，重置密码实现", userId)
|
},
|
deleteUser(id) {
|
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteUserById(id).then((res) => {
|
Message.success(res.data.msg);
|
this.getUsers();
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val.map((item) => {return item.id;})
|
},
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getUsers();
|
},
|
handleCurrentChange(val) {
|
this.currentPage = val;
|
this.getUsers();
|
}
|
},
|
mounted() {
|
if (this.$getButtonAuth('menu:page')) {
|
this.getUsers();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
