|
@@ -0,0 +1,115 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="preview-print-task-template">
|
|
|
|
+ <!-- view template-->
|
|
|
|
+ <el-dialog
|
|
|
|
+ :visible.sync="templateDialogIsShow"
|
|
|
|
+ title="查看印品"
|
|
|
|
+ width="500px"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ :close-on-press-escape="false"
|
|
|
|
+ append-to-body
|
|
|
|
+ @open="initData"
|
|
|
|
+ >
|
|
|
|
+ <el-table :data="templates" border stripe>
|
|
|
|
+ <el-table-column
|
|
|
|
+ type="index"
|
|
|
|
+ label="序号"
|
|
|
|
+ width="70"
|
|
|
|
+ align="center"
|
|
|
|
+ :index="indexMethod"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column prop="type" label="印品名称">
|
|
|
|
+ <span slot-scope="scope">
|
|
|
|
+ {{ scope.row.type | templateClassifyFilter }}
|
|
|
|
+ </span>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column class-name="action-column" label="操作" align="center">
|
|
|
|
+ <div slot-scope="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ class="btn-table-icon"
|
|
|
|
+ type="text"
|
|
|
|
+ icon="icon icon-circle-right"
|
|
|
|
+ @click="toViewTemplate(scope.row)"
|
|
|
|
+ title="查看详情"
|
|
|
|
+ ></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <div slot="footer"></div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <!-- template-detail -->
|
|
|
|
+ <el-dialog
|
|
|
|
+ :visible.sync="templateDetailDialogIsShow"
|
|
|
|
+ title="印品模板"
|
|
|
|
+ width="1200px"
|
|
|
|
+ top="0px"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ :close-on-press-escape="false"
|
|
|
|
+ append-to-body
|
|
|
|
+ >
|
|
|
|
+ <div id="template-frame"></div>
|
|
|
|
+ <div slot="footer"></div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { printTaskTemplateView } from "../api";
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: "preview-print-task-template",
|
|
|
|
+ props: {
|
|
|
|
+ instance: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default() {
|
|
|
|
+ return {};
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ templateDialogIsShow: false,
|
|
|
|
+ templateDetailDialogIsShow: false,
|
|
|
|
+ templates: []
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ async initData() {
|
|
|
|
+ this.templates = [];
|
|
|
|
+ const data = await printTaskTemplateView(this.instance.printPlanId);
|
|
|
|
+ this.templates = data || [];
|
|
|
|
+ },
|
|
|
|
+ toViewTemplate(row) {
|
|
|
|
+ if (row.url) {
|
|
|
|
+ window.open(row.url);
|
|
|
|
+ } else {
|
|
|
|
+ this.templateDetailDialogIsShow = true;
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.initFrame(row.content);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ initFrame(htmlContent) {
|
|
|
|
+ htmlContent = htmlContent
|
|
|
|
+ .replace(/\$\{.+?\}/g, "")
|
|
|
|
+ .replace(/<#.+?>/g, "")
|
|
|
|
+ .replace(/<\/#.+?>/g, "");
|
|
|
|
+ const frameContainerDom = document.getElementById("template-frame");
|
|
|
|
+ frameContainerDom.innerHTML = "";
|
|
|
|
+ const iframeDom = document.createElement("iframe");
|
|
|
|
+ frameContainerDom.appendChild(iframeDom);
|
|
|
|
+ console.dir(frameContainerDom);
|
|
|
|
+ const wwidth = frameContainerDom.parentNode.clientWidth - 50;
|
|
|
|
+ const wheight = window.innerHeight - 130;
|
|
|
|
+ iframeDom.style.cssText = `width: ${wwidth}px;height: ${wheight}px;border:none;outline:none;background-color: #fff;`;
|
|
|
|
+ const iframeDoc = iframeDom.contentDocument;
|
|
|
|
+ iframeDoc.open();
|
|
|
|
+ iframeDoc.write(htmlContent);
|
|
|
|
+ iframeDoc.close();
|
|
|
|
+ },
|
|
|
|
+ open() {
|
|
|
|
+ this.templateDialogIsShow = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|