kd-aiot-frontend-wt/src/components/addDoc/sealManagement.vue

<template>
  <ele-modal
    :visible.sync="showEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    :fullscreen="true"
    v-if="showEditFlag"
  >
    <iframe
      :src="fileUrl"
      width="100%"
      v-if="showEditFlag"
      style="height: calc(100vh - 100px); position: absolute; left: -1000000px"
      frameborder="0"
      allowfullscreen="true"
      ref="Iframe"
      id="Iframe"
    ></iframe>

    <seal ref="sealRef" @pdf-generated="pdfGenerated"></seal>

    <template slot="footer">
      <el-button
        type="primary"
        size="small"
        @click="handleSave"
        :disabled="false"
        >保存</el-button
      >

      <el-button size="small" @click="showEditFlag = false" :disabled="false"
        >取消</el-button
      >
    </template>
  </ele-modal>
</template>

<script>
  import seal from './seal.vue';
  import { uploadFileNew } from './api';
  export default {
    data() {
      return {
        fileUrl: '',
        showEditFlag: false,
        restoreData: null
      };
    },
    components: { seal },

    methods: {
      open(row) {
        this.showEditFlag = true;
        this.restoreData = row;

        this.setFileUrl(row);
      },
      restore() {
        this.setFileUrl(this.restoreData);
      },
      handleSave() {
        this.$refs.sealRef.exportToPDF();
      },
      pdfGenerated({ pdfFile, droppedImages }) {
        this.$emit('save', {
          pdfFile: pdfFile,
          id: this.restoreData.id,
          droppedImages
        });
        this.showEditFlag = false;
        // uploadFileNew({
        //   module: 'fm',
        //   multiPartFile: pdfFile
        // })
        //   .then((res) => {
        //     this.$emit('save', {
        //       stampStoragePath: res.data ? [res.data] : [],
        //       id: this.restoreData.id,
        //       droppedImages
        //     });
        //     this.showEditFlag = false;
        //   })
        //   .finally(() => {
        //     this.loading = false;
        //   });
      },
      setFileUrl(row) {
        let file = row.stampStoragePath[0] || row.storagePath[0];
        let fileNames = file.storePath.split('/');
        let url =
          window.location.origin +
          '/api/main/file/getFile?objectName=' +
          file.storePath +
          '&fullfilename=' +
          fileNames[fileNames.length - 1];
        this.fileUrl = '/kkfile/onlinePreview?url=' + btoa(url);
        this.$nextTick(() => {
          this.$refs.Iframe.onload = () => {
            var iframe = document.getElementById('Iframe');
            console.log(iframe);
            var iframeDocument = iframe.contentWindow.document;
            console.log(iframeDocument);

            var container = iframeDocument.querySelectorAll('.container');
            console.log(container);

            this.$refs.sealRef.init(
              container[0].innerHTML.replace(
                /src="https?:\/\/[^\/]+(\/[^"]*)"/g,
                `src="${window.location.origin}$1"`
              ),
              {
                droppedImages: row.droppedImages || ''
              }
            );
          };
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>