kd-aiot-frontend-eom/lib/vue-form-making/src/components/PreviewDialog.vue

<template>
  <cus-dialog
    :visible="previewVisible"
    @on-close="previewVisible = false"
    ref="widgetPreview"
    form
    :title="$t('fm.actions.preview')"
    fullscreen
    class="fm-generate-preview-container"
  >

    <el-radio-group v-model="platform" size="mini" class="platform-controller">
      <el-radio-button label="pc"><i class="fm-iconfont icon-pc"/></el-radio-button>
      <el-radio-button label="pad"><i class="fm-iconfont icon-pad"/></el-radio-button>
      <el-radio-button label="mobile"><i class="fm-iconfont icon-mobile"/></el-radio-button>
    </el-radio-group>

    <div class="fm-generate-preview" :class="`${platform}`" v-loading="exportLoading || printLoading">
      <el-scrollbar style="height: 100%;">
        <generate-form preview :print-read="printRead" :platform="platform" :edit="formEdit" insite="true" v-if="previewVisible && showForm && (previewForm.config.ui == 'element' || !previewForm.config.ui)" :data="previewForm" :value="widgetModels" :remote="remoteFuncs" ref="generateForm">

          <template v-slot:blank="scope">
            Width<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
            Height：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
          </template>
        </generate-form>

        <antd-generate-form preview :print-read="printRead" :platform="platform" :edit="formEdit" insite="true" v-if="previewVisible && showForm && previewForm.config.ui == 'antd'" :data="previewForm" :value="widgetModels" :remote="remoteFuncs" ref="generateAntForm">
          <template v-slot:blank="scope">
            <a-input 
              v-decorator="[
                'blank',
                {
                  initialValue: scope.model.blank
                }
              ]"
            style="width: 100px"></a-input>
          </template>
        </antd-generate-form>
      </el-scrollbar>

      <div v-show="platform === 'mobile' && showQrcode" style=" position: absolute; top: 80px; left: 50%; margin-left: 220px;">
        <el-card shadow="never" :body-style="{
          padding: '15px'
        }">
          <div style="line-height: 20px; margin-bottom: 10px; ">{{$t('fm.description.qrcodePreview')}}</div>
          <div id="fmpreviewqrcode"></div>
        </el-card>
      </div>
    </div>

    <template slot="action">
      <el-button type="primary" @click="handleTest">{{$t('fm.actions.getData')}}</el-button>
      <el-button @click="handleReset">{{$t('fm.actions.reset')}}</el-button>
      <el-button @click="formEdit = false" v-if="formEdit" :disabled="printRead">{{$t('fm.actions.disabledEdit')}}</el-button>
      <el-button @click="formEdit = true" v-else :disabled="printRead">{{$t('fm.actions.enabledEdit')}}</el-button>
      <el-button @click="printRead = true" v-if="!printRead">{{$t('fm.actions.printReadMode')}}</el-button>
      <el-button @click="printRead = false" v-if="printRead">{{$t('fm.actions.editMode')}}</el-button>
      <el-button @click="handlePrint" :loading="printLoading">{{$t('fm.actions.print')}}</el-button>
      <el-button size="large" @click="handleExportPDF" :loading="exportLoading">{{$t('fm.actions.exportPDF')}}</el-button>
      <el-button @click="previewVisible = false" type="info" plain>{{$t('fm.actions.close')}}</el-button>
    </template>

    <PreviewPdf ref="pdfPreview"></PreviewPdf>
  </cus-dialog>
</template>

<script>
import CusDialog from './CusDialog'
import GenerateForm from './GenerateForm'
import AntdGenerateForm from './AntdvGenerator/GenerateForm'
import { consoleError } from '../util/index'
import { Message } from 'element-ui'
import PreviewPdf from './PreviewPdf.vue'

export default {
  components: {
    CusDialog,
    GenerateForm,
    AntdGenerateForm,
    PreviewPdf
  },
  props: {
  },
  data () {
    return {
      previewVisible: false,
      showForm: false,
      formEdit: true,
      previewForm: {},
      widgetModels: {},
      remoteFuncs: {
        func_test (resolve) {
          setTimeout(() => {
            const options = [
              {id: '1', name: '1111'},
              {id: '2', name: '2222'},
              {id: '3', name: '3333'}
            ]

            resolve(options)
          }, 50)
        },
        funcGetToken (resolve) {
          request.get('https://tools-server.making.link/api/uptoken').then(res => {
            resolve(res.uptoken)
          })
        },
        upload_callback (response, file, fileList) {
          console.log('callback', response, file, fileList)
        },
      },
      platform: 'pc',
      printRead: false,
      showQrcode: false,
      exportLoading: false,
      printLoading: false
    }
  },
  methods: {
    generateQrcode (url) {
      if (!window.QRCode) {
        consoleError('QRCode is not defined')

        return false
      }

      setTimeout(() => {
        this.showQrcode = true
        var qrcode = new QRCode(document.getElementById("fmpreviewqrcode"), {
          width : 120,
          height : 120
        });

        qrcode.makeCode(url)
      }, 500)
    },
    preview (data, platform) {
      this.previewForm = data
      this.formEdit = this.previewVisible = true
      this.printRead = false
      this.showQrcode = false

      this.platform = platform

      this.$nextTick(() => {
        window.document.getElementsByClassName('fm-generate-preview-container')?.[0].removeAttribute('tabindex')

        this.showForm = true
      })
    },
    handleTest () {
      const $form = this.previewForm.config.ui == 'element' || !this.previewForm.config.ui ?
        this.$refs.generateForm : this.$refs.generateAntForm

      $form.getData().then(data => {
        this.$emit('get-data-success', data)
        this.$refs.widgetPreview.end()
      }).catch(e => {
        Message.error(e)
        this.$refs.widgetPreview.end()
      })
    },
    handleReset () {
      const $form = this.previewForm.config.ui == 'element' || !this.previewForm.config.ui ?
        this.$refs.generateForm : this.$refs.generateAntForm

      $form.reset()
    },
    handleExportWord () {
     var rules = "",
          ss = document.styleSheets;
      for (var i = 0; i < ss.length; ++i) {
          for (var x = 0; x < ss[i].cssRules.length; ++x) {
              rules += ss[i].cssRules[x].cssText;
          }
      }

      var header = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
      <head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title>
      <style>${rules}</style>
      </head><body>`;
 
      var footer = "</body></html>";
  
      var html = header+document.getElementById('export-id').innerHTML+footer;
  
      var blob = new Blob(['\ufeff', html], {
          type: 'application/msword'
      });
      
      // Specify link url
      var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
      
      // Specify file name
      let filename = filename?filename+'.doc':'document.doc';
      
      // Create download link element
      var downloadLink = document.createElement("a");
  
      document.body.appendChild(downloadLink);
      
      if(navigator.msSaveOrOpenBlob ){
          navigator.msSaveOrOpenBlob(blob, filename);
      }else{
          // Create a link to the file
          downloadLink.href = url;
          
          // Setting the file name
          downloadLink.download = filename;
          
          //triggering the function
          downloadLink.click();
      }
      
      document.body.removeChild(downloadLink);
    },
    handlePrint () {
      const tempPrint = this.printRead
      this.printLoading = true
      setTimeout(() => {
        this.printRead = true
        this.$nextTick(() => {
          const $form = this.previewForm.config.ui == 'element' || !this.previewForm.config.ui ?
            this.$refs.generateForm : this.$refs.generateAntForm

          $form.print().then().finally(() => {
            this.printLoading = false
            this.printRead = tempPrint
          })
        })
      }, 100)
    },
    handleExportPDF () {
      const tempPrint = this.printRead
      this.exportLoading = true
      setTimeout(() => {
        this.printRead = true

        this.$nextTick(() => {
          const $form = this.previewForm.config.ui == 'element' || !this.previewForm.config.ui ?
            this.$refs.generateForm : this.$refs.generateAntForm

          $form.exportPDF().then(data => {
            this.$refs.pdfPreview.open(data)        
          }).finally(() => {
            this.exportLoading = false
            this.printRead = tempPrint
          })
        })
      }, 100)
    }
  }
}
</script>

<style lang="scss">
.fm-generate-preview-container{
  .platform-controller{
    position: absolute;
    // width: 120px;
    top: 50px;
    z-index: 5000;
    left: 20px;
    // margin-left: -60px;
  }

  .fm-generate-preview{
    margin-top: 15px !important;
  }
}

@media print{
  .fm-design-container{
    display: none;
  }

  .fm-generate-preview-container{
    position: relative;

    .el-dialog{
      display: block;
    }

    .el-dialog__header{
      display: none;
    }

    .el-dialog__footer{
      display: none;
    }

    .el-dialog__body{
      padding: 0;
      display: block;

      .fm-generate-preview{
        box-shadow: none;
        border: 0;
      }
    }

    .platform-controller{
      display: none;
    }

  }
}
</style>