productivity-platform-web/src/views/house/certificate.vue

<template>
    <div class="contrl">
        <el-checkbox-group v-model="certificates">
            <el-checkbox label="《不动产权证书》" :disabled="certificate1" value="1" />
            <el-checkbox label="《房屋所有权证》（新）" :disabled="certificate2" value="2" />
            <el-checkbox label="《房屋所有权证》（旧）" :disabled="certificate3" value="3" />
            <el-checkbox label="《国有土地使用证》（新）" :disabled="certificate4" value="4" />
            <el-checkbox label="《国有土地使用证》（旧）" :disabled="certificate5" value="5" />
        </el-checkbox-group>

        <el-tabs v-model="activeName" class="certificates-tabs">
            <el-tab-pane label="《不动产权证书》" name="1" :lazy="true" v-if="certificates.includes('1')">
                <el-form :model="fixedAssetsCertificate" 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="fixedAssetsCertificate.certificateNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="权利人:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.ownShipUser" clearable />
                            </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="fixedAssetsCertificate.ownShipInfo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="房屋坐落:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.location" clearable />
                            </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="fixedAssetsCertificate.unitNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="权利类型:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.ownShipType" clearable />
                            </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="fixedAssetsCertificate.ownShipNature" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用途:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.useTo" clearable />
                            </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="fixedAssetsCertificate.acreageDesc" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用期限描述:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.expireDateDesc" clearable />
                            </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="fixedAssetsCertificate.ownShipOtherInfo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="附记:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.attachInfo" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="《房屋所有权证》（新）" name="2" :lazy="true" v-if="certificates.includes('2')">
                <el-form :model="houseOwnNewCertificate" 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="houseOwnNewCertificate.certificateNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="房屋所有权人:" class="form-item">
                                <el-input v-model="houseOwnNewCertificate.ownShipUser" clearable />
                            </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="houseOwnNewCertificate.ownShipInfo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="房屋坐落:" class="form-item">
                                <el-input v-model="houseOwnNewCertificate.location" clearable />
                            </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="houseOwnNewCertificate.registerDate" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="房屋性质:" class="form-item">
                                <el-input v-model="houseOwnNewCertificate.houseNature" clearable />
                            </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="houseOwnNewCertificate.useTo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总层数:" class="form-item">
                                <el-input v-model="houseOwnNewCertificate.allFloor" clearable />
                            </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="houseOwnNewCertificate.acreage" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套内建筑面积:" class="form-item">
                                <el-input v-model="houseOwnNewCertificate.innerAcreage" clearable />
                            </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="houseOwnNewCertificate.attachInfo" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="《房屋所有权证》（旧）" name="3" :lazy="true" v-if="certificates.includes('3')">
                <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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="房屋所有权人:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.ownShipUser" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="丘（地）号:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.areaNo" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="幢号:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.buildingNo" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结构:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.structure" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所在楼层:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.atFloor" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设计用途:" class="form-item">
                                <el-input v-model="houseOwnOldCertificate.useTo" clearable />
                            </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" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="《国有土地使用证》（新）" name="4" :lazy="true" v-if="certificates.includes('4')">
                <el-form :model="landUseNewCertificate" 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="fixedAssetsCertificate.certificateNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="土地使用权人:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.landUseUser" clearable />
                            </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="fixedAssetsCertificate.location" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地号:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.landNo" clearable />
                            </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="fixedAssetsCertificate.imageNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地类用途:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.useTo" clearable />
                            </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="fixedAssetsCertificate.takePrice" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用权类型:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.useType" clearable />
                            </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="fixedAssetsCertificate.expireDate" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用权面积:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.acreage" clearable />
                            </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="fixedAssetsCertificate.outerAcreage" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="记事:" class="form-item">
                                <el-input v-model="fixedAssetsCertificate.attachInfo" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="《国有土地使用证》（旧）" name="5" :lazy="true" v-if="certificates.includes('5')">
                <el-form :model="landUseOldCertificate" 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="landUseOldCertificate.certificateNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="土地使用权人:" class="form-item">
                                <el-input v-model="landUseOldCertificate.landUseUser" clearable />
                            </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="landUseOldCertificate.location" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地号:" class="form-item">
                                <el-input v-model="landUseOldCertificate.landNo" clearable />
                            </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="landUseOldCertificate.imageNo" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地类用途:" class="form-item">
                                <el-input v-model="landUseOldCertificate.useTo" clearable />
                            </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="landUseOldCertificate.landLevel" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用权类型:" class="form-item">
                                <el-input v-model="landUseOldCertificate.useType" clearable />
                            </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="landUseOldCertificate.expireDate" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用权面积:" class="form-item">
                                <el-input v-model="landUseOldCertificate.acreage" clearable />
                            </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="landUseOldCertificate.outerAcreage" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="记事:" class="form-item">
                                <el-input v-model="landUseOldCertificate.attachInfo" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
        </el-tabs>
       
        <SwitchButton :nextPath="nextPath" :lastPath="lastPath"></SwitchButton>
    </div>
</template>

<script>
import  SwitchButton from '../../components/SwichButton/index.vue'

 export default {
    components:{
        SwitchButton
    },

    watch:{
        certificates:{
            handler(nv,ov){
                // if (nv.includes("1")){
                //     this.certificate2=true;
                //     this.certificate3=true;
                //     this.certificate4=true;
                //     this.certificate5=true;
                // }else{
                //     this.certificate1=false;
                //     this.certificate2=false;
                //     this.certificate3=false;
                //     this.certificate4=false;
                //     this.certificate5=false;
                // }
                // if (nv.includes("2")){
                //     this.certificate1=true;
                //     this.certificate3=true;
                // }
                // if (nv.includes("3")){
                //     this.certificate1=true;
                //     this.certificate2=true;
                // }
                // if (nv.includes("4")){
                //     this.certificate1=true;
                //     this.certificate5=true;
                // }
                // if (nv.includes("5")){
                //     this.certificate1=true;
                //     this.certificate4=true;
                // }
                this.activeName = nv[0];
                
            }
        }
    },

    data() {
        return {
            consignor: {
                name: null,
                type: null,
                address: null,
                legalPerson: null,
                legalCode: null
            },
            nextPath:'/home/houseWorkbench/baseInfo',
            lastPath:'/home/houseWorkbench/consignor',
            certificates:[],
            certificate1:false,
            certificate2:false,
            certificate3:false,
            certificate4:false,
            certificate5:false,
            activeName:null,
            fixedAssetsCertificate:{
                id:null,
                businessType:'HOUSE',
                businessId:null,
                certificateNo:null,
                ownShipUser:null,
                ownShipInfo:null,
                location:null,
                unitNo:null,
                ownShipType:null,
                ownShipNature:null,
                useTo:null,
                acreageDesc:null,
                expireDateDesc:null,
                ownShipOtherInfo:null,
                attachInfo:null,

            },
            houseOwnNewCertificate:{
                id:null,
                businessType:'HOUSE',
                businessId:null,
                isNew:true,
                certificateNo:null,
                ownShipUser:null,
                ownShipInfo:null,
                location:null,
                registerDate:null,
                houseNature:null,
                useTo:null,
                allFloor:null,
                acreage:null,
                innerAcreage:null,
                attachInfo:null
            },
            houseOwnOldCertificate:{
                id:null,
                businessType:'HOUSE',
                businessId:null,
                isNew:false,
                certificateNo:null,
                ownShipUser:null,
                location:null,
                areaNo:null,
                ownShipType:null,
                buildingNo:null,
                houseNo:null,
                structure:null,
                useTo:null,
                allFloor:null,
                atFloor:null,
                acreage:null,
                attachInfo:null
            },
            landUseNewCertificate:{
                id:null,
                businessType:'HOUSE',
                businessId:null,
                isNew:true,
                certificateNo:null,
                landUseUser:null,
                location:null,
                landNo:null,
                imageNo:null,
                useTo:null,
                takePrice:null,
                useType:null,
                expireDate:null,
                acreage:null,
                outerAcreage:null,
                attachInfo:null
            },
            landUseOldCertificate:{
                id:null,
                businessType:'HOUSE',
                businessId:null,
                isNew:false,
                certificateNo:null,
                landUseUser:null,
                location:null,
                landNo:null,
                imageNo:null,
                useTo:null,
                landLevel:null,
                useType:null,
                expireDate:null,
                acreage:null,
                outerAcreage:null,
                attachInfo:null
            }
        }
}
 }


</script>

<style scoped>
.contrl {
    font-size: 20px;
    width: 70.9%;
    border-right: 1.5px #dae1eb solid;
    padding: 20px 20px 20px 0px;
    float: left;

}
:deep(.el-checkbox__label) {
    font-size: 15px;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #ff6154;
    border-color: #ff6154;
    font-size: 20px;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color:#ff6154;
    
}
:deep(.el-tabs__active-bar){
    background-color:#ff6154;
}
:deep(.el-tabs__item.is-active) {
    color:#ff6154;
}
:deep(.el-tabs__item:hover){
    color:#ff6154;
}
.certificates-tabs {
 margin-top: 30px;
}

:deep(.el-input__wrapper.is-focus) {
  --el-input-focus-border: #ff6154;
  --el-input-focus-border-color:#ff6154;
}
</style>