<template> <!-- 编辑 --> <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter" :visible.sync="dialogVisible" width="85%"> <div slot="title" class="dialog_title" ref="dialogTitle"> {{ title || '标题' }} </div> <div class="editDialogBox-box"> <el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab"> <el-tab-pane label="数据模型" name="sjmx"></el-tab-pane> <el-tab-pane v-if="visiableXml" label="xml报文" name="xml"></el-tab-pane> <el-tab-pane v-if="visiableXml" label="响应结果" name="xyjg"></el-tab-pane> </el-tabs> <div class="dialog-from" v-if="titleName == 'sjmx'"> <el-row> <el-col :span="5"> <span>业务报文ID:</span> <p>{{ dataReport.BizMsgId }}</p> </el-col> <el-col :span="6"> <span>接入报文ID:</span> <p>{{ dataReport.ASID }}</p> </el-col> <el-col :span="6"> <span>行政区划编码:</span> <p>{{ dataReport.AreaCode }}</p> </el-col> <el-col :span="7"> <span>上次不动产单元号:</span> <p>{{ dataReport.PreEstateNum }}</p> </el-col> </el-row> <el-row> <el-col :span="5"> <span>业务编码:</span> <p>{{ dataReport.RecType }}</p> </el-col> <el-col :span="6"> <span>权利类型:</span> <p>{{ this.dicStatus(dataReport.RightType, 'A8') }}</p> </el-col> <el-col :span="6"> <span>登记类型:</span> <p>{{ this.dicStatus(dataReport.RegType, 'A21') }}</p> </el-col> <el-col :span="7"> <span>不动产权证书数量:</span> <p>{{ dataReport.CertCount }}</p> </el-col> </el-row> <el-row> <el-col :span="5"> <span>创建时间:</span> <p>{{ dataReport.createDate }}</p> </el-col> <el-col :span="6"> <span>业务流水号:</span> <p>{{ dataReport.RecFlowID }}</p> </el-col> <el-col :span="6"> <span>宗地/宗海代码:</span> <p>{{ dataReport.ParcelID }}</p> </el-col> <el-col :span="7"> <span>证明数量:</span> <p>{{ dataReport.ProofCount }}</p> </el-col> </el-row> <el-row> <el-col :span="6"> <span>不动产单元号:</span> <p>{{ dataReport.EstateNum }}</p> </el-col> <el-col :span="8"> <span>登记机构:</span> <p>{{ dataReport.RegOrgID }}</p> </el-col> <el-col :span="11"> <span>上次不动产权证号/不动产登记证明:</span> <p>{{ dataReport.PreCertID }}</p> </el-col> </el-row> </div> </div> <div class="editDialogBox-box"> <div v-if="titleName == 'sjmx'" class="sjmx"> <el-tabs v-model="activeName" ref="elTabs" type="card" @tab-click="changeList"> <el-tab-pane :name="item.soleurl" v-for="item in headerList" :key="item.soleurl"> <div slot="label" class="tab-pane-item"> <p class="name">{{ item.chinesetable }}</p> <p class="soleurl" :data-name="item.soleurl">({{ item.datatable }})</p> </div> </el-tab-pane> </el-tabs> <div class="edit-content"> <component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }" :bsmYwsjb="bsmYwsjb" :bsmSjsb="dataReport.bsmReport || dataReport.bsmSjsb" /> </div> </div> <div v-if="titleName == 'xyjg'"> <Xyjg :form-data='dataReport'></Xyjg> </div> <JsonEditor :resultInfo="resultInfo" class="JsonEditor" v-if="titleName == 'xml'" /> </div> </el-dialog> </template> <script> import { mapGetters } from "vuex"; import JsonEditor from "@/components/JsonEditor.vue"; import Xyjg from "./Result"; import { getTabsDetail, getXml, getReportDetail } from "@/api/dataReport.js"; import { MessageBox } from "element-ui"; export default { components: { JsonEditor, Xyjg }, props: { title: { type: String, default: '' }, tabsActiveName: { type: String, default: '' }, visiableXml: { type: Boolean, default: false } }, computed: { ...mapGetters(["dicData"]), }, data () { return { resultInfo: '', titleName: 'sjmx', dataReport: {}, index: 0, bsmYwsjb: "", ruleFormList: { bizMsgID: "", asid: "", areaCode: "", preestateNum: "", recType: "", rightType: "", regType: "", certCount: "", createDate: "", recFlowID: "", regOrgID: "", prllfCount: "", parcelID: "", estateNum: "", preCertID: "", digitalSign: "", }, images: require("./images/success.gif"), saveloding: false, dialogVisible: false, activeName: undefined, editItem: "", headerList: [], dataTable: "", }; }, methods: { dicStatus (val, code) { let data = this.dicData[code], name = '' if (data) { data.map((item) => { if (item.DCODE == val) { name = item.DNAME } }) return name } }, handleTitleTab (val) { console.log(val); }, isShow (item) { this.dataReport = item; this.titleName = 'sjmx'; this.dialogVisible = true; //获取表头列表 getTabsDetail({ bsmReport: this.dataReport.bsmReport || this.dataReport.bsmSjsb }).then((res) => { if (res.code == 200) { this.headerList = res.result; this.activeName = this.tabsActiveName == '' ? res.result[0].soleurl : this.tabsActiveName this.bsmYwsjb = this.headerList[0].bsmYwsjb; this.editItem = this.loadView(this.activeName); } }); //不动产数据查询上报详情 getReportDetail({ bsmReport: item.bsmSjsb || item.bsmReport }).then((res) => { if (res.code == 200) { this.dataReport = res.result; } }) // 获取xml if (this.visiableXml) { getXml(item.bizMsgid).then((res) => { this.resultInfo = res.message }) } }, changeList (val) { let _index = val.index; if (_index > this.index) { } this.index = _index; this.bsmYwsjb = this.headerList[val.index].bsmYwsjb; this.editItem = this.loadView(this.activeName); // this.diaData.list.forEach((item) => { // if (item.soleurl == this.activeName) { // this.dataTable = item.dataTable; // } // }); }, loadView (view) { return (r) => require.ensure([], () => r(require(`@/components/Business/${view}.vue`))); }, closeDialog () { this.dialogVisible = false; //关闭弹框时将tabs项置空 this.editItem = ""; this.headerList = []; }, submitForm () { let _this = this; this.$store.dispatch( "business/setRules", this.$store.state.business.subRules ); this.$nextTick(() => { this.$refs["editItem"] && this.$refs["editItem"].verificationForm().then((res) => { if (!res) { _this.$message({ message: "请检查表单必填项是否完整", type: "warning", }); return false; } else { _this.saveloding = true; _this.$refs["editItem"] .handleUpdateForm() .then((res) => { if (res == 200) { _this.$alert( '<p><img class="success-images" src="' + this.images + '"/>编辑成功!</p>', "提示", { showConfirmButton: false, dangerouslyUseHTMLString: true, } ); setTimeout(() => { MessageBox.close(false); }, 1500); } }) .catch(function (error) { _this.$alert(error, "提示", { confirmButtonText: "确定", type: "error", }); }); _this.saveloding = false; } }); }); } } } </script> <style scoped lang="scss"> @import "~@/styles/mixin.scss"; @import "~@/styles/dialogBox.scss"; .editForm { /deep/.el-textarea__inner { border: 1px solid #224C7C !important; margin: 0 0 10px 0 !important; width: 100% !important; color: #dadde3 !important; background: transparent !important; } /deep/.el-input__inner { border: 1px solid #224C7C !important; margin: 0 !important; width: 100% !important; color: #dadde3 !important; background: transparent !important; } } /deep/.el-dialog__body { display: flex; flex-direction: column; } /deep/ .el-tabs { color: #CEF8FF; } .sjmx { /deep/.el-tabs__item { height: 50px; padding-top: 6px; } } /deep/.el-tabs__item { color: #CEF8FF !important; display: flex; flex-direction: row; justify-content: center; background: url("~@/image/tabitem.png") no-repeat; background-size: 100% 100%; border: none !important; } .obligee-item-name { background: #05275B; color: #FFFFFF; background: url("~@/image/itembg.png") no-repeat; background-size: 100% 100%; } /deep/.el-tabs__nav-scroll { background: none; } /deep/.el-tabs__nav { display: flex; border: none !important; } /deep/.el-tabs__item.is-top { border: 1px solid #dfe4ed; border-top: 1px solid #dfe4ed; border-bottom: 1px solid transparent; } /deep/.el-tabs__header { border: none; margin-bottom: 0; } /deep/.el-tabs__item.is-top:not(:last-child) { margin-right: 5px; } /deep/.el-tabs__item.is-top { background-color: none !important; } /deep/.el-tabs__item.is-active { background: url("~@/image/tabitemse.png") no-repeat; background-size: 100% 100%; } .success-images { width: 30px; height: 30px; position: relative; top: 10px; right: 3px; } .tab-pane-item { line-height: 20px; color: #02D9FD; p { text-align: center; } } .edit-content { height: 450px; overflow-y: auto; overflow-x: hidden; padding-right: 1px; margin-bottom: 10px; border-top: none; } /deep/.editDialogBox { border-radius: 8px; overflow: hidden; min-width: 1228px; height: 825px !important; .dialog-from { padding: 13px; border-radius: 2px; box-sizing: border-box; .el-row { display: flex; flex-wrap: nowrap; } .el-col { line-height: 18px; display: flex; align-items: center; margin-bottom: 3px; color: #B5D6DC; border-radius: 2px; border: 1px solid #224C7C; margin: 5px; span { display: inline-block; padding: 3px; border-radius: 3px; overflow: hidden; white-space: nowrap; text-align: left; color: #02D9FD; } p { flex: 1; width: 100%; padding-left: 5px; line-height: 20px; color: #c0c4cc; cursor: not-allowed; white-space: nowrap; margin-right: 5px; text-align: right; } } } .dialog_title { display: flex; position: relative; font-size: 24px; top: -11px; width: 38%; height: 40px; margin-left: 28px; justify-content: center; } .el-dialog__header { display: flex; margin-bottom: 15px; } .dialog_footer { flex-direction: column; .dialog_button { margin-top: 8px; } } .divider { width: 100%; border-bottom: 1px solid #ccc; } } .el-dialog__wrapper { overflow: hidden; } </style>