You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
345 lines
8.3 KiB
345 lines
8.3 KiB
<template>
|
|
<el-container
|
|
v-loading="loading"
|
|
:class="{ 'is-perview': isPreview }"
|
|
class="wk-print-container">
|
|
<el-header >
|
|
<template v-if="isPreview">
|
|
<el-button type="primary" @click="handleClick('download')">{{ `${perviewTypeName} 下载` }}</el-button>
|
|
<el-button type="primary" @click="handleClick('print')">打印</el-button>
|
|
<el-button @click="handleClick('goback')">取消</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<span class="select-label">选择模版</span>
|
|
<el-select
|
|
v-model="templateId"
|
|
style="width: 170px;"
|
|
class="handle-item-content"
|
|
@change="getDetail">
|
|
<el-option
|
|
v-for="item in templateOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"/>
|
|
</el-select>
|
|
<span class="select-label">选择模版</span>
|
|
<el-select
|
|
v-model="perviewType"
|
|
style="width: 80px;"
|
|
class="handle-item-content">
|
|
<el-option
|
|
v-for="item in previewOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"/>
|
|
</el-select>
|
|
|
|
<el-button class="preview-button" type="primary" @click="printPreviewClick">打印预览</el-button>
|
|
</template>
|
|
</el-header>
|
|
<el-main>
|
|
<div class="main-container">
|
|
<div class="main-content">
|
|
<iframe
|
|
v-show="isPreview"
|
|
id="wkPrint"
|
|
:height="iframeHeight"
|
|
:src="iframeUrl"
|
|
style="width: 100%;margin-top: 54px;"
|
|
scrolling="no"
|
|
frameborder="0"/>
|
|
</div>
|
|
<div v-show="!isPreview" class="main-tips">您可以在当前页面对模版文字进行调整，确认无误后可进行打印</div>
|
|
<div v-show="!isPreview" class="main-content">
|
|
<tinymce
|
|
ref="editor" :toolbar="[]" v-model="content" :init="{
|
|
statusbar: false,
|
|
plugins: 'print autoresize',
|
|
extended_valid_elements: 'span[class|title|wktag|style|contenteditable]',
|
|
content_style: ' body {padding: 60px !important;width: 595px; margin: 0 auto;} p { margin: 5px 0;}',
|
|
}" class="rich-txt" />
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
printPrintAPI,
|
|
printRecordDetailAPI,
|
|
printSaveRecordAPI,
|
|
printTemplateListAPI,
|
|
printPreviewAPI
|
|
} from '@/api/admin/crm'
|
|
import { crmFileDownByPathAPI, downloadFileAPI } from '@/api/common'
|
|
|
|
import Tinymce from '@/components/Tinymce'
|
|
|
|
import crmTypeModel from '@/views/crm/model/crmTypeModel'
|
|
import { downloadFileWithBuffer } from '@/utils'
|
|
|
|
export default {
|
|
name: 'Print',
|
|
components: {
|
|
Tinymce
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
isPreview: false, // 是编辑 还是打印预览
|
|
templateOptions: [],
|
|
templateId: '',
|
|
typeId: '', // 模块对应的id
|
|
previewOptions: ['word', 'pdf'],
|
|
perviewType: 'word',
|
|
content: '',
|
|
historyData: null,
|
|
|
|
// 预览
|
|
iframeUrl: '',
|
|
iframeHeight: document.documentElement.clientHeight - 170,
|
|
srcData: null
|
|
}
|
|
},
|
|
computed: {
|
|
perviewTypeName() {
|
|
return {
|
|
word: 'Word',
|
|
pdf: 'PDF'
|
|
}[this.perviewType]
|
|
}
|
|
},
|
|
created() {
|
|
if (this.$route.query.type == 'history') {
|
|
this.getRecordDetail()
|
|
} else {
|
|
this.typeId = this.$route.query.id
|
|
this.getTemplateOptions(crmTypeModel.convertKeyToType(this.$route.query.module))
|
|
}
|
|
|
|
window.addEventListener('resize', this.changeIframeHeight)
|
|
},
|
|
beforeRouteUpdate(to, from, next) {
|
|
this.content = ''
|
|
next()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.changeIframeHeight)
|
|
},
|
|
methods: {
|
|
changeIframeHeight() {
|
|
this.iframeHeight = document.documentElement.clientHeight - 170
|
|
},
|
|
|
|
/**
|
|
* 获取模板配置
|
|
*/
|
|
getTemplateOptions(type) {
|
|
this.loading = true
|
|
printTemplateListAPI({
|
|
type: type,
|
|
pageType: 0
|
|
})
|
|
.then(res => {
|
|
this.templateOptions = res.data.list || []
|
|
if (this.$route.query.type != 'history') {
|
|
if (this.templateOptions.length) {
|
|
this.templateId = this.templateOptions[0].id
|
|
this.getDetail()
|
|
} else {
|
|
this.templateId = ''
|
|
}
|
|
}
|
|
|
|
this.loading = false
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 详情
|
|
*/
|
|
getDetail() {
|
|
this.loading = true
|
|
printPrintAPI({
|
|
template_id: this.templateId,
|
|
action_id: this.typeId,
|
|
type: crmTypeModel.convertKeyToType(this.$route.query.module)
|
|
})
|
|
.then(res => {
|
|
this.loading = false
|
|
this.content = res.data
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 详情
|
|
*/
|
|
getRecordDetail() {
|
|
this.loading = true
|
|
printRecordDetailAPI({
|
|
record_id: this.$route.query.id,
|
|
type: 20
|
|
})
|
|
.then(res => {
|
|
this.loading = false
|
|
const data = res.data || {}
|
|
this.historyData = data
|
|
this.templateId = data.template_id
|
|
this.typeId = data.typeId
|
|
|
|
this.getTemplateOptions(data.type)
|
|
this.content = data.content || ''
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 打印
|
|
*/
|
|
compactPrint() {
|
|
this.$refs.editor.editor.execCommand('mcePrint')
|
|
this.savePrintRecord()
|
|
},
|
|
|
|
/**
|
|
* 打印预览
|
|
*/
|
|
printPreviewClick() {
|
|
this.loading = true
|
|
printPreviewAPI({
|
|
type: this.perviewType,
|
|
content: this.content
|
|
})
|
|
.then(res => {
|
|
this.loading = false
|
|
const data = res.data
|
|
const iframeUrl = `/crm/preview/previewPDF?key=${data}`
|
|
downloadFileAPI({ key: data }, iframeUrl).then(res => {
|
|
this.iframeUrl = window.URL.createObjectURL(res.data)
|
|
}).catch(() => {})
|
|
|
|
this.srcData = data
|
|
this.isPreview = true
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
*保存打印记录
|
|
*/
|
|
savePrintRecord() {
|
|
if (this.templateId && this.typeId) {
|
|
printSaveRecordAPI({
|
|
template_id: this.templateId,
|
|
action_id: this.typeId,
|
|
recordContent: this.content,
|
|
type: crmTypeModel.convertKeyToType(this.$route.query.module)
|
|
})
|
|
.then(res => {
|
|
})
|
|
.catch(() => {
|
|
})
|
|
}
|
|
},
|
|
|
|
hidenView() {
|
|
this.$emit('close')
|
|
},
|
|
|
|
/** 预览页面逻辑 */
|
|
|
|
handleClick(type) {
|
|
if (type == 'goback') {
|
|
this.isPreview = false
|
|
} else if (type == 'print') {
|
|
document.getElementById('wkPrint').contentWindow.print() // 调用浏览器的打印功能打印指定区域
|
|
this.savePrintRecord()
|
|
} else if (type == 'download') {
|
|
if (this.srcData) {
|
|
var ext = this.perviewType
|
|
const path = this.srcData
|
|
var data = {
|
|
key: path,
|
|
type: ext === 'word' ? 2 : 1
|
|
}
|
|
ext = ext === 'word' ? 'doc' : 'pdf'
|
|
crmFileDownByPathAPI(data).then(res => {
|
|
const blob = new Blob([res.data], {
|
|
type: ''
|
|
})
|
|
downloadFileWithBuffer(blob, `文档.${ext}`)
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wk-print-container {
|
|
.el-header {
|
|
background-color: white;
|
|
box-shadow: 0px 1px 2px #dbdbdb;
|
|
line-height: 60px;
|
|
padding: 0 70px;
|
|
z-index: 1;
|
|
position: relative;
|
|
|
|
.select-label {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.el-select + .select-label {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
|
|
.preview-button {
|
|
position: absolute;
|
|
right: 70px;
|
|
top: 16px;
|
|
}
|
|
|
|
.el-main {
|
|
padding: 0;
|
|
}
|
|
|
|
&.is-perview {
|
|
.el-header {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.main-tips {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
margin: 20px 0;
|
|
color: #BFBFBF;
|
|
}
|
|
|
|
.main-content {
|
|
width: 66%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
</style>
|