<template>
<div style="height: 600px;overflow-y: scroll;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="不动产单元申请书" name="1"></el-tab-pane>
<el-tab-pane label="附件" v-if="formData.isAdd==2" name="2"></el-tab-pane>
</el-tabs>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules">
<div v-for="item in sqrList">
<div class="slxx_title title-block">
申请人信息
<div class="triangle"></div>
</div>
<el-row>
<el-col :span="8">
<el-form-item label="权利人名称:" prop="mc">
<el-input v-model="item.mc"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件种类:" prop="zjzl">
<el-input v-model.number="item.zjzl"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件号:" prop="zjh">
<el-input v-model.number="item.zjh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="通讯地址:" prop="txdz">
<el-input v-model="item.txdz"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="邮编:" prop="yb">
<el-input v-model.number="item.yb"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="共有比例:" prop="gyqk">
<el-input v-model.number="item.gyqk"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="法人名称:" prop="frmc">
<el-input v-model="ruleForm.frmc"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话:" prop="frdh">
<el-input v-model.number="ruleForm.frdh"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="代理人名称:" prop="dlrmc">
<el-input v-model.number="ruleForm.dlrmc"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话:" prop="dlrdh">
<el-input v-model.number="ruleForm.dlrdh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="代理机构:" prop="dljg">
<el-input v-model="ruleForm.dljg"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div>
<div class="slxx_title title-block">
不动产情况
<div class="triangle"></div>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="坐落:" prop="zl">
<el-input v-model="bdcqk.zl"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不动产单元号:" prop="bdcdyh">
<el-input v-model.number="bdcqk.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="宗地/宗海面积:" prop="zdzhmj">
<el-input v-model="bdcqk.zdzhmj"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="定着物面积:" prop="dzwmj">
<el-input v-model.number="bdcqk.dzwmj"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="宗地/宗海用途:" prop="zdzhyt">
<el-input v-model.number="bdcqk.zdzhyt"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="定着物用途:" prop="dzwyt">
<el-input v-model.number="bdcqk.dzwyt"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="不动产类型:" prop="bdclx">
<el-input v-model="bdcqk.bdclx"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="宗地/宗海权力类型:" prop="zdzhqllx">
<el-input v-model="bdcqk.zdzhqllx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="用海类型:" prop="yhlx">
<el-input v-model="bdcqk.yhlx"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="构筑物类型:" prop="gzwlx">
<el-input v-model.number="bdcqk.gzwlx"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="林种:" prop="lz">
<el-input v-model.number="bdcqk.lz"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="原不动产单元号:" prop="ybdcdyh">
<el-input v-model.number="bdcqk.ybdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div>
<div class="slxx_title title-block">
抵押情况
<div class="triangle"></div>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="被担保主债权数额:" prop="bdbzzqse">
<el-input v-model="bdcqk.bdbzzqse"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="在建建筑物抵押范围:" prop="zjjzwdyfw">
<el-input v-model.number="bdcqk.zjjzwdyfw"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="债务履行起始时间:" prop="zwlxqssj">
<el-input v-model="bdcqk.zwlxqssj"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="债务履行结束时间:" prop="zwlxjssj">
<el-input v-model="bdcqk.zwlxjssj"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<el-form-item style="text-align:center">
<!-- <el-button type="primary" @click="closeDialog">关闭</el-button>-->
<!-- <el-button type="primary" @click="submitForm">保存</el-button>-->
</el-form-item>
</el-form>
<clxx v-if="activeName==2" :formData="formData" />
</div>
</template>
<script>
import store from '@/store/index.js'
import { getSqr, getBdcqk } from "@/api/ycsl.js"
import clxx from './clxx/index.vue'
export default {
props: {
formData: {
type: Object,
default: () => { },
},
},
components: {
clxx
},
data () {
return {
zjzlList: store.getters.dictData['A30'],
activeName: "1",
DJJGLIST: store.getters.dictData['ywly'],
readOnly: false,
sqrList:[{}],
bdcqk: {},
//表单提交数据
ruleForm: {},
//表格数据
tableForm: [
{
name: '不动产权证书',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 1
},
{
name: '不动产登记证明',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 2
}
],
rules: {
}
}
},
mounted () {
console.log(this.formData, "ffffffffffffff")
if (this.formData.ywh) {
this.getSqr(this.formData.ywh)
this.getBdcqk(this.formData.ywh)
}
let list = Object.keys(this.formData).length
if (list > 0) {
this.ruleForm = this.formData
}
},
methods: {
handleClick () { },
/**
* @description: 表单提交
* @author:
*/
submitForm () {
let that = this
this.tableForm.forEach((item, index) => {
if (item.bs < 0) {
return;
}
})
if (this.formData.isAdd != 1) {
store.dispatch("user/refreshPage", false);
update(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.$refs['ruleForm'].resetFields();
this.resetTableFields();
this.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
this.$message.error(res.message);
}
})
} else {
that.$refs['ruleForm'].validate((valid) => {
if (valid) {
store.dispatch("user/refreshPage", false);
addQy(this.ruleForm).then(res => {
if (res.code == 200) {
that.$message.success('保存成功')
that.$emit("input", false);
that.$refs['ruleForm'].resetFields();
that.resetTableFields();
that.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
that.$message.error(res.message);
}
})
} else {
this.$message.error('请完善表单');
return false;
}
})
}
},
/**
* @description: 获取详情信息
* @author:
* @param ywh
*/
getSqr (ywh) {
getSqr(ywh ).then(res => {
if (res.code == 200) {
this.sqrList = res.result;
}
})
},
/**
* @description: 获取详情信息
* @author:
* @param ywh
*/
getBdcqk (ywh) {
getBdcqk(ywh ).then(res => {
if (res.code == 200) {
this.bdcqk = res.result;
}
})
},
/**
* @description: resetTableFields
* @author:
*/
resetTableFields () {
this.tableForm = [
{
name: '不动产权证书',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 1
},
{
name: '不动产权登记证明',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 2
}
]
},
/**
* @description: closeDialog
* @author:
*/
closeDialog () {
this.$popupCacel()
this.$refs['ruleForm'].resetFields();
this.resetTableFields();
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
@import "~@/styles/slxx/slxx.scss";
.font-red {
color: red;
}
.middle-margin-bottom {
margin-top: 20px;
}
form /deep/ .el-form-item__label {
width: 150px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 32px;
float: none;
}
</style>