宗地分割细节优化
Showing
2 changed files
with
74 additions
and
24 deletions
... | @@ -54,11 +54,16 @@ export default { | ... | @@ -54,11 +54,16 @@ export default { |
54 | } | 54 | } |
55 | } | 55 | } |
56 | li:hover{ | 56 | li:hover{ |
57 | background: #eee; | 57 | background: #F0F9FF; |
58 | } | ||
59 | .cantClick{ | ||
60 | color: #BBB!important; | ||
61 | cursor: not-allowed!important; | ||
62 | } | ||
63 | .cantClick:hover{ | ||
64 | background: #ffffff!important; | ||
58 | } | 65 | } |
59 | .choosed{ | 66 | .choosed{ |
60 | color: #4EB2FF; | ||
61 | background-color: #F0F9FF!important; | ||
62 | i{ | 67 | i{ |
63 | display: inline-block; | 68 | display: inline-block; |
64 | } | 69 | } | ... | ... |
... | @@ -31,12 +31,14 @@ | ... | @@ -31,12 +31,14 @@ |
31 | </div> | 31 | </div> |
32 | <ul> | 32 | <ul> |
33 | <li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc" | 33 | <li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc" |
34 | :class="[{'search':!zdDzList.includes(item)}]" | 34 | :class="tempBsmList.indexOf(item.bsm) > -1 ? 'hasChoosed':''" |
35 | >{{item.displays}} | 35 | > |
36 | <i class="iconfont iconduochuang"></i> {{item.displays}} | ||
36 | </li> | 37 | </li> |
37 | <li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc" | 38 | <li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc" |
38 | :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> | 39 | :class="tempBsmList.indexOf(item.bsm) > -1 ? 'hasChoosed':''" |
39 | {{item.displays}} | 40 | > |
41 | <i class="iconfont iconziranchuang"></i> {{item.displays}} | ||
40 | </li> | 42 | </li> |
41 | </ul> | 43 | </ul> |
42 | </el-card> | 44 | </el-card> |
... | @@ -132,12 +134,14 @@ | ... | @@ -132,12 +134,14 @@ |
132 | <div class="fghzxx"> | 134 | <div class="fghzxx"> |
133 | <div class="choosedZxx"> | 135 | <div class="choosedZxx"> |
134 | <span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx"> | 136 | <span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx"> |
135 | {{dzItem.xmmc}}<span v-if="dzIndex<(item.dz.length-1) || item.zrz.length>0">、</span> | 137 | {{dzItem.xmmc}} |
136 | <!-- <i class="fa fa-times" @click="delZxx(index,dzIndex,'dz')"></i> --> | 138 | <!-- <span v-if="dzIndex<(item.dz.length-1) || item.zrz.length>0">、</span> --> |
139 | <i class="fa fa-times" @click="delZxx(dzItem,index,dzIndex,'dz')"></i> | ||
137 | </span> | 140 | </span> |
138 | <span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx"> | 141 | <span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx"> |
139 | {{zrzItem.xmmc}}<span v-if="zrzIndex<(item.zrz.length-1)">、</span> | 142 | {{zrzItem.xmmc}} |
140 | <!-- <i class="fa fa-times" @click="delZxx(index,zrzIndex,'zrz')"></i> --> | 143 | <!-- <span v-if="zrzIndex<(item.zrz.length-1)">、</span> --> |
144 | <i class="fa fa-times" @click="delZxx(zrzItem,index,zrzIndex,'zrz')"></i> | ||
141 | </span> | 145 | </span> |
142 | </div> | 146 | </div> |
143 | <p class="choose"> | 147 | <p class="choose"> |
... | @@ -150,14 +154,16 @@ | ... | @@ -150,14 +154,16 @@ |
150 | <el-tabs v-model="activeName" type="card"> | 154 | <el-tabs v-model="activeName" type="card"> |
151 | <el-tab-pane label="多幢" name="dz"> | 155 | <el-tab-pane label="多幢" name="dz"> |
152 | <ul> | 156 | <ul> |
153 | <li :class="zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':''" @click="dzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdDzList" :key="childItem.bsm"> | 157 | <li :class="[zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':'',(zdDzList[childIndex].hasChoosed === index || zdDzList[childIndex].hasChoosed === '' )? '':'cantClick']" |
158 | @click="dzHandleCommand(childItem,childItem.bsm,index,childIndex)" v-for="(childItem,childIndex) in zdDzList" :key="childItem.bsm+childIndex"> | ||
154 | {{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i> | 159 | {{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i> |
155 | </li> | 160 | </li> |
156 | </ul> | 161 | </ul> |
157 | </el-tab-pane> | 162 | </el-tab-pane> |
158 | <el-tab-pane label="自然幢" name="zrz"> | 163 | <el-tab-pane label="自然幢" name="zrz"> |
159 | <ul> | 164 | <ul> |
160 | <li :class="zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':''" @click="zrzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdZrzList" :key="childItem.bsm"> | 165 | <li :class="[zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':'',(zdZrzList[childIndex].hasChoosed === index || zdZrzList[childIndex].hasChoosed === '' )? '':'cantClick']" |
166 | @click="zrzHandleCommand(childItem,childItem.bsm,index,childIndex)" v-for="(childItem,childIndex) in zdZrzList" :key="childItem.bsm+childIndex"> | ||
161 | {{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i> | 167 | {{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i> |
162 | </li> | 168 | </li> |
163 | </ul> | 169 | </ul> |
... | @@ -537,7 +543,8 @@ | ... | @@ -537,7 +543,8 @@ |
537 | }, | 543 | }, |
538 | fgBoxWidth: 0, | 544 | fgBoxWidth: 0, |
539 | tableHeight:0, | 545 | tableHeight:0, |
540 | activeName:'dz' | 546 | activeName:'dz', |
547 | tempBsmList:[] | ||
541 | } | 548 | } |
542 | }, | 549 | }, |
543 | created() { | 550 | created() { |
... | @@ -551,9 +558,10 @@ | ... | @@ -551,9 +558,10 @@ |
551 | }) | 558 | }) |
552 | }, | 559 | }, |
553 | methods: { | 560 | methods: { |
554 | delZxx(index, chilInd,type) { | 561 | delZxx(item,index, chilInd,type) { |
555 | let dz={}; | 562 | let dz={}; |
556 | let len=this.zdFghData.newZdlist[index].fwlist.length-1; | 563 | let len=this.zdFghData.newZdlist[index].fwlist.length-1; |
564 | this.tempBsmList = this.tempBsmList.filter(i => i!== item.bsm); | ||
557 | switch (type) { | 565 | switch (type) { |
558 | case "dz": | 566 | case "dz": |
559 | dz = this.zdFghData.newZdlist[index].dz[chilInd]; | 567 | dz = this.zdFghData.newZdlist[index].dz[chilInd]; |
... | @@ -565,6 +573,11 @@ | ... | @@ -565,6 +573,11 @@ |
565 | this.zdFghData.newZdlist[index].fwlist.splice(i, 1); | 573 | this.zdFghData.newZdlist[index].fwlist.splice(i, 1); |
566 | } | 574 | } |
567 | } | 575 | } |
576 | this.zdDzList.forEach(i=>{ | ||
577 | if (i.bsm == item.bsm) { | ||
578 | i.hasChoosed = "" | ||
579 | } | ||
580 | }) | ||
568 | break; | 581 | break; |
569 | case "zrz": | 582 | case "zrz": |
570 | dz = this.zdFghData.newZdlist[index].zrz[chilInd]; | 583 | dz = this.zdFghData.newZdlist[index].zrz[chilInd]; |
... | @@ -576,6 +589,11 @@ | ... | @@ -576,6 +589,11 @@ |
576 | this.zdFghData.newZdlist[index].fwlist.splice(i, 1); | 589 | this.zdFghData.newZdlist[index].fwlist.splice(i, 1); |
577 | } | 590 | } |
578 | } | 591 | } |
592 | this.zdZrzList.forEach(i=>{ | ||
593 | if (i.bsm == item.bsm) { | ||
594 | i.hasChoosed = "" | ||
595 | } | ||
596 | }) | ||
579 | break; | 597 | break; |
580 | default: | 598 | default: |
581 | break; | 599 | break; |
... | @@ -618,32 +636,54 @@ | ... | @@ -618,32 +636,54 @@ |
618 | ztype: 'zrz' | 636 | ztype: 'zrz' |
619 | }) | 637 | }) |
620 | }, | 638 | }, |
621 | dzHandleCommand(obj,bsm, index) { | 639 | dzHandleCommand(obj,bsm, index,childIndex) { |
640 | if(this.zdDzList[childIndex].hasChoosed === '' || this.zdDzList[childIndex].hasChoosed === index){ | ||
641 | this.zdDzList[childIndex].hasChoosed = index; | ||
622 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ | 642 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ |
623 | this.zdFghData.newZdlist[index].fwlist.push({ | 643 | this.zdFghData.newZdlist[index].fwlist.push({ |
624 | zbsm: bsm, | 644 | zbsm: bsm, |
625 | ztype: 'dz' | 645 | ztype: 'dz' |
626 | }); | 646 | }); |
627 | this.zdFghData.newZdlist[index].dz.push(obj) | 647 | this.zdFghData.newZdlist[index].dz.push(obj); |
648 | this.tempBsmList.push(bsm); | ||
649 | }else{ | ||
650 | this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm); | ||
651 | this.tempBsmList = this.tempBsmList.filter(i => i!== bsm); | ||
652 | this.zdDzList[childIndex].hasChoosed = ''; | ||
653 | } | ||
628 | }else{ | 654 | }else{ |
629 | this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm) | 655 | return |
630 | } | 656 | } |
631 | }, | 657 | }, |
632 | zrzHandleCommand(obj,bsm, index) { | 658 | zrzHandleCommand(obj,bsm, index,childIndex) { |
659 | if(this.zdZrzList[childIndex].hasChoosed === '' || this.zdZrzList[childIndex].hasChoosed === index){ | ||
660 | this.zdZrzList[childIndex].hasChoosed = index; | ||
633 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ | 661 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ |
634 | this.zdFghData.newZdlist[index].fwlist.push({ | 662 | this.zdFghData.newZdlist[index].fwlist.push({ |
635 | zbsm: bsm, | 663 | zbsm: bsm, |
636 | ztype: 'zrz' | 664 | ztype: 'zrz' |
637 | }) | 665 | }) |
638 | this.zdFghData.newZdlist[index].zrz.push(obj) | 666 | this.zdFghData.newZdlist[index].zrz.push(obj); |
667 | this.tempBsmList.push(bsm); | ||
639 | }else{ | 668 | }else{ |
640 | this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm) | 669 | this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm); |
670 | this.tempBsmList = this.tempBsmList.filter(i => i!== bsm); | ||
671 | this.zdZrzList[childIndex].hasChoosed = ''; | ||
672 | } | ||
673 | }else{ | ||
674 | return | ||
641 | } | 675 | } |
642 | }, | 676 | }, |
643 | ZdgetDzXx(zdbsm) { | 677 | ZdgetDzXx(zdbsm) { |
644 | ZdfggetZxx(zdbsm).then(res => { | 678 | ZdfggetZxx(zdbsm).then(res => { |
645 | if (res.success) { | 679 | if (res.success) { |
646 | console.log(res.result,'res.result'); | 680 | console.log(res.result,'res.result'); |
681 | res.result.dzList.forEach(item=>{ | ||
682 | item.hasChoosed = '' | ||
683 | }) | ||
684 | res.result.zrzList.forEach(item=>{ | ||
685 | item.hasChoosed = '' | ||
686 | }) | ||
647 | this.zdZxx = res.result; | 687 | this.zdZxx = res.result; |
648 | this.zdZrzList = res.result.zrzList | 688 | this.zdZrzList = res.result.zrzList |
649 | this.zdDzList = res.result.dzList | 689 | this.zdDzList = res.result.dzList |
... | @@ -999,7 +1039,7 @@ | ... | @@ -999,7 +1039,7 @@ |
999 | li { | 1039 | li { |
1000 | padding: 5px; | 1040 | padding: 5px; |
1001 | line-height: 20px; | 1041 | line-height: 20px; |
1002 | color: #BBB; | 1042 | color: #4A4A4A; |
1003 | .label{ | 1043 | .label{ |
1004 | color: #4A4A4A; | 1044 | color: #4A4A4A; |
1005 | display: inline-block; | 1045 | display: inline-block; |
... | @@ -1015,6 +1055,9 @@ | ... | @@ -1015,6 +1055,9 @@ |
1015 | word-break: break-all; | 1055 | word-break: break-all; |
1016 | } | 1056 | } |
1017 | } | 1057 | } |
1058 | .hasChoosed{ | ||
1059 | color: #BBB; | ||
1060 | } | ||
1018 | } | 1061 | } |
1019 | .zdjbxx{ | 1062 | .zdjbxx{ |
1020 | width: 380px; | 1063 | width: 380px; |
... | @@ -1095,7 +1138,7 @@ | ... | @@ -1095,7 +1138,7 @@ |
1095 | height: auto; | 1138 | height: auto; |
1096 | width: 100%; | 1139 | width: 100%; |
1097 | position: relative; | 1140 | position: relative; |
1098 | top: 36px; | 1141 | top: 20px; |
1099 | .table { | 1142 | .table { |
1100 | margin-top: 12px; | 1143 | margin-top: 12px; |
1101 | box-sizing: border-box; | 1144 | box-sizing: border-box; |
... | @@ -1158,6 +1201,7 @@ | ... | @@ -1158,6 +1201,7 @@ |
1158 | /*padding: 0 18px;*/ | 1201 | /*padding: 0 18px;*/ |
1159 | overflow: auto; | 1202 | overflow: auto; |
1160 | margin-top: 26px; | 1203 | margin-top: 26px; |
1204 | margin-bottom: 70px; | ||
1161 | table { | 1205 | table { |
1162 | margin: 0 20px; | 1206 | margin: 0 20px; |
1163 | } | 1207 | } |
... | @@ -1171,7 +1215,8 @@ | ... | @@ -1171,7 +1215,8 @@ |
1171 | text-align: left; | 1215 | text-align: left; |
1172 | text-indent: 20px; | 1216 | text-indent: 20px; |
1173 | .zxx{ | 1217 | .zxx{ |
1174 | // padding-right: 10px; | 1218 | padding-right: 8px; |
1219 | margin-right: 4px; | ||
1175 | position: relative; | 1220 | position: relative; |
1176 | i{ | 1221 | i{ |
1177 | display: none; | 1222 | display: none; | ... | ... |
-
Please register or sign in to post a comment