index.vue 13.7 KB
<template>
    <div class="zrz content-form">
        <el-form ref="form" :model="form" label-width="160px">
            <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>
                </tr>
                <tr height="30">
                    <td colspan="12" align="center" bgcolor="#F1F4FC" style="width:8.33%"><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>
                    <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>
                        <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>
                        <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"></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;">
                            <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-date-picker
                                v-model="form.date"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </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>
                    <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>
                </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>
                    </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>
                    </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>
                    </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%">地下深度(m)</td>
                    <td  colspan="4" bgcolor="#F1F4FC" style="width:8.33%">
                        <el-input v-model="form.name"></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>
                    <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>
                </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>
                    </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>
                    <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;">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </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;">
                            <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%">
                        <el-button type="primary" size="mini" style="margin-right: 10px">添加</el-button>
                        <span>房屋用途</span>
                    </td>
                    <td   colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
                        <el-input v-model="form.name"></el-input>
                    </td>
                </tr>

                <tr height="30">
                    <td   colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
                        <span>坐落</span>
                    </td>
                    <td   colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
                        <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%">
                        <span>附加说明</span>
                    </td>
                    <td   colspan="10" rowspan="2"  bgcolor="#F1F4FC" style="width:8.33%">
                        <el-input v-model="form.name" type="textarea"></el-input>
                    </td>
                </tr>
                <tr height="30">
                </tr>

                <tr height="30">
                    <td   colspan="2" rowspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">
                        <span>调查意见</span>
                    </td>
                    <td   colspan="10" bgcolor="#F1F4FC" style="width:8.33%">
                        <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>
                </tr>

                </tbody>
            </table>
        </el-form>
    </div>
</template>

<script>
    export default {
        name:'zrz',
        data () {
            return {
                form:{
                    name:'',
                    date:'',
                },
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
            }
        },
        methods: {
        }
    }
</script>
<style rel="stylesheet/less" lang="less">
    @import './index.less';
</style>