kd-aiot-frontend-eom/src/components/jimureport/browseModal.vue

<template>
  <span>
    <ele-modal
      :visible.sync="showEditFlag"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      append-to-body
      :fullscreen="true"
      :before-close="cancel"
    >
      <browse :url="fileUrl"></browse
    ></ele-modal>
    <!-- <el-link type="primary" @click="open">{{ text }}</el-link> -->
    <el-link v-if="!browseShow" type="primary" @click="open">{{
      text
    }}</el-link>
  </span>
</template>

<script>
  import { getToken } from '@/utils/token-util';
  import { getJmPrintViewUrl } from './api.js';
  import browse from './browse.vue';

  export default {
    components: {
      browse
    },
    props: {
      text: {
        default: '打印预览'
      },
      businessId: {
        default: ''
      },
      businessCode: {
        default: ''
      },
      roleName: {
        type: String,
        default: ''
      },
      // ***  公共按钮形式触发
      browseShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        fileUrl: '',
        showEditFlag: false
      };
    },
    // *** 新增
    mounted() {
      if (this.browseShow) {
        // this.showEditFlag = this.browseShow;
        this.open();
      }
    },
    methods: {
      async open() {
        this.showEditFlag = true;
        let url = await getJmPrintViewUrl(this.businessCode);
        console.log(this.roleName);
        this.fileUrl = `${url}?token=${getToken()}&id=${this.businessId}&userName=${this.roleName}`;
      },
      // *** 新增
      cancel() {
        this.showEditFlag = false;
        if (this.browseShow) {
          this.$emit('cancelQuo');
        }
      }
    }
  };
</script>
<style scoped lang="scss"></style>