productivity-platform-web/src/components/HouseGuarantyForm/houseOwnOldCertificate.vue

<template>
    <el-form :model="houseOwnOldCertificate" label-width="auto" style="margin-top: 30px;">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="房屋所有权证号:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.certificateNo" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="房屋所有权人:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.ownShipUser" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="房屋坐落:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.location" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="丘（地）号:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.areaNo" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="产别:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.ownShipType" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="幢号:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.buildingNo" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="房号:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.houseNo" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="结构:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.structure" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="房屋总层数:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.allFloor" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="所在楼层:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.atFloor" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="建筑面积:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.acreage" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="设计用途:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.useTo" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="附记:" class="form-item">
                    <el-input v-model="houseOwnOldCertificate.attachInfo" />
                </el-form-item>
            </el-col>
        </el-row>
        <div style="width: 100%; text-align: right;">
            <el-button type="text" @click="removeTab">移除此证件</el-button>
            <el-button type="text" @click="saveHouseOwn">保存此证件</el-button>
        </div>
    </el-form>
</template>

<script>

export default {


    props: {
        houseOwnOldCertificate: {

        }
    },

    data() {
        return {

        }
    },
    methods: {
        removeTab() {
            this.$emit('removeTab', this.houseOwnOldCertificate.name)
        }
        ,
        saveHouseOwn() {
            this.houseOwnOldCertificate.isNew = false;
            this.$emit('saveHouseOwn', this.houseOwnOldCertificate)
        }

    }
}
</script>
<style scoped>
:deep(.el-button--text:hover) {
    color: #ff6154;
}

:deep(.el-button--text) {
    color: #ff6154;
}

:deep(input){
    width: 360px;
}

:deep(.el-select__wrapper){
    width: 382px;
}



</style>