teachcloud-print-web/src/modules/print/components/PreviewPrintTaskTemplate.vue

<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">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :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="操作">
          <div slot-scope="scope">
            <el-button
              class="btn-primary"
              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>