宗地分割细节优化
Showing
2 changed files
with
84 additions
and
34 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) { |
| 622 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ | 640 | if(this.zdDzList[childIndex].hasChoosed === '' || this.zdDzList[childIndex].hasChoosed === index){ |
| 623 | this.zdFghData.newZdlist[index].fwlist.push({ | 641 | this.zdDzList[childIndex].hasChoosed = index; |
| 624 | zbsm: bsm, | 642 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ |
| 625 | ztype: 'dz' | 643 | this.zdFghData.newZdlist[index].fwlist.push({ |
| 626 | }); | 644 | zbsm: bsm, |
| 627 | this.zdFghData.newZdlist[index].dz.push(obj) | 645 | ztype: 'dz' |
| 646 | }); | ||
| 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) { |
| 633 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ | 659 | if(this.zdZrzList[childIndex].hasChoosed === '' || this.zdZrzList[childIndex].hasChoosed === index){ |
| 634 | this.zdFghData.newZdlist[index].fwlist.push({ | 660 | this.zdZrzList[childIndex].hasChoosed = index; |
| 635 | zbsm: bsm, | 661 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ |
| 636 | ztype: 'zrz' | 662 | this.zdFghData.newZdlist[index].fwlist.push({ |
| 637 | }) | 663 | zbsm: bsm, |
| 638 | this.zdFghData.newZdlist[index].zrz.push(obj) | 664 | ztype: 'zrz' |
| 665 | }) | ||
| 666 | this.zdFghData.newZdlist[index].zrz.push(obj); | ||
| 667 | this.tempBsmList.push(bsm); | ||
| 668 | }else{ | ||
| 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 | } | ||
| 639 | }else{ | 673 | }else{ |
| 640 | this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm) | 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