longchuang-vue/src/App.vue

<template>
  <div id="app" :class="{ 'screen-route-app': isScreenRoute }">
    <div v-if="isScreenRoute" class="screen-route-shell">
      <div class="screen-route-scale" :style="screenScaleStyle">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
    <transition v-else name="fade" mode="out-in">
      <router-view></router-view>
    </transition>

    <!-- 全局审批通知管理器 -->
    <approval-notification-manager v-if="!isScreenRoute" ref="approvalNotificationManager"></approval-notification-manager>
  </div>
</template>

<script>
import ApprovalNotificationManager from '@/components/ApprovalNotificationManager.vue'
import { SCREEN_DESIGN_HEIGHT, SCREEN_DESIGN_WIDTH, setScreenScale } from '@/utils/screenAdapt'

export default {
  name: 'App',
  
  components: {
    ApprovalNotificationManager
  },
  
  data() {
    return {
      query: {},
      version: '1.3.3',
      isScreenRoute: false,
      screenScale: 1
    }
  },

  computed: {
    screenScaleStyle() {
      const scale = this.screenScale > 0 ? this.screenScale : 1
      const percent = `${100 / scale}%`
      return {
        width: percent,
        height: percent,
        transform: `scale(${scale})`,
        transformOrigin: 'left top'
      }
    }
  },

  watch: {
    '$route.path': {
      immediate: true,
      handler() {
        this.syncScreenRouteMode()
      }
    }
  },

  created () {
    this.versionReload()
  },

  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.syncScreenRouteMode()
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize)
    document.body.classList.remove('screen-route-body')
    setScreenScale(1)
  },

  methods: {
    /**
     * 版本检查及自动刷新
     */
    versionReload(){
      let version = this.version          //版本号（每次上线前需要更新下版本号）
      console.log('最新系统版本: ',version)
      console.log('当前系统版本: ',this.version)
      let versionLocal = localStorage.getItem('_version_');
      if(version!=versionLocal){
        localStorage.setItem('_version_',version);
        this.version=versionLocal;
        location.reload();
      }
    },
    isScreenPath(path) {
      return /^\/screen-/.test(String(path || ''))
    },
    syncScreenRouteMode() {
      this.isScreenRoute = this.isScreenPath(this.$route && this.$route.path)
      this.updateScreenBodyClass()
      this.updateScreenScale()
    },
    updateScreenBodyClass() {
      if (this.isScreenRoute) {
        document.body.classList.add('screen-route-body')
      } else {
        document.body.classList.remove('screen-route-body')
      }
    },
    handleWindowResize() {
      this.updateScreenScale()
    },
    updateScreenScale() {
      if (!this.isScreenRoute) {
        this.screenScale = 1
        setScreenScale(1)
        return
      }
      const width = window.innerWidth || document.documentElement.clientWidth || SCREEN_DESIGN_WIDTH
      const height = window.innerHeight || document.documentElement.clientHeight || SCREEN_DESIGN_HEIGHT
      const scaleX = width / SCREEN_DESIGN_WIDTH
      const scaleY = height / SCREEN_DESIGN_HEIGHT
      const scale = Math.min(scaleX, scaleY)
      this.screenScale = scale > 0 ? Number(scale.toFixed(6)) : 1
      setScreenScale(this.screenScale)
    },
    
    /**
     * 手动触发审批通知检查（供外部调用）
     */
    checkApprovalNotifications() {
      if (this.$refs.approvalNotificationManager) {
        this.$refs.approvalNotificationManager.manualCheck()
      }
    },
    
    /**
     * 清除指定申请单的通知记录（审批完成后调用）
     * @param {string} applyNo - 申请单号
     */
    clearApprovalNotification(applyNo) {
      if (this.$refs.approvalNotificationManager) {
        this.$refs.approvalNotificationManager.clearNotification(applyNo)
      }
    }
  }
}
</script>

<style>
body.screen-route-body {
  overflow: hidden;
  background: #000;
}

#app.screen-route-app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.screen-route-shell {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.screen-route-scale {
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}

.screen-route-scale > * {
  width: 100% !important;
  height: 100% !important;
}
</style>