Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
76de1151 by weimo934
Options

feat(plh):批量户组件

1 parent 6ab56ace
Inline Side-by-side
Showing 1 changed file with 274 additions and 0 deletions
<template>
<div>
<el-dialog
title="新增"
:visible.sync="isVisible"
width="50%"
@close="close"
:modal-append-to-body="false"
center>
<div>
<table border="1">
<tr>
<td rowspan="6">预测</td>
<td>建筑面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td rowspan="6">实测</td>
<td>建筑面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td>套内建筑面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td>套内建筑面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td>分摊建筑面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td>分摊建筑面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td>地下部分建筑面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td>地下部分建筑面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td>其他建筑面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td>其他建筑面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td>分摊系数</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td>分摊系数</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td colspan="2">户型</td>
<td colspan="2">
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td colspan="2">户型结构</td>
<td>
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2">共有土地面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td colspan="2">分摊土地面积(㎡)</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td colspan="2">独有土地面积(㎡)</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td colspan="2">房屋类型</td>
<td>
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2">产别</td>
<td colspan="2">
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td colspan="2">产权来源</td>
<td>
<input type="text" class="inputtitle"/>
</td>
</tr>
<tr>
<td colspan="2">房屋性质</td>
<td colspan="2">
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2">房屋结构</td>
<td colspan="5">
<el-select>
<el-option
v-for="i in hx"
:key="i.key"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2">房屋用途</td>
<td>规划用途</td>
<td><input type="text" class="inputtitle"/></td>
<td colspan="2">用途</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td colspan="2">
权利性质
</td>
<td colspan="2">
<input type="text" class="inputtitle"/>
</td>
<td colspan="2">
</td>
<td></td>
</tr>
<tr>
<td colspan="2">东墙体归属</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td colspan="2">南墙体归属</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
<tr>
<td colspan="2">西墙体归属</td>
<td colspan="2"><input type="text" class="inputtitle"/></td>
<td colspan="2">北墙体归属</td>
<td><input type="text" class="inputtitle"/></td>
</tr>
</table>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="result">重置</el-button>
<el-button type="primary" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "plH",
props: {
bsms: {
type: Array
},
plhVisible: {
type: Boolean,
default: false
}
},
data() {
return {
isVisible: false,
hx: [{
label: '一居室',
key: '1',
value: '一居室'
}, {
label: '二居室',
key: '2',
value: '二居室'
}, {
label: '三居室',
key: '3',
value: '三居室'
}
]
}
},
methods: {
close: function () {
this.$emit('close')
this.isVisible = false
this.result()
},
result: function () {
},
save: function () {
},
cancel: function () {
this.$emit('close')
this.isVisible = false
}
},
mounted() {
},
watch: {
plhVisible(val) {
this.isVisible = val
}
}
}
</script>
<style scoped>
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
}
td {
text-align: center;
height: 36px;
min-width: 60px;
}
table:hover {
cursor: pointer;
}
.el-select {
width: 98%;
}
.inputtitle {
line-height: 40px;
width: 95%;
border: none;
outline: none;
}
.shop {
text-align: center;
margin-top: 20px;
}
</style>