<template> <el-dialog ref="dialog" v-dialogDrag v-if="isShowDisplay" :visible.sync="isShowDisplay" center class="preview" :show-close="false" destroy-on-close title="交易快照" width="80%" :fullscreen="isShowFull" @close="handleClose" :modal-append-to-body="false" :append-to-body="true" > <div slot="title" class="preview-title-wrap"> <div class="preview-title">交易快照</div> <div class="btn-wrap"> <i v-if="!isShowFull" class="el-icon-full-screen icon-sty" style="margin-right: 10px;" @click="fullScreen"></i> <i v-else class="el-icon-copy-document icon-sty" style="margin-right: 10px;" @click="noFullScreen"></i> <i class="el-icon-close icon-sty" @click="previewVisible = false"></i> </div> </div> <div style="height: 100%;"> <iframe :src="srcpth" frameborder="0" width="100%"></iframe> </div> <div class="btn-wrap"> <c-button size="small" @click="handleClose" type="primary" style="margin-left: 10px">返回</c-button> </div> </el-dialog> </template> <script> import Trnrel from "../model"; import Api from "~/service/Api"; import event from "../event"; import commonFunctions from "~/mixin/commonFunctions.js"; import MtView from "~/components/business/MtView"; import { log } from "util"; import { display } from "~/service/business/file"; export default { inject: ["root"], name: "displayDialog", props: { parentsVisiable: { type: Boolean, default: false }, displayModel: { type: Object, default: () => {} }, }, mixins: [event, commonFunctions], components: { MtView}, data() { return { isShowFull: false, isShowDisplay:false, srcpth:"", trninr:"", inifrm:"", trn: {}, flg: [], atptxt: "", relstaEN: "", usgtxt: "", textContext:"", previewType:"", suppress:"", formatData:{} }; }, mounted() { }, created(){ }, watch: { isShowDisplay(newVal) { if (newVal) { this.srcpth=location.origin+`/display/${this.inifrm}?inr=${this.trninr}&businessType=TRN` } } }, methods: { fullScreen () { this.isShowFull = true }, noFullScreen () { this.isShowFull = false }, handleClose(){ this.isShowDisplay = false }, } }; </script> <style scoped lang="less"> .preview /deep/ .el-dialog--center .el-dialog__body { width: 100%; height: calc(100% - 54px); } .preview /deep/ .el-dialog--center .el-dialog__body > div { height: 100%; } .preview-title-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; .preview-title { width: 50%; text-align: left; color: #fff; } .btn-wrap { width: 50%; text-align: right; color: #fff; .icon-sty { font-size: 18px; cursor: pointer; } .icon-sty:hover { color: #6653f2; } } } .messageLabel { /deep/ .el-form-item__label { text-align: left; font-weight: bold; font-size: 15px; color: #1561e0; width: auto !important; } } #business_container { .eContainer { .c-page-container-div { .eibs-tab { /deep/ .el-form { height: calc(100% - 64px)!important; } } } } } .eibs-tab { /deep/ .el-divider--horizontal { margin-top: 10px; } /deep/ .el-form-item__label { text-align: left; font-weight: bold; } /deep/ .el-col { .el-divider--horizontal { margin-top: 5px; } } /deep/ .el-form { overflow: auto!important; margin-bottom: 0!important; .el-form-item { margin-bottom: 10px; } } .btn-wrap { padding: 10px 0px; display: flex; justify-content: center; background: #fff; box-shadow: var(--box-shadow); } } .fot{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); color: #fff; } </style>