item-management-web/src/components/personalForms/houseCertificate.vue

<template>
    <div>
        <y-detail-page-layout @save="handleCreate"  :edit-status="editStatus">
            <el-form ref="houseCertificateForm" :model="certificate" :rules="rules">
                                <div class="createMajor-main-container">
                                    <div class="postInfo-container">
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="是否提供原件："
                                            prop="haveOrigin"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                        <el-radio-group v-model="certificate.haveOrigin" size="small">
                                            <el-radio border :label="false">否</el-radio>
                                            <el-radio border :label="true">是</el-radio>
                                        </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="房产证号："
                                            prop="houseCertificateNo"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.houseCertificateNo" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="丘(地)号/档案保管号/业务件号："
                                            prop="businessNo"
                                            label-width="250px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.businessNo" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="房屋所有权人："
                                            prop="ownerName"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                            :rules="{required: true, message: '房屋所有权人不能为空', trigger: 'blur'}"
                                        >
                                            <el-input v-model="certificate.ownerName" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="共有情况："
                                            prop="ownRight"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.ownRight" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="委托人1："
                                            prop="bailor1"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor1" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="委托人1电话："
                                            prop="bailor1Tel"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor1Tel" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="委托人1身份证号码："
                                            prop="bailor1IdNo"
                                            label-width="180px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor1IdNo" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="委托人2："
                                            prop="bailor2"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor2" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="委托人2电话："
                                            prop="bailor2Tel"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor2Tel" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="委托人2身份证号码："
                                            prop="bailor2IdNo"
                                            label-width="180px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.bailor2IdNo" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="坐落："
                                            prop="location"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                            :rules="{required: true, message: '坐落不能为空', trigger: 'blur'}"
                                        >
                                            <el-input v-model="certificate.location" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="实勘地址："
                                            prop="sceneAddress"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.sceneAddress" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="地址是否一致："
                                            prop="isSameAddress"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                        <el-radio-group v-model="certificate.isSameAddress" size="small">
                                            <el-radio border :label="false">否</el-radio>
                                            <el-radio border :label="true">是</el-radio>
                                        </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="地址证明："
                                            prop="addressProve"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                        <el-radio-group v-model="certificate.addressProve" size="small">
                                            <el-radio border :label="false">否</el-radio>
                                            <el-radio border :label="true">是</el-radio>
                                        </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="登记日期："
                                            prop="registerDate"
                                            label-width="140px"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            class="postInfo-container-item"
                                        >
                                        <el-date-picker
                                            v-model="certificate.registerDate"
                                            type="date"
                                            placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="规划用途："
                                            prop="useTo"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                            :rules="{required: true, message: '规划用途不能为空', trigger: 'blur'}"
                                        >
                                            <el-input v-model="certificate.useTo" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="总层数："
                                            prop="allFloor"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.allFloor" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="结构："
                                            prop="structure"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.structure" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="建筑面积(㎡)："
                                            prop="allAcreage"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.allAcreage" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="套内面积(㎡)："
                                            prop="inAcreage"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.inAcreage" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="共有人："
                                            prop="otherOwner"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.otherOwner" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="共有证号："
                                            prop="otherOwnerNo"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.otherOwnerNo" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                        <el-form-item
                                            label="土地使用权获得方式："
                                            prop="landRightOwnType"
                                            label-width="180px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.landRightOwnType" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="24" :span="6">
                                            <el-form-item
                                            label="附记："
                                            prop="attachmentInfo"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input type="textarea" v-model="certificate.attachmentInfo" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                            <el-form-item
                                                label="是否设置抵押权："
                                                prop="isPledge"
                                                label-width="140px"
                                                class="postInfo-container-item"
                                            >
                                                <el-select v-model="certificate.isPledge" placeholder="请选择" style="width:255px">
                                                    <el-option  label="否" value="否">否</el-option>
                                                    <el-option  label="向同一抵押权人申请续期贷款" value="向同一抵押权人申请续期贷款">向同一抵押权人申请续期贷款</el-option>
                                                    <el-option  label="向新抵押权人申请贷款" value="向新抵押权人申请贷款">向新抵押权人申请贷款</el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="certificate.isPledge==='SAME' || certificate.isPledge==='DIFFERENT'">
                                            <el-form-item
                                            label="抵押权人："
                                            prop="pledgePerson"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.pledgePerson" class="filter-item" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="certificate.isPledge==='DIFFERENT'">
                                            <el-form-item
                                            label="新抵押权人："
                                            prop="otherPledgePerson"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.otherPledgePerson" class="filter-item" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="8" :span="6">
                                        <el-form-item
                                            label="已抵押担保的债券数额（万元）："
                                            prop="ensureDebiAmount"
                                            label-width="280px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.ensureDebiAmount" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="8" :span="6">
                                        <el-form-item
                                            label="拖欠的建设工程价款（万元）	："
                                            prop="defaultDebiAmount"
                                            label-width="250px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.defaultDebiAmount" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="8" :span="6">
                                        <el-form-item
                                            label="其他法定优先受偿款（万元）："
                                            prop="otherDebiAmount"
                                            label-width="250px"
                                            class="postInfo-container-item"
                                        >
                                            <el-input v-model="certificate.otherDebiAmount" class="filter-item"  />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="row-style">
                                        <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                        <el-form-item
                                            label="农商行项目："
                                            prop="isNoneShangCase"
                                            label-width="140px"
                                            class="postInfo-container-item"
                                        >
                                        <el-radio-group v-model="certificate.isNoneShangCase" size="small">
                                            <el-radio border :label="false">否</el-radio>
                                            <el-radio border :label="true">是</el-radio>
                                        </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :lg="8" :span="6">
                                        <el-form-item
                                            label="农行西区支行项目："
                                            prop="isNoneWestCase"
                                            label-width="160px"
                                            class="postInfo-container-item"
                                        >
                                        <el-radio-group v-model="certificate.isNoneWestCase" size="small">
                                            <el-radio border :label="false">否</el-radio>
                                            <el-radio border :label="true">是</el-radio>
                                        </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                  
                                    </div>
                                </div>
            </el-form>
        </y-detail-page-layout>
    </div>
</template>

<script>
import YDetailPageLayout from '@/components/YDetailPageLayout/index_detail'
import {isNumber,phoneNumber,postiveInteger,isIdNumber} from '@/utils/validate'

export default {
    name: "houseCertificate",
    components: {
        YDetailPageLayout
    },
    props: {
        id:{
            type:Number,
            required:false,
            default:null
        },
        houseCertificateObject:{
            type:Object,
        },
        linkAttributes:{
            type:Object,
            default:null
        },
        editStatus:{
            type:Boolean,
            default:false
        },
    },
    watch:{
        id:function(value){
            this.certificate.id = value;
        },
        houseCertificateObject:function(value){
            if (value){
                this.certificate = value;
            }
        },
        linkAttributes:{
            handler(nv,ov){
                if (this.houseCertificateObject==null){
                    this.certificate.location = nv.location;
                    this.certificate.sceneAddress = nv.location;
                    this.certificate.bailor1 = nv.bailor1;
                    this.certificate.bailor1Tel = nv.bailor1Tel;
                    this.certificate.bailor2 = nv.bailor2;
                    this.certificate.bailor2Tel = nv.bailor2Tel;
                    this.certificate.allAcreage = nv.acreage;
                    this.certificate.allFloor = nv.allFloor;
                    this.certificate.ownerName = nv.ownerName;
                    this.converteUseTo(nv.purpose);
                }
               
            },
            deep:true
        }
    },
    computed: {
       
    },
    created(){

    },
    data() {
        return {
            name:"houseCertificate",
            rules:{
                bailor1Tel:[{validator:phoneNumber,trigger:'blur'}],
                bailor2Tel:[{validator:phoneNumber,trigger:'blur'}],
                bailor1IdNo:[{validator:isIdNumber,trigger:'blur'}],
                bailor2IdNo:[{validator:isIdNumber,trigger:'blur'}],
                allFloor:[{validator:postiveInteger,trigger:'blur'}],
                allAcreage:[{required: true, message: '建筑面积不能为空', trigger: 'blur'},{validator:isNumber,trigger:'blur'}],
                inAcreage:[{validator:isNumber,trigger:'blur'}],
                ensureDebiAmount:[{validator:isNumber,trigger:'blur'}],
                defaultDebiAmount:[{validator:isNumber,trigger:'blur'}],
                otherDebiAmount:[{validator:isNumber,trigger:'blur'}]
            },
            certificate:{
                id:null,
                haveOrigin:false,
                houseCertificateNo:null,
                businessNo:null,
                ownerName:null,
                ownRight:null,
                bailor1:null,
                bailor1Tel:null,
                bailor1IdNo:null,
                bailor2:null,
                bailor2Tel:null,
                bailor2IdNo:null,
                location:null,
                sceneAddress:null,
                isSameAddress:true,
                addressProve:false,
                registerDate:null,
                useTo:"",
                allFloor:null,
                structure:null,
                allAcreage:null,
                inAcreage:null,
                otherOwner:null,
                otherOwnerNo:null,
                landRightOwnType:null,
                isPledge:"否",
                pledgePerson:null,
                otherPledgePerson:null,
                ensureDebiAmount:null,
                defaultDebiAmount:null,
                otherDebiAmount:null,
                isNoneShangCase:false,
                isNoneWestCase:false
            }
        }

    },
    methods: {
        handleCreate(){
            if (this.certificate.id){
                this.$refs.houseCertificateForm.validate(valid=>{
                    if (valid){
                            this.$api.personalTarget.updateHouseCer(this.certificate).then(res=>{
                                if (res.code === 200 && res.data){
                                    this.$notify({
                                        title: '房产证信息保存成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                }else{
                                    this.$notify({
                                        title: '房产证信息保存失败',
                                        type: 'error',
                                        duration: 2000
                                    });
                                }
                            })
                       
                    }
                })
            }
            
        },
        converteUseTo(arr){
            if (arr){
                this.certificate.useTo = "";
                arr.forEach(element => {
                    if (element==='OFFICE'){
                        this.certificate.useTo += '办公 '
                    }
                    if (element==='HOUSE'){
                        this.certificate.useTo += '住宅 '
                    }
                    if (element==='BUSINESS'){
                        this.certificate.useTo += '商业 '
                    }
                    if (element==='INDUSTRIAL'){
                        this.certificate.useTo += '工业 '
                    }
                    if (element==='OTHER'){
                        this.certificate.useTo += '其他 '
                    }
                });;
            }
           
        }
    }
}
</script>
<style scoped lang="css">

.row-style{
      margin-left:40px;
      margin-right:1%;
    }

</style>