index.vue
3.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
<div style="height:calc(100vh - 50px);overflow:auto;">
<Dec :content="content" />
<div class="app-container">
<div class="btn-grooup">
<el-button type="primary" @click="addRole">新建角色</el-button>
<el-button type="primary" @click="copyRole">复制权限新建角色</el-button>
</div>
<el-row style="height:calc(100% - 55px)">
<el-col :span="6" style="height:100%;border-right:1px solid #ccc;">
<ListBox
ref="listbox"
title="角色列表"
title-bg="#ccc"
:data="listData"
active-color="rgb(64, 158, 255)"
:acitve-index="1"
@clicklist="clicklist"
@removelist="removelist"
@submitname="submitname"
/>
</el-col>
<el-col :span="18" style="padding:0 15px;height:100%">
<p style="line-height:50px;margin:0;">角色名称：<el-input v-model="listData[clickindex].name" size="small" style="width:200px;" /></p>
<el-tabs type="card">
<el-tab-pane label="页面权限">
<div style="height:calc(100vh - 360px);overflow:auto;">
<el-tree
:data="treedata"
show-checkbox
node-key="id"
:default-expanded-keys="[2]"
:default-checked-keys="[5]"
:default-expand-all="true"
:props="defaultProps"
/>
</div>
</el-tab-pane>
</el-tabs>
<div style="line-height:50px;text-align:center;"><el-button type="primary">保存</el-button></div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import Dec from '@/components/Dec'
import ListBox from '@/components/ListBox'
export default {
name: 'Role',
components: {
Dec,
ListBox
},
data() {
return {
content: '角色用来控制不同的用户可以受用哪些功能权限',
clickindex: 0,
listData: [
{ id: 1, name: '班主任' },
{ id: 2, name: '任课老师' }
],
treedata: [{
id: 1,
label: '账号管理',
children: [{
id: 4,
label: '角色管理'
}, {
id: 5,
label: '账号管理'
}]
}, {
id: 2,
label: '一级 2'
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
removelist(index) {
this.listData.splice(index, 1)
},
clicklist(index) {
this.clickindex = index
},
copyRole() {
if (this.clickindex < this.listData.length) {
// const name = this.listData[this.clickindex].name
this.$refs.listbox.addList('未命名')
} else {
this.$message.error('请选择复制对象')
}
},
addRole() {
this.$refs.listbox.addList('未命名')
},
submitname(index) {
this.listData[index].edit = false
}
}
}
</script>
<style scoped>
.app-container{
max-width: 1100px;
height: calc(100% - 65px);
background: #fff;
margin:0 auto;
margin-top:15px;
}
.btn-grooup{
padding-bottom: 15px;
}
</style>