Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
527cf058 by zhaoqian
Options

自然幢表单样式提交

1 parent 66a49889
Inline Side-by-side
Showing 2 changed files with 239 additions and 137 deletions
......@@ -8,25 +8,6 @@
width: 100%;
}
.content-left{
width: 40%;
float: left;
//border: 1px solid #fc2b34;
padding: 10px 0 0 10px;
}
.content-left-form{
float: right;
//border: 1px solid #fca118;
}
.content-right{
width: 56%;
float: right;
//border: 1px solid #fca118;
padding: 10px 0 0 10px;
}
.el-row{
border-top: 1px solid grey;
border-left: 1px solid grey;
......@@ -44,4 +25,13 @@
border-right: 1px solid grey;
height: 45px;
}
td{
bgcolor:#F1F4FC;
width:8.33%
}
.el-select{
display:block;
}
}
\ No newline at end of file
......
......@@ -4,60 +4,61 @@
<table border="1" width="100%" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1" style="width:8.33%"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
<tr height="30">
<td colspan="12" align="center" bgcolor="#F1F4FC" style="width:8.33%"><font size="5">自然幢基本信息</font></td>
<td colspan="12" align="center" ><font size="5">自然幢基本信息</font></td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">活动名称</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >宗地代码</td>
<td colspan="4" >
<el-input v-model="form.zdbsm"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">自然幢号</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name" style="width: 70%"></el-input>
<td colspan="2" align="center" >自然幢号</td>
<td colspan="4" >
<el-input v-model="form.zrzh" style="width: 70%"></el-input>
<el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">项目名称</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">不动产单元号</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name" style="width: 70%"></el-input>
<td colspan="2" align="center" >项目名称</td>
<td colspan="4" >
<el-input v-model="form.xmmc"></el-input>
</td>
<td colspan="2" align="center" >不动产单元号</td>
<!-- todo 此处暂时存放的是不动产单元号标识码，而不是不动产单元号-->
<td colspan="4" >
<el-input v-model="form.dyhbsm" style="width: 70%"></el-input>
<el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">建筑物名称</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >建筑物名称</td>
<td colspan="4" >
<el-input v-model="form.jzwmc"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">建筑物基本用途</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >建筑物基本用途</td>
<td colspan="4" >
<el-input v-model="form.jzwjbyt"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">房屋性质</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-select v-model="value" placeholder="请选择" style="display:block;">
<td colspan="2" align="center" >房屋性质</td>
<td colspan="4" >
<el-select v-model="form.fwxzbsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
......@@ -66,10 +67,10 @@
</el-option>
</el-select>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">竣工日期</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="2" align="center" >竣工日期</td>
<td colspan="4" >
<el-date-picker
v-model="form.date"
v-model="form.jgrq"
type="date"
placeholder="选择日期">
</el-date-picker>
......@@ -77,90 +78,97 @@
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">建筑物高度(m)</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >建筑物高度(m)</td>
<td colspan="4" >
<el-input v-model="form.jzwgd"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">总套数</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >总套数</td>
<td colspan="4" >
<el-input v-model="form.zts"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">幢用地面积(㎡)</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >幢用地面积(㎡)</td>
<td colspan="4" >
<el-input v-model="form.zydmj"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">幢占用地面积（㎡）</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >幢占用地面积（㎡）</td>
<td colspan="4" >
<el-input v-model="form.zzdmj"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">预测建筑面积（㎡）</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >预测建筑面积（㎡）</td>
<td colspan="4" >
<el-input v-model="form.ycjzmj"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">实测建筑面积（㎡）</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >实测建筑面积（㎡）</td>
<td colspan="4" >
<el-input v-model="form.scjzmj"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">地下层数</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >地下层数</td>
<td colspan="4" >
<el-input v-model="form.dxcs"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">地上层数</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >地上层数</td>
<td colspan="4" >
<el-input v-model="form.dscs"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">总层数</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >总层数</td>
<td colspan="4" >
<el-input v-model="form.zcs"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">地下深度（m）</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >地下深度（m）</td>
<td colspan="4" >
<el-input v-model="form.dxsd"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">产别</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >产别</td>
<td colspan="4" >
<el-select v-model="form.fwcbbsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">产权来源</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="2" align="center" >产权来源</td>
<td colspan="4" >
<el-select v-model="form.fwcqlybsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">项目名称</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
</td>
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">不动产单元号</td>
<td colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<tr height="30" v-for="(item1,index) in form.ytList" :key="index">
<td v-if="index===0" colspan="2" :rowspan="ytTitleRowspan" align="center" id="ytTitle">
<el-button type="primary" size="mini" style="margin-right: 10px" @click="addYtInfo">添加</el-button>
<span>用途</span>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<el-button type="primary" size="mini" style="margin-right: 10px">添加</el-button>
<span>用途</span>
<td width="30" colspan="1" align="center" >
<el-button type="info" size="mini" style="" @click="deleteYtInfo(index)" circle>删除</el-button>
规划用途
</td>
<td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">规划用途</td>
<td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<el-select v-model="value" placeholder="请选择" style="display:block;">
<td width="30" colspan="4" align="center" >
<el-select v-model="item1.fwytzdbsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
......@@ -169,9 +177,9 @@
</el-option>
</el-select>
</td>
<td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">用途</td>
<td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<el-select v-model="value" placeholder="请选择" style="display:block;">
<td width="30" colspan="1" align="center" >用途</td>
<td width="30" colspan="4" align="center" >
<el-select v-model="item1.fwsjytbsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
......@@ -182,30 +190,40 @@
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<el-button type="primary" size="mini" style="margin-right: 10px">添加</el-button>
<span>房屋用途</span>
<tr height="30" v-for="(item1,index) in form.fwjgList" :key="index">
<td colspan="2" v-if="index===0" :rowspan="fwjgTitleRowspan" align="center" >
<el-button type="primary" size="mini" style="margin-right: 10px" @click="addFwjgInfo">添加</el-button>
<span>房屋结构</span>
</td>
<td colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
<el-input v-model="form.name"></el-input>
<td colspan="1" align="center" >
<span @click="deleteFwjgInfo(index)">删除</span>
</td>
<td colspan="9" >
<el-select v-model="item1.fwjgzdbsm" placeholder="请选择" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="2" align="center" >
<span>坐落</span>
</td>
<td colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="10" >
<el-input v-model="form.name"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" rowspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="2" rowspan="2" align="center" >
<span>附加说明</span>
</td>
<td colspan="10" rowspan="2" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="10" rowspan="2" >
<el-input v-model="form.name" type="textarea"></el-input>
</td>
</tr>
......@@ -213,34 +231,41 @@
</tr>
<tr height="30">
<td colspan="2" rowspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="2" rowspan="2" align="center" >
<span>调查意见</span>
</td>
<td colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
<td colspan="10" >
<el-input v-model="form.name"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
<el-form-item label="审查员" style="margin-left:30%;float: left">
<el-input v-model="form.name" style="width: 100%"></el-input>
</el-form-item>
<el-form-item label="审查日期" style="margin-left: 70%">
<el-date-picker
v-model="form.date"
type="date"
style="width: 100%"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<td colspan="4" rowspan="2" align="right" style="width:8.33%;padding-right:10px">
<span>审查员</span>
</td>
<td colspan="2" >
<el-input v-model="form.name"></el-input>
</td>
<td colspan="2" rowspan="2" align="right" style="width:8.33%;padding-right:10px">
<span>审查日期</span>
</td>
<td colspan="2" >
<el-date-picker
v-model="form.date"
type="date"
placeholder="选择日期">
</el-date-picker>
</td>
</tr>
</tbody>
</table>
</el-form>
<div style="min-height: 40px;text-align: center;margin-top: 10px">
<el-button type="success" @click="onSubmit">保存</el-button>
<el-button type="primary" @click="onSubmit">提交</el-button>
</div>
</div>
</template>
<script>
......@@ -249,8 +274,54 @@
data () {
return {
form:{
zrzbsm:'', //自然幢标识码
zdbsm:'', //宗地标识码
dzbsm:'', //多幢标识码
dyhbsm:'', //不动产单元号标识码
zrzh:'', //自然幢号
jzwgd:'', //建筑物高度
zzdmj:'', //幢占地面积
zydmj:'', //幢用地面积
ycjzmj:'', //预测建筑面积
scjzmj:'', //实测建筑面积
zcs:'', //总层数
dscs:'', //地上层数
dxcs:'', //地下层数
dxsd:'', //地下深度
zts:'', //总套数
zl:'', //坐落
jzwjbyt:'', //建筑物基本用途
jzwmc:'', //建筑物名称
xmmc:'', //项目名称
jgrq:'', //竣工日期
tfh:'', //图幅号
bz:'', //备注
fwxzbsm:'', //房屋性质ID
fwcbbsm:'', //房屋产别ID
fwcqlybsm:'', //房屋产权来源ID
ydybsm:'', //原单元标识码
name:'',
date:'',
ytList:[{
glbsm:'', //关联标识码
fwytzdbsm:'', //房屋用途字典标识码
sx:'', //顺序
fwsjytbsm:'', //房屋实际用途字典标识码
}],
fwjgList:[{
fwjgzdbsm:'', //房屋结构字典标识码
glbsm:'', //关联标识码
sx:'', //顺序
}],
qlxzList:[{
qlxzdm:'', //权利性质代码
glbsm:'', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzzdbsm:'', //权利性质字典表标识码
qlxzmc:'', //权利名称名称
zhqlxzlx:'', //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList:[{
}], //土地用途新增实体列表
}]
},
options: [{
value: '选项1',
......@@ -269,9 +340,50 @@
label: '北京烤鸭'
}],
value: '',
ytTitleRowspan:1, //用途的单元格垂直合并数量
fwjgTitleRowspan:1, //房屋结构的单元格垂直合并数量
}
},
methods: {
addYtInfo(){
this.form.ytList.push({
glbsm:'',
fwytzdbsm:'',
fwsjytbsm:'',
sx:'',
});
this.ytTitleRowspan=this.form.ytList.length;
},
deleteYtInfo(index){
if(this.form.ytList.length<=1){
this.$message({
message: '不能删除，最少含有一条用途信息',
type: 'warning'
});
}else{
this.form.ytList.splice(index,1);
this.ytTitleRowspan=this.form.ytList.length;
}
},
addFwjgInfo(){
this.form.fwjgList.push({
fwjgzdbsm:'', //房屋结构字典标识码
glbsm:'', //关联标识码
sx:'', //顺序
});
this.fwjgTitleRowspan=this.form.fwjgList.length;
},
deleteFwjgInfo(index){
if(this.form.fwjgList.length<=1){
this.$message({
message: '不能删除，最少含有一条房屋结构信息',
type: 'warning'
});
}else{
this.form.fwjgList.splice(index,1);
this.fwjgTitleRowspan=this.form.fwjgList.length;
}
},
}
}
</script>
......