|
|
@@ -1,160 +1,114 @@
|
|
|
<template>
|
|
|
- <div v-if="userName === '系统管理员'">
|
|
|
- <el-container>
|
|
|
- <!--搜索-->
|
|
|
- <el-header class="searchBox">
|
|
|
- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
|
|
- <el-form-item label="用户名">
|
|
|
- <el-input v-model="searchForm.name" placeholder="姓名" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用户名">
|
|
|
- <el-input v-model="searchForm.account" placeholder="账号" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="searchBtn">查询</el-button>
|
|
|
- <el-button @click="reset">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-button
|
|
|
- style="float: right"
|
|
|
- type="warning"
|
|
|
- icon="el-icon-circle-plus-outline"
|
|
|
- @click="add"
|
|
|
- >
|
|
|
+ <div style="padding:20px">
|
|
|
+ <div v-if="userName === '系统管理员'">
|
|
|
+ <el-form :inline="true" :model="searchForm" size="small" class="demo-form-inline">
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="searchForm.name" placeholder="姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="searchForm.account" placeholder="账号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="searchBtn">查询</el-button>
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ <el-button type="warning" icon="el-icon-circle-plus-outline" @click="add">
|
|
|
立即创建
|
|
|
</el-button>
|
|
|
- </el-form>
|
|
|
- </el-header>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <!--表格-->
|
|
|
- <el-main class="tableBox">
|
|
|
- <el-table :data="tableData" stripe style="width: 100%">
|
|
|
- <el-table-column prop="id" label="序列号" width="100" />
|
|
|
- <el-table-column prop="account" label="账号" width="150" />
|
|
|
+ </el-form>
|
|
|
+ <div style="margin:30px 0">
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%" highlight-current-row :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }">
|
|
|
+ <el-table-column type="index" label="序号" width="80" />
|
|
|
+ <el-table-column prop="account" label="账号" />
|
|
|
<el-table-column prop="name" label="姓名" />
|
|
|
<el-table-column prop="phone" label="手机号" />
|
|
|
- <el-table-column prop="createTime" label="创建时间" width="200" />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" />
|
|
|
<el-table-column fixed="right" label="操作" width="150">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="text" size="small" @click="edit(scope.row)"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
- <el-button type="text" size="small" @click="dele(scope.row.id)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- <el-button type="text" size="small" @click="empower(scope.row.id)"
|
|
|
- >角色</el-button
|
|
|
- >
|
|
|
+ <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" size="small" @click="dele(scope.row.id)">删除</el-button>
|
|
|
+ <el-button type="text" size="small" @click="empower(scope.row.id)">角色</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="block">
|
|
|
- <el-pagination
|
|
|
- :current-page.sync="searchForm['pageNum']"
|
|
|
- :page-sizes="[20, 50, 100, 300]"
|
|
|
- :page-size="searchForm['pageSize']"
|
|
|
- layout="total, sizes, pager"
|
|
|
- :total="total"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
+ <el-pagination :current-page.sync="searchForm['pageNum']" :page-sizes="[20, 50, 100, 300]" :page-size="searchForm['pageSize']" layout="total, sizes, pager" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
|
</div>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+ </div>
|
|
|
|
|
|
- <!--新增抽屉-->
|
|
|
- <el-drawer
|
|
|
- ref="addDrawer"
|
|
|
- title="新增用户"
|
|
|
- size="30%"
|
|
|
- :before-close="addHandleClose"
|
|
|
- :with-header="false"
|
|
|
- :visible.sync="addDialog"
|
|
|
- direction="rtl"
|
|
|
- custom-class="demo-drawer"
|
|
|
- >
|
|
|
- <div class="demo-drawer__content">
|
|
|
- <span>新增用户</span>
|
|
|
- <el-form :model="addForm" :rules="rules" ref="ruleForm">
|
|
|
- <el-form-item label="账号" label-width="80px" prop="account">
|
|
|
- <el-input v-model="addForm.account" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" label-width="80px" prop="passwordHash">
|
|
|
- <el-input v-model="addForm.passwordHash" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="姓名" label-width="80px" prop="name">
|
|
|
- <el-input v-model="addForm.name" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="手机号" label-width="80px" prop="phone">
|
|
|
- <el-input v-model="addForm.phone" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="demo-drawer__footer">
|
|
|
- <el-button @click="cancelForm">取 消</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :loading="loading"
|
|
|
- @click="$refs.addDrawer.closeDrawer()"
|
|
|
- >{{ loading ? "提交中 ..." : "确 定" }}
|
|
|
- </el-button>
|
|
|
+ <!--新增抽屉-->
|
|
|
+ <el-drawer ref="addDrawer" title="新增用户" size="30%" :before-close="addHandleClose" :with-header="false" :visible.sync="addDialog" direction="rtl" custom-class="demo-drawer">
|
|
|
+ <div class="demo-drawer__content">
|
|
|
+ <span>新增用户</span>
|
|
|
+ <el-form :model="addForm" :rules="rules" ref="ruleForm">
|
|
|
+ <el-form-item label="账号" label-width="80px" prop="account">
|
|
|
+ <el-input v-model="addForm.account" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" label-width="80px" prop="passwordHash">
|
|
|
+ <el-input v-model="addForm.passwordHash" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" label-width="80px" prop="name">
|
|
|
+ <el-input v-model="addForm.name" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号" label-width="80px" prop="phone">
|
|
|
+ <el-input v-model="addForm.phone" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="demo-drawer__footer">
|
|
|
+ <el-button @click="cancelForm">取 消</el-button>
|
|
|
+ <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? "提交中 ..." : "确 定" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-drawer>
|
|
|
+ </el-drawer>
|
|
|
|
|
|
- <!--编辑抽屉-->
|
|
|
- <el-drawer
|
|
|
- ref="editDrawer"
|
|
|
- title="编辑角色"
|
|
|
- size="30%"
|
|
|
- :before-close="editHandleClose"
|
|
|
- :with-header="false"
|
|
|
- :visible.sync="editDialog"
|
|
|
- direction="rtl"
|
|
|
- custom-class="demo-drawer"
|
|
|
- >
|
|
|
- <div class="demo-drawer__content">
|
|
|
- <span>编辑角色</span>
|
|
|
- <el-form :model="editForm">
|
|
|
- <el-form-item label="账号" label-width="80px">
|
|
|
- <el-input v-model="editForm.account" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" label-width="80px">
|
|
|
- <el-input v-model="editForm.passwordHash" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="姓名" label-width="80px">
|
|
|
- <el-input v-model="editForm.name" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="手机号" label-width="80px">
|
|
|
- <el-input v-model="editForm.phone" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="demo-drawer__footer">
|
|
|
- <el-button @click="cancelForm">取 消</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :loading="loading"
|
|
|
- @click="$refs.editDrawer.closeDrawer()"
|
|
|
- >{{ loading ? "提交中 ..." : "确 定" }}
|
|
|
- </el-button>
|
|
|
+ <!--编辑抽屉-->
|
|
|
+ <el-drawer ref="editDrawer" title="编辑角色" size="30%" :before-close="editHandleClose" :with-header="false" :visible.sync="editDialog" direction="rtl" custom-class="demo-drawer">
|
|
|
+ <div class="demo-drawer__content">
|
|
|
+ <span>编辑角色</span>
|
|
|
+ <el-form :model="editForm" label-width="80px">
|
|
|
+ <el-form-item label="账号">
|
|
|
+ <el-input v-model="editForm.account" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码">
|
|
|
+ <el-input v-model="editForm.passwordHash" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input v-model="editForm.name" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号">
|
|
|
+ <el-input v-model="editForm.phone" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="人脸">
|
|
|
+ <el-upload class="avatar-uploader" :show-file-list="false" action="">
|
|
|
+ <!-- <img src="" class="avatar" /> -->
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="demo-drawer__footer">
|
|
|
+ <el-button @click="cancelForm">取 消</el-button>
|
|
|
+ <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? "提交中 ..." : "确 定" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-drawer>
|
|
|
+ </el-drawer>
|
|
|
|
|
|
- <!--授权弹窗-->
|
|
|
- <el-dialog title="授权" :visible.sync="showEmp">
|
|
|
- <el-transfer
|
|
|
- v-model="myAuth"
|
|
|
- :data="allAuth"
|
|
|
- :titles="['未授权', '已授权']"
|
|
|
- />
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="showEmp = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="postList">确 定</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- <div v-else style="margin: 50px 30px; text-align: center">
|
|
|
- 您没有当前页面操作权限
|
|
|
+ <!--授权弹窗-->
|
|
|
+ <el-dialog title="授权" :visible.sync="showEmp">
|
|
|
+ <el-transfer v-model="myAuth" :data="allAuth" :titles="['未授权', '已授权']" />
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showEmp = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="postList">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div v-else style="margin: 50px 30px; text-align: center">
|
|
|
+ 您没有当前页面操作权限
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -162,7 +116,7 @@ import { post, get } from "@/api/common";
|
|
|
|
|
|
export default {
|
|
|
name: "RoleList",
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
allAuth: [],
|
|
|
myAuth: [],
|
|
|
@@ -201,7 +155,7 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
- created() {
|
|
|
+ created () {
|
|
|
var that = this;
|
|
|
that.search();
|
|
|
let userName = this.$store.state.user.name;
|
|
|
@@ -220,7 +174,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- async search() {
|
|
|
+ async search () {
|
|
|
// 同步搜索
|
|
|
await get("/sysUser/page", this.searchForm)
|
|
|
.then((res) => {
|
|
|
@@ -231,11 +185,11 @@ export default {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
- searchBtn() {
|
|
|
+ searchBtn () {
|
|
|
// 搜索按钮
|
|
|
this.search();
|
|
|
},
|
|
|
- reset() {
|
|
|
+ reset () {
|
|
|
// 重置
|
|
|
this.searchForm = {
|
|
|
authUrl: "",
|
|
|
@@ -245,11 +199,11 @@ export default {
|
|
|
};
|
|
|
this.search();
|
|
|
},
|
|
|
- add() {
|
|
|
+ add () {
|
|
|
// 新增
|
|
|
this.addDialog = true;
|
|
|
},
|
|
|
- addHandleClose(done) {
|
|
|
+ addHandleClose (done) {
|
|
|
// 新增数据
|
|
|
this.$refs["ruleForm"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
@@ -280,12 +234,12 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- edit(e) {
|
|
|
+ edit (e) {
|
|
|
// 编辑
|
|
|
this.editForm = e;
|
|
|
this.editDialog = true;
|
|
|
},
|
|
|
- editHandleClose(done) {
|
|
|
+ editHandleClose (done) {
|
|
|
// 修改数据
|
|
|
if (this.loading) return;
|
|
|
this.$confirm("确定要提交吗？")
|
|
|
@@ -308,7 +262,7 @@ export default {
|
|
|
this.editDialog = false;
|
|
|
});
|
|
|
},
|
|
|
- dele(e) {
|
|
|
+ dele (e) {
|
|
|
// 删除
|
|
|
this.$confirm("确定要删除么？").then((_) => {
|
|
|
post("/sysUser/delete", { ids: [e] }).then((res) => {
|
|
|
@@ -316,7 +270,7 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- empower(e) {
|
|
|
+ empower (e) {
|
|
|
this.showEmp = true;
|
|
|
this.userId = e;
|
|
|
get("/sysUser/getUserRole", { userId: e }).then((res) => {
|
|
|
@@ -326,7 +280,7 @@ export default {
|
|
|
this.allAuth = res.data;
|
|
|
});
|
|
|
},
|
|
|
- postList() {
|
|
|
+ postList () {
|
|
|
post("/sysUser/setUserRole", {
|
|
|
userId: this.userId,
|
|
|
roleIdList: this.myAuth,
|
|
|
@@ -334,20 +288,20 @@ export default {
|
|
|
if (res.code === 10000) this.showEmp = false;
|
|
|
});
|
|
|
},
|
|
|
- cancelForm() {
|
|
|
+ cancelForm () {
|
|
|
// 关闭抽屉
|
|
|
this.loading = false;
|
|
|
this.editDialog = false;
|
|
|
this.addDialog = false;
|
|
|
clearTimeout(this.timer);
|
|
|
},
|
|
|
- handleSizeChange(e) {
|
|
|
+ handleSizeChange (e) {
|
|
|
// 单页数量
|
|
|
this.searchForm.pageSize = e;
|
|
|
this.searchForm.pageNum = 1;
|
|
|
this.search();
|
|
|
},
|
|
|
- handleCurrentChange(e) {
|
|
|
+ handleCurrentChange (e) {
|
|
|
// 跳页
|
|
|
this.searchForm.pageNum = e;
|
|
|
this.search();
|
|
|
@@ -355,6 +309,31 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.searchBox {
|
