楼盘表左侧树结构和右键菜单完善
Showing
4 changed files
with
87 additions
and
28 deletions
... | @@ -95,23 +95,27 @@ export default { | ... | @@ -95,23 +95,27 @@ export default { |
95 | }, | 95 | }, |
96 | // 右键点击事件 | 96 | // 右键点击事件 |
97 | openMenu(e, item) { | 97 | openMenu(e, item) { |
98 | if (item.zdbsm) { | 98 | this.$emit("changeTop", e.pageY); |
99 | var x = e.pageX; | 99 | this.$emit("changeLeft", e.pageX); |
100 | var y = e.pageY; | 100 | this.$emit("changeZdData",item); |
101 | this.$emit("changeIsZD", true); | 101 | switch (item.type) { |
102 | this.$emit("changeTop", y); | 102 | case 'zd': |
103 | this.$emit("changeLeft", x); | 103 | this.$emit("changeIsZD", true); |
104 | this.$emit("changeVisible", true); | 104 | this.$emit("changeVisible", true); |
105 | this.$emit("changeZdData",item); | 105 | break; |
106 | } else if (item.zrzbsm) { | 106 | case 'zrz': |
107 | var x = e.pageX; | 107 | this.$emit("changeIsZD", false); |
108 | var y = e.pageY; | 108 | this.$emit("changeVisible", true); |
109 | this.$emit("changeIsZD", false); | 109 | break; |
110 | this.$emit("changeTop", y); | 110 | case 'zdy': |
111 | this.$emit("changeLeft", x); | 111 | this.$emit("changeLpbVisible", true); |
112 | this.$emit("changeVisible", true); | 112 | break; |
113 | } else { | 113 | case 'ljz': |
114 | return; | 114 | this.$emit("changeLpbVisible", true); |
115 | break; | ||
116 | |||
117 | default: | ||
118 | break; | ||
115 | } | 119 | } |
116 | }, | 120 | }, |
117 | // 左键双击事件 | 121 | // 左键双击事件 | ... | ... |
... | @@ -14,7 +14,6 @@ | ... | @@ -14,7 +14,6 @@ |
14 | :class="{ | 14 | :class="{ |
15 | active_color: item.expand && item.children.length > 0, | 15 | active_color: item.expand && item.children.length > 0, |
16 | }" | 16 | }" |
17 | @contextmenu.prevent="openMenu($event, item)" | ||
18 | @click="itemClick(item)" | 17 | @click="itemClick(item)" |
19 | > | 18 | > |
20 | <div | 19 | <div |
... | @@ -28,8 +27,8 @@ | ... | @@ -28,8 +27,8 @@ |
28 | reTree_collapse_icon: item.expand && item.children.length > 0, | 27 | reTree_collapse_icon: item.expand && item.children.length > 0, |
29 | reTree_expand_icon: !item.expand && item.children.length > 0, | 28 | reTree_expand_icon: !item.expand && item.children.length > 0, |
30 | }" | 29 | }" |
31 | ></div> | 30 | ></div> |
32 | <div class="layer_text nowrap">{{ item.mc }}</div> | 31 | <div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)">{{ item.mc }}</div> |
33 | </div> | 32 | </div> |
34 | 33 | ||
35 | <lineItem | 34 | <lineItem |
... | @@ -39,6 +38,7 @@ | ... | @@ -39,6 +38,7 @@ |
39 | @changeZdData="changeZdData" | 38 | @changeZdData="changeZdData" |
40 | @changeLeft="changeLeft" | 39 | @changeLeft="changeLeft" |
41 | @changeVisible="changeVisible" | 40 | @changeVisible="changeVisible" |
41 | @changeLpbVisible="changeLpbVisible" | ||
42 | @changeIsZD="changeIsZD" | 42 | @changeIsZD="changeIsZD" |
43 | :list="item.children" | 43 | :list="item.children" |
44 | :visible="visible" | 44 | :visible="visible" |
... | @@ -61,6 +61,15 @@ | ... | @@ -61,6 +61,15 @@ |
61 | <li v-show="isZD" @click="openCreateDialog">添加定着物</li> | 61 | <li v-show="isZD" @click="openCreateDialog">添加定着物</li> |
62 | <li @click="deleteByBsm()">删除</li> | 62 | <li @click="deleteByBsm()">删除</li> |
63 | </ul> | 63 | </ul> |
64 | <ul | ||
65 | v-show="lpbvisible" | ||
66 | :style="{ left: lpbleft + 'px', top: lpbtop + 'px' }" | ||
67 | class="contextmenu" | ||
68 | > | ||
69 | <li v-show="zdData.type == 'zrz'" @click="openLpbDialog">添加逻辑幢</li> | ||
70 | <li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog">添加幢单元</li> | ||
71 | <li @click="openLpbDialog">添加层户</li> | ||
72 | </ul> | ||
64 | <!-- 添加定着物弹框 --> | 73 | <!-- 添加定着物弹框 --> |
65 | <el-dialog title="新建" :visible.sync="dialogVisible" width="40%"> | 74 | <el-dialog title="新建" :visible.sync="dialogVisible" width="40%"> |
66 | <Create @closeDialog="closeDialog" :auth="true"></Create> | 75 | <Create @closeDialog="closeDialog" :auth="true"></Create> |
... | @@ -95,7 +104,11 @@ export default { | ... | @@ -95,7 +104,11 @@ export default { |
95 | left: 0, | 104 | left: 0, |
96 | isZD: true, | 105 | isZD: true, |
97 | zdData:{}, | 106 | zdData:{}, |
98 | dialogVisible:false | 107 | dialogVisible:false, |
108 | //控制楼盘表 | ||
109 | lpbvisible: false, | ||
110 | lpbtop: 0, | ||
111 | lpbleft: 0, | ||
99 | }; | 112 | }; |
100 | }, | 113 | }, |
101 | watch: { | 114 | watch: { |
... | @@ -103,6 +116,14 @@ export default { | ... | @@ -103,6 +116,14 @@ export default { |
103 | this.formatData = this.preDealData(n); | 116 | this.formatData = this.preDealData(n); |
104 | console.log(this.formatData); | 117 | console.log(this.formatData); |
105 | }, | 118 | }, |
119 | |||
120 | lpbvisible(value) { | ||
121 | if (value) { | ||
122 | document.body.addEventListener("click", this.closeMenu); | ||
123 | } else { | ||
124 | document.body.removeEventListener("click", this.closeMenu); | ||
125 | } | ||
126 | } | ||
106 | }, | 127 | }, |
107 | created() { | 128 | created() { |
108 | console.log("lineTree create"); | 129 | console.log("lineTree create"); |
... | @@ -120,13 +141,19 @@ export default { | ... | @@ -120,13 +141,19 @@ export default { |
120 | }, | 141 | }, |
121 | changeTop(data) { | 142 | changeTop(data) { |
122 | this.top = data; | 143 | this.top = data; |
144 | this.lpbtop = data; | ||
123 | }, | 145 | }, |
124 | changeLeft(data) { | 146 | changeLeft(data) { |
125 | this.left = data; | 147 | this.left = data; |
148 | this.lpbleft = data; | ||
126 | }, | 149 | }, |
127 | changeIsZD(data) { | 150 | changeIsZD(data) { |
128 | this.isZD = data; | 151 | this.isZD = data; |
129 | }, | 152 | }, |
153 | changeLpbVisible(data) { | ||
154 | console.log(this.zdData,'zdData'); | ||
155 | this.lpbvisible = data; | ||
156 | }, | ||
130 | //添加定着物 | 157 | //添加定着物 |
131 | openCreateDialog(){ | 158 | openCreateDialog(){ |
132 | this.dialogVisible = true | 159 | this.dialogVisible = true |
... | @@ -176,17 +203,28 @@ export default { | ... | @@ -176,17 +203,28 @@ export default { |
176 | }, | 203 | }, |
177 | //自然幢右键点击事件 | 204 | //自然幢右键点击事件 |
178 | openMenu(e,item){ | 205 | openMenu(e,item){ |
179 | console.log(e); | 206 | this.lpbleft = e.pageX; |
180 | console.log(item); | 207 | this.lpbtop = e.pageY; |
208 | this.zdData = item; | ||
209 | this.changeLpbVisible(true); | ||
210 | }, | ||
211 | //关闭自然幢右击菜单 | ||
212 | closeMenu(){ | ||
213 | this.lpbvisible = false | ||
214 | }, | ||
215 | //楼盘表右键菜单项打开父组件弹框 | ||
216 | openLpbDialog(){ | ||
217 | this.$parent.openLpbDialog(this.zdData); | ||
181 | }, | 218 | }, |
182 | detailDoubleClick(data) { | 219 | detailDoubleClick(data) { |
183 | clearTimeout(this.timer); | 220 | clearTimeout(this.timer); |
184 | this.selectedDetail = data; | 221 | this.selectedDetail = data; |
185 | this.$emit("detailDoubleClick", data); | 222 | this.$emit("detailDoubleClick", data); |
186 | }, | 223 | }, |
224 | //右键菜单的删除 | ||
187 | deleteByBsm(){ | 225 | deleteByBsm(){ |
188 | var zdBsm = this.zdData.zdbsm; | 226 | let zdBsm = this.zdData.zdbsm; |
189 | var type; | 227 | let type; |
190 | console.log(zdBsm); | 228 | console.log(zdBsm); |
191 | switch (this.zdData.type){ | 229 | switch (this.zdData.type){ |
192 | case "zd": | 230 | case "zd": |
... | @@ -201,7 +239,7 @@ export default { | ... | @@ -201,7 +239,7 @@ export default { |
201 | default: | 239 | default: |
202 | break; | 240 | break; |
203 | } | 241 | } |
204 | var params={"id":zdBsm,"type":type} | 242 | let params={"id":zdBsm,"type":type} |
205 | deleteZdInfoByBsm(params) | 243 | deleteZdInfoByBsm(params) |
206 | .then((res) => { | 244 | .then((res) => { |
207 | if(res.code=200){ | 245 | if(res.code=200){ | ... | ... |
... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
21 | <div class="tab-content"> | 21 | <div class="tab-content"> |
22 | <div class="lp-tree" :class="createFlag ? 'w260':'w0'"> | 22 | <div class="lp-tree" :class="createFlag ? 'w260':'w0'"> |
23 | <LineTree :pd="pd" class="treeData" :islpb = "islpb" ></LineTree> | 23 | <LineTree :pd="pd" class="treeData" :islpb = "islpb" ></LineTree> |
24 | <p @click="createFlag = false" style="width:20px;position:absolute;top:0;right:0;cursor:pointer;">X</p> | 24 | <p @click="createFlag = false" style="width:20px;float:left;cursor:pointer;">X</p> |
25 | </div> | 25 | </div> |
26 | <div class="lp-overview"> | 26 | <div class="lp-overview"> |
27 | 楼盘单元格 | 27 | 楼盘单元格 |
... | @@ -30,6 +30,15 @@ | ... | @@ -30,6 +30,15 @@ |
30 | 楼盘图例 | 30 | 楼盘图例 |
31 | </div> | 31 | </div> |
32 | </div> | 32 | </div> |
33 | |||
34 | <el-dialog | ||
35 | title="添加" | ||
36 | :visible.sync="dialogVisible" | ||
37 | width="50%" | ||
38 | center | ||
39 | > | ||
40 | 添加 | ||
41 | </el-dialog> | ||
33 | </div> | 42 | </div> |
34 | </template> | 43 | </template> |
35 | 44 | ||
... | @@ -48,6 +57,7 @@ export default { | ... | @@ -48,6 +57,7 @@ export default { |
48 | bdcdyh:'', | 57 | bdcdyh:'', |
49 | islpb:true, | 58 | islpb:true, |
50 | pd:[], //创建楼盘的树结构数据 | 59 | pd:[], //创建楼盘的树结构数据 |
60 | dialogVisible:false | ||
51 | } | 61 | } |
52 | }, | 62 | }, |
53 | created(){}, | 63 | created(){}, |
... | @@ -67,6 +77,11 @@ export default { | ... | @@ -67,6 +77,11 @@ export default { |
67 | }) | 77 | }) |
68 | .catch((error) => {}); | 78 | .catch((error) => {}); |
69 | }, | 79 | }, |
80 | //打开新建楼盘树结构右键菜单唤起的弹框 | ||
81 | openLpbDialog(data){ | ||
82 | console.log(data,'data'); | ||
83 | this.dialogVisible = true | ||
84 | } | ||
70 | }, | 85 | }, |
71 | computed: {}, | 86 | computed: {}, |
72 | watch: { | 87 | watch: { |
... | @@ -112,10 +127,11 @@ export default { | ... | @@ -112,10 +127,11 @@ export default { |
112 | .lp-tree{ | 127 | .lp-tree{ |
113 | overflow: hidden; | 128 | overflow: hidden; |
114 | transition: .5s; | 129 | transition: .5s; |
115 | position: relative; | 130 | // position: relative; |
116 | .treeData{ | 131 | .treeData{ |
117 | margin-top: 20px; | 132 | margin-top: 20px; |
118 | margin-left: 20px; | 133 | margin-left: 20px; |
134 | float: left; | ||
119 | } | 135 | } |
120 | } | 136 | } |
121 | .w0{ | 137 | .w0{ | ... | ... |
-
Please register or sign in to post a comment