Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
1d7a8d7d by 杨威
Options

宗地分割页面交互优化

1 parent 9c0ce83f
Inline Side-by-side
Showing 2 changed files with 191 additions and 69 deletions
...@@ -32,3 +32,37 @@ export default { ...@@ -32,3 +32,37 @@ export default {
32 }, 32 },
33 }; 33 };
34 </script> 34 </script>
35
36 <style lang="less">
37 .popper-zxx{
38 padding: 0!important;
39 /deep/ .el-tabs__header{
40 margin-bottom: 10px;
41 }
42 ul{
43 margin-bottom: 10px;
44 li{
45 cursor: pointer;
46 padding: 4px 16px;
47 position: relative;
48 i{
49 position: absolute;
50 right: 20px;
51 top: 6px;
52 color: #4EB2FF;
53 display: none;
54 }
55 }
56 li:hover{
57 background: #eee;
58 }
59 .choosed{
60 color: #4EB2FF;
61 background-color: #F0F9FF!important;
62 i{
63 display: inline-block;
64 }
65 }
66 }
67 }
68 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
8 <div class="fgq"> 8 <div class="fgq">
9 <el-card class="data"> 9 <el-card class="data">
10 <div slot="header" class="clearfix"> 10 <div slot="header" class="clearfix">
11 <span>基本信息</span> 11 <span>宗地基本信息</span>
12 </div> 12 </div>
13 <ul> 13 <ul class="zdjbxx">
14 <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li> 14 <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li>
15 <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li> 15 <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li>
16 <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li> 16 <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li>
...@@ -18,68 +18,52 @@ ...@@ -18,68 +18,52 @@
18 <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li> 18 <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li>
19 <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li> 19 <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li>
20 </ul> 20 </ul>
21 </el-card> 21 <div class="zdmap">
22 <div class="zxx"> 22
23 <el-card class="dz">
24 <div slot="header" class="clearfix">
25 <span>多幢信息({{zdZxx.dzList.length}}个)</span>
26 </div> 23 </div>
27 <ul>
28 <li v-for="(item,index) in zdZxx.dzList" :key="index"
29 :class="[{'search':!zdDzList.includes(item)}]"
30 ><span class="label">多幢名称:</span> <span class="value">{{item.displays}}</span>
31 </li>
32 </ul>
33 </el-card> 24 </el-card>
34 25 <div class="zxx">
35 <el-card class="zrz"> 26 <el-card class="zrz">
36 <div slot="header" class="clearfix"> 27 <div slot="header" class="clearfix">
28 <span>多幢信息({{zdZxx.dzList.length}}个)</span>，
37 <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> 29 <span>自然幢信息({{zdZxx.zrzList.length}}个)</span>
38 </div> 30 </div>
39 <ul> 31 <ul>
40 <li v-for="(item,index) in zdZxx.zrzList" :key="index" 32 <li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc"
33 :class="[{'search':!zdDzList.includes(item)}]"
34 >{{item.displays}}
35 </li>
36 <li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc"
41 :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> 37 :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]">
42 {{item.displays}} 38 {{item.displays}}
43 </li> 39 </li>
44 </ul> 40 </ul>
45 <div class="line"></div>
46 </el-card> 41 </el-card>
47 </div> 42 </div>
48 </div> 43 </div>
49 <div class="fgh"> 44 <div class="fgh" :style="{'minHeight':tableHeight+'px'}">
50 <span class="tips">分割后宗地信息</span> 45 <span class="tips">分割后宗地信息</span>
51 <table border="1"> 46 <table border="1">
52 <tr> 47 <tr>
53 <th class="cz">操作</th> 48 <th class="cz"><el-button
49 type="primary"
50 class="changeBtn outAdd addMinus"
51 @click="addRow"
52 >+
53 </el-button
54 ></th>
54 <th class="xzq">行政区</th> 55 <th class="xzq">行政区</th>
55 <th class="djq">地籍区</th> 56 <th class="djq">地籍区</th>
56 <th class="djzq">地籍子区</th> 57 <th class="djzq">地籍子区</th>
57 <th class="syqlx">所有权类型</th> 58 <th class="syqlx">所有权类型</th>
58 <th class="tdtzm">土地特征码</th> 59 <th class="tdtzm">土地特征码</th>
59 <th class="xmmc">项目名称</th> 60 <th class="xmmc">项目名称</th>
60 <th class="xzzxx">幢信息</th> 61 <!-- <th class="xzzxx">幢信息</th> -->
61 <!-- <th class="">选择</th> --> 62 <!-- <th class="">选择</th> -->
62 </tr> 63 </tr>
63 <tr> 64 <template v-for="(item,index) in zdFghData.newZdlist">
64 <td> 65 <tr :key="item.xzqbsm">
65 <el-button 66 <td class="cz" rowspan="2">
66 type="primary"
67 class="changeBtn outAdd addMinus"
68 @click="addRow"
69 >+
70 </el-button
71 >
72 </td>
73 <td></td>
74 <td></td>
75 <td></td>
76 <td></td>
77 <td></td>
78 <td></td>
79 <td></td>
80 </tr>
81 <tr v-for="(item,index) in zdFghData.newZdlist" :key="index">
82 <td class="cz">
83 <el-button 67 <el-button
84 type="primary" 68 type="primary"
85 class="changeBtn outMinus addMinus" 69 class="changeBtn outMinus addMinus"
...@@ -141,8 +125,8 @@ ...@@ -141,8 +125,8 @@
141 <td class="xmmc"> 125 <td class="xmmc">
142 <input type="text" v-model="item.xmmc" class="formInput"/> 126 <input type="text" v-model="item.xmmc" class="formInput"/>
143 </td> 127 </td>
144 <td class="xzzxx"> 128 <!-- <td class="xzzxx">
145 <!-- <span>多幢:</span> 129 <span>多幢:</span>
146 <ul> 130 <ul>
147 <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" 131 <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex"
148 @mouseenter="mouseenter($event,index,dzIndex,'dz')" 132 @mouseenter="mouseenter($event,index,dzIndex,'dz')"
...@@ -158,13 +142,13 @@ ...@@ -158,13 +142,13 @@
158 >{{zrzItem.xmmc}} 142 >{{zrzItem.xmmc}}
159 <span v-if="zrzIndex<item.zrz.length-1">,</span> 143 <span v-if="zrzIndex<item.zrz.length-1">,</span>
160 </li> 144 </li>
161 </ul> --> 145 </ul>
162 <span class="zxx">自然幢1 <i class="fa fa-times"></i></span> 146 <span class="zxx">自然幢1 <i class="fa fa-times"></i></span>
163 <span class="zxx">自然幢2 <i class="fa fa-times"></i></span> 147 <span class="zxx">自然幢2 <i class="fa fa-times"></i></span>
164 <span class="zxx">自然幢3 <i class="fa fa-times"></i></span> 148 <span class="zxx">自然幢3 <i class="fa fa-times"></i></span>
165 <span class="zxx">多幢1 <i class="fa fa-times"></i></span> 149 <span class="zxx">多幢1 <i class="fa fa-times"></i></span>
166 <span class="choose">选择</span> 150 <span class="choose">选择</span>
167 </td> 151 </td> -->
168 <!-- <td class=""> 152 <!-- <td class="">
169 <el-dropdown @command="dzHandleCommand($event,index)"> 153 <el-dropdown @command="dzHandleCommand($event,index)">
170 <span class="el-dropdown-link"> 154 <span class="el-dropdown-link">
...@@ -190,6 +174,47 @@ ...@@ -190,6 +174,47 @@
190 </el-dropdown> 174 </el-dropdown>
191 </td> --> 175 </td> -->
192 </tr> 176 </tr>
177 <tr :key="index">
178 <td colspan="6">
179 <div class="fghzxx">
180 <div class="choosedZxx">
181 <span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx">
182 {{dzItem.xmmc}} <i class="fa fa-times"></i>
183 </span>
184 <span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx">
185 {{zrzItem.xmmc}} <i class="fa fa-times"></i>
186 </span>
187 </div>
188 <p class="choose">
189 <el-popover
190 placement="top-end"
191 width="300"
192 popper-class="popper-zxx"
193 style="padding:0 12px"
194 trigger="click">
195 <el-tabs v-model="activeName" type="card">
196 <el-tab-pane label="多幢" name="dz">
197 <ul>
198 <li :class="zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':''" @click="dzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdDzList" :key="childItem.bsm">
199 {{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i>
200 </li>
201 </ul>
202 </el-tab-pane>
203 <el-tab-pane label="自然幢" name="zrz">
204 <ul>
205 <li :class="zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':''" @click="zrzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdZrzList" :key="childItem.bsm">
206 {{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i>
207 </li>
208 </ul>
209 </el-tab-pane>
210 </el-tabs>
211 <span slot="reference">选择</span>
212 </el-popover>
213 </p>
214 </div>
215 </td>
216 </tr>
217 </template>
193 </table> 218 </table>
194 </div> 219 </div>
195 <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true" 220 <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true"
...@@ -556,6 +581,8 @@ ...@@ -556,6 +581,8 @@
556 newZdlist: [] 581 newZdlist: []
557 }, 582 },
558 fgBoxWidth: 0, 583 fgBoxWidth: 0,
584 tableHeight:0,
585 activeName:'dz'
559 } 586 }
560 }, 587 },
561 created() { 588 created() {
...@@ -565,6 +592,7 @@ ...@@ -565,6 +592,7 @@
565 this.getzdtzm(); 592 this.getzdtzm();
566 this.$nextTick(() => { 593 this.$nextTick(() => {
567 this.fgBoxWidth = this.$refs.fgBox.clientWidth; 594 this.fgBoxWidth = this.$refs.fgBox.clientWidth;
595 this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 590;
568 }) 596 })
569 }, 597 },
570 methods: { 598 methods: {
...@@ -654,27 +682,32 @@ ...@@ -654,27 +682,32 @@
654 ztype: 'zrz' 682 ztype: 'zrz'
655 }) 683 })
656 }, 684 },
657 dzHandleCommand(command, index) { 685 dzHandleCommand(obj,bsm, index) {
658 let item = this.zdDzList.filter(i => i.bsm == command)[0]; 686 if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){
659 this.zdFghData.newZdlist[index].fwlist.push({ 687 this.zdFghData.newZdlist[index].fwlist.push({
660 zbsm: command, 688 zbsm: bsm,
661 ztype: 'dz' 689 ztype: 'dz'
662 }); 690 });
663 this.zdFghData.newZdlist[index].dz.push(item) 691 this.zdFghData.newZdlist[index].dz.push(obj)
664 this.zdDzList = this.zdDzList.filter(i => i.bsm !== command); 692 }else{
693 this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm)
694 }
665 }, 695 },
666 zrzHandleCommand(command, index) { 696 zrzHandleCommand(obj,bsm, index) {
667 let item = this.zdZrzList.filter(i => i.bsm == command)[0]; 697 if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){
668 this.zdFghData.newZdlist[index].fwlist.push({ 698 this.zdFghData.newZdlist[index].fwlist.push({
669 zbsm: command, 699 zbsm: bsm,
670 ztype: 'zrz' 700 ztype: 'zrz'
671 }) 701 })
672 this.zdFghData.newZdlist[index].zrz.push(item) 702 this.zdFghData.newZdlist[index].zrz.push(obj)
673 this.zdZrzList = this.zdZrzList.filter(i => i.bsm !== command); 703 }else{
704 this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm)
705 }
674 }, 706 },
675 ZdgetDzXx(zdbsm) { 707 ZdgetDzXx(zdbsm) {
676 ZdfggetZxx(zdbsm).then(res => { 708 ZdfggetZxx(zdbsm).then(res => {
677 if (res.success) { 709 if (res.success) {
710 console.log(res.result,'res.result');
678 this.zdZxx = res.result; 711 this.zdZxx = res.result;
679 this.zdZrzList = res.result.zrzList 712 this.zdZrzList = res.result.zrzList
680 this.zdDzList = res.result.dzList 713 this.zdDzList = res.result.dzList
...@@ -951,6 +984,7 @@ ...@@ -951,6 +984,7 @@
951 </script> 984 </script>
952 <style scoped lang="less"> 985 <style scoped lang="less">
953 .fg { 986 .fg {
987
954 .menu { 988 .menu {
955 /deep/ .el-tabs__content { 989 /deep/ .el-tabs__content {
956 position: unset; 990 position: unset;
...@@ -990,6 +1024,14 @@ ...@@ -990,6 +1024,14 @@
990 } 1024 }
991 } 1025 }
992 } 1026 }
1027
1028 /deep/ .el-card__header{
1029 padding: 16px 20px;
1030 background-color: #F2F2F2;
1031 border: 1px solid #DBDBDB;
1032 -webkit-box-sizing: border-box;
1033 box-sizing: border-box;
1034 }
993 } 1035 }
994 1036
995 .v-model { 1037 .v-model {
...@@ -1003,7 +1045,7 @@ ...@@ -1003,7 +1045,7 @@
1003 flex-direction: column; 1045 flex-direction: column;
1004 flex-flow: nowrap; 1046 flex-flow: nowrap;
1005 .data{ 1047 .data{
1006 width: 36%; 1048 width: 40%;
1007 } 1049 }
1008 .el-card { 1050 .el-card {
1009 border: 1px solid #E6E6E6; 1051 border: 1px solid #E6E6E6;
...@@ -1027,16 +1069,30 @@ ...@@ -1027,16 +1069,30 @@
1027 display: inline-block; 1069 display: inline-block;
1028 width: 104px; 1070 width: 104px;
1029 text-align: right; 1071 text-align: right;
1072 vertical-align: top;
1030 } 1073 }
1031 .value{ 1074 .value{
1032 color: #6D7278; 1075 color: #6D7278;
1076 display: inline-block;
1033 padding-left: 10px; 1077 padding-left: 10px;
1078 width: calc(100% - 116px);
1079 word-break: break-all;
1034 } 1080 }
1035 } 1081 }
1036 } 1082 }
1083 .zdjbxx{
1084 width: 380px;
1085 height: 200px;
1086 float: left;
1087 }
1088 .zdmap{
1089 width: calc(100% - 380px);
1090 height: 200px;
1091 float: left;
1092 }
1037 } 1093 }
1038 .zxx { 1094 .zxx {
1039 width: calc(64% - 40px); 1095 width: calc(60% - 40px);
1040 margin-left: 20px; 1096 margin-left: 20px;
1041 display: flex; 1097 display: flex;
1042 flex-direction: column; 1098 flex-direction: column;
...@@ -1070,14 +1126,16 @@ ...@@ -1070,14 +1126,16 @@
1070 1126
1071 } 1127 }
1072 .zrz { 1128 .zrz {
1073 width: 66%; 1129 width: 100%;
1074 margin-left: 20px;
1075 overflow: auto; 1130 overflow: auto;
1076 } 1131 }
1077 ul { 1132 ul {
1078 overflow: auto; 1133 overflow: auto;
1134 width: 100%;
1135 float: left;
1136 margin-left: 10px;
1079 li { 1137 li {
1080 width: 48%; 1138 width: 23%;
1081 padding: 5px; 1139 padding: 5px;
1082 text-align: left; 1140 text-align: left;
1083 line-height: 20px; 1141 line-height: 20px;
...@@ -1096,9 +1154,6 @@ ...@@ -1096,9 +1154,6 @@
1096 } 1154 }
1097 } 1155 }
1098 1156
1099 .oddborder {
1100 border-right: 1px solid #000;
1101 }
1102 1157
1103 .fg-tabs { 1158 .fg-tabs {
1104 height: auto; 1159 height: auto;
...@@ -1129,13 +1184,16 @@ ...@@ -1129,13 +1184,16 @@
1129 overflow: visible; 1184 overflow: visible;
1130 text-align: center; 1185 text-align: center;
1131 } 1186 }
1132 tr:nth-of-type(odd) { 1187 // tr:nth-of-type(odd) {
1133 background: #FAFAFA; 1188 // background: #FAFAFA;
1134 } 1189 // }
1135 tr{ 1190 tr{
1136 th,td{ 1191 th,td{
1137 height: 44px; 1192 height: 44px;
1138 } 1193 }
1194 th{
1195 background: #FAFAFA;
1196 }
1139 } 1197 }
1140 1198
1141 tr:hover { 1199 tr:hover {
...@@ -1162,12 +1220,43 @@ ...@@ -1162,12 +1220,43 @@
1162 .fgh { 1220 .fgh {
1163 box-sizing: border-box; 1221 box-sizing: border-box;
1164 /*padding: 0 18px;*/ 1222 /*padding: 0 18px;*/
1165 height: 480px;
1166 overflow: auto; 1223 overflow: auto;
1167 margin-top: 26px; 1224 margin-top: 26px;
1168 table { 1225 table {
1169 margin: 0 20px; 1226 margin: 0 20px;
1170 } 1227 }
1228 .fghzxx{
1229 width: 100%;
1230 height: 100%;
1231 line-height: 44px;
1232 .choosedZxx{
1233 width:calc(100% - 88px);
1234 float: left;
1235 text-align: left;
1236 text-indent: 20px;
1237 .zxx{
1238 padding-right: 10px;
1239 position: relative;
1240 i{
1241 display: none;
1242 position: absolute;
1243 right: 4px;
1244 top: -6px;
1245 }
1246 }
1247 .zxx:hover{
1248 i{
1249 display: inline-block;
1250 }
1251 }
1252 }
1253 .choose{
1254 width: 88px;
1255 color: #30A4FD;
1256 cursor: pointer;
1257 float: right;
1258 }
1259 }
1171 .tips { 1260 .tips {
1172 display: inline-block; 1261 display: inline-block;
1173 margin-bottom: 14px; 1262 margin-bottom: 14px;
...@@ -1221,10 +1310,6 @@ ...@@ -1221,10 +1310,6 @@
1221 display: inline; 1310 display: inline;
1222 } 1311 }
1223 } 1312 }
1224 .choose{
1225 color: #30A4FD;
1226 cursor: pointer;
1227 }
1228 } 1313 }
1229 1314
1230 .cz, .xh { 1315 .cz, .xh {
...@@ -1238,4 +1323,7 @@ ...@@ -1238,4 +1323,7 @@
1238 .search { 1323 .search {
1239 color: #BBB !important; 1324 color: #BBB !important;
1240 } 1325 }
1326 /deep/ .el-select{
1327 width: 100%;
1328 }
1241 </style> 1329 </style>
......