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 65 additions and 35 deletions
......@@ -122,3 +122,27 @@ ol, ul { list-style:none; }
.el-tabs__content{
position: unset;
}
// 自定义右键菜单样式
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
// end
\ No newline at end of file
......
<template>
<div class="main">
<el-dialog
title="户重新落宗"
:visible.sync="isVisible"
......@@ -68,7 +67,6 @@
<query-data :centerDialogVisible="xzzdVisible" @close="xzzdClose" @getData="getZdxx"
:isZdClose="true"></query-data>
</el-dialog>
</div>
</template>
<script>
......
......@@ -260,31 +260,7 @@ export default {
};
</script>
<style lang="less" scoped>
// 自定义右键菜单样式 start
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
// end
.content {
height: 100%;
width: 100%;
......
......@@ -14,7 +14,7 @@
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<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>
<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>
</tr>
</table>
<!-- </div> -->
......@@ -30,7 +30,7 @@
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<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>
<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>
</tr>
</table>
</div>
......@@ -55,7 +55,7 @@
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<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>
<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>
</tr>
</table>
</div>
......@@ -67,7 +67,7 @@
<!-- 显示层数 -->
<td class="floor">{{cs.sjc}}层</td>
<!-- 显示户 -->
<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>
<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>
</tr>
</table>
</div>
......@@ -81,6 +81,16 @@
>
{{ lpbData.xmmc }}
</div>
<ul
v-show="lpbChVisible"
:style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
class="contextmenu"
>
<li >添加户</li>
<li >移动户</li>
<li >删除户</li>
<li >实预测转换</li>
</ul>
</div>
</template>
<script>
......@@ -109,6 +119,9 @@ export default {
searchNum: Math.random(),
//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
choosedList: [],
lpbChVisible:false, //层户右键菜单显隐
lpbChLeft:100,
lpbChTop:100,
};
},
created() {},
......@@ -247,7 +260,7 @@ export default {
},
//清除选中户
clearChoosedH() {
this.$nextTick(() => {
// this.$nextTick(() => {
//将每个选中的户的选中状态清除
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
......@@ -256,7 +269,19 @@ export default {
});
// 清空hbsmList
this.hbsmList = [];
});
// });
},
//户右键点击事件
openMenu(e,item){
console.log(e,'e');
this.lpbChLeft = e.pageX;
this.lpbChTop = e.pageY;
this.zdData = item;
this.lpbChVisible = true
},
//关闭右键菜单
closeMenu(){
this.lpbChVisible = false
},
},
computed: {
......@@ -298,11 +323,19 @@ export default {
this.$refs.hBsm.forEach((item) => {
this.choosedList.forEach((i) => {
if (item.dataset.bsm == i) {
console.log(item.dataset.bsm+'----分割线-----'+i);
item.className = "tdSelect";
}
});
});
},
lpbChVisible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
},
};
</script>
......@@ -311,7 +344,6 @@ export default {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.lpbContent {
width: 100%;
height: 100%;
......@@ -438,8 +470,8 @@ export default {
height: 60px;
line-height: 60px;
background-color: darkgoldenrod;
position: absolute;
bottom: 6px;
position: relative;
bottom: 66px;
text-align: center;
transition: 0.5s;
}
......