Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
17404ef3 by 杨威
Options

新增权利性质组件

1 parent f49ca0ed
Inline Side-by-side
Showing 1 changed file with 336 additions and 0 deletions
<template>
<div class="temp">
<el-row
class="qlxzModule"
v-for="(items, index) in countList"
:key="items.id"
>
<el-col :span="2">
<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
>
</el-col>
<el-col :span="2">
<span class="qlxz">权利性质</span>
<el-button
type="primary"
class="changeBtn mt6"
@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>土地使用起始时间</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 compareList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="items.sjyt">
<el-option
v-for="item in compareList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</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>年限</li>
</ul>
</el-col>
<el-col :span="3">
<ul>
<li>
<input type="text" v-model="items.dlbm" class="formInput" />
</li>
<li>
<input type="text" v-model="items.dlbm2" 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>土地使用结束时间</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 compareList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</li>
<li>
<el-select class="formSelect percent30" v-model="items.dj2">
<el-option
v-for="item in compareList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</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 compareList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-row>
</div>
</template>
<script>
export default {
props: {
widtd: {
type: String,
default: "70%",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
},
data() {
return {
compareList: [
{ label: "=", value: "=" },
{ label: "<=", value: "<=" },
{ label: ">=", value: ">=" },
],
countList: [
{
id: Math.random(),
isInside: false,
qlxz: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
},
],
};
},
methods: {
//外层操作
handleClick(id, ind, type) {
if (type === "add") {
this.countList.splice(ind + 1, 0, {
id: Math.random(),
isInside: false,
qlxz: "",
pzyt: "",
sjyt: "",
tdsyqssj: "",
dlbm: "",
dlbm2: "",
nx: "",
dj1: "",
dj2: "",
tdsyjssj: "",
});
} else {
this.countList.forEach((item, index) => {
if (item.id == id && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
}
},
//内层操作
handleInClick(obj, ind, type) {
if (type === "add") {
this.countList.splice(ind + 1, 0, {
id: obj.id,
childId: Math.random(),
isInside: true,
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++;
}
});
this.countList.splice(tempIndex,tempNum)
}
}
},
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;
.qlxz {
line-height: 34px;
}
.mt6 {
margin-top: 6px;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid grey;
.el-input__inner {
height: 34px;
width: 164px;
}
}
li:last-child {
border-bottom: none;
}
}
}
.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;
}
}
}
.changeBtn {
width: 46px;
height: 46px;
margin-top: 40px;
font-size: 30px;
padding: 6px 4px;
}
.el-button + .el-button {
margin-top: 10px;
margin-left: 0;
}
}
.qlxzModule:nth-last-child(1) {
border-bottom: none;
}
}
</style>