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 303 additions and 181 deletions
......@@ -32,3 +32,37 @@ export default {
},
};
</script>
<style lang="less">
.popper-zxx{
padding: 0!important;
/deep/ .el-tabs__header{
margin-bottom: 10px;
}
ul{
margin-bottom: 10px;
li{
cursor: pointer;
padding: 4px 16px;
position: relative;
i{
position: absolute;
right: 20px;
top: 6px;
color: #4EB2FF;
display: none;
}
}
li:hover{
background: #eee;
}
.choosed{
color: #4EB2FF;
background-color: #F0F9FF!important;
i{
display: inline-block;
}
}
}
}
</style>
\ No newline at end of file
......
......@@ -8,9 +8,9 @@
<div class="fgq">
<el-card class="data">
<div slot="header" class="clearfix">
<span>基本信息</span>
<span>宗地基本信息</span>
</div>
<ul>
<ul class="zdjbxx">
<li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li>
<li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li>
<li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li>
......@@ -18,178 +18,203 @@
<li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li>
<li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li>
</ul>
<div class="zdmap">
</div>
</el-card>
<div class="zxx">
<el-card class="dz">
<div slot="header" class="clearfix">
<span>多幢信息({{zdZxx.dzList.length}}个)</span>
</div>
<ul>
<li v-for="(item,index) in zdZxx.dzList" :key="index"
:class="[{'search':!zdDzList.includes(item)}]"
><span class="label">多幢名称:</span> <span class="value">{{item.displays}}</span>
</li>
</ul>
</el-card>
<el-card class="zrz">
<div slot="header" class="clearfix">
<span>多幢信息({{zdZxx.dzList.length}}个)</span>，
<span>自然幢信息({{zdZxx.zrzList.length}}个)</span>
</div>
<ul>
<li v-for="(item,index) in zdZxx.zrzList" :key="index"
<li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc"
:class="[{'search':!zdDzList.includes(item)}]"
>{{item.displays}}
</li>
<li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc"
:class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]">
{{item.displays}}
</li>
</ul>
<div class="line"></div>
</el-card>
</div>
</div>
<div class="fgh">
<div class="fgh" :style="{'minHeight':tableHeight+'px'}">
<span class="tips">分割后宗地信息</span>
<table border="1">
<tr>
<th class="cz">操作</th>
<th class="cz"><el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="addRow"
>+
</el-button
></th>
<th class="xzq">行政区</th>
<th class="djq">地籍区</th>
<th class="djzq">地籍子区</th>
<th class="syqlx">所有权类型</th>
<th class="tdtzm">土地特征码</th>
<th class="xmmc">项目名称</th>
<th class="xzzxx">幢信息</th>
<!-- <th class="xzzxx">幢信息</th> -->
<!-- <th class="">选择</th> -->
</tr>
<tr>
<td>
<el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="addRow"
>+
</el-button
>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr v-for="(item,index) in zdFghData.newZdlist" :key="index">
<td class="cz">
<el-button
type="primary"
class="changeBtn outMinus addMinus"
@click="delRow(index)"
>-
</el-button
>
</td>
<td class="xzq">
<el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="djq">
<el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)">
<el-option
v-for="i in djq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select class="" v-model="item.djzqbsm">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="tdtzm">
<el-select class="" v-model="item.syqlxbsm">
<el-option
v-for="i in syq"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select class="" v-model="item.zdtzmbsm">
<el-option
v-for="i in tdtzm"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="item.xmmc" class="formInput"/>
</td>
<td class="xzzxx">
<!-- <span>多幢:</span>
<ul>
<li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex"
@mouseenter="mouseenter($event,index,dzIndex,'dz')"
@mouseleave="mouseleave($event)">{{dzItem.xmmc}}
<span v-if="dzIndex<item.dz.length-1">,</span>
</li>
</ul>
<span>自然幢:</span>
<ul>
<li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex"
@mouseenter="mouseenter($event,index,zrzIndex,'zrz')"
@mouseleave="mouseleave($event)"
>{{zrzItem.xmmc}}
<span v-if="zrzIndex<item.zrz.length-1">,</span>
</li>
</ul> -->
<span class="zxx">自然幢1 <i class="fa fa-times"></i></span>
<span class="zxx">自然幢2 <i class="fa fa-times"></i></span>
<span class="zxx">自然幢3 <i class="fa fa-times"></i></span>
<span class="zxx">多幢1 <i class="fa fa-times"></i></span>
<span class="choose">选择</span>
</td>
<!-- <td class="">
<el-dropdown @command="dzHandleCommand($event,index)">
<span class="el-dropdown-link">
选择多幢<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(childItem,childIndex) in zdDzList"
:key="childIndex" :command="childItem.bsm">
{{childItem.xmmc}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown @command="zrzHandleCommand($event,index)">
<span class="el-dropdown-link">
选择自然幢<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(childItem,childIndex) in zdZrzList"
:key="childIndex" :command="childItem.bsm">
{{childItem.xmmc}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</td> -->
</tr>
<template v-for="(item,index) in zdFghData.newZdlist">
<tr :key="item.xzqbsm">
<td class="cz" rowspan="2">
<el-button
type="primary"
class="changeBtn outMinus addMinus"
@click="delRow(index)"
>-
</el-button
>
</td>
<td class="xzq">
<el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="djq">
<el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)">
<el-option
v-for="i in djq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select class="" v-model="item.djzqbsm">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="tdtzm">
<el-select class="" v-model="item.syqlxbsm">
<el-option
v-for="i in syq"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select class="" v-model="item.zdtzmbsm">
<el-option
v-for="i in tdtzm"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="item.xmmc" class="formInput"/>
</td>
<!-- <td class="xzzxx">
<span>多幢:</span>
<ul>
<li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex"
@mouseenter="mouseenter($event,index,dzIndex,'dz')"
@mouseleave="mouseleave($event)">{{dzItem.xmmc}}
<span v-if="dzIndex<item.dz.length-1">,</span>
</li>
</ul>
<span>自然幢:</span>
<ul>
<li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex"
@mouseenter="mouseenter($event,index,zrzIndex,'zrz')"
@mouseleave="mouseleave($event)"
>{{zrzItem.xmmc}}
<span v-if="zrzIndex<item.zrz.length-1">,</span>
</li>
</ul>
<span class="zxx">自然幢1 <i class="fa fa-times"></i></span>
<span class="zxx">自然幢2 <i class="fa fa-times"></i></span>
<span class="zxx">自然幢3 <i class="fa fa-times"></i></span>
<span class="zxx">多幢1 <i class="fa fa-times"></i></span>
<span class="choose">选择</span>
</td> -->
<!-- <td class="">
<el-dropdown @command="dzHandleCommand($event,index)">
<span class="el-dropdown-link">
选择多幢<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(childItem,childIndex) in zdDzList"
:key="childIndex" :command="childItem.bsm">
{{childItem.xmmc}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown @command="zrzHandleCommand($event,index)">
<span class="el-dropdown-link">
选择自然幢<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(childItem,childIndex) in zdZrzList"
:key="childIndex" :command="childItem.bsm">
{{childItem.xmmc}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</td> -->
</tr>
<tr :key="index">
<td colspan="6">
<div class="fghzxx">
<div class="choosedZxx">
<span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx">
{{dzItem.xmmc}} <i class="fa fa-times"></i>
</span>
<span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx">
{{zrzItem.xmmc}} <i class="fa fa-times"></i>
</span>
</div>
<p class="choose">
<el-popover
placement="top-end"
width="300"
popper-class="popper-zxx"
style="padding:0 12px"
trigger="click">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="多幢" name="dz">
<ul>
<li :class="zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':''" @click="dzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdDzList" :key="childItem.bsm">
{{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="自然幢" name="zrz">
<ul>
<li :class="zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':''" @click="zrzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdZrzList" :key="childItem.bsm">
{{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i>
</li>
</ul>
</el-tab-pane>
</el-tabs>
<span slot="reference">选择</span>
</el-popover>
</p>
</div>
</td>
</tr>
</template>
</table>
</div>
<zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true"
......@@ -556,6 +581,8 @@
newZdlist: []
},
fgBoxWidth: 0,
tableHeight:0,
activeName:'dz'
}
},
created() {
......@@ -565,6 +592,7 @@
this.getzdtzm();
this.$nextTick(() => {
this.fgBoxWidth = this.$refs.fgBox.clientWidth;
this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 590;
})
},
methods: {
......@@ -654,27 +682,32 @@
ztype: 'zrz'
})
},
dzHandleCommand(command, index) {
let item = this.zdDzList.filter(i => i.bsm == command)[0];
this.zdFghData.newZdlist[index].fwlist.push({
zbsm: command,
ztype: 'dz'
});
this.zdFghData.newZdlist[index].dz.push(item)
this.zdDzList = this.zdDzList.filter(i => i.bsm !== command);
dzHandleCommand(obj,bsm, index) {
if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){
this.zdFghData.newZdlist[index].fwlist.push({
zbsm: bsm,
ztype: 'dz'
});
this.zdFghData.newZdlist[index].dz.push(obj)
}else{
this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm)
}
},
zrzHandleCommand(command, index) {
let item = this.zdZrzList.filter(i => i.bsm == command)[0];
this.zdFghData.newZdlist[index].fwlist.push({
zbsm: command,
ztype: 'zrz'
})
this.zdFghData.newZdlist[index].zrz.push(item)
this.zdZrzList = this.zdZrzList.filter(i => i.bsm !== command);
zrzHandleCommand(obj,bsm, index) {
if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){
this.zdFghData.newZdlist[index].fwlist.push({
zbsm: bsm,
ztype: 'zrz'
})
this.zdFghData.newZdlist[index].zrz.push(obj)
}else{
this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm)
}
},
ZdgetDzXx(zdbsm) {
ZdfggetZxx(zdbsm).then(res => {
if (res.success) {
console.log(res.result,'res.result');
this.zdZxx = res.result;
this.zdZrzList = res.result.zrzList
this.zdDzList = res.result.dzList
......@@ -951,6 +984,7 @@
</script>
<style scoped lang="less">
.fg {
.menu {
/deep/ .el-tabs__content {
position: unset;
......@@ -990,6 +1024,14 @@
}
}
}
/deep/ .el-card__header{
padding: 16px 20px;
background-color: #F2F2F2;
border: 1px solid #DBDBDB;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
.v-model {
......@@ -1003,7 +1045,7 @@
flex-direction: column;
flex-flow: nowrap;
.data{
width: 36%;
width: 40%;
}
.el-card {
border: 1px solid #E6E6E6;
......@@ -1027,16 +1069,30 @@
display: inline-block;
width: 104px;
text-align: right;
vertical-align: top;
}
.value{
color: #6D7278;
display: inline-block;
padding-left: 10px;
width: calc(100% - 116px);
word-break: break-all;
}
}
}
.zdjbxx{
width: 380px;
height: 200px;
float: left;
}
.zdmap{
width: calc(100% - 380px);
height: 200px;
float: left;
}
}
.zxx {
width: calc(64% - 40px);
width: calc(60% - 40px);
margin-left: 20px;
display: flex;
flex-direction: column;
......@@ -1070,14 +1126,16 @@
}
.zrz {
width: 66%;
margin-left: 20px;
width: 100%;
overflow: auto;
}
ul {
overflow: auto;
width: 100%;
float: left;
margin-left: 10px;
li {
width: 48%;
width: 23%;
padding: 5px;
text-align: left;
line-height: 20px;
......@@ -1096,9 +1154,6 @@
}
}
.oddborder {
border-right: 1px solid #000;
}
.fg-tabs {
height: auto;
......@@ -1129,13 +1184,16 @@
overflow: visible;
text-align: center;
}
tr:nth-of-type(odd) {
background: #FAFAFA;
}
// tr:nth-of-type(odd) {
// background: #FAFAFA;
// }
tr{
th,td{
height: 44px;
}
th{
background: #FAFAFA;
}
}
tr:hover {
......@@ -1162,12 +1220,43 @@
.fgh {
box-sizing: border-box;
/*padding: 0 18px;*/
height: 480px;
overflow: auto;
margin-top: 26px;
table {
margin: 0 20px;
}
.fghzxx{
width: 100%;
height: 100%;
line-height: 44px;
.choosedZxx{
width:calc(100% - 88px);
float: left;
text-align: left;
text-indent: 20px;
.zxx{
padding-right: 10px;
position: relative;
i{
display: none;
position: absolute;
right: 4px;
top: -6px;
}
}
.zxx:hover{
i{
display: inline-block;
}
}
}
.choose{
width: 88px;
color: #30A4FD;
cursor: pointer;
float: right;
}
}
.tips {
display: inline-block;
margin-bottom: 14px;
......@@ -1221,10 +1310,6 @@
display: inline;
}
}
.choose{
color: #30A4FD;
cursor: pointer;
}
}
.cz, .xh {
......@@ -1238,4 +1323,7 @@
.search {
color: #BBB !important;
}
/deep/ .el-select{
width: 100%;
}
</style>
......