6 用户管理
一个系统当然要有用户管理部分，实际上常用的用户管理主要包括了增删改查部分。查代表了搜索和展示用户，增代表了添加新用户，删即是删除用户，改就是修改用户信息。
本例中还是采用表格来进行基本的用户展示，至于后端的查询逻辑先忽略。
我们先创建一个User.vue组件，同时修改导航三的名字为用户管理，并且绑定路由（只展示了修改的部分）：
<el-menu-item index="/User">
<i class="el-icon-document"></i>
<span slot="title">用户管理</span>
</el-menu-item>
{
path: User,
name: '用户管理',
// 懒加载
component: () => import('@/components/User.vue'),
meta: { title: '3' }
}
然后就是关键的代码部分（有点长= =。）：
<template>
<div align="center">
<div align="left" ref="closepopover">
<el-button type="success" icon="el-icon-plus" @click="addDialog=true">添加用户</el-button>
<el-dialog
title="新增用户"
:visible.sync="addDialog"
:append-to-body="true"
width="400px"
@close="close('addForm')"
>
<el-form
:model="addForm"
:label-position="labelPosition"
status-icon
ref="addForm"
:rules="rules"
>
<el-form-item label="用户名" :label-width="formLabelWidth" prop="user">
<el-input v-model="addForm.user" autocomplete="off" clearable></el-input>
</el-form-item>
<el-form-item label="输入密码" :label-width="formLabelWidth" prop="password">
<el-input v-model="addForm.password" autocomplete="off" clearable show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" :label-width="formLabelWidth" prop="firm_password">
<el-input v-model="addForm.firm_password" autocomplete="off" clearable show-password></el-input>
</el-form-item>
<el-form-item label="添加备注" :label-width="formLabelWidth" prop="description">
<el-input v-model="addForm.description" autocomplete="off" clearable></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialog=false" size="small">取消</el-button>
<el-button type="primary" @click="submitForm('addForm')" size="small">确定</el-button>
</div>
</el-dialog>
</div>
<br />
<br />
<el-table v-loading="loading" :data="tableData" stripe style="width: 80%">
<el-table-column align="center" prop="user" label="用户名" width="auto">
<template slot-scope="scope">{{ scope.row.user }}</template>
</el-table-column>
<el-table-column align="center" prop="level" label="用户等级" width="auto">
<template slot-scope="scope">{{ scope.row.level }}</template>
</el-table-column>
<el-table-column align="center" prop="description" label="备注" width="auto">
<template slot-scope="scope">{{ scope.row.description }}</template>
</el-table-column>
<el-table-column fixed="right" align="center" prop="operation" label="操作" width="auto">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
@click="dialogFormVisible = true, handleClick(scope.row, scope.$index)"
size="small"
round
>编辑</el-button>
<el-dialog
title="编辑用户信息"
:visible.sync="dialogFormVisible"
:append-to-body="true"
width="400px"
@close="close('form')"
>
<el-form
:model="form"
:label-position="labelPosition"
status-icon
ref="form"
:rules="rules"
>
<el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
<el-input v-model="form.password" autocomplete="off" clearable show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" :label-width="formLabelWidth" prop="firm_password">
<el-input v-model="form.firm_password" autocomplete="off" clearable show-password></el-input>
</el-form-item>
<el-form-item label="修改备注" :label-width="formLabelWidth" prop="description">
<el-input v-model="form.description" autocomplete="off" clearable></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')" size="small">取消</el-button>
<el-button
type="primary"
@click="submitForm('form', scope.$index, scope.row)"
size="small"
>确定</el-button>
</div>
</el-dialog>
<el-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.$index}`">
<center>
<p>确定删除此用户吗？</p>
</center>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="updateVisible()"
>取消</el-button>
<el-button type="primary" size="mini" @click="deleteUser(scope.row, scope)">确定</el-button>
</div>
<el-button icon="el-icon-delete" slot="reference" size="small" type="danger" round>删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<br />
<br />
<el-pagination
background
layout="prev, pager, next"
:total="total_page"
:page-size="pageSize"
:current-page.sync="currentPage"
@current-change="pageChange"
></el-pagination>
</div>
</template>
<script>
import qs from "qs";
export default {
created() {
this.getData();
},
methods: {
handleClick(index, row) {
this.tableIndex = index;
},
updateVisible() {
this.$refs.closepopover.click();
},
resetForm(formName) {
this.dialogFormVisible = false;
this.$refs[formName].resetFields();
},
close(formName) {
this.$nextTick(() => {
this.$refs[formName].resetFields();
});
},
getData() {
let url = "/api/user?page_number=" + this.currentPage;
this.$http
.get(url)
.then(response => {
this.tableData = response.data["inform"];
this.total_page = response.data["total_number"];
this.loading = false;
})
.catch(err => {
console.log(error);
});
},
pageChange() {
this.getData();
},
submitForm(formName, row, index) {
let _index = this.tableIndex;
this.$refs[formName].validate(vaild => {
if (vaild) {
this.addDialog = false;
this.dialogFormVisible = false;
let url = "/api/admin/user_manage/";
if (formName == "form") {
this.$http
.post(
url + "update",
qs.stringify({
id: _index.id,
password: this.form.password,
description: this.form.description
})
)
.then(response => {
this.$message({
message: "修改成功！",
type: "success",
center: true
});
this.getData();
})
.catch(err => {
this.$message({
message: "修改失败！",
type: "error",
center: true
});
});
}
if (formName == "addForm") {
this.$http
.post(
url + "add",
qs.stringify({
user: this.addForm.user,
password: this.addForm.password,
description: this.addForm.description
})
)
.then(response => {
this.$message({
message: "添加成功！",
type: "success",
center: true
});
this.getData();
})
.catch(err => {
this.$message({
message: "添加失败！",
type: "error",
center: true
});
});
}
} else {
this.$message({
message: "提交失败！",
type: "error",
center: true
});
}
});
},
deleteUser(row, scope) {
let url = "/api/admin/user_manage/delete";
console.log(row.id);
if (row.id == "1") {
scope._self.$refs[`popover-${scope.$index}`].doClose();
}
if (row.level == "超级管理员") {
this.$refs.closepopover.click();
this.$message.error("无法删除超级管理员！");
return 111;
}
this.$http
.post(url, qs.stringify({ user_id: row.id }))
.then(response => {
scope._self.$refs[`popover-${scope.$index}`].doClose();
this.$message({
message: "用户删除成功！",
type: "success",
center: true
});
this.getData();
})
.catch(err => {
this.$message({
message: "用户删除失败！",
type: "error",
center: true
});
});
}
},
data() {
var validateUser = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入用户名！"));
} else {
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码！"));
} else {
if (this.form.firm_password !== "") {
this.$refs.form.validateField("firm_password");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码！"));
} else if (1 == 1) {
if (this.addDialog == true) {
if (value !== this.addForm.password) {
callback(new Error("两次输入密码不一致！"));
} else {
callback();
}
} else {
if (value !== this.form.password) {
callback(new Error("两次输入密码不一致！"));
} else {
callback();
}
}
} else {
callback();
}
};
var validateDesc = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入备注！"));
} else {
callback();
}
};
return {
tableData: [
{
id: 1,
user: "admin",
level: "超级管理员",
description: "混元霹雳手"
}
],
dialogFormVisible: false,
addDialog: false,
labelPosition: "left",
form: {
password: "",
firm_password: "",
description: ""
},
addForm: {
user: "",
password: "",
firm_password: "",
description: ""
},
rules: {
user: [{ validator: validateUser, trigger: "blur" }],
password: [{ validator: validatePass, trigger: "blur" }],
firm_password: [{ validator: validatePass2, trigger: "blur" }],
description: [{ validator: validateDesc, trigger: "blur" }]
},
formLabelWidth: "80px",
loading: false,
currentPage: 1,
pageSize: 10,
total_page: 1,
visible: false
};
}
};
</script>
<style scoped>
</style>
用户管理是我之前踩坑最多的一个模块，由于坑实在是太多了，我会专门在下一篇文章中挨个进行详述。还是来看一下整体效果吧：
image
样式也不算很好看，不过基本的框架算是搭起来啦。
