<template>
|
<div class="p-container">
|
<panel class="panel p-content">
|
<div class="panel-content flex-c">
|
<div class="btn-grp">
|
<el-button
|
type="primary"
|
icon="el-icon-plus"
|
round
|
size="mini"
|
@click="addUser"
|
>添加</el-button
|
>
|
<el-button
|
type="primary"
|
round
|
size="mini"
|
@click="getList"
|
icon="el-icon-search"
|
>查询</el-button
|
>
|
</div>
|
|
<!-- 用户列表 -->
|
<div class="table-wrap">
|
<el-table
|
class="table-dark"
|
stripe
|
height="100%"
|
size="small"
|
:data="tableData"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.width"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作" width="360" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="primary"
|
size="mini"
|
:disabled="scope.row.uid == uid"
|
@click="edit(scope.row)"
|
>编辑</el-button
|
>
|
<el-button
|
type="primary"
|
size="mini"
|
:disabled="scope.row.uid == uid"
|
@click="resetSnId(scope.row)"
|
>重置密码</el-button
|
>
|
<el-button
|
type="danger"
|
size="mini"
|
:disabled="scope.row.uid == uid"
|
@click="confirmRemove(scope.row)"
|
>删除</el-button
|
>
|
<el-button
|
type="success"
|
v-if="scope.row.uid > 1000"
|
size="mini"
|
@click="improveRole(scope.row)"
|
>加入管理员组</el-button
|
>
|
<el-button
|
type="danger"
|
v-else
|
:disabled="scope.row.uid == uid"
|
size="mini"
|
@click="dropRole(scope.row)"
|
>移出管理员组</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 底部 -->
|
<!-- 底部分页 -->
|
<el-pagination
|
class="pages center dark"
|
:current-page="pageCurr"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</panel>
|
<!-- 弹窗 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="addEditVisible"
|
top="0"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="700px"
|
center
|
>
|
<add-edit
|
v-if="addEditVisible"
|
@success="onOk"
|
:info="userInfo"
|
@cancel="onCanel"
|
></add-edit>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Panel from "@/components/panel.vue";
|
import gradientBtn from "@/components/gradientBtn.vue";
|
|
import {
|
getAllUser,
|
deleteUser,
|
dropRole,
|
improveRole,
|
resetSnId,
|
} from "./api";
|
import AddEdit from "./addEdit";
|
import { mapGetters } from "vuex";
|
export default {
|
name: "userList",
|
|
data() {
|
return {
|
pageCurr: 1,
|
pageSize: 10,
|
total: 0,
|
tableData: [],
|
addEditVisible: false,
|
dialogTitle: "",
|
userInfo: {},
|
headers: [
|
{
|
prop: "uname",
|
label: "姓名",
|
width: "",
|
},
|
{
|
prop: "canDownload",
|
label: "控制权限",
|
width: "",
|
},
|
],
|
};
|
},
|
components: { AddEdit, Panel, gradientBtn },
|
computed: {
|
...mapGetters(["uid"]),
|
},
|
methods: {
|
getList() {
|
let { pageCurr, pageSize } = this;
|
let loading = this.$layer.loading();
|
getAllUser(pageCurr, pageSize)
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let list = [];
|
let total = 0;
|
if (code && data) {
|
// console.log(data);
|
list = data2.list.map((v) => {
|
v.canDownload = v.udownloadRole ? "有" : "无";
|
return v;
|
});
|
total = data2.total;
|
}
|
this.$layer.close(loading);
|
this.tableData = list;
|
this.total = total;
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
},
|
// 展示数据数量
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getList();
|
},
|
// 翻页
|
handleCurrentChange(val) {
|
this.pageCurr = val;
|
this.getList();
|
},
|
addUser() {
|
this.dialogTitle = "添加用户";
|
this.userInfo = undefined;
|
this.addEditVisible = true;
|
},
|
edit(record) {
|
this.dialogTitle = "编辑用户";
|
this.addEditVisible = true;
|
this.userInfo = record;
|
},
|
confirmRemove(record) {
|
this.$confirm("确认删除该用户吗", "系统提示", {
|
type: "warning",
|
})
|
.then(() => {
|
this.remove(record.uid);
|
})
|
.catch(() => {});
|
},
|
remove(uid) {
|
let loading = this.$layer.loading();
|
deleteUser(uid)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
this.$message.success("操作成功");
|
this.handleCurrentChange(1);
|
} else {
|
this.$message.success("操作失败");
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
onOk() {
|
this.addEditVisible = false;
|
this.handleCurrentChange(1);
|
},
|
onCanel() {
|
this.addEditVisible = false;
|
},
|
improveRole(record) {
|
let loading = this.$layer.loading();
|
improveRole(record.uid)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
this.getList();
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
},
|
dropRole(record) {
|
let loading = this.$layer.loading();
|
dropRole(record.uid)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
this.getList();
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
resetSnId(record) {
|
this.$confirm("确认重置该用户密码吗", "系统提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
resetSnId(record.uid)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
})
|
.catch(() => {});
|
},
|
},
|
|
mounted() {
|
this.getList();
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.p-container {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.p-content {
|
flex: 1;
|
margin-top: 4px;
|
:deep(.content) {
|
background: #011f39;
|
}
|
.panel-content {
|
height: 100%;
|
padding: 10px;
|
.table-wrap {
|
flex: 1;
|
margin-top: 6px;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
}
|
.btn-grp {
|
padding: 0.6em;
|
}
|
</style>
|
