|
@@ -13,30 +13,28 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="table">
|
|
|
- <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
|
|
|
+ <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
|
|
|
+ stripe>
|
|
|
<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
|
|
|
<el-table-column align="center" label="角色" prop="name"></el-table-column>
|
|
|
<el-table-column align="center" label="操作" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="text" @click="setMenuRole(scope.row.adminRoleId)">设置权限</el-button>
|
|
|
- <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">编辑</el-button>
|
|
|
- <el-popconfirm style="margin-left: 10px;" title="确定删除吗?" @confirm="handleDelete(scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">
|
|
|
+ <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)"
|
|
|
+ v-if="scope.row.adminRoleId != 1">编辑</el-button>
|
|
|
+ <el-popconfirm style="margin-left: 10px;" title="确定删除吗?" @confirm="handleDelete(scope.row.adminRoleId)"
|
|
|
+ v-if="scope.row.adminRoleId != 1">
|
|
|
<el-button slot="reference" type="text">删除</el-button>
|
|
|
</el-popconfirm>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="pagination clearfix">
|
|
|
<div class="fr">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-sizes="[10, 20, 30, 50]"
|
|
|
- :page-size="10"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="listTotal">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
@@ -44,7 +42,8 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 新增编辑 -->
|
|
|
- <el-dialog :title="addFormType == 'add' ? '新增角色':'编辑角色'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
|
|
|
+ <el-dialog :title="addFormType == 'add' ? '新增角色' : '编辑角色'" :visible.sync="addFormVisible" :show-close="false"
|
|
|
+ width="40%" :close-on-click-modal="false">
|
|
|
<el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
|
|
|
<el-form-item label="角色名" prop="name">
|
|
|
<el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
|
|
@@ -57,19 +56,14 @@
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 设置权限 -->
|
|
|
- <el-dialog title="设置权限" :visible.sync="roleFormVisible" :show-close="false" width="40%" :close-on-click-modal="false" custom-class="tree-dialog" top="50px">
|
|
|
- <el-tree
|
|
|
- :data="menuRoleList"
|
|
|
- show-checkbox
|
|
|
- :check-strictly="true"
|
|
|
- :default-expand-all="true"
|
|
|
- node-key="moduleId"
|
|
|
- ref="tree"
|
|
|
- highlight-current
|
|
|
- :props="defaultProps">
|
|
|
+ <el-dialog title="设置权限" :visible.sync="roleFormVisible" :show-close="false" width="40%" :close-on-click-modal="false"
|
|
|
+ custom-class="tree-dialog" top="50px">
|
|
|
+ <!-- :check-strictly="true" -->
|
|
|
+ <el-tree :data="menuRoleList" show-checkbox :default-expand-all="true" node-key="moduleId" ref="tree"
|
|
|
+ highlight-current :props="defaultProps">
|
|
|
</el-tree>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="roleFormVisible = false">{{editId != 1 ? '取 消':'关 闭'}}</el-button>
|
|
|
+ <el-button @click="roleFormVisible = false">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
|
|
|
<el-button type="primary" @click="submitRoleForm" v-if="editId != 1">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
@@ -91,7 +85,7 @@ export default {
|
|
|
pageSize: 10, // 每页数量
|
|
|
listTotal: 0, // 列表总数
|
|
|
|
|
|
- editId: null,
|
|
|
+ editId: null,
|
|
|
addFormType: 'add',
|
|
|
addFormVisible: false,
|
|
|
addForm: {
|
|
@@ -114,7 +108,7 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
- 'userid',
|
|
|
+ 'userid',
|
|
|
'name'
|
|
|
])
|
|
|
},
|
|
@@ -152,7 +146,7 @@ export default {
|
|
|
|
|
|
// 操作 - 删除
|
|
|
handleDelete(id) {
|
|
|
- deleteRole({adminRoleId: id}).then(res => {
|
|
|
+ deleteRole({ adminRoleId: id }).then(res => {
|
|
|
this.getList();
|
|
|
this.$successMsg();
|
|
|
})
|
|
@@ -162,9 +156,9 @@ export default {
|
|
|
addOrEdit(type, id) {
|
|
|
this.addFormType = type;
|
|
|
this.addFormVisible = true;
|
|
|
- if(type == 'edit') {
|
|
|
+ if (type == 'edit') {
|
|
|
this.editId = id;
|
|
|
- getRoleDetail({adminRoleId: id}).then(res => {
|
|
|
+ getRoleDetail({ adminRoleId: id }).then(res => {
|
|
|
this.addForm = {
|
|
|
name: res.data.name
|
|
|
}
|
|
@@ -173,7 +167,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 取消 新增编辑
|
|
|
- cancelAddForm(){
|
|
|
+ cancelAddForm() {
|
|
|
this.addFormVisible = false;
|
|
|
this.$refs.addForm.resetFields();
|
|
|
},
|
|
@@ -185,7 +179,7 @@ export default {
|
|
|
let params = {
|
|
|
name: this.addForm.name
|
|
|
}
|
|
|
- if(this.addFormType == 'edit') {
|
|
|
+ if (this.addFormType == 'edit') {
|
|
|
params.adminRoleId = this.editId;
|
|
|
editRole(params).then(res => {
|
|
|
this.cancelAddForm();
|
|
@@ -207,19 +201,19 @@ export default {
|
|
|
setMenuRole(id) {
|
|
|
this.roleFormVisible = true;
|
|
|
this.editId = id;
|
|
|
- getMenuList({adminUserId: this.userid}).then(res => {
|
|
|
+ getMenuList({ adminUserId: this.userid }).then(res => {
|
|
|
this.menuRoleList = res.data;
|
|
|
})
|
|
|
- getMenuRoleIds({adminRoleId: id}).then(res => {
|
|
|
+ getMenuRoleIds({ adminRoleId: id }).then(res => {
|
|
|
this.$refs.tree.setCheckedKeys(res.data);
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 设置权限 - 提交数据
|
|
|
submitRoleForm() {
|
|
|
- console.log(this.$refs.tree.getCheckedKeys());
|
|
|
let params = {
|
|
|
- adminModuleIds: this.$refs.tree.getCheckedKeys().join(','),
|
|
|
+ adminModuleIds: this.$refs.tree.getCheckedKeys(),
|
|
|
+ adminModuleIds2: this.$refs.tree.getHalfCheckedKeys(),
|
|
|
adminRoleId: this.editId,
|
|
|
}
|
|
|
setMenuRole(params).then(res => {
|
|
@@ -234,20 +228,22 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .tree-dialog {
|
|
|
- .el-dialog__body {
|
|
|
- padding: 20px;
|
|
|
- .el-tree {
|
|
|
- max-height: calc(100vh - 140px - 54px - 70px);
|
|
|
- overflow-y: scroll;
|
|
|
- padding: 0 30px;
|
|
|
- >.el-tree-node {
|
|
|
- padding: 15px 0;
|
|
|
- border: 1px dashed #ddd;
|
|
|
- margin-bottom: 15px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
+.tree-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .el-tree {
|
|
|
+ max-height: calc(100vh - 140px - 54px - 70px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding: 0 30px;
|
|
|
+
|
|
|
+ >.el-tree-node {
|
|
|
+ padding: 15px 0;
|
|
|
+ border: 1px dashed #ddd;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|