<template> <div style="display:inline-block;margin-left:20px;"> <el-button :disabled="disabled" @click="open" type="primary">比较历史文本</el-button> <el-dialog :fullscreen="isShowFull" :modal-append-to-body="false" :show-close="false" :visible.sync="previewVisible" @close="handleClosePreview" center class="preview" destroy-on-close ref="dialog" title="文本比较结果" v-dialogDrag v-if="previewVisible" width="90%"> <div class="preview-title-wrap" slot="title"> <div class="preview-title">文本比较结果</div> <div class="btn-wrap"> <i @click="fullScreen" class="el-icon-full-screen icon-sty" style="margin-right: 10px;" v-if="!isShowFull"></i> <i @click="noFullScreen" class="el-icon-copy-document icon-sty" style="margin-right: 10px;" v-else></i> <i @click="previewVisible = false" class="el-icon-close icon-sty"></i> </div> </div> <div style="text-align:center;"> <div class="compareA4" :style="{ 'width': isShowScale ? 794 * curScale + 'px' : '', 'font-size': isShowScale ? curFontSize : '', 'paddingLeft': 15*curScale+'px', 'paddingRight': 15*curScale+'px', 'backgroundColor':'#F5F5F5' }"> <p :style="{ 'font-size':'18px', 'color':editCount?'red':'green', }">{{diffDescription}}</p> <br/> <div v-loading="!result" v-html="result" style="padding: 80px 10% 100px 8%;"> </div> </div> </div> </el-dialog> </div> </template> <script> import Api from "~/service/Api"; export default { props:{ leftText:{ default:'', type:String }, rightText:{ default:'', type:String }, isShowScale:{ default:true, type:Boolean }, disabled:{ default:false, type:Boolean } }, data(){ return { diffDescription:'', previewVisible:false, isShowFull : false, result:'', curScale: 1, curFontSize: '', editCount:0, } }, methods:{ fullScreen() { this.isShowFull = true; }, noFullScreen() { this.isShowFull = false; }, handleClosePreview() { this.isShowFull = false; }, async open(){ this.previewVisible = true this.contrast() }, async contrast(){ this.result = "" this.diffDescription = "" let res = await Api.post(`/business/gittxt/compareText`, { leftText:this.leftText, rightText:this.rightText }); if (res.respCode === SUCCESS) { this.result = res.data.resultHtml.replace(/background:#e6ffe6;/g,"background:green;color:white;").replace(/background:#ffe6e6;/g,"background:red;color:white;") this.editCount = res.data.editCount if(res.data.editCount){ this.diffDescription = `文本内容发生修改` } else{ this.diffDescription = `文本内容无修改` } } }, initViewDivWrapWidth () { if (this.isShowScale) { let contentWidth = document.body.clientWidth - 340 if (contentWidth > 1588) { this.curScale = 2 } else if (contentWidth < 1000) { this.curScale = 1 } else { this.curScale = contentWidth / 794 } this.curFontSize = this.curScale * 18.6 + 'px' } }, }, mounted(){ this.initViewDivWrapWidth (); } } </script> <style lang="less" scoped> .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%; } .compareA4{ width: 794px; font-size: 1.5em; font-family: 黑体; display: inline-block; text-align: left; line-height: 1.5em; } .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; } } } </style>