index.vue
3.56 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
<template>
<div class="app-container">
<div class="qg-row">
<!-- TODO 行内样式修改-->
<div class="qg-col--category" style="padding-right: 6px;">
<qg-tree
ref="roleTree"
style="background-color: #fff;padding: 12px;"
:request="listRequest"
@node-click="nodeClick"
@request-complete="treeRequest"
/>
</div>
<div class="qg-col">
<el-button type="primary" plain @click="handleAdd">新增角色</el-button>
<el-tabs v-model="activeTab">
<el-tab-pane label="角色信息" name="baseInfo"/>
<el-tab-pane label="权限设置" name="authSetting"/>
<el-tab-pane label="成员管理" name="member"/>
</el-tabs>
<role-edit
v-show="activeTab === 'new' || activeTab === 'baseInfo'"
:entity="roleEntity"
@delete-cb="handleDelete"
@on-save="handleSave"
/>
<role-auth v-if="activeTab === 'authSetting'" :entity="roleEntity">权限</role-auth>
<role-member v-if="activeTab === 'member'" :entity="roleEntity">成员</role-member>
</div>
</div>
</div>
</template>
<script>
import RoleEdit from './edit';
import RoleMember from './member';
import RoleAuth from './auth';
import {roleListAll} from '@/api/moudles/uc/role.js';
export default {
name: 'MgtTable',
components: {
RoleEdit,
RoleMember,
RoleAuth
},
data() {
return {
listRequest: roleListAll,
activeTab: 'baseInfo',
roleEntity: null
};
},
watch: {
activeTab(val) {
}
},
created() {
},
methods: {
treeRequest(isSuccess, result) {
if (isSuccess && result.data && result.data.length > 0) {
this.roleEntity = this.roleEntity ? this.roleEntity : result.data[0];
this.$refs.roleTree.setCurrentKey(this.roleEntity.id);
} else {
this.roleEntity = null;
}
},
nodeClick(data) {
if (this.roleEntity && data.id === this.roleEntity.id) {
return;
}
this.roleEntity = data;
if (this.activeTab === 'new') {
this.activeTab = 'baseInfo';
}
},
handleAdd() {
const addDialog = this.$qgDialog({
title: '新增',
width: '600px',
component: RoleEdit,
props: {
entity: null,
callback: (action, data) => {
this.$refs.roleTree.reload();
console.log('新增', data);
this.roleEntity = data;
addDialog.close();
}
}
});
},
handleSave() {
console.log('handleSave');
this.$refs.roleTree.reload();
},
handleDelete() {
this.roleEntity = null;
this.$refs.roleTree.reload();
}
}
};
</script>