<template>
<div class="temp">
<el-row
class="qlxzModule"
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="选择日期"
>
</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-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-option>
</el-select>
</li>
<li>
<el-date-picker
v-model="items.tdsyjssj"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</li>
</ul>
</el-col>
<div class="title">
<el-select class="formSelect" v-model="items.qlxz">
<el-option
v-for="item in $store.state.qlxzList"
:key="item.bsm"
:label="item.mc"
:value="item.bsm"
>
</el-option>
</el-select>
</div>
</el-row>
</div>
</template>
<script>
import { getDdicByMC } from "../../api/common";
export default {
props: {
widtd: {
type: String,
default: "70%",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
},
data() {
return {
countList: [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
qlxz: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
},
],
outNum:0
};
},
created(){
},
methods: {
//外层操作
handleClick(id, ind, type) {
if (type === "add") {
this.countList.push({
id: Math.random(),
isInside: false,
hasNotBorder: false,
qlxz: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
});
this.outNum++
} else {
this.countList.forEach((item, index) => {
if (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--
}
this.hasBorderOrNot();
},
//内层操作
handleInClick(obj, ind, type) {
if (type === "add") {
this.countList.splice(ind + 1, 0, {
id: obj.id,
childId: Math.random(),
isInside: true,
hasNotBorder: false,
qlxz: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
});
} 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.hasBorderOrNot();
},
//判断是否显示边框
hasBorderOrNot() {
this.countList.forEach((item, index) => {
if (index == this.countList.length - 1) {
item.hasNotBorder = true;
} else {
item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false;
}
});
},
getQlxzDataList() {
return this.countList;
},
},
};
</script>
<style lang="less">
.temp {
width: 100%;
.qlxzModule {
height: 148px;
position: relative;
border-bottom: 1px solid grey;
.el-col {
height: 100%;
border-right: 1px solid grey;
position: relative;
.qlxz {
line-height: 34px;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid grey;
.el-select{
width: 100%;
}
.el-input{
width: 100%;
}
.el-input__inner {
height: 34px;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 83.33333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid grey;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 34px;
}
}
}
}
.btnCol {
position: relative;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button + .el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
}
</style>