Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
b7f1eeee by 杨威
Options

宗地合并页面重绘

1 parent d2059be8
Inline Side-by-side
Showing 4 changed files with 276 additions and 114 deletions
......@@ -64,7 +64,7 @@ export function getZdxx(bsm) {
}
/**
* 宗地分割获取幢信息
* 根据zdbsm获取宗地下的幢信息
*/
export function ZdfggetZxx(zdbsm) {
return request({
......
......@@ -70,6 +70,9 @@ ol, ul { list-style:none; }
font-style: normal;
color: red;
}
.top20{
top: 20px;
}
// 滚动条样式
::-webkit-scrollbar {
width: 6px;
......
......@@ -2,7 +2,7 @@
<div class="fg" ref="fgBox">
<el-tabs v-model="tabName" type="card" class="menu">
<el-tab-pane label="宗地分割" name="zd">
<div class="fg-tabs">
<div class="fg-tabs top20">
<span class="tips">分割前宗地信息</span>
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="fgq">
......@@ -186,7 +186,7 @@
</div>
</el-tab-pane>
<el-tab-pane label="多幢分割" name="dz">
<div class="fg-tabs">
<div class="fg-tabs top20">
<span class="tips">分割前多幢信息</span>
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="fgq">
......
......@@ -2,10 +2,9 @@
<div class="hb" ref="hbBox">
<el-tabs v-model="tabName" class="menu" @tab-click="handleClick">
<el-tab-pane label="宗地合并" name="zd">
<div class="hb-tabs">
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="hb-tabs top20">
<span class="tips">合并前宗地信息</span>
<div class="hbq">
<span class="tips">合并前宗地信息</span>
<table border="1">
<tr>
<td class="xh">序号</td>
......@@ -15,7 +14,14 @@
<td class="bdcqzh">不动产权证号</td>
<td class="qlr">权利人</td>
<td class="zl">坐落</td>
<td>操作</td>
<td>
<el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="newAdd"
>+
</el-button>
</td>
</tr>
<tr v-if="zdhbqData.length==0">
<td colspan="8">
......@@ -36,92 +42,126 @@
readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl"
readonly="readonly"/></td>
<td class="cz" @click="deleteData(index)"><span>删除</span></td>
<td class="cz">
<el-button
type="primary"
class="changeBtn outMinus addMinus"
@click="deleteData(item,index)"
>-
</el-button>
</td>
</tr>
</table>
</div>
<span class="tips">合并后宗地信息</span>
<div class="hbh">
<span class="tips">合并后宗地信息</span>
<table border="1">
<tr>
<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="zxx">幢信息</th>
</tr>
<tr>
<td class="xzq">
<el-select v-model="zdhbhData.xzqbsm" @change="changeXzq(zdhbhData.xzqbsm)">
<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 v-model="zdhbhData.djqbsm" @change="changeDjq(zdhbhData.djqbsm)">
<el-option
<el-card class="data">
<div slot="header" class="clearfix">
<span>宗地基本信息</span>
</div>
<ul class="zdjbxx">
<li>
<span class="label">行政区:</span>
<span class="value">
<el-select v-model="zdhbhData.xzqbsm" @change="changeXzq(zdhbhData.xzqbsm)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</span>
</li>
<li>
<span class="label">地籍区:</span>
<span class="value">
<el-select v-model="zdhbhData.djqbsm" @change="changeDjq(zdhbhData.djqbsm)">
<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 v-model="zdhbhData.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 v-model="zdhbhData.syqlxbsm">
<el-option
></el-option>
</el-select>
</span>
</li>
<li>
<span class="label">地籍子区:</span>
<span class="value">
<el-select v-model="zdhbhData.djzqbsm" @change="$forceUpdate()">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</span>
</li>
<li>
<span class="label">所有权类型:</span>
<span class="value">
<el-select v-model="zdhbhData.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 v-model="zdhbhData.zdtzmbsm">
<el-option
v-for="i in tdtzm"
></el-option>
</el-select>
</span>
</li>
<li>
<span class="label">宗地特征码:</span>
<span class="value">
<el-select v-model="zdhbhData.zdtzmbsm">
<el-option
v-for="i in $store.state.zdtzmList"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="zdhbhData.xmmc" class="formInput"/>
</td>
<td class="zxx">
<span class="xz">选择</span>
</td>
</tr>
</table>
></el-option>
</el-select>
</span>
</li>
<li>
<span class="label">项目名称:</span>
<span class="value">
<el-input type="text" v-model="zdhbhData.xmmc"></el-input>
</span>
</li>
</ul>
</el-card>
<div class="zxx">
<el-card class="zrz">
<div slot="header" class="clearfix">
<span style="margin-right:10px">幢信息</span>
<span style="margin-right:10px"><i class="iconfont iconduochuang"></i>多幢<span style="color:red">{{zdDzList.length}}</span>幢</span>
<span><i class="iconfont iconziranchuang"></i>自然幢<span style="color:red">{{zdZrzList.length}}</span>幢</span>
</div>
<ul>
<li v-for="(item,index) in zdDzList" :key="index+item.xmmc"
>
<i class="iconfont iconduochuang"></i> {{item.displays}}
</li>
<li v-for="(item,index) in zdZrzList" :key="index+item.xmmc"
>
<i class="iconfont iconziranchuang"></i> {{item.displays}}
</li>
</ul>
</el-card>
</div>
</div>
<zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true"
@close="close"></zd-query-data>
<div class="header-button" :style="{width:fgBoxWidth+'px'}">
<el-button type="primary" class="saveBtn" @click="save">保存</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="多幢合并" name="dz">
<div class="hb-tabs">
<div class="hb-tabs top20">
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="hbq">
<span class="tips">合并前多幢信息</span>
......@@ -155,7 +195,7 @@
readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl"
readonly="readonly"/></td>
<td class="cz" @click="deleteData(index)"><span>删除</span></td>
<td class="cz" @click="deleteData(item,index)"><span>删除</span></td>
</tr>
</table>
</div>
......@@ -203,7 +243,7 @@
getDdicByMC
} from "@api/common";
import {ZdHb} from "@api/zd"
import {saveDzHb} from "@api/dz"
import {saveDzHb,ZdfggetZxx} from "@api/dz"
import QueryData from '@components/queryData/queryData'
import zdQueryData from '@components/zdQueryData/zdQueryData'
import hfghb from '../hfghb/index'
......@@ -218,7 +258,6 @@
centerDialogVisible: false,
zdhbqData: [], // 宗地合并前数据
dzhbqData: [], // 多幢合并前数据
hhbqData: [], // 户合并前数据
zdhbhData: {}, // 宗地合并后数据
dzhbhData: [
{
......@@ -230,7 +269,6 @@
xzq: [],
djq: [],
djzq: [],
tdtzm: [],
syq: [
{
label: "国家所有",
......@@ -246,13 +284,14 @@
}
],
hhbtabs:false,
zdDzList:[],
zdZrzList:[],
}
},
created() {
},
mounted() {
this.getXzqList();
this.getzdtzm();
this.$nextTick(() => {
this.fgBoxWidth = this.$refs.hbBox.clientWidth;
})
......@@ -312,26 +351,23 @@
hHb(){
},
deleteData(index){
deleteData(item,index){
switch (this.tabName) {
case "zd":
this.zdhbqData.splice(index,1)
this.zdhbqData.splice(index,1);
//删除幢信息中的数据
console.log(item);
console.log(this.zdZrzList,'this.zdZrzList');
this.zdZrzList = this.zdZrzList.filter(i => i.zdbsm!== item.zdbsm);
this.zdDzList = this.zdDzList.filter(i => i.zdbsm!== item.zdbsm);
break
case "dz":
this.dzhbqData.splice(index,1)
break
case "h":
this.hhbqData.splice(index,1)
break
default:
break
}
},
getzdtzm() {
getDdicByMC('宗地（宗海）特征码').then(res => {
this.tdtzm = res.result
})
},
getXzqList() {
getAllList()
.then((res) => {
......@@ -345,16 +381,12 @@
this.djzq = [];
switch (this.tabName) {
case "zd":
this.zdhbqData.djqbsm = '';
this.zdhbqData.djzqbsm = '';
this.zdhbhData.djqbsm = '';
this.zdhbhData.djzqbsm = '';
break
case "dz":
this.dzhbqData.djqbsm = '';
this.dzhbqData.djzqbsm = '';
break
case "h":
this.hhbqData.djqbsm = '';
this.hhbqData.djzqbsm = '';
this.zdhbhData.djqbsm = '';
this.zdhbhData.djzqbsm = '';
break
default:
break
......@@ -374,14 +406,11 @@
this.djzq = [];
switch (this.tabName) {
case "zd":
this.zdhbqData.djzqbsm = '';
this.zdhbhData.djzqbsm = '';
break
case "dz":
this.dzhbqData.djzqbsm = '';
break
case "h":
this.hhbqData.djzqbsm = '';
break
default:
break
}
......@@ -409,11 +438,32 @@
let arr=[];
switch (this.tabName) {
case "zd":
arr=this.zdhbqData.filter(i=>i.zdbsm==data.zdbsm);
arr=this.zdhbqData.filter(i=>i.zdbsm==data.zdbsm);
if (arr.length>0) {
break
}
this.zdhbqData.push(data);
ZdfggetZxx(data.zdbsm).then(res => {
if (res.success) {
console.log(res.result,'res.result');
res.result.zrzList.forEach(item=>{
item.zdbsm = data.zdbsm
})
res.result.dzList.forEach(item=>{
item.zdbsm = data.zdbsm
})
if(this.zdZrzList.length == 0){
this.zdZrzList = res.result.zrzList
}else{
this.zdZrzList = this.zdZrzList.concat(res.result.zrzList)
}
if(this.zdDzList.length == 0){
this.zdDzList = res.result.dzList
}else{
this.zdDzList = this.zdDzList.concat(res.result.dzList)
}
}
})
break
case "dz":
arr=this.dzhbqData.filter(i=>i.glbsm==data.glbsm);
......@@ -425,16 +475,6 @@
}
this.dzhbqData.push(data);
break
case "h":
arr=this.hhbqData.filter(i=>i.glbsm==data.glbsm);
if (arr.length>0) {
break
}
if (this.hhbqData.includes(data)) {
break
}
this.hhbqData.push(data);
break
default:
break;
}
......@@ -580,7 +620,7 @@
td {
text-align: center;
height: 36px;
height: 40px;
min-width: 50px;
}
......@@ -609,16 +649,135 @@
}
.tips {
color: #9B9B9B;
margin-left: 20px;
}
.hbq {
margin-top: 12px;
box-sizing: border-box;
padding: 18px;
margin-left: 20px;
margin-top: 14px;
margin-bottom: 20px;
}
.hbh {
box-sizing: border-box;
padding: 0 18px;
margin-top: 10px;
margin-left: 20px;
margin-top: 14px;
margin-bottom: 70px;
display: flex;
flex-direction: column;
flex-flow: nowrap;
.data{
width: 40%;
float: left;
}
.el-card {
border: 1px solid #E6E6E6;
background-color: white;
overflow: auto;
.clearfix{
span{
color: #9B9B9B;
}
}
/deep/ .el-card__body{
padding:10px 12px;
}
ul {
li {
padding: 5px;
line-height: 20px;
color: #4A4A4A;
.label{
vertical-align: middle;
color: #4A4A4A;
display: inline-block;
width: 104px;
text-align: right;
}
.value{
vertical-align: middle;
color: #6D7278;
display: inline-block;
padding-left: 10px;
width: calc(100% - 116px);
word-break: break-all;
}
}
.hasChoosed{
color: #BBB;
}
}
.zdjbxx{
width: 100%;
height: 320px;
margin-bottom: 10px;
float: left;
}
.zdmap{
width: calc(100% - 380px);
height: 200px;
float: left;
}
}
.zxx {
width: calc(60% - 40px);
margin-left: 20px;
display: flex;
flex-direction: column;
flex-flow: nowrap;
float: left;
.title {
color: red;
text-align: center;
padding: 5px 0;
}
/deep/ .el-card__body{
height: 200px;
overflow-y: scroll;
position: relative;
}
.line{
width: 1px;
height: calc(100% - 20px);
background-color: #EDEDED;
position: absolute;
top: 10px;
left: 50%;
}
.dz {
width: 33%;
overflow: auto;
ul{
li{
width: 96% !important;
}
}
}
.zrz {
width: 100%;
overflow: auto;
}
ul {
overflow: auto;
width: 100%;
float: left;
margin-left: 10px;
li {
width: 23%;
padding: 5px;
text-align: left;
line-height: 20px;
display: inline-block;
.label{
width: 90px;
}
}
li:nth-of-type(even){
.label{
width: 110px;
text-indent: 20px;
}
}
}
}
}
}
.cz{
......