Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0e9a5c1d by 杨威
Options

新增左侧树目录及部分样式修改

1 parent 1e902b9e
Inline Side-by-side
Showing 7 changed files with 978 additions and 284 deletions
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_files_collapse_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-100.000000, -217.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_files_collapse_" transform="translate(0.000000, 31.000000)">
11 <rect id="矩形-copy-18" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M5,10 L12,10 L12,11 L5,11 L5,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_file_default_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-127.000000, -246.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_file_default_" transform="translate(27.000000, 60.000000)">
11 <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_files_expand_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-100.000000, -187.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_files_expand_" transform="translate(0.000000, 1.000000)">
11 <rect id="矩形-copy-17" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M8,10 L8,7 L9,7 L9,10 L12,10 L12,11 L9,11 L9,14 L8,14 L8,11 L5,11 L5,10 L8,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
4 <title>icon_file_focus_</title>
5 <desc>Created with Sketch.</desc>
6 <g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <g id="1--报告工作站_书写报告" transform="translate(-127.000000, -276.000000)">
8 <g id="模板" transform="translate(80.000000, 51.000000)">
9 <g id="分组" transform="translate(20.000000, 135.000000)">
10 <g id="icon_file_focus_" transform="translate(27.000000, 90.000000)">
11 <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
12 <path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
13 </g>
14 </g>
15 </g>
16 </g>
17 </g>
18 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="tree_item_box">
3 <div
4 class="column-start-start linkLine_default"
5 v-for="(item,s_index) in list"
6 :key="s_index"
7 :class="{
8 'linkLine_first': s_index===0&list.length>1,
9 'linkLine_half_top': s_index===0&&list.length===1,
10 'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
11 'third_layer':!item.children,
12 'second_layer':item.children
13 }"
14 >
15 <div
16 class="row-flex-start basic_banner"
17 @click="itemClick(item)"
18 :class="{
19 'active_color': item.expand
20 }"
21 >
22 <div
23 v-if="item.children"
24 class="reTree_icon"
25 :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
26 :class="{
27 'reTree_default_icon': item.children.length===0,
28 'reTree_collapse_icon': item.expand && item.children.length>0,
29 'reTree_expand_icon': !item.expand && item.children.length>0,
30 }"
31 ></div>
32 <div
33 class="layer_text nowrap"
34 :class="{
35 'active_color': item.expand
36 }"
37 >{{item.label}}</div>
38 </div>
39 <line-item
40 :list="item.children"
41 v-on="$listeners"
42 :size="size"
43 v-if="item.expand&&item.children&&item.children.length>0"
44 ></line-item>
45 </div>
46 </div>
47 </template>
48 <script>
49 export default {
50 name: "line-item",
51 props: {
52 list: {
53 type: Array,
54 default: () => {
55 return [];
56 }
57 },
58 size: {
59 type: Number,
60 default: 14
61 }
62 },
63 methods: {
64 itemClick(item) {
65 item.expand = !item.expand;
66 this.$emit("itemClick", item);
67 if (!item.children) {
68 this.$emit("valClick", item);
69 }
70 }
71 }
72 };
73 </script>
74 <style lang='less'>
75 .content {
76 height: 100%;
77 width: 100%;
78 }
79 .column-start-center {
80 display: flex;
81 display: -webkit-flex;
82 flex-direction: column;
83 justify-content: flex-start;
84 align-items: center;
85 }
86 .row-flex-start {
87 display: flex;
88 display: -webkit-flex;
89 flex-direction: row;
90 justify-content: flex-start;
91 align-items: center;
92 }
93 .nowrap {
94 overflow: hidden;
95 text-overflow: ellipsis;
96 white-space: nowrap;
97 }
98 .active_color {
99 color: #ffffff;
100 }
101 .reTree_icon {
102 width: 17px;
103 height: 17px;
104 margin-right: 10px;
105 }
106 .no_icon {
107 width: 17px;
108 height: 17px;
109 }
110 .tree_item_box {
111 position: relative;
112 width: 100%;
113 cursor: pointer;
114 }
115 .basic_layer {
116 width: 100%;
117 position: relative;
118 color: #FFFFFF;
119 cursor: pointer;
120 .layer_text {
121 flex: 1;
122 }
123 }
124 .first_vertical_line {
125 content: "";
126 position: absolute;
127 width: 1px;
128 left: 6px;
129 top: 17px;
130 background: #c3c5c8;
131 }
132 .basic_banner {
133 position: relative;
134 width: 100%;
135 padding-bottom: 13px;
136 }
137 .second_layer {
138 position: relative;
139 width: 100%;
140 cursor: pointer;
141 padding-left: 25px;
142 }
143 .third_layer {
144 position: relative;
145 // padding-bottom: 15px;
146 width: 100%;
147 padding-left: 40px;
148 color: #FFFFFF;
149 }
150
151 .second_layer::before {
152 content: "";
153 position: absolute;
154 height: 1px;
155 width: 16px;
156 left: 9px;
157 top: 9px;
158 background: #c3c5c8;
159 }
160 .third_layer::before {
161 content: "";
162 position: absolute;
163 height: 1px;
164 width: 22px;
165 left: 9px;
166 top: 9px;
167 background: #c3c5c8;
168 }
169
170 .linkLine_default::after {
171 content: "";
172 position: absolute;
173 height: 100%;
174 width: 1px;
175 left: 9px;
176 top: 0px;
177 background: #c3c5c8;
178 }
179 .linkLine_first::after {
180 content: "";
181 position: absolute;
182 /* 为了触顶 */
183 top: -14px;
184 height: calc(100% + 14px);
185 width: 1px;
186 left: 9px;
187 background: #c3c5c8;
188 }
189 // 上半截
190 .linkLine_half_top::after {
191 content: "";
192 position: absolute;
193 height: 24px;
194 top: -14px;
195 width: 1px;
196 left: 9px;
197 background: #c3c5c8;
198 }
199 .linkLine_last::after {
200 content: "";
201 position: absolute;
202 height: 9px;
203 width: 1px;
204 left: 9px;
205 top: 0px;
206 background: #c3c5c8;
207 }
208 .reTree_collapse_icon {
209 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
210 background-size: contain;
211 }
212
213 .reTree_default_icon {
214 background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
215 background-size: contain;
216 }
217
218 .reTree_expand_icon {
219 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
220 background-size: contain;
221 }
222
223 .reTree_focus_icon {
224 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
225 background-size: contain;
226 }
227 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div
3 class="content column-start-center reTree_box"
4 :style="{fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}"
5 style="width:347px"
6 >
7 <div class="column-start-center basic_layer" v-for="(item,index) in formatData" :key="index">
8 <div
9 class="row-flex-start basic_banner"
10 :class="{
11 'active_color': item.expand && item.children.length>0,
12
13 }"
14 @click="itemClick(item)"
15 >
16 <div
17 class="reTree_icon"
18 :style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px'}"
19 :class="{
20 'reTree_default_icon': item.children.length===0,
21 'reTree_collapse_icon': item.expand && item.children.length>0,
22 'reTree_expand_icon': !item.expand && item.children.length>0,
23 }"
24 ></div>
25 <div class="layer_text nowrap">{{item.label}}</div>
26 </div>
27
28 <lineItem v-if="item.expand&&item.children.length>0" v-on="$listeners" :list="item.children" :size="size"></lineItem>
29 </div>
30 </div>
31 </template>
32 <script>
33 import lineItem from "./lineItem.vue";
34 export default {
35 inheritAttrs: false,
36 props: {
37 pd: {},
38 size: {
39 type: Number,
40 default: 14
41 }
42 },
43 components: { lineItem },
44 data() {
45 return {
46 selectedDetail: {},
47 timer: {},
48 formatData: []
49 };
50 },
51 watch: {
52 pd(n, o) {
53 this.formatData = this.preDealData(n);
54 console.log(this.formatData);
55 }
56 },
57 created() {
58 console.log("lineTree create");
59 this.preDealData(this.pd);
60 },
61
62 methods: {
63 preDealData(list) {
64 list.forEach(x => {
65 if (!x.expand) this.$set(x, "expand", false);
66 if (x.children && x.children.length > 0) this.preDealData(x.children);
67 });
68 return list;
69 },
70 // 根据id展开树的具体项
71 expandTreeItemById(idList) {
72 let _this = this;
73 function loopTree(list) {
74 list.forEach(x => {
75 if (idList.includes(x.id)) {
76 _this.$set(x, "expand", true);
77 } else {
78 _this.$set(x, "expand", false);
79 }
80 if (x.children && x.children.length > 0) loopTree(x.children);
81 });
82 return list;
83 }
84 this.formatData = loopTree(this.pd);
85 },
86 itemClick(item){
87 item.expand=!item.expand
88 this.$emit('itemClick',item)
89 },
90 // 详情点击
91 detailClick(data) {
92 clearTimeout(this.timer);
93 this.timer = setTimeout(() => {
94 this.selectedDetail = data;
95 this.$emit("detailClick", data);
96 }, 300);
97 },
98 detailDoubleClick(data) {
99 clearTimeout(this.timer);
100 this.selectedDetail = data;
101 this.$emit("detailDoubleClick", data);
102 }
103 }
104 };
105 </script>
106 <style lang="less" scoped>
107 .content {
108 height: 100%;
109 width: 100%;
110 }
111 .column-start-center {
112 display: flex;
113 display: -webkit-flex;
114 flex-direction: column;
115 justify-content: flex-start;
116 align-items: center;
117 }
118 .row-flex-start {
119 display: flex;
120 display: -webkit-flex;
121 flex-direction: row;
122 justify-content: flex-start;
123 align-items: center;
124 }
125 .nowrap {
126 overflow: hidden;
127 text-overflow: ellipsis;
128 white-space: nowrap;
129 }
130 .active_color{
131 color: #FFFFFF ;
132 }
133 .reTree_box {
134 // overflow-y: auto;
135 }
136 .reTree_icon {
137 width: 17px;
138 height: 17px;
139 margin-right: 10px;
140 }
141
142 .basic_layer {
143 width: 100%;
144 position: relative;
145 color: #FFFFFF;
146 cursor: pointer;
147 .layer_text {
148 flex: 1;
149 }
150 }
151 .first_vertical_line {
152 content: "";
153 position: absolute;
154 width: 1px;
155 left: 6px;
156 top: 17px;
157 background: #c3c5c8;
158 }
159 .basic_banner {
160 position: relative;
161 width: 100%;
162 padding-bottom: 13px;
163 }
164 .second_layer {
165 position: relative;
166 width: 100%;
167 cursor: pointer;
168 padding-left: 25px;
169 }
170 .third_layer {
171 position: relative;
172 padding-bottom: 15px;
173 width: 100%;
174 padding-left: 40px;
175 color: #ffffff;
176 }
177
178 .second_layer::before {
179 content: "";
180 position: absolute;
181 height: 1px;
182 width: 16px;
183 left: 9px;
184 top: 9px;
185 background: #c3c5c8;
186 }
187 .third_layer::before {
188 content: "";
189 position: absolute;
190 height: 1px;
191 width: 20px;
192 left: 9px;
193 top: 9px;
194 background: #c3c5c8;
195 }
196
197 .linkLine_default::after {
198 content: "";
199 position: absolute;
200 height: 100%;
201 width: 1px;
202 left: 9px;
203 top: 0px;
204 background: #c3c5c8;
205 }
206 .linkLine_first::after {
207 content: "";
208 position: absolute;
209 /* 为了触顶 */
210 top: -14px;
211 height: calc(100% + 14px);
212 width: 1px;
213 left: 9px;
214 background: #c3c5c8;
215 }
216 // 上半截
217 .linkLine_half_top::after {
218 content: "";
219 position: absolute;
220 height: 24px;
221 top: -14px;
222 width: 1px;
223 left: 9px;
224 background: #c3c5c8;
225 }
226 .linkLine_last::after {
227 content: "";
228 position: absolute;
229 height: 9px;
230 width: 1px;
231 left: 9px;
232 top: 0px;
233 background: #c3c5c8;
234 }
235 .reTree_collapse_icon {
236 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
237 background-size: contain;
238 }
239
240 .reTree_default_icon {
241 background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
242 background-size: contain;
243 }
244
245 .reTree_expand_icon {
246 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
247 background-size: contain;
248 }
249
250 .reTree_focus_icon {
251 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
252 background-size: contain;
253 }
254 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="home-box"> 2 <div class="home-box">
3 <el-container> 3 <el-container>
4 <el-aside :class="{'aside-show':isActive}"> 4 <el-aside :class="{ 'aside-show': isActive }">
5 <div class="logo-box" :class="{'logo-box-show':isActive}"> 5 <div class="logo-box" :class="{ 'logo-box-show': isActive }">
6 <img class="logo-img" src="@/assets/images/logo-realestate.png" alt=""> 6 <img
7 <span class="logo-text" v-show="!textLogo">不动产+互联网</span> 7 class="logo-img"
8 </div> 8 src="@/assets/images/logo-realestate.png"
9 <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isActive" background-color="#121958" text-color="#fff" active-text-color="#21FAFD" :collapse-transition="false" :router='true'> 9 alt=""
10 <template v-for="item in menuList"> 10 />
11 <el-submenu :index="item.code" :key="item.code" v-if="item.children&&item.children.length>0"> 11 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
12 <template slot="title"> 12 </div>
13 <i :class="item.icon" style="margin-right:10px;"></i> 13 <div class="treeModule">
14 <span slot="title">{{item.name}}</span> 14 <LineTree :pd="pd"></LineTree>
15 </template> 15 </div>
16 <template v-for="seconditem in item.children"> 16 <el-menu
17 <el-menu-item :index="seconditem.code" :key="seconditem.code" v-if="!seconditem.children" :route="{path: seconditem.path}"> 17 :default-active="defaultActive"
18 {{seconditem.name}} 18 :unique-opened="true"
19 </el-menu-item> 19 class="el-menu-vertical-demo"
20 </template> 20 @open="handleOpen"
21 <template v-for="seconditem in item.children"> 21 @close="handleClose"
22 <el-submenu :index="seconditem.code" :key="seconditem.code" v-if="seconditem.children"> 22 :collapse="isActive"
23 <span slot="title" style="padding-left:15px;">{{seconditem.name}}</span> 23 background-color="#121958"
24 <el-menu-item v-for="threeitem in seconditem.children" :index="threeitem.code" :key="threeitem.code" :route="{path: threeitem.path}">{{threeitem.name}}</el-menu-item> 24 text-color="#fff"
25 </el-submenu> 25 active-text-color="#21FAFD"
26 </template> 26 :collapse-transition="false"
27 </el-submenu> 27 :router="true"
28 <el-menu-item :index="item.code" :key="item.code" v-else :route="{path: item.path}"> 28 >
29 <i :class="item.icon" style="margin-right:10px;"></i> 29 <template v-for="item in menuList">
30 <span slot="title">{{item.name}}</span> 30 <el-submenu
31 </el-menu-item> 31 :index="item.code"
32 </template> 32 :key="item.code"
33 </el-menu> 33 v-if="item.children && item.children.length > 0"
34 </el-aside> 34 >
35 <el-container> 35 <template slot="title">
36 <el-header height="120px"> 36 <i :class="item.icon" style="margin-right:10px;"></i>
37 <div class="header-top"> 37 <span slot="title">{{ item.name }}</span>
38 <div class="top-items" @click="toggleClick"> 38 </template>
39 <i class="fa fa-outdent hamburger" v-show="!isActive"></i> 39 <template v-for="seconditem in item.children">
40 <i class="fa fa-indent hamburger" v-show="isActive"></i> 40 <el-menu-item
41 </div> 41 :index="seconditem.code"
42 <div class="top-items" v-for="(item,index) in headTop" :key="index+'1'" :class="{'is-active':item.select}" @click="selectTopItems(index)"> 42 :key="seconditem.code"
43 <i :class="item.icon"></i> 43 v-if="!seconditem.children"
44 <span>{{item.name}}</span> 44 :route="{ path: seconditem.path }"
45 </div> 45 >
46 </div> 46 {{ seconditem.name }}
47 <div class="header-bottom"> 47 </el-menu-item>
48 <Navigation ref="navigation"></Navigation> 48 </template>
49 </div> 49 <template v-for="seconditem in item.children">
50 </el-header> 50 <el-submenu
51 <el-main> 51 :index="seconditem.code"
52 <router-view /> 52 :key="seconditem.code"
53 </el-main> 53 v-if="seconditem.children"
54 </el-container> 54 >
55 </el-container> 55 <span slot="title" style="padding-left:15px;">{{
56 </div> 56 seconditem.name
57 }}</span>
58 <el-menu-item
59 v-for="threeitem in seconditem.children"
60 :index="threeitem.code"
61 :key="threeitem.code"
62 :route="{ path: threeitem.path }"
63 >{{ threeitem.name }}</el-menu-item
64 >
65 </el-submenu>
66 </template>
67 </el-submenu>
68 <el-menu-item
69 :index="item.code"
70 :key="item.code"
71 v-else
72 :route="{ path: item.path }"
73 >
74 <i :class="item.icon" style="margin-right:10px;"></i>
75 <span slot="title">{{ item.name }}</span>
76 </el-menu-item>
77 </template>
78 </el-menu>
79 </el-aside>
80 <el-container>
81 <el-header height="120px">
82 <div class="header-top">
83 <div class="top-items" @click="toggleClick">
84 <i class="fa fa-outdent hamburger" v-show="!isActive"></i>
85 <i class="fa fa-indent hamburger" v-show="isActive"></i>
86 </div>
87 <div
88 class="top-items"
89 v-for="(item, index) in headTop"
90 :key="index + '1'"
91 :class="{ 'is-active': item.select }"
92 @click="selectTopItems(index)"
93 >
94 <i :class="item.icon"></i>
95 <span>{{ item.name }}</span>
96 </div>
97 </div>
98 <div class="header-bottom">
99 <Navigation ref="navigation"></Navigation>
100 </div>
101 </el-header>
102 <el-main>
103 <router-view />
104 </el-main>
105 </el-container>
106 </el-container>
107 </div>
57 </template> 108 </template>
58 <script> 109 <script>
59 import util from '@/libs/util.js' 110 import util from "@/libs/util.js";
60 import screenfull from "screenfull" 111 import screenfull from "screenfull";
61 import Navigation from "../components/IvyElement/navigation" 112 import Navigation from "../components/IvyElement/navigation";
62 import { setTimeout } from 'timers' 113 import LineTree from "../components/lineTree/lineTree";
63 export default { 114 import { setTimeout } from "timers";
64 components: { 115 export default {
65 Navigation 116 components: {
66 }, 117 Navigation,
67 data() { 118 LineTree,
68 return { 119 },
69 navigationList: [], 120 data() {
70 isActive: false, 121 return {
71 textLogo: false, 122 navigationList: [],
72 activePath: '', 123 isActive: false,
73 defaultActive: '', 124 textLogo: false,
74 headTop:[{ 125 activePath: "",
75 select:true, 126 defaultActive: "",
76 },{ 127 headTop: [
77 select:false, 128 {
78 },{ 129 select: true,
79 select:false, 130 },
80 },{ 131 {
81 select:false, 132 select: false,
82 },{ 133 },
83 select:false, 134 {
84 } 135 select: false,
85 ], 136 },
86 // 上导航选中id 137 {
87 indId: undefined, 138 select: false,
88 menuList:[], 139 },
89 pathAndCodeObj:{ 140 {
90 '/article-draft' : "PSH004", 141 select: false,
91 '/article-publish': "PSH005", 142 },
92 "/article-recycle":"PSH006", 143 ],
93 "/notice-draft":"PSH007", 144 // 上导航选中id
94 "/notice-publish":'PSH008', 145 indId: undefined,
95 "/notice-recycle":"PSH009", 146 menuList: [],
96 "/column_management":"PSH018", 147 pathAndCodeObj: {
97 "/announcement_template":"PSH019", 148 "/article-draft": "PSH004",
98 "/business_management":"PSH020" 149 "/article-publish": "PSH005",
99 } 150 "/article-recycle": "PSH006",
100 }; 151 "/notice-draft": "PSH007",
101 }, 152 "/notice-publish": "PSH008",
102 computed: { 153 "/notice-recycle": "PSH009",
103 permission_routes() { 154 "/column_management": "PSH018",
104 return this.$store.state.permission_routes.navigation 155 "/announcement_template": "PSH019",
105 } 156 "/business_management": "PSH020",
106 }, 157 },
107 watch:{ 158 pd: [
108 '$route.path':function(newPath){ 159 {
109 this.defaultActive = this.pathAndCodeObj[newPath] 160 label: "第一层(1)",
110 } 161 children: [],
111 }, 162 },
112 created() { 163 {
113 if ( this.$route.meta ) { 164 label: "第一层(2)",
114 this.defaultActive = this.$route.meta.code 165 children: [
115 } 166 {
116 if( this.permission_routes.length!==0 ){ 167 label: "第二层(1)",
117 this.navigationList = this.permission_routes 168 children: [],
118 } else { 169 },
119 let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation'))) 170 {
120 this.navigationList = list 171 label: "第二层(2)",
121 } 172 children: [
122 this.sortNavigation(this.navigationList,0) 173 {
123 if (util.cookies.get('indId')) { 174 label: "第三层(1)",
124 let indId = util.cookies.get('indId')-0 175 children: [
125 this.navSelect(indId) 176 {
126 this.sortNavigation(this.navigationList,indId) 177 label: "第四层",
127 } 178 children: [
128 }, 179 {
129 methods: { 180 label: "第五层",
130 sortNavigation( data,selectId) { 181 children: [{ label: "第六层", }],
131 let headTop = this.headTop 182 },
132 data.forEach((item, index) => { 183 ],
133 headTop[index].name = item.name 184 },
134 headTop[index].icon = item.icon 185 ],
135 }) 186 },
136 this.menuSelect(data,selectId) 187 {
137 }, 188 label: "第三层(2)",
138 menuSelect(data,selectId) { 189 },
139 this.menuList = data[selectId].children 190 {
140 }, 191 label: "第三层(3)",
141 handleOpen(key, keyPath) { 192 },
142 console.log(key, keyPath); 193 ],
143 }, 194 },
144 handleClose(key, keyPath) { 195 {
145 console.log(key, keyPath); 196 label: "第二层(3)",
146 }, 197 children: [],
147 toggleClick(){ 198 },
148 this.isActive=!this.isActive; 199 {
149 if(!this.isActive){ 200 label: "第二层(4)",
150 setTimeout(()=>{ 201 children: [],
151 this.textLogo=this.isActive; 202 },
152 },200) 203 ],
153 }else{ 204 },
154 this.textLogo=this.isActive; 205 {
155 } 206 label: "第一层(3)",
156 }, 207 children: [],
157 selectTopItems(ind){ 208 },
158 this.indId = ind 209 {
159 this.menuSelect(this.navigationList,ind) 210 label: "第一层(4)",
160 this.$store.dispatch("setTabs/init_tabs") 211 children: [],
161 this.$store.dispatch("setTabs/set_active_index", "/panel") 212 },
162 this.$router.push("/panel") 213 {
163 this.navSelect(ind) 214 label: "第一层(5)",
164 util.cookies.set('indId',ind) 215 children: [],
165 }, 216 },
166 // 上导航选中id 217 ],
167 navSelect (id) { 218 };
168 this.headTop.forEach((item,index)=>{ 219 },
169 item.select=false 220 computed: {
170 if(index==id){ 221 permission_routes() {
171 item.select=true 222 return this.$store.state.permission_routes.navigation;
172 } 223 },
173 }) 224 },
174 }, 225 watch: {
175 screen() { 226 "$route.path": function(newPath) {
176 // 如果不允许进入全屏，发出不允许提示 227 this.defaultActive = this.pathAndCodeObj[newPath];
177 // if (!screenfull.enabled) { 228 },
178 // this.$message('您的浏览器不能全屏'); 229 },
179 // return false 230 created() {
180 // } 231 if (this.$route.meta) {
181 screenfull.toggle(); 232 this.defaultActive = this.$route.meta.code;
182 } 233 }
183 } 234 if (this.permission_routes.length !== 0) {
184 }; 235 this.navigationList = this.permission_routes;
236 } else {
237 // let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
238 //mock数据
239 let list = [
240 {
241 name: "新建",
242 icon: "fa fa-address-card-o",
243 path: "/officialAccount_panel",
244 },
245 { name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" },
246 {
247 name: "变更",
248 icon: "fa fa-address-card-o",
249 path: "/appointment_panel",
250 },
251 {
252 name: "综合查询",
253 icon: "fa fa-address-card-o",
254 path: "/system_panel",
255 },
256 ];
257 this.navigationList = list;
258 }
259 this.sortNavigation(this.navigationList, 0);
260 if (util.cookies.get("indId")) {
261 let indId = util.cookies.get("indId") - 0;
262 this.navSelect(indId);
263 this.sortNavigation(this.navigationList, indId);
264 }
265 },
266 methods: {
267 sortNavigation(data, selectId) {
268 let headTop = this.headTop;
269 data.forEach((item, index) => {
270 headTop[index].name = item.name;
271 headTop[index].icon = item.icon;
272 });
273 this.menuSelect(data, selectId);
274 },
275 menuSelect(data, selectId) {
276 this.menuList = data[selectId].children;
277 },
278 handleOpen(key, keyPath) {
279 console.log(key, keyPath);
280 },
281 handleClose(key, keyPath) {
282 console.log(key, keyPath);
283 },
284 toggleClick() {
285 this.isActive = !this.isActive;
286 if (!this.isActive) {
287 setTimeout(() => {
288 this.textLogo = this.isActive;
289 }, 200);
290 } else {
291 this.textLogo = this.isActive;
292 }
293 },
294 selectTopItems(ind) {
295 this.indId = ind;
296 this.menuSelect(this.navigationList, ind);
297 this.$store.dispatch("setTabs/init_tabs");
298 this.$store.dispatch("setTabs/set_active_index", "/panel");
299 this.$router.push("/panel");
300 this.navSelect(ind);
301 util.cookies.set("indId", ind);
302 },
303 // 上导航选中id
304 navSelect(id) {
305 this.headTop.forEach((item, index) => {
306 item.select = false;
307 if (index == id) {
308 item.select = true;
309 }
310 });
311 },
312 screen() {
313 // 如果不允许进入全屏，发出不允许提示
314 // if (!screenfull.enabled) {
315 // this.$message('您的浏览器不能全屏');
316 // return false
317 // }
318 screenfull.toggle();
319 },
320 },
321 };
185 </script> 322 </script>
186 <style lang="less" scoped> 323 <style lang="less" scoped>
187 .home-box {
188 width: 100%;
189 height: 100vh;
190 .el-container {
191 height: 100%;
192 }
193 .el-header{
194 background-color: #fff;
195 padding: 0 !important;
196 .header-top{
197 height: 60px;
198 border-bottom:1px solid rgba(242,242,242,1);
199 box-sizing: border-box;
200 .top-items{
201 cursor: pointer;
202 height: 60px;
203 padding: 0 30px;
204 font-size: 16px;
205 line-height: 60px;
206 float: left;
207 position: relative;
208 color: #4A4A4A;
209 i{
210 margin-right: 6px;
211 }
212 .hamburger{
213 font-size: 16px;
214 line-height: 60px;
215 color: #000;
216 }
217 }
218 .top-items:not(:last-child)::after{
219 content: "";
220 width:1px;
221 height: 14px;
222 background: #EAEAEA;
223 position: absolute;
224 right: -1px;
225 top: 24px;
226 }
227 .top-items.is-active {
228 color: #00CACD;
229 }
230 }
231 .header-bottom{
232 height: 50px;
233 box-shadow:0px 2px 4px 0px rgba(222,222,222,0.7);
234 border-bottom:1px solid rgba(234,234,234,1);
235 box-sizing: border-box;
236 }
237 }
238 .el-aside {
239 width: 200px !important;
240 background-color: #121958;
241 color: #333;
242 // text-align: center;
243 overflow: hidden;
244 transition:width 0.3s;
245 .logo-box{
246 width: 200px;
247 height: 120px;
248 border-bottom:1px solid rgba(255, 255, 255, 0.2);
249 padding: 30px 0 28px 0;
250 box-sizing: border-box;
251 display: flex;
252 flex-direction: column;
253 justify-content: space-between;
254 align-items: center;
255 transition:width 0.3s;
256 .logo-img{
257 width: 38px;
258 height: 38px;;
259 }
260 .logo-text{
261 font-size:14px;
262 color:rgba(255,255,255,1);
263 line-height: 14px;
264 }
265 }
266 .logo-box-show{
267 width: 64px;
268 }
269 .el-menu{
270 border-right:0;
271 }
272 .el-submenu .el-menu-item{
273 text-align: left;
274 text-indent: 15px;
275 }
276 }
277 .aside-show{
278 width: 64px !important;
279 }
280
281 .el-main {
282 background-color: #ffffff;
283 color: #333;
284 // text-align: center;
285 // line-height: 160px;
286 padding: 0;
287 }
288 }
289 </style>
...\ No newline at end of file ...\ No newline at end of file
324 .home-box {
325 width: 100%;
326 height: 100vh;
327 .el-container {
328 height: 100%;
329 }
330 .el-header {
331 background-color: #fff;
332 padding: 0 !important;
333 .header-top {
334 height: 60px;
335 border-bottom: 1px solid rgba(242, 242, 242, 1);
336 box-sizing: border-box;
337 .top-items {
338 cursor: pointer;
339 height: 60px;
340 padding: 0 30px;
341 font-size: 16px;
342 line-height: 60px;
343 float: left;
344 position: relative;
345 color: #4a4a4a;
346 i {
347 margin-right: 6px;
348 }
349 .hamburger {
350 font-size: 16px;
351 line-height: 60px;
352 color: #000;
353 }
354 }
355 .top-items:not(:last-child)::after {
356 content: "";
357 width: 1px;
358 height: 14px;
359 background: #eaeaea;
360 position: absolute;
361 right: -1px;
362 top: 24px;
363 }
364 .top-items.is-active {
365 color: #006cff;
366 }
367 }
368 .header-bottom {
369 height: 50px;
370 box-shadow: 0px 2px 4px 0px rgba(222, 222, 222, 0.7);
371 border-bottom: 1px solid rgba(234, 234, 234, 1);
372 box-sizing: border-box;
373 }
374 }
375 .el-aside {
376 width: 290px !important;
377 background-color: #1d50dd;
378 color: #333;
379 // text-align: center;
380 overflow: hidden;
381 transition: width 0.3s;
382 .logo-box {
383 width: 100%;
384 height: 120px;
385 border-bottom: 1px solid rgba(255, 255, 255, 0.2);
386 padding: 30px 0 28px 0;
387 box-sizing: border-box;
388 display: flex;
389 flex-direction: column;
390 justify-content: space-between;
391 align-items: center;
392 transition: width 0.3s;
393 .logo-img {
394 width: 38px;
395 height: 38px;
396 }
397 .logo-text {
398 font-size: 14px;
399 color: rgba(255, 255, 255, 1);
400 line-height: 14px;
401 }
402 }
403 .treeModule {
404 box-sizing: border-box;
405 padding: 20px 10px;
406 }
407 .logo-box-show {
408 width: 64px;
409 }
410 .el-menu {
411 border-right: 0;
412 }
413 .el-submenu .el-menu-item {
414 text-align: left;
415 text-indent: 15px;
416 }
417 }
418 .aside-show {
419 width: 64px !important;
420 }
421
422 .el-main {
423 background-color: #ffffff;
424 color: #333;
425 // text-align: center;
426 // line-height: 160px;
427 padding: 0;
428 }
429 }
430 </style>
......