Skip to content

任超 / js.CadastralSystem

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

权利性质组件修改

1 parent d808f425
Inline Side-by-side
Showing 1 changed file with 228 additions and 215 deletions
......@@ -5,143 +5,148 @@
v-for="(items, index) in countList"
:key="items.id"
>
<el-col :span="2" class="btnCol">
<el-button
v-if="!items.isInside"
type="primary"
class="changeBtn"
@click="handleClick(items.id, index, 'add')"
>+</el-button
>
<el-button
v-if="!items.isInside"
type="primary"
class="changeBtn"
@click="handleClick(items.id, index, 'minus')"
>-</el-button
>
<div
:class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
v-if="items.isInside"
></div>
</el-col>
<el-col :span="2" class="btnCol">
<span class="qlxz">权利性质</span><br>
<el-button
type="primary"
class="changeBtn"
@click="handleInClick(items, index, 'add')"
>+</el-button
>
<el-button
type="primary"
class="changeBtn"
@click="handleInClick(items, index, 'minus')"
>-</el-button
>
</el-col>
<el-col :span="3">
<ul>
<li>批准用途</li>
<li>实际用途</li>
<li>土地使用起始时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="4">
<ul>
<li>
<el-select class="formSelect percent30" v-model="items.pzyt">
<el-option
v-for="item in $store.state.tdytList"
:key="item.dm"
:label="item.mc"
:value="item.dm"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="items.sjyt">
<el-option
v-for="item in $store.state.tdytList"
:key="item.dm"
:label="item.mc"
:value="item.dm"
>
</el-option>
</el-select>
</li>
<li>
<el-date-picker
v-model="items.tdsyqssj"
type="date"
placeholder="选择日期"
<template v-for="(childItem,childIndex) in items.addQjTdytRequestList" >
<el-col :span="2" class="btnCol" :key="childIndex+'1'" :class="childIndex>0 ? 'childYT noTopBorder':''">
<el-button
v-show="childIndex<1"
type="primary"
class="changeBtn"
@click="handleClick( index, 'add')"
>+</el-button
>
<el-button
v-show="childIndex<1"
type="primary"
class="changeBtn"
@click="handleClick( index, 'minus')"
>-</el-button
>
<div
:class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
v-if="items.isInside"
></div>
</el-col>
<el-col :span="2" class="btnCol" :key="childIndex+'8'" :class="childIndex>0 ? 'childYT':''">
<!-- <template v-if="childIndex>0"> -->
<span class="qlxz" v-show="childIndex<1">权利性质</span><br>
<el-button
type="primary"
class="changeBtn"
@click="handleInClick(index, childIndex, 'add')"
>+</el-button
>
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="3">
<ul>
<li>地类编码</li>
<li>地类编码</li>
<li>年限<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="3">
<ul>
<li>
<input type="text" v-model="items.pzyt" class="formInput" />
</li>
<li>
<input type="text" v-model="items.sjyt" class="formInput" />
</li>
<li>
<input type="text" v-model="items.nx" class="formInput" />
</li>
</ul>
</el-col>
<el-col :span="3">
<ul>
<li>等级</li>
<li>等级</li>
<li>土地使用结束时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="4">
<ul>
<li>
<el-select class="formSelect percent30" v-model="items.dj1">
<el-option
v-for="item in $store.state.tddjList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
<el-button
type="primary"
class="changeBtn"
@click="handleInClick(index, childIndex, 'minus')"
>-</el-button
>
<!-- </template> -->
</el-col>
<el-col :span="3" :key="childIndex+'7'" :class="childIndex>0 ? 'childYT':''">
<ul>
<li>批准用途</li>
<li>实际用途</li>
<li>土地使用起始时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
<ul>
<li>
<el-select class="formSelect percent30" v-model="childItem.pzytdm">
<el-option
v-for="item in $store.state.tdytList"
:key="item.dm"
:label="item.mc"
:value="item.dm"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="childItem.sjytdm">
<el-option
v-for="item in $store.state.tdytList"
:key="item.dm"
:label="item.mc"
:value="item.dm"
>
</el-option>
</el-select>
</li>
<li>
<el-date-picker
v-model="childItem.tdsyqssj"
type="date"
placeholder="选择日期"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="items.dj2">
<el-option
v-for="item in $store.state.tddjList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex+'5'" :class="childIndex>0 ? 'childYT':''">
<ul>
<li>地类编码</li>
<li>地类编码</li>
<li>年限<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex+'4'" :class="childIndex>0 ? 'childYT':''">
<ul>
<li>
<input type="text" v-model="childItem.pzytdm" class="formInput" />
</li>
<li>
<input type="text" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<input type="text" v-model="childItem.syqx " class="formInput" />
</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex+'2'" :class="childIndex>0 ? 'childYT':''">
<ul>
<li>等级</li>
<li>等级</li>
<li>土地使用结束时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex+'3'" class="noRightBorder" :class="childIndex>0 ? 'childYT ':''">
<ul>
<li>
<el-select class="formSelect percent30" v-model="childItem.pzdjbsm">
<el-option
v-for="item in $store.state.tddjList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="childItem.sjdjbsm">
<el-option
v-for="item in $store.state.tddjList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</li>
<li>
<el-date-picker
v-model="childItem.tdsyjssj"
type="date"
placeholder="选择日期"
>
</el-option>
</el-select>
</li>
<li>
<el-date-picker
v-model="items.tdsyjssj"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</li>
</ul>
</el-col>
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<div class="title">
<el-select class="formSelect" v-model="items.qlxzdm">
<el-option
......@@ -161,37 +166,22 @@
import { getDdicByMC } from "../../api/common";
export default {
props: {
widtd: {
type: String,
default: "70%",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
// widtd: {
// type: String,
// default: "70%",
// },
},
data() {
return {
countList: [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
qlxzdm: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
"bsm": "",//权利性质标识码
"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
"qlxzdm": "",
"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList:[
{
"pzdjbsm": "",
......@@ -220,23 +210,37 @@ export default {
},
methods: {
//外层操作
handleClick(id, ind, type) {
handleClick( ind, type) {
let outsideObj = {
id: Math.random(),
isInside: false,
hasNotBorder: false,
"bsm": "",//权利性质标识码
"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
"qlxzdm": "",
"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList:[
{
"pzdjbsm": "",
"pzdjmc": "",
"pzytdm": "",
"pzytmc": "",
"pzytmj": 0,
"qlxzbsm": "",
"sjdjbsm": "",
"sjdjmc": "",
"sjytdm": "",
"sjytmc": "",
"sjytmj": 0,
"syqx": "",
"tdsyjssj": "2020-10-23",
"tdsyqssj": "2020-10-20",
"tdzh": ""
}
]
};
if (type === "add") {
this.countList.push({
id: Math.random(),
isInside: false,
hasNotBorder: false,
qlxzdm: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
});
this.countList.push(outsideObj);
this.outNum++
} else {
this.countList.forEach((item, index) => {
......@@ -246,50 +250,34 @@ export default {
});
this.outNum--
}
this.hasBorderOrNot();
},
//内层操作
handleInClick(obj, ind, type) {
handleInClick(index, childIndex, type) {
let insideObj = {
"pzdjbsm": "",
"pzdjmc": "",
"pzytdm": "",
"pzytmc": "",
"pzytmj": 0,
"qlxzbsm": "",
"sjdjbsm": "",
"sjdjmc": "",
"sjytdm": "",
"sjytmc": "",
"sjytmj": 0,
"syqx": "",
"tdsyjssj": "2020-10-23",
"tdsyqssj": "2020-10-20",
"tdzh": ""
};
if (type === "add") {
this.countList.splice(ind + 1, 0, {
id: obj.id,
childId: Math.random(),
isInside: true,
hasNotBorder: false,
qlxzdm: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
});
this.countList[index].addQjTdytRequestList.splice(childIndex + 1, 0, insideObj);
} else {
if (obj.childId) {
this.countList.forEach((item, index) => {
if (item.childId == obj.childId && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
} else {
let tempNum = 0;
let tempIndex = 0;
this.countList.forEach((item, index) => {
if (item.id == obj.id && this.countList.length > 1) {
tempIndex = tempNum == 0 ? index : tempIndex;
tempNum++;
}
});
//判断外层是否没有增加，如果没有增加，则不能删除当前外层
if(ind == 0 && this.outNum == 0){
}else{
this.countList.splice(tempIndex, tempNum);
this.countList[index].addQjTdytRequestList.forEach((item, childInd) => {
if (childIndex == childInd && this.countList[index].addQjTdytRequestList.length > 1) {
this.countList[index].addQjTdytRequestList.splice(childIndex, 1);
}
}
});
}
this.hasBorderOrNot();
},
......@@ -313,11 +301,11 @@ export default {
.temp {
width: 100%;
.qlxzModule {
height: 148px;
height: auto;
position: relative;
border-bottom: 1px solid grey;
.el-col {
height: 100%;
// height: 100%;
border-right: 1px solid grey;
position: relative;
.qlxz {
......@@ -356,6 +344,30 @@ export default {
bottom: 2px;
}
}
.childYT{
height: 114px;
border-top: 1px solid grey;
ul {
margin-top: 0;
li{
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button + .el-button {
margin-top: 4px;
}
}
.noTopBorder{
border-top: 0;
}
.noRightBorder{
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
......@@ -372,13 +384,14 @@ export default {
top: -1px;
width: 100%;
.el-input__inner {
height: 34px;
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 147px;
.changeBtn {
width: 46px;
height: 46px;
......