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="9" :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="9" :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="register" label-width="140px" type="date"
                                    class="postInfo-container-item">
                                    <el-date-picker v-model="certificate.register" type="date" value-format="yyyy-MM-dd"
                                        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="floors" label-width="140px"
                                    class="postInfo-container-item">
                                    <el-input v-model="certificate.floors" 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="9" :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="9" :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;
            }
        },
    },
    computed: {

    },
    created() {
        this.certificate.id = this.id;
        if (this.houseCertificateObject) {
            this.certificate = this.houseCertificateObject;
        }

    },
    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' }],
                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,
                register: null,
                useTo: "",
                floors: null,
                structure: null,
                allAcreage: null,
                inAcreage: null,
                otherOwner: null,
                otherOwnerNo: null,
                landRightOwnType: null,
                isPledge: "否",
                pledgePerson: null,
                otherPledgePerson: null,
                ensureDebiAmount: 0,
                defaultDebiAmount: 0,
                otherDebiAmount: 0,
                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: '成功',
                                    message: '房产证信息保存成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.callParentEvent(true);
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '房产证信息保存失败',
                                    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 += '其他 '
                    }
                });;
            }

        },
        // 组件事件
        callParentEvent(data) {
            this.$emit('custom-event', data);
        },
        refreshLinkAttributes(){
            if (this.houseCertificateObject == null) {
                this.certificate.location = this.linkAttributes.location;
                this.certificate.sceneAddress = this.linkAttributes.location;
                this.certificate.bailor1 = this.linkAttributes.bailor1;
                this.certificate.bailor1Tel = this.linkAttributes.bailor1Tel;
                this.certificate.bailor2 = this.linkAttributes.bailor2;
                this.certificate.bailor2Tel = this.linkAttributes.bailor2Tel;
                this.certificate.allAcreage =this.linkAttributes.acreage;
                this.certificate.ownerName = this.linkAttributes.ownerName;
            }
        }
    }
        
}
</script>
<style scoped lang="css">
.row-style {
    margin-left: 40px;
    margin-right: 1%;
}
</style>