icore-pass/src/views/workFlow/components/drawerAssembly.vue

<!-- 采购需求新增修改弹出框 -->
<template>
  <div id="marsk" v-if="showTab" class="marsk" style="width: 100%">
    <iframe ref="reviewIframe" :src="url" frameborder="0" :style="minHeight"></iframe>
  </div>
</template>
<script>
  import {getCookie, formatDate, dgTree, formatNum, formatNum2} from '@/utils/util.js'
  import { cookieUserName, proPath, cookieUserId, FileX } from '@/config/config.js'
  import {checdemandYears, kTel, checkComplexText, checkNumber, checkcntNumber, checkInteger} from '@/utils/validator.js'
  import store from '@/store/index.js'
  export default {
    props: ['purshowFlag', 'formKey', 'reviewData'],
    data () {
      return {
        showTab: false,
        formkeyUrl:[
          {formKey: 'demand_approval', url: '/purchmanagement.html#/demandIframe'}, // 需求
          {formKey: 'plan_approval', url: '/purchmanagement.html#/planIframe'}, // 计划
          {formKey: 'order_approval', url: '/purchmanagement.html#/orderIframe'}, // 立项
          {formKey: 'comsuming_approval', url: '/purchmanagement.html#/comsumingIframe'}, // 领用
          {formKey: 'post_approval', url: '/purchmanagement.html#/postIframe'}, // 售后
          {formKey: 'pay_approval', url: '/purchmanagement.html#/payIframe'}, // 付款
          {formKey: 'bill_approval', url: '/purchmanagement.html#/billIframe'}, // 结算
          {formKey: 'contract_approval', url: '/purchmanagement.html#/contractIframe'}, // 合同
          {formKey: 'remove_approval', url: '/purchmanagement.html#/removeIframe'} // 移库
        ],
        planUrl: ['demand_approval', 'plan_approval', 'order_approval', 'contract_approval'],
        deliverUrl: ['comsuming_approval', 'post_approval', 'pay_approval', 'bill_approval', 'remove_approval'],
        minHeight: '',
        url: ''
      }
    },
    computed: {
      divHeight: function () {
        return window.innerHeight - 0
      }
    },
    // 时间过滤器
    filters: {
      formatDateFilter: function (iDate, sFormat = 'yyyy-MM-dd HH:mm:ss') {
        if (!iDate) { return ''; }
        let dDate = new Date(iDate);
        let year = dDate.getFullYear();// 年
        let month = dDate.getMonth() + 1;// 月
        if (month < 10) { month = '0' + month; }
        let date = dDate.getDate();// 日
        if (date < 10) { date = '0' + date; }
        let hour = dDate.getHours();// 时
        if (hour < 10) { hour = '0' + hour; }
        let minute = dDate.getMinutes();// 分
        if (minute < 10) { minute = '0' + minute; }
        let second = dDate.getSeconds();// 秒
        if (second < 10) { second = '0' + second; }
        let millisecond = dDate.getMilliseconds();// 毫秒
        if (sFormat.indexOf('yyyy') >= 0) { sFormat = sFormat.replace('yyyy', year + ''); }
        if (sFormat.indexOf('MM') >= 0) { sFormat = sFormat.replace('MM', month + ''); }
        if (sFormat.indexOf('dd') >= 0) { sFormat = sFormat.replace('dd', date + ''); }
        if (sFormat.indexOf('HH') >= 0) { sFormat = sFormat.replace('HH', hour + ''); }
        if (sFormat.indexOf('mm') >= 0) { sFormat = sFormat.replace('mm', minute + ''); }
        if (sFormat.indexOf('ss') >= 0) { sFormat = sFormat.replace('ss', second + ''); }
        if (sFormat.indexOf('SSS') >= 0) { sFormat = sFormat.replace('SSS', millisecond + ''); }
        return sFormat;
      }
    },
    mounted () {
      // 获取公司信息
      let _this = this
      this.minHeight = 'width: 100%;height: 100%;border: 0px;min-height: ' + window.innerHeight + 'px'
      window.addEventListener('message', event => {
      // 根据上面制定的结构来解析iframe内部发回来的数据
        _this.showTab = false
        const data = event.data
        if (data.refresh) {
          _this.$emit('refreshData')
        }
      });
    },
    methods: {
      // 查看附件信息
      fullScreenEvent () {
        let that = this;
        that.showall = !that.showall;
        let main = document.querySelector('.read-Content1');
        if (that.showall) {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        } else {
          if (main.requestFullscreen) {
            main.requestFullscreen()
          } else if (main.mozRequestFullScreen) {
            main.mozRequestFullScreen()
          } else if (main.webkitRequestFullScreen) {
            main.webkitRequestFullScreen()
          } else if (main.msRequestFullscreen) {
            main.msRequestFullscreen()
          }
        }
      }
    },
    watch: {
      purshowFlag (arg) {
        let _this = this
        // console.log('haha', _this.formKey, _this.formkeyUrl)
        // 不同环境跳转的链接不同
        let planBefore = ''
        let deliverBefore = ''
        if (window.top.location.host === 'prod-icore.steerinfo.com' || window.top.location.host === 'portal.steerinfo.com' || window.top.location.host === 'icore.steerinfo.com') {
        // 正式环境地址
            planBefore = 'https://prod-ioms-pumplan.steerinfo.com/views'
            deliverBefore = 'https://prod-ioms-pumdeliver.steerinfo.com/views'
        } else {
            // 测试环境地址
            planBefore = 'https://deve-ioms-pumplan.steerinfo.com/views'
            deliverBefore = 'https://deve-ioms-pumdeliver.steerinfo.com/views'
        }
        _this.formkeyUrl.forEach(res => {
          if (res.formKey === _this.formKey) {
              if (_this.planUrl.includes(_this.formKey)) {
                  _this.url = planBefore + res.url
              } else {
                  _this.url = deliverBefore + res.url
              }
          }
        })
        this.showTab = true
        this.$nextTick(() => {
          setTimeout(()=> {
            this.$refs.reviewIframe.contentWindow.postMessage(_this.reviewData, '*')
          },1000)
        })
      }
    }
  }
</script>
<style scoped>
  .marsk {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 100;
  }
  .tb-row {
    height: 100%;
    margin-bottom: 10px!important;
  }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: stranslateX(20%);
      transform: stranslateX(20%,0);
    }
    100% {
      opacity:1;
      -webkit-transform: stranslateX(0%,0);
      transform: stranslateX(0%,0);
    }
  }
  @-webkit-keyframes fadeInRight {
    0% {
      opacity:0;
      -webkit-transform: stranslateX(20%,0);
      transform: stranslateX(20%,0);
    }
    100% {
      opacity:1;
      -webkit-transform: stranslateX(0%,0);
      transform: stranslateX(0%,0);
    }
  }
  .read-Content1 {
    width: 1200px;
    height: 100%;
    position:fixed;
    z-index: 299;
    right: 0px;
    box-shadow: #333333 0px 0px 8px;
    background-color: #ffffff;
    overflow: hidden;
    /* overflow: auto; */
    -webkit-animation:'fadeInRight' 0.3s 1;
    border-radius: 4px 4px 0 0;
    /* padding-bottom: 28px; */
  }
  .add-title {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    overflow: hidden;
    float: left;
  }
  .add-title2 {
    margin-top: 15px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    overflow: hidden;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .li-box {
    float: left;
    margin-right: 50px;
    min-width: 110px;
  }
  .li-box-title {
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    line-height: 22px;
  }
  .li-box-text {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 22px;
    margin-top: 4px;
  }
</style>