LayoutDistribution.vue
3.29 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
137
138
139
<template>
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside width="230px" style="overflow-x:hidden">
<ht-select v-model="selectOrgId" class="org-select" :options="orgList" />
<org-tree
class="org-tree"
@node-click="orgTreeClick"
:orgManagerNow="orgManagerNow"
:orgId="selectOrgId"
v-if="reFresh && selectOrgId"
></org-tree>
</el-aside>
<el-main>
<LayoutManager
ref="layoutManager"
v-if="layoutMngShow"
:orgId="orgId"
:orgManagerNow="orgManagerNow"
/>
<div v-if="!layoutMngShow" class="empty">选择一个组织进行具体操作</div>
</el-main>
</el-container>
</template>
<script>
import orgrequest from '@/api/org.js'
const orgTree = () => import('@/views/uc/heiorgmanager/OrgTree.vue')
const LayoutManager = () => import('@/views/portal/LayoutManager.vue')
export default {
name: 'layout-distribution',
data() {
return {
selectOrgId: '', //选择的组织ID
orgList: [], //下拉框待选择的组织
orgManagerList: [], //获取到有管理员权限的组织
treeList: [], //树形菜单展示的数组
defaultProps: {
children: 'children',
label: 'name'
},
reFresh: true,
toManageType: 'showInfo', //打开orgManager组件需要传入的参数
orgId: '',
layoutMngShow: false,
orgManagerNow: {} //当前选择的对象
}
},
components: {
orgTree,
LayoutManager
},
methods: {
rowClick(row, column, event) {
this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
},
orgTreeClick(orgbytree) {
this.orgId = orgbytree.id
this.layoutMngShow = false
this.$nextTick(() => {
this.layoutMngShow = true
})
}
},
mounted() {
orgrequest.getCurrentUserAuthOrgLayout().then(rep => {
for (var i = 0; i < rep.length; i++) {
this.orgList.push({
key: rep[i].orgId,
value: rep[i].orgName + '--[' + rep[i].demName + ']'
})
}
this.orgManagerList = rep //将所有有权限的组织赋值到orgManagerList对象当中，后面会带到各个组件当中做权限判断
this.selectOrgId = rep[0].orgId
})
},
watch: {
selectOrgId(orgId, oldOrgId) {
for (var i = 0; i < this.orgManagerList.length; i++) {
var org = this.orgManagerList[i]
if (org.orgId === orgId) {
this.orgManagerNow = org
}
}
this.orgId = orgId
this.layoutMngShow = false
this.$nextTick(() => {
this.layoutMngShow = true
})
this.reFresh = false
this.$nextTick(() => {
this.reFresh = true
})
}
}
}
</script>
<style lang="scss" scoped>
.el-aside {
height: 100%;
border: 1px solid #eee;
}
.org-select {
width: 100%;
}
.org-select >>> .el-select {
width: 100%;
}
.org-select >>> .el-input__inner {
border-radius: 0;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
}
.org-tree {
height: calc(100% - 70px);
margin-top: 15px;
}
.empty {
text-align: center;
width: 100%;
margin-top: 150px;
font-size: 16px;
color: #ccc;
}
@media (max-width: 1024px) {
/deep/ .search-container__col {
flex-wrap: wrap;
.el-button-group {
margin-top: 10px;
}
}
}
</style>