Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
05c5cd69 by 杨威
Options

目录树自定义右键菜单

1 parent b325d556
Inline Side-by-side
Showing 3 changed files with 171 additions and 64 deletions
...@@ -2,45 +2,51 @@ ...@@ -2,45 +2,51 @@
2 <div class="tree_item_box"> 2 <div class="tree_item_box">
3 <div 3 <div
4 class="column-start-start linkLine_default" 4 class="column-start-start linkLine_default"
5 v-for="(item,s_index) in list" 5 v-for="(item, s_index) in list"
6 :key="s_index" 6 :key="s_index"
7 :class="{ 7 :class="{
8 'linkLine_first': s_index===0&list.length>1, 8 linkLine_first: (s_index === 0) & (list.length > 1),
9 'linkLine_half_top': 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), 10 linkLine_last: s_index === list.length - 1 && s_index !== 0,
11 'third_layer':!item.children, 11 third_layer: !item.children,
12 'second_layer':item.children 12 second_layer: item.children,
13 }" 13 }"
14 > 14 >
15 <div 15 <div
16 class="row-flex-start basic_banner" 16 class="row-flex-start basic_banner"
17 @click="itemClick(item)" 17 @click="itemClick(item)"
18 :class="{ 18 :class="{
19 'active_color': item.expand 19 active_color: item.expand,
20 }" 20 }"
21 > 21 >
22 <div 22 <div
23 v-if="item.children" 23 v-if="item.children"
24 class="reTree_icon" 24 class="reTree_icon"
25 :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}" 25 :style="{
26 height: (size || 14 * 1.2) + 'px',
27 width: (size || 14 * 1.2) + 'px',
28 }"
26 :class="{ 29 :class="{
27 'reTree_default_icon': item.children.length===0, 30 reTree_default_icon: item.children.length === 0,
28 'reTree_collapse_icon': item.expand && item.children.length>0, 31 reTree_collapse_icon: item.expand && item.children.length > 0,
29 'reTree_expand_icon': !item.expand && item.children.length>0, 32 reTree_expand_icon: !item.expand && item.children.length > 0,
30 }" 33 }"
31 ></div> 34 ></div>
32 <div 35 <div
33 class="layer_text nowrap" 36 class="layer_text nowrap"
37 @contextmenu.prevent="openMenu($event, item)"
34 :class="{ 38 :class="{
35 'active_color': item.expand 39 active_color: item.expand,
36 }" 40 }"
37 >{{item.label}}</div> 41 >
42 {{ item.label }}
43 </div>
38 </div> 44 </div>
39 <line-item 45 <line-item
40 :list="item.children" 46 :list="item.children"
41 v-on="$listeners" 47 v-on="$listeners"
42 :size="size" 48 :size="size"
43 v-if="item.expand&&item.children&&item.children.length>0" 49 v-if="item.expand && item.children && item.children.length > 0"
44 ></line-item> 50 ></line-item>
45 </div> 51 </div>
46 </div> 52 </div>
...@@ -53,12 +59,16 @@ export default { ...@@ -53,12 +59,16 @@ export default {
53 type: Array, 59 type: Array,
54 default: () => { 60 default: () => {
55 return []; 61 return [];
56 } 62 },
57 }, 63 },
58 size: { 64 size: {
59 type: Number, 65 type: Number,
60 default: 14 66 default: 14,
61 } 67 },
68 visible: {
69 type: Boolean,
70 default: false,
71 },
62 }, 72 },
63 methods: { 73 methods: {
64 itemClick(item) { 74 itemClick(item) {
...@@ -67,11 +77,37 @@ export default { ...@@ -67,11 +77,37 @@ export default {
67 if (!item.children) { 77 if (!item.children) {
68 this.$emit("valClick", item); 78 this.$emit("valClick", item);
69 } 79 }
80 },
81 openMenu(e, item) {
82 if (item.isZD!=undefined) {
83 var x = e.pageX;
84 var y = e.pageY;
85 this.$emit("changeIsZD", item.isZD);
86 this.$emit("changeTop", y);
87 this.$emit("changeLeft", x);
88 this.$emit("changeVisible", true);
70 } 89 }
90 // this.top = y;
91 // this.left = x;
92 // this.visible = true;
93 },
94 closeMenu() {
95 this.$emit("changeVisible", false);
96 // this.visible = false;
97 },
98 },
99 watch: {
100 visible(value) {
101 if (value) {
102 document.body.addEventListener("click", this.closeMenu);
103 } else {
104 document.body.removeEventListener("click", this.closeMenu);
71 } 105 }
106 },
107 },
72 }; 108 };
73 </script> 109 </script>
74 <style lang='less'> 110 <style lang="less">
75 .content { 111 .content {
76 height: 100%; 112 height: 100%;
77 width: 100%; 113 width: 100%;
...@@ -115,7 +151,7 @@ export default { ...@@ -115,7 +151,7 @@ export default {
115 .basic_layer { 151 .basic_layer {
116 width: 100%; 152 width: 100%;
117 position: relative; 153 position: relative;
118 color: #FFFFFF; 154 color: #ffffff;
119 cursor: pointer; 155 cursor: pointer;
120 .layer_text { 156 .layer_text {
121 flex: 1; 157 flex: 1;
...@@ -145,7 +181,7 @@ export default { ...@@ -145,7 +181,7 @@ export default {
145 // padding-bottom: 15px; 181 // padding-bottom: 15px;
146 width: 100%; 182 width: 100%;
147 padding-left: 40px; 183 padding-left: 40px;
148 color: #FFFFFF; 184 color: #ffffff;
149 } 185 }
150 186
151 .second_layer::before { 187 .second_layer::before {
...@@ -206,22 +242,26 @@ export default { ...@@ -206,22 +242,26 @@ export default {
206 background: #c3c5c8; 242 background: #c3c5c8;
207 } 243 }
208 .reTree_collapse_icon { 244 .reTree_collapse_icon {
209 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center; 245 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
246 center;
210 background-size: contain; 247 background-size: contain;
211 } 248 }
212 249
213 .reTree_default_icon { 250 .reTree_default_icon {
214 background: url("../../assets/images/reTree_default_.svg") no-repeat center center; 251 background: url("../../assets/images/reTree_default_.svg") no-repeat center
252 center;
215 background-size: contain; 253 background-size: contain;
216 } 254 }
217 255
218 .reTree_expand_icon { 256 .reTree_expand_icon {
219 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center; 257 background: url("../../assets/images/reTree_expand_.svg") no-repeat center
258 center;
220 background-size: contain; 259 background-size: contain;
221 } 260 }
222 261
223 .reTree_focus_icon { 262 .reTree_focus_icon {
224 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center; 263 background: url("../../assets/images/reTree_focus_.svg") no-repeat center
264 center;
225 background-size: contain; 265 background-size: contain;
226 } 266 }
227 </style> 267 </style>
......
1 <template> 1 <template>
2 <div 2 <div
3 class="content column-start-center reTree_box" 3 class="content column-start-center reTree_box"
4 :style="{fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}" 4 :style="{ fontSize: (size || 14) + 'px', lineHeight: (size || 14) + 'px' }"
5 style="width:347px" 5 style="width:347px"
6 > 6 >
7 <div class="column-start-center basic_layer" v-for="(item,index) in formatData" :key="index"> 7 <div
8 class="column-start-center basic_layer"
9 v-for="(item, index) in formatData"
10 :key="index"
11 >
8 <div 12 <div
9 class="row-flex-start basic_banner" 13 class="row-flex-start basic_banner"
10 :class="{ 14 :class="{
11 'active_color': item.expand && item.children.length>0, 15 active_color: item.expand && item.children.length > 0,
12
13 }" 16 }"
14 @click="itemClick(item)" 17 @click="itemClick(item)"
15 > 18 >
16 <div 19 <div
17 class="reTree_icon" 20 class="reTree_icon"
18 :style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px'}" 21 :style="{
22 height: (size || 14 * 1.2) + 'px',
23 width: (size || 14 * 1.2) + 'px',
24 }"
19 :class="{ 25 :class="{
20 'reTree_default_icon': item.children.length===0, 26 reTree_default_icon: item.children.length === 0,
21 'reTree_collapse_icon': item.expand && item.children.length>0, 27 reTree_collapse_icon: item.expand && item.children.length > 0,
22 'reTree_expand_icon': !item.expand && item.children.length>0, 28 reTree_expand_icon: !item.expand && item.children.length > 0,
23 }" 29 }"
24 ></div> 30 ></div>
25 <div class="layer_text nowrap">{{item.label}}</div> 31 <div class="layer_text nowrap">{{ item.label }}</div>
26 </div> 32 </div>
27 33
28 <lineItem v-if="item.expand&&item.children.length>0" v-on="$listeners" :list="item.children" :size="size"></lineItem> 34 <lineItem
35 v-if="item.expand && item.children.length > 0"
36 v-on="$listeners"
37 @changeTop="changeTop"
38 @changeLeft="changeLeft"
39 @changeVisible="changeVisible"
40 @changeIsZD="changeIsZD"
41 :list="item.children"
42 :visible="visible"
43 :size="size"
44 ></lineItem>
29 </div> 45 </div>
46
47 <ul
48 v-show="visible"
49 :style="{ left: left + 'px', top: top + 'px' }"
50 class="contextmenu"
51 >
52 <li>定位</li>
53 <li>导入图形</li>
54 <li>导出图形</li>
55 <li v-show="isZD">导入属性</li>
56 <li v-show="!isZD">导入楼盘</li>
57 <li>重叠分析</li>
58 <li v-show="isZD">添加定着物</li>
59 </ul>
30 </div> 60 </div>
31 </template> 61 </template>
32 <script> 62 <script>
...@@ -37,22 +67,26 @@ export default { ...@@ -37,22 +67,26 @@ export default {
37 pd: {}, 67 pd: {},
38 size: { 68 size: {
39 type: Number, 69 type: Number,
40 default: 14 70 default: 14,
41 } 71 },
42 }, 72 },
43 components: { lineItem }, 73 components: { lineItem },
44 data() { 74 data() {
45 return { 75 return {
46 selectedDetail: {}, 76 selectedDetail: {},
47 timer: {}, 77 timer: {},
48 formatData: [] 78 formatData: [],
79 visible: false,
80 top: 0,
81 left: 0,
82 isZD:true
49 }; 83 };
50 }, 84 },
51 watch: { 85 watch: {
52 pd(n, o) { 86 pd(n, o) {
53 this.formatData = this.preDealData(n); 87 this.formatData = this.preDealData(n);
54 console.log(this.formatData); 88 console.log(this.formatData);
55 } 89 },
56 }, 90 },
57 created() { 91 created() {
58 console.log("lineTree create"); 92 console.log("lineTree create");
...@@ -60,8 +94,21 @@ export default { ...@@ -60,8 +94,21 @@ export default {
60 }, 94 },
61 95
62 methods: { 96 methods: {
97 // 改变菜单数据
98 changeVisible(data) {
99 this.visible = data;
100 },
101 changeTop(data) {
102 this.top = data;
103 },
104 changeLeft(data) {
105 this.left = data;
106 },
107 changeIsZD(data) {
108 this.isZD = data;
109 },
63 preDealData(list) { 110 preDealData(list) {
64 list.forEach(x => { 111 list.forEach((x) => {
65 if (!x.expand) this.$set(x, "expand", false); 112 if (!x.expand) this.$set(x, "expand", false);
66 if (x.children && x.children.length > 0) this.preDealData(x.children); 113 if (x.children && x.children.length > 0) this.preDealData(x.children);
67 }); 114 });
...@@ -71,7 +118,7 @@ export default { ...@@ -71,7 +118,7 @@ export default {
71 expandTreeItemById(idList) { 118 expandTreeItemById(idList) {
72 let _this = this; 119 let _this = this;
73 function loopTree(list) { 120 function loopTree(list) {
74 list.forEach(x => { 121 list.forEach((x) => {
75 if (idList.includes(x.id)) { 122 if (idList.includes(x.id)) {
76 _this.$set(x, "expand", true); 123 _this.$set(x, "expand", true);
77 } else { 124 } else {
...@@ -83,9 +130,9 @@ export default { ...@@ -83,9 +130,9 @@ export default {
83 } 130 }
84 this.formatData = loopTree(this.pd); 131 this.formatData = loopTree(this.pd);
85 }, 132 },
86 itemClick(item){ 133 itemClick(item) {
87 item.expand=!item.expand 134 item.expand = !item.expand;
88 this.$emit('itemClick',item) 135 this.$emit("itemClick", item);
89 }, 136 },
90 // 详情点击 137 // 详情点击
91 detailClick(data) { 138 detailClick(data) {
...@@ -99,11 +146,36 @@ export default { ...@@ -99,11 +146,36 @@ export default {
99 clearTimeout(this.timer); 146 clearTimeout(this.timer);
100 this.selectedDetail = data; 147 this.selectedDetail = data;
101 this.$emit("detailDoubleClick", data); 148 this.$emit("detailDoubleClick", data);
102 } 149 },
103 } 150 },
104 }; 151 };
105 </script> 152 </script>
106 <style lang="less" scoped> 153 <style lang="less" scoped>
154 // 自定义右键菜单样式 start
155 .contextmenu {
156 margin: 0;
157 background: #fff;
158 z-index: 3000;
159 position: absolute;
160 list-style-type: none;
161 padding: 5px 0;
162 border-radius: 4px;
163 font-size: 12px;
164 font-weight: 400;
165 color: #333;
166 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
167 }
168
169 .contextmenu li {
170 margin: 0;
171 padding: 7px 16px;
172 cursor: pointer;
173 }
174
175 .contextmenu li:hover {
176 background: #eee;
177 }
178 // end
107 .content { 179 .content {
108 height: 100%; 180 height: 100%;
109 width: 100%; 181 width: 100%;
...@@ -127,8 +199,8 @@ export default { ...@@ -127,8 +199,8 @@ export default {
127 text-overflow: ellipsis; 199 text-overflow: ellipsis;
128 white-space: nowrap; 200 white-space: nowrap;
129 } 201 }
130 .active_color{ 202 .active_color {
131 color: #FFFFFF ; 203 color: #ffffff;
132 } 204 }
133 .reTree_box { 205 .reTree_box {
134 // overflow-y: auto; 206 // overflow-y: auto;
...@@ -142,7 +214,7 @@ export default { ...@@ -142,7 +214,7 @@ export default {
142 .basic_layer { 214 .basic_layer {
143 width: 100%; 215 width: 100%;
144 position: relative; 216 position: relative;
145 color: #FFFFFF; 217 color: #ffffff;
146 cursor: pointer; 218 cursor: pointer;
147 .layer_text { 219 .layer_text {
148 flex: 1; 220 flex: 1;
...@@ -233,22 +305,26 @@ export default { ...@@ -233,22 +305,26 @@ export default {
233 background: #c3c5c8; 305 background: #c3c5c8;
234 } 306 }
235 .reTree_collapse_icon { 307 .reTree_collapse_icon {
236 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center; 308 background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
309 center;
237 background-size: contain; 310 background-size: contain;
238 } 311 }
239 312
240 .reTree_default_icon { 313 .reTree_default_icon {
241 background: url("../../assets/images/reTree_default_.svg") no-repeat center center; 314 background: url("../../assets/images/reTree_default_.svg") no-repeat center
315 center;
242 background-size: contain; 316 background-size: contain;
243 } 317 }
244 318
245 .reTree_expand_icon { 319 .reTree_expand_icon {
246 background: url("../../assets/images/reTree_expand_.svg") no-repeat center center; 320 background: url("../../assets/images/reTree_expand_.svg") no-repeat center
321 center;
247 background-size: contain; 322 background-size: contain;
248 } 323 }
249 324
250 .reTree_focus_icon { 325 .reTree_focus_icon {
251 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center; 326 background: url("../../assets/images/reTree_focus_.svg") no-repeat center
327 center;
252 background-size: contain; 328 background-size: contain;
253 } 329 }
254 </style> 330 </style>
......
...@@ -144,20 +144,11 @@ export default { ...@@ -144,20 +144,11 @@ export default {
144 children: [ 144 children: [
145 { 145 {
146 label: "宗地代码1933", 146 label: "宗地代码1933",
147 children: [ 147 isZD:true
148 {
149 id:'011',
150 label: "自然幢号1256",
151 },
152 ],
153 }, 148 },
154 { 149 {
155 label: "宗地代码2100", 150 label: "自然幢2100",
156 children: [ 151 isZD:false
157 {
158 label: "自然幢号1543",
159 },
160 ],
161 }, 152 },
162 ], 153 ],
163 } 154 }
......