Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
685b613d by 杨威
Options

楼盘表户右键菜单

1 parent 232e4aa9
Inline Side-by-side
Showing 4 changed files with 66 additions and 36 deletions
...@@ -121,4 +121,28 @@ ol, ul { list-style:none; } ...@@ -121,4 +121,28 @@ ol, ul { list-style:none; }
121 } 121 }
122 .el-tabs__content{ 122 .el-tabs__content{
123 position: unset; 123 position: unset;
124 }
...\ No newline at end of file ...\ No newline at end of file
124 }
125 // 自定义右键菜单样式
126 .contextmenu {
127 margin: 0;
128 background: #fff;
129 z-index: 3000;
130 position: absolute;
131 list-style-type: none;
132 padding: 5px 0;
133 border-radius: 4px;
134 font-size: 12px;
135 font-weight: 400;
136 color: #333;
137 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
138 }
139 .contextmenu li {
140 margin: 0;
141 padding: 7px 16px;
142 cursor: pointer;
143 }
144
145 .contextmenu li:hover {
146 background: #eee;
147 }
148 // end
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="main">
3 <el-dialog 2 <el-dialog
4 title="户重新落宗" 3 title="户重新落宗"
5 :visible.sync="isVisible" 4 :visible.sync="isVisible"
...@@ -68,7 +67,6 @@ ...@@ -68,7 +67,6 @@
68 <query-data :centerDialogVisible="xzzdVisible" @close="xzzdClose" @getData="getZdxx" 67 <query-data :centerDialogVisible="xzzdVisible" @close="xzzdClose" @getData="getZdxx"
69 :isZdClose="true"></query-data> 68 :isZdClose="true"></query-data>
70 </el-dialog> 69 </el-dialog>
71 </div>
72 </template> 70 </template>
73 71
74 <script> 72 <script>
......
...@@ -260,31 +260,7 @@ export default { ...@@ -260,31 +260,7 @@ export default {
260 }; 260 };
261 </script> 261 </script>
262 <style lang="less" scoped> 262 <style lang="less" scoped>
263 // 自定义右键菜单样式 start
264 .contextmenu {
265 margin: 0;
266 background: #fff;
267 z-index: 3000;
268 position: absolute;
269 list-style-type: none;
270 padding: 5px 0;
271 border-radius: 4px;
272 font-size: 12px;
273 font-weight: 400;
274 color: #333;
275 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
276 }
277
278 .contextmenu li {
279 margin: 0;
280 padding: 7px 16px;
281 cursor: pointer;
282 }
283 263
284 .contextmenu li:hover {
285 background: #eee;
286 }
287 // end
288 .content { 264 .content {
289 height: 100%; 265 height: 100%;
290 width: 100%; 266 width: 100%;
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <!-- 显示层数 --> 14 <!-- 显示层数 -->
15 <td class="floor">{{cs.sjc}}层</td> 15 <td class="floor">{{cs.sjc}}层</td>
16 <!-- 显示户 --> 16 <!-- 显示户 -->
17 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.shbw}}</td> 17 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs)">{{hs.shbw}}</td>
18 </tr> 18 </tr>
19 </table> 19 </table>
20 <!-- </div> --> 20 <!-- </div> -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 <!-- 显示层数 --> 30 <!-- 显示层数 -->
31 <td class="floor">{{cs.sjc}}层</td> 31 <td class="floor">{{cs.sjc}}层</td>
32 <!-- 显示户 --> 32 <!-- 显示户 -->
33 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.shbw}}</td> 33 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs)">{{hs.shbw}}</td>
34 </tr> 34 </tr>
35 </table> 35 </table>
36 </div> 36 </div>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 <!-- 显示层数 --> 55 <!-- 显示层数 -->
56 <td class="floor">{{cs.sjc}}层</td> 56 <td class="floor">{{cs.sjc}}层</td>
57 <!-- 显示户 --> 57 <!-- 显示户 -->
58 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.shbw}}</td> 58 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs)">{{hs.shbw}}</td>
59 </tr> 59 </tr>
60 </table> 60 </table>
61 </div> 61 </div>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 <!-- 显示层数 --> 67 <!-- 显示层数 -->
68 <td class="floor">{{cs.sjc}}层</td> 68 <td class="floor">{{cs.sjc}}层</td>
69 <!-- 显示户 --> 69 <!-- 显示户 -->
70 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)">{{hs.shbw}}</td> 70 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs)">{{hs.shbw}}</td>
71 </tr> 71 </tr>
72 </table> 72 </table>
73 </div> 73 </div>
...@@ -81,6 +81,16 @@ ...@@ -81,6 +81,16 @@
81 > 81 >
82 {{ lpbData.xmmc }} 82 {{ lpbData.xmmc }}
83 </div> 83 </div>
84 <ul
85 v-show="lpbChVisible"
86 :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
87 class="contextmenu"
88 >
89 <li >添加户</li>
90 <li >移动户</li>
91 <li >删除户</li>
92 <li >实预测转换</li>
93 </ul>
84 </div> 94 </div>
85 </template> 95 </template>
86 <script> 96 <script>
...@@ -109,6 +119,9 @@ export default { ...@@ -109,6 +119,9 @@ export default {
109 searchNum: Math.random(), 119 searchNum: Math.random(),
110 //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList 120 //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
111 choosedList: [], 121 choosedList: [],
122 lpbChVisible:false, //层户右键菜单显隐
123 lpbChLeft:100,
124 lpbChTop:100,
112 }; 125 };
113 }, 126 },
114 created() {}, 127 created() {},
...@@ -247,7 +260,7 @@ export default { ...@@ -247,7 +260,7 @@ export default {
247 }, 260 },
248 //清除选中户 261 //清除选中户
249 clearChoosedH() { 262 clearChoosedH() {
250 this.$nextTick(() => { 263 // this.$nextTick(() => {
251 //将每个选中的户的选中状态清除 264 //将每个选中的户的选中状态清除
252 this.$refs.hBsm.forEach((item) => { 265 this.$refs.hBsm.forEach((item) => {
253 if (item.className == "tdSelect") { 266 if (item.className == "tdSelect") {
...@@ -256,7 +269,19 @@ export default { ...@@ -256,7 +269,19 @@ export default {
256 }); 269 });
257 // 清空hbsmList 270 // 清空hbsmList
258 this.hbsmList = []; 271 this.hbsmList = [];
259 }); 272 // });
273 },
274 //户右键点击事件
275 openMenu(e,item){
276 console.log(e,'e');
277 this.lpbChLeft = e.pageX;
278 this.lpbChTop = e.pageY;
279 this.zdData = item;
280 this.lpbChVisible = true
281 },
282 //关闭右键菜单
283 closeMenu(){
284 this.lpbChVisible = false
260 }, 285 },
261 }, 286 },
262 computed: { 287 computed: {
...@@ -298,11 +323,19 @@ export default { ...@@ -298,11 +323,19 @@ export default {
298 this.$refs.hBsm.forEach((item) => { 323 this.$refs.hBsm.forEach((item) => {
299 this.choosedList.forEach((i) => { 324 this.choosedList.forEach((i) => {
300 if (item.dataset.bsm == i) { 325 if (item.dataset.bsm == i) {
326 console.log(item.dataset.bsm+'----分割线-----'+i);
301 item.className = "tdSelect"; 327 item.className = "tdSelect";
302 } 328 }
303 }); 329 });
304 }); 330 });
305 }, 331 },
332 lpbChVisible(value) {
333 if (value) {
334 document.body.addEventListener("click", this.closeMenu);
335 } else {
336 document.body.removeEventListener("click", this.closeMenu);
337 }
338 }
306 }, 339 },
307 }; 340 };
308 </script> 341 </script>
...@@ -311,7 +344,6 @@ export default { ...@@ -311,7 +344,6 @@ export default {
311 width: 100%; 344 width: 100%;
312 height: 100%; 345 height: 100%;
313 overflow: hidden; 346 overflow: hidden;
314 position: relative;
315 .lpbContent { 347 .lpbContent {
316 width: 100%; 348 width: 100%;
317 height: 100%; 349 height: 100%;
...@@ -438,8 +470,8 @@ export default { ...@@ -438,8 +470,8 @@ export default {
438 height: 60px; 470 height: 60px;
439 line-height: 60px; 471 line-height: 60px;
440 background-color: darkgoldenrod; 472 background-color: darkgoldenrod;
441 position: absolute; 473 position: relative;
442 bottom: 6px; 474 bottom: 66px;
443 text-align: center; 475 text-align: center;
444 transition: 0.5s; 476 transition: 0.5s;
445 } 477 }
......