1 | <template>
|
2 | <div class='flex-row' id="box">
|
3 | <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top">
|
4 | <h3>资源管理</h3>
|
5 | <div class="span" style="max-height: calc(100% - 262px)">
|
6 | <resource-tree :functions='functions' :userid='userid' is-click="false" v-if="treeOrIcon"></resource-tree>
|
7 | </div>
|
8 |
|
9 | <div class="tree-flex-footer">
|
10 |
|
11 | <a @click="refresh(1)"><span><img :src="imgs.open" alt="">刷新菜单</span></a>
|
12 | <dropdown>
|
13 | <button type="button" data-toggle="dropdown">
|
14 | <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
|
15 | </button>
|
16 | <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
|
17 | <li>系统信息及设置</li>
|
18 | <li>2017年4月6日 15:32:54</li>
|
19 | <li>修改密码</li>
|
20 | <li>系统版本:1.0.0</li>
|
21 | </ul>
|
22 | </dropdown>
|
23 |
|
24 | <a @click='$back()'>
|
25 | <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">返回上级</span>
|
26 | </a>
|
27 | </div>
|
28 | </div>
|
29 |
|
30 | <div class="line" id="line" v-show="treeOrIcon"></div>
|
31 |
|
32 | <div class="flex right-bg" id="bottom">
|
33 | |
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | <div class="span">
|
40 |
|
41 | <dynamic-ldap v-ref:paged :comps='[]' name='resmain'></dynamic-ldap>
|
42 | </div>
|
43 |
|
44 | </div>
|
45 | </div>
|
46 | </template>
|
47 |
|
48 | <script>
|
49 | import * as Util from '../Util'
|
50 |
|
51 | export default {
|
52 | title: '主界面',
|
53 | props: ['data'],
|
54 | data () {
|
55 | return {
|
56 |
|
57 | imgs: {
|
58 | open: './static/refresh.png',
|
59 | set: './static/treeset.png',
|
60 | out: './static/treeout.png'
|
61 | },
|
62 | treeOrIcon: true,
|
63 | treeWidth: 300,
|
64 | headerHint: true,
|
65 | routeName: 'resmain',
|
66 | value: 25645.26,
|
67 | selcttabs:[],
|
68 | functions: Util.f
|
69 | }
|
70 | },
|
71 | ready () {
|
72 | this.userid = this.$login.f.id
|
73 |
|
74 | this.refresh()
|
75 |
|
76 | let oBox = this.getElement("box")
|
77 | let oTop = this.getElement("top")
|
78 | let oBottom = this.getElement("bottom")
|
79 | let oLine = this.getElement("line")
|
80 | let that = this
|
81 | oLine.onmousedown = function(e) {
|
82 | let disX = (e || event).clientX
|
83 | oLine.left = oLine.offsetLeft
|
84 | document.onmousemove = function(e) {
|
85 | let iT = oLine.left + ((e || event).clientX - disX)
|
86 | var e = e || window.event
|
87 | let tarnameb = e.target || e.srcElement
|
88 | let maxT = oBox.clientWight - oLine.offsetWidth
|
89 | oLine.style.margin = 0
|
90 | iT < 0 && (iT = 0)
|
91 | iT > maxT && (iT = maxT)
|
92 | oLine.style.left = oTop.style.width = iT + "px"
|
93 | oBottom.style.width = oBox.clientWidth - iT + "px"
|
94 | console.log(iT)
|
95 | that.$set('treeWidth', iT)
|
96 | console.log("that.treeWidth-->"+that.treeWidth)
|
97 | return false
|
98 | }
|
99 | document.onmouseup = function() {
|
100 | document.onmousemove = null
|
101 | document.onmouseup = null
|
102 | oLine.releaseCapture && oLine.releaseCapture()
|
103 | }
|
104 | oLine.setCapture && oLine.setCapture()
|
105 | return false
|
106 | }
|
107 | },
|
108 | methods: {
|
109 | async refresh (ret) {
|
110 | await Util.loadRightResource(this)
|
111 | await Util.loadlicensepolicy(this)
|
112 | await Util.loadFuntionResource(this)
|
113 | await Util.loadLdapRes(this)
|
114 | if(ret == 1){
|
115 | this.$refs.paged.removeAll()
|
116 | }
|
117 | },
|
118 | getElement(id) {
|
119 | return document.getElementById(id)
|
120 | },
|
121 | changeShow () {
|
122 | this.treeOrIcon = !this.treeOrIcon
|
123 | let oBox = this.getElement("box")
|
124 | let oTop = this.getElement("top")
|
125 | let oBottom = this.getElement("bottom")
|
126 | let oLine = this.getElement("line")
|
127 | if (this.treeOrIcon) {
|
128 |
|
129 | oTop.style.width = this.treeWidth + "px"
|
130 | oBottom.style.width = oBox.clientWidth - this.treeWidth + "px"
|
131 | }else {
|
132 | oLine.style.left = oTop.style.width = 60 + "px"
|
133 | oBottom.style.width = oBox.clientWidth - 60 + "px"
|
134 | }
|
135 |
|
136 | }
|
137 | },
|
138 | computed: {
|
139 | nowDate () {
|
140 | return Util.getNowDate()
|
141 | }
|
142 | }
|
143 | }
|
144 | </script>
|
145 | <style scoped>
|
146 |
|
147 | .right-bg {
|
148 | width: 100%;
|
149 | flex: 1;
|
150 |
|
151 |
|
152 |
|
153 | padding: 10px 15px;
|
154 | font-size: 1em;
|
155 | font-family: 微软雅黑;
|
156 | }
|
157 | /*.right-bg section {
|
158 | flex: 1;
|
159 | }*/
|
160 | .right-header {
|
161 | display: flex;
|
162 | justify-content: space-between;
|
163 | line-height: 40px;
|
164 | height: 40px;
|
165 | background: #E3EAF3;
|
166 | width: 100%;
|
167 | border-radius: 3px;
|
168 | padding: 0px 30px;
|
169 | }
|
170 | .right-header h4 {
|
171 | color: #67BA2F;
|
172 | display: inline-block;
|
173 | }
|
174 | .tree-flex {
|
175 | height: 100%;
|
176 | width: 300px;
|
177 |
|
178 | background: #4a7cae;
|
179 | color: #fff;
|
180 |
|
181 | }
|
182 | .tree-flex-icon {
|
183 | width: 60px;
|
184 |
|
185 | }
|
186 | .tree-flex h3 {
|
187 | text-align: center;
|
188 | line-height: 80px;
|
189 | margin: 0px;
|
190 | border-bottom: 1px solid #e5e5e5;
|
191 | }
|
192 |
|
193 | .tree-flex-footer {
|
194 | height: 180px;
|
195 | display: flex;
|
196 | flex-direction:column;
|
197 | color: #fff;
|
198 | border-top: 1px solid #e5e5e5;
|
199 | }
|
200 | .tree-flex-footer a,.tree-flex-footer button{
|
201 | height: 60px;
|
202 | padding: 15px;
|
203 | font-size: 1.2em;
|
204 | border-top: 1px solid #4a7cae;
|
205 | text-decoration: none;
|
206 | color: #fff;
|
207 | cursor: pointer;
|
208 | }
|
209 | .tree-flex-footer button {
|
210 | width: 100%;
|
211 | border-radius: 0px;
|
212 | background-color: rgba(255,255,255,0);
|
213 | border: none;
|
214 | border-top: 1px solid #4a7cae;
|
215 | text-align: left;
|
216 | }
|
217 | .tree-flex-footer button:hover{
|
218 | outline: none;
|
219 | background-color: rgba(255,255,255,0.2);
|
220 | }
|
221 | .tree-flex-footer button:focus {
|
222 | outline: none;
|
223 | background-color: rgba(255,255,255,0.5);
|
224 | }
|
225 | .tree-flex-footer a:hover {
|
226 | color: #FFF;
|
227 | background-color: rgba(255,255,255,0.2);
|
228 | }
|
229 | .btn-group {
|
230 | height: 60px!important;
|
231 | }
|
232 |
|
233 | .tree-flex .dropdown-menu {
|
234 |
|
235 | background: #4C637B;
|
236 | border-radius: 0px;
|
237 | color: #fff;
|
238 | width: auto;
|
239 | margin: 0px;
|
240 | padding: 0px;
|
241 | }
|
242 | .tree-flex .tree-flex.dropdown-menu-up {
|
243 |
|
244 | left: 100%!important;
|
245 | top: auto!important;
|
246 | bottom: 0;
|
247 | }
|
248 | .tree-flex .dropdown-menu-down {
|
249 |
|
250 | left: 100%!important;
|
251 | top: 0!important;
|
252 | }
|
253 | .tree-flex .dropdown-menu li{
|
254 | text-align: center;
|
255 | line-height: 60px;
|
256 | border-bottom: 1px solid #697D93;
|
257 | font-size: 1.3em;
|
258 | width: auto;
|
259 | white-space: nowrap;
|
260 | cursor: default;
|
261 |
|
262 | }
|
263 | .tree-flex .dropdown-menu li + li {
|
264 | text-align: left;
|
265 | border: 0;
|
266 | line-height: 40px;
|
267 | padding-left: 15px;
|
268 | padding-right: 15px;
|
269 | font-size: 1em;
|
270 | cursor: pointer;
|
271 | }
|
272 | .tree-flex .dropdown-menu li + li:hover {
|
273 | background-color: rgba(255,255,255,0.2);
|
274 | }
|
275 | .tree-flex .dropdown-menu li a {
|
276 | border: none;
|
277 | color: #fff;
|
278 | height: 40px;
|
279 | line-height: 40px;
|
280 | font-size: 1em;
|
281 | padding: 0px;
|
282 | }
|
283 | .tree-flex .dropdown-menu li a:hover {
|
284 | color: #fff;
|
285 | background-color: rgba(255,255,255,0);
|
286 | }
|
287 | .tree-flex img{
|
288 | height: 1.2em;
|
289 | width: 1.2em;
|
290 | margin-right: 15px;
|
291 | margin-left: 5px;
|
292 | }
|
293 | .line {
|
294 | height: 100%;
|
295 | width: 0px;
|
296 | background: #4C637B;
|
297 | cursor: e-resize;
|
298 | }
|
299 |
|
300 | .tree-img {
|
301 | font-size: 1.3em;
|
302 | }
|
303 |
|
304 |
|
305 |
|
306 | ::-webkit-scrollbar-thumb{
|
307 | background-color:rgba(0,0,0,0.2);
|
308 | height:50px;
|
309 | outline-offset:-2px;
|
310 |
|
311 | -webkit-border-radius:4px;
|
312 |
|
313 | }
|
314 |
|
315 |
|
316 | ::-webkit-scrollbar-thumb:hover{
|
317 | background-color:rgba(0,0,0,0.4);
|
318 | height:50px;
|
319 | -webkit-border-radius:4px;
|
320 | }
|
321 |
|
322 | ::-webkit-scrollbar{
|
323 | width:8px;
|
324 | height:8px;
|
325 | }
|
326 |
|
327 | ::-webkit-scrollbar-track-piece{
|
328 |
|
329 | background-color:rgba(255,255,255,0);
|
330 | -webkit-border-radius:0;
|
331 | }
|
332 |
|
333 | input.form-control { height: auto;background: #d7e7f6; }
|
334 | input:focus { background:#fff; border: solid 1px #9cb9da; }
|
335 | textarea.form-control { height: auto;background: #d7e7f6; }
|
336 | textarea:focus { background:#fff; border: solid 1px #9cb9da; }
|
337 | select.form-control { height: auto;background: #d7e7f6; }
|
338 | select:focus { background:#fff; border: solid 1px #9cb9da; }
|
339 |
|
340 |
|
341 |
|
342 | .table-hover {background-color: #bdcde3;}
|
343 |
|
344 | .table-hover thead tr th {background-color: #93a8cc; padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none; text-align:center; color:white;}
|
345 |
|
346 | .table-hover > tbody > tr > td{ padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none;}
|
347 |
|
348 | .table-hover > tbody > tr:hover {
|
349 | background-color: #a8bad4;
|
350 | }
|
351 | .btn-group>.btn {
|
352 | margin-right: 20px;
|
353 | }
|
354 | .list-group {
|
355 | margin-bottom: 0px!important;
|
356 | }
|
357 | .datapanel {
|
358 | color: #333;
|
359 | background-color: white;
|
360 | box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
|
361 | padding: 10px 30px 10px 30px;
|
362 | border-radius:15px;
|
363 | }
|
364 | .txtline {
|
365 | border-left-width:5px;
|
366 | border-left-style:solid;
|
367 | border-left-color:#4a7cae;
|
368 | }
|
369 | .form-fix-width{
|
370 | display: -webkit-box;
|
371 | display: -webkit-flex;
|
372 | display: -ms-flexbox;
|
373 | display:flex;
|
374 | }
|
375 | .form-fix-width>:first-child{
|
376 | width: 100px;
|
377 | -webkit-box-flex:none;
|
378 | -webkit-flex:none;
|
379 | -ms-flexbox-flex:none;
|
380 | flex:none;
|
381 | }
|
382 | .form-fix-width>:last-child{
|
383 | flex:1;
|
384 | -webkit-box-flex:1;
|
385 | -webkit-flex:1;
|
386 | -ms-flexbox-flex:1;
|
387 | }
|
388 | </style>
|