<template> <dialogBox title="房屋明细查询" @closeDialog="closeDialog" width="75%" :isButton="false" v-model="myValue"> <el-steps :active="activeStep" finish-status="success"> <el-step title="条件录入"></el-step> <el-step title="结果查询"></el-step> <el-step title="结果展示"></el-step> </el-steps> <div v-if="isSearch"> <dydjbInfo ref="dydjbInfo" /> </div> <div class="jtfccx-edit" v-else> <div class="jtfccx-edit-con"> <b class="title"></b> <el-form :model="form" label-width="110px"> <el-row> <el-col :span="6"> <el-form-item label="查询用途" label-width="90px"> <el-input v-model="form.djSqcxDO.cxyt" class="width100"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="不动产权证号"> <el-input v-model="form.djSqcxDO.bdcqzh" class="width100"></el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="与产权人的关系"> <el-radio-group v-model="form.djSqcxDO.ycqrgx"> <el-radio label="1">房屋权利人</el-radio> <el-radio label="2">产权利害关系人</el-radio> <el-radio label="3">委托人</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <b class="title">申请人</b> <lb-table :column="sqrColumns" key="sqr1" :data="form.sqrList" :maxHeight="200" heightNumSetting :pagination="false"> </lb-table> <b class="title">权利人</b> <lb-table :column="qlrColumns" key="ql2r" :data="form.qlrList" :maxHeight="200" heightNumSetting :pagination="false"> </lb-table> <div class="submit-button" style="padding-bottom:50px"> <el-button @click="resetClick" v-show="!isSearch">重置</el-button> <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button> <el-button @click="closeDialog">关闭</el-button> </div> </div> </div> </dialogBox> </template> <script> import { addFwmxCxjgXx, getFwmxInfo, printJtcfInfo } from "@/api/jtfc.js"; import { getPrintTemplateByCode } from "@/api/print"; import { datas, sendThis } from "./dydjbdata"; import { getLodop } from "@/utils/LodopFuncs" import dydjbInfo from "./dydjbInfo.vue"; import { mapGetters } from "vuex"; export default { computed: { ...mapGetters(["dictData"]), }, components: { dydjbInfo }, props: { value: { type: Boolean, default: false }, sqcxBsm: { type: String, default: "" }, }, mounted () { sendThis(this); }, data () { return { activeStep: 0, myValue: this.value, //是否查询 isSearch: false, //查询结果列表字段 cxjgColumns: datas.columns(), //申请人列表字段 sqrColumns: datas.sqrCol(), //权利人列表字段 qlrColumns: datas.qlrCol(), newData: { sqrxm: "", sqrzjlxbm: "", sqrzjhm: "", lxdh: "", inputErr: false, }, form: { djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" }, sqrList: [], qlrList: [], cxjgList: [], dyjlList: [], }, }; }, watch: { value (val) { this.myValue = val; let that = this if (val) { this.form.sqrList = [] this.form.qlrList = [] this.isSearch = false if (this.sqcxBsm == "") { that.add("sqr"); that.add("qlr"); } else { that.loadData(); } } }, "form.djSqcxDO.ycqrgx" (val) { if (val == "1") { this.form.qlrList = _.cloneDeep(this.form.sqrList); } else { this.form.qlrList = []; this.add("qlr"); } }, "form.sqrList" (val) { if (this.form.djSqcxDO.ycqrgx == '1') { this.form.qlrList = _.cloneDeep(this.form.sqrList) } } }, methods: { /** * @description: closeDialog * @author: renchao */ closeDialog () { this.$emit("input", false); this.activeStep = 0; this.form = { djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" }, sqrList: [], qlrList: [], cxjgList: [], dyjlList: [], } }, //加载详细信息 /** * @description: 加载详细信息 * @author: renchao */ loadData () { this.$startLoading(); getFwmxInfo({ sqcxBsm: this.sqcxBsm }).then((res) => { this.$endLoading(); if (res.code == 200) { this.activeStep = 2; this.isSearch = true; this.$nextTick(() => { this.$refs.dydjbInfo.setResult(res.result) }) } }); }, //查询结果 /** * @description: 查询结果 * @author: renchao */ queryChick () { this.$startLoading(); this.activeStep = 1; addFwmxCxjgXx(this.form).then((res) => { this.$endLoading(); if (res.code == 200) { this.activeStep = 2; this.isSearch = true; this.$nextTick(() => { this.$refs.dydjbInfo.setResult(res.result) }) this.$parent.queryClick(); } }); }, //重置 /** * @description: 重置 * @author: renchao */ resetClick () { this.form.djSqcxDO = { ycqrgx: "1", cxyt: "", bdcqzh: "" }; this.form.sqrList = _.cloneDeep([this.newData]); this.form.qlrList = _.cloneDeep([this.newData]); this.form.cxjgList = []; this.form.dyjlList = []; this.isSearch = false; }, /** * @description: handleRead * @author: renchao */ handleRead (scope) { }, //添加申请人或权利人 /** * @description: 添加申请人或权利人 * @param {*} type * @author: renchao */ add (type) { if (type == "sqr") { this.form.sqrList.push(_.cloneDeep(this.newData)); } else { this.form.qlrList.push(_.cloneDeep(this.newData)); } }, //移除申请人或权利人 /** * @description: 移除申请人或权利人 * @param {*} index * @param {*} row * @param {*} type * @author: renchao */ remove (index, row, type) { if (type == "sqr") { this.form.sqrList.splice(index, 1); } else { this.form.qlrList.splice(index, 1); } }, //电话号码校验 /** * @description: 电话号码校验 * @param {*} row * @author: renchao */ teltest (row) { const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/; if (row.lxdh == "" || row.lxdh.length <= 10 || !reg.test(row.lxdh)) { row.inputErr = true; return false; } else { row.inputErr = false; return true; } }, }, }; </script> <style scoped lang="scss"> @import "~@/styles/mixin.scss"; @import "~@/styles/public.scss"; .title { padding-bottom: 10px; margin-bottom: 10px; display: block; border-bottom: 1px solid $borderColor; } .jtfccx-edit { @include flex; flex-direction: column; overflow-y: hidden; max-height: 85vh; padding: 0 2px; .jtfccx-edit-con { flex: 1; height: 100%; overflow-y: scroll; } .submit-button { text-align: center; height: 52px; padding-top: 10px; background-color: #fff; } } </style>