kd-aiot-frontend-wt/src/views/bpm/handleTask/components/bomApprover/detailDialog.vue

<template>
  <div>
    <headerTitle title="Bom审批"></headerTitle>

    <div class="iframe_box"  ref="iframeBox">
      <!--   src="http://aiot.zoomwin.com.cn:51001/page-main-data/product/oneProduct?isWt=true&businessId=1895440590572208130" -->
      <!-- {{ location + '/page-main-data/product/oneProduct?isWt=true&businessId=' + businessId }} -->
   
     <iframe
     :src="location + '/page-main-data/product/oneProduct?isWt=true&isBtn=false&businessId=' + businessId" 
      width="100%"
      height="600"
      frameborder="0"
      allowfullscreen
    ></iframe> 
    </div>

   
  </div>
</template>

<script>

  export default {
    components: {

    },
    props: {
      businessId: {
        default: ''
      }
    },
    mixins: [],

    data() {
      return {
        visible: false,
        title: '',

        location: window.location.origin,
  
      };
    },
    created() {},
    mounted() {
    // 在组件挂载后显示加载提示
    this.loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: '#fff',
      target: this.$refs.iframeBox // 将加载提示绑定到iframeBox上
    });

    // 模拟异步数据加载
    setTimeout(() => {
      // 数据加载完成后关闭加载提示
      this.loading.close();
    }, 4000); // 假设数据加载需要3秒
  },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  :deep(.el-table__expanded-cell) {
    padding-bottom: 30px !important;
    border-bottom: 12px solid #ccffcc !important;
  }

  .iframe_box{
    height: 600px;
    width: 100%;
   
  }
</style>