|
@@ -1,62 +1,62 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="left-pane">
|
|
|
- <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
|
|
|
- <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" :filter-node-method="filterNode"
|
|
|
- @node-click="handleNodeClick">
|
|
|
+ <el-input class="left-pane-input" placeholder="请输入关键字" suffix-icon="el-icon-search"
|
|
|
+ v-model="filterText"></el-input>
|
|
|
+ <el-tree highlight-current
|
|
|
+ ref="tree" :data="data" :props="defaultProps" node-key="id" :filter-node-method="filterNode"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
<span slot-scope="{node,data}">
|
|
|
- <el-image :src="data.url"></el-image>
|
|
|
- <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
|
|
|
+ <el-image :src="require('@/assets/tree/role/user-group@3x.png')"></el-image>
|
|
|
+ <span style="padding-left: 10px; vertical-align: text-bottom;">{{ data.role_name }}</span>
|
|
|
<span class="operate_btns">
|
|
|
<dropdown :events="subMenuEvents" :data="{ node, data }"
|
|
|
- @itemClick="dropDownClick"></dropdown>
|
|
|
+ @itemClick="dropDownClick"></dropdown>
|
|
|
</span>
|
|
|
</span>
|
|
|
</el-tree>
|
|
|
- <el-button @click="addRole" style="color: #fff; background: #3da0d6"><i
|
|
|
- class="el-icon-s-order"></i>添加角色</el-button>
|
|
|
+ <el-button class="left-pane-btn" @click="addRoleVisible = true" style="color: #fff; background: #3da0d6"><i
|
|
|
+ class="el-icon-s-order" style="padding-right: 6px"></i>添加角色
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
<div class="right-pane">
|
|
|
- <overView v-if="viewShow"></overView>
|
|
|
- <roleDetail v-if="roleShow"></roleDetail>
|
|
|
+ <overView ref="overview" v-if="viewShow"></overView>
|
|
|
+ <roleDetail :item="currentRole" v-if="roleShow"></roleDetail>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog title="新建角色"
|
|
|
+ v-if="addRoleVisible"
|
|
|
+ :visible.sync="addRoleVisible"
|
|
|
+ width="500px" center style="display: flex;height:600px">
|
|
|
+ <RoleAdd :updateList="updateRoleList"></RoleAdd>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import overView from './roleOverview';
|
|
|
import dropdown from '@/components/Dropdown/index';
|
|
|
import roleDetail from './decisiongroup/index';
|
|
|
+import RoleAdd from "@/views/permissionManagement/messageDialog/roleAdd.vue";
|
|
|
+import {getRoleList} from "@/api/role/role"
|
|
|
+
|
|
|
export default {
|
|
|
- components: { overView, dropdown, roleDetail },
|
|
|
+ components: {overView, dropdown, roleDetail, RoleAdd},
|
|
|
data() {
|
|
|
return {
|
|
|
+ currentRole: {},
|
|
|
filterText: '',
|
|
|
viewShow: true,
|
|
|
- roleShow:false,
|
|
|
- data: [{
|
|
|
- id: 1,
|
|
|
- label: '决策组-1',
|
|
|
- url: require('@/assets/tree/role/user-group@3x.png'),
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- label: '决策组-2',
|
|
|
- url: require('@/assets/tree/role/user-group@3x.png')
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- label: '管理员组',
|
|
|
- url: require('@/assets/tree/role/user-group@3x.png')
|
|
|
- }, {
|
|
|
- id: 4,
|
|
|
- label: '普通用户组',
|
|
|
- url: require('@/assets/tree/role/user-group@3x.png')
|
|
|
- }],
|
|
|
+ roleShow: false,
|
|
|
+ addRoleVisible: false,
|
|
|
+ data: [],
|
|
|
subMenuEvents: [
|
|
|
- { label: '新建', funcName: 'addNode' },
|
|
|
- { label: '上移', funcName: 'moveUp' },
|
|
|
- { label: '下移', funcName: 'moveDown' },
|
|
|
- { label: '编辑', funcName: 'editNode' },
|
|
|
- { label: '删除', funcName: 'removeNode' }
|
|
|
+ {label: '新建', funcName: 'addNode'},
|
|
|
+ {label: '上移', funcName: 'moveUp'},
|
|
|
+ {label: '下移', funcName: 'moveDown'},
|
|
|
+ {label: '编辑', funcName: 'editNode'},
|
|
|
+ {label: '删除', funcName: 'removeNode'}
|
|
|
],
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
@@ -65,18 +65,34 @@ export default {
|
|
|
currentNode: {}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
watch: {
|
|
|
filterText(val) {
|
|
|
this.$refs.tree.filter(val);
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.getRoleList()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getRoleList() {
|
|
|
+ getRoleList(1, 999).then(res => {
|
|
|
+ let data = res.data;
|
|
|
+ if (data.code == 0) {
|
|
|
+ this.data = data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
handleNodeClick(data) {
|
|
|
+ this.currentRole = data;
|
|
|
this.roleShow = true;
|
|
|
this.viewShow = false;
|
|
|
|
|
|
},
|
|
|
+ updateRoleList() {
|
|
|
+ this.$refs.overview.getTableData(1);
|
|
|
+ this.addRoleVisible = false
|
|
|
+ },
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true;
|
|
|
return data.label.indexOf(value) !== -1;
|
|
@@ -96,68 +112,119 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
- line-height: 20px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
-
|
|
|
- .left-pane {
|
|
|
- width: 300px;
|
|
|
- padding: 15px;
|
|
|
- height: calc(100% - 30px);
|
|
|
-
|
|
|
- .el-tree {
|
|
|
- margin-top: 10px;
|
|
|
- height: calc(98% - 30px);
|
|
|
- background-color: #FAFAFA;
|
|
|
-
|
|
|
- /deep/.el-tree-node__content {
|
|
|
- align-items: center;
|
|
|
- height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- position: relative;
|
|
|
- color: #999999;
|
|
|
- padding-top: 10px;
|
|
|
- padding-left: 30px !important;
|
|
|
- .operate_btns {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
- &:hover,
|
|
|
- :focus-within {
|
|
|
- background-color: #f7fbff;
|
|
|
+ .left-pane {
|
|
|
+ width: 300px;
|
|
|
+ padding: 15px;
|
|
|
+ height: calc(100% - 30px);
|
|
|
|
|
|
- .operate_btns {
|
|
|
- display: inline;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/.el-tree-node__children{
|
|
|
- .el-tree-node__content{
|
|
|
- padding-left: 60px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-button {
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 8px 12px;
|
|
|
}
|
|
|
- .right-pane{
|
|
|
- width: calc(100% - 330px);
|
|
|
+
|
|
|
+ .left-pane-input {
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ height: 30px !important;
|
|
|
+ line-height: 30px;
|
|
|
+ //border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__suffix {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__icon {
|
|
|
+ line-height: 30px !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .el-button {
|
|
|
- position: absolute;
|
|
|
- left: 40px;
|
|
|
- bottom: 15px;
|
|
|
- width: 250px;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
+ .el-tree {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: calc(98% - 30px);
|
|
|
+ background-color: #FAFAFA;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-tree-node__content {
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ position: relative;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 30px !important;
|
|
|
+
|
|
|
+ .operate_btns {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ :focus-within {
|
|
|
+ background-color: #f7fbff;
|
|
|
+
|
|
|
+ .operate_btns {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-tree-node__children {
|
|
|
+ .el-tree-node__content {
|
|
|
+ padding-left: 60px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__header {
|
|
|
+ text-align: left;
|
|
|
+ padding: 20px 20px 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__title {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding: 0 20px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-divider--horizontal {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0px 0 20px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-pane {
|
|
|
+ width: calc(100% - 330px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ position: absolute;
|
|
|
+ left: 40px;
|
|
|
+ bottom: 15px;
|
|
|
+ width: 250px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|