修改bug

src/views/produce/components/picking/newFileBrowse.vue

@@ -1,10 +1,29 @@
 <template>
-  <div v-if="visible" class="report-page">
-    <div>
+  <div
+    v-if="visible"
+    ref="previewWrap"
+    class="report-page"
+    :class="{ 'is-fullscreen': isFullscreen }"
+  >
+    <div class="preview-toolbar">
+      <el-tooltip
+        :content="isFullscreen ? '退出全屏' : '全屏展示'"
+        placement="top"
+      >
+        <el-button
+          circle
+          size="mini"
+          :icon="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
+          @click="toggleFullscreen"
+        ></el-button>
+      </el-tooltip>
+    </div>
+
+    <div class="preview-content">
       <iframe
         :src="fileUrl"
         width="100%"
-        style="height: calc(70vh - 60px); margin-top: 30px"
+        class="preview-iframe"
         frameborder="0"
         allowfullscreen="true"
       ></iframe>
@@ -24,11 +43,51 @@
     data() {
       return {
         fileUrl: '',
-        visible: false
+        visible: false,
+        isFullscreen: false,
+        fallbackFullscreen: false
       };
     },
     computed: {},
-    mounted() {},
+    mounted() {
+      document.addEventListener(
+        'fullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.addEventListener(
+        'webkitfullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.addEventListener(
+        'mozfullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.addEventListener(
+        'MSFullscreenChange',
+        this.handleFullscreenChange
+      );
+      document.addEventListener('keydown', this.handleKeydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener(
+        'fullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.removeEventListener(
+        'webkitfullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.removeEventListener(
+        'mozfullscreenchange',
+        this.handleFullscreenChange
+      );
+      document.removeEventListener(
+        'MSFullscreenChange',
+        this.handleFullscreenChange
+      );
+      document.removeEventListener('keydown', this.handleKeydown);
+      this.exitFullscreen();
+    },
     methods: {
       setFileUrl(row) {
         console.log(row);
@@ -44,9 +103,117 @@
         this.visible = true;
       },
 
-      handleClose() {
+      async handleClose() {
+        await this.exitFullscreen();
         this.visible = false;
         this.$emit('close');
+      },
+
+      getFullscreenElement() {
+        return (
+          document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement ||
+          document.msFullscreenElement
+        );
+      },
+
+      requestFullscreen(element) {
+        if (element.requestFullscreen) {
+          return element.requestFullscreen();
+        }
+
+        if (element.webkitRequestFullscreen) {
+          return element.webkitRequestFullscreen();
+        }
+
+        if (element.mozRequestFullScreen) {
+          return element.mozRequestFullScreen();
+        }
+
+        if (element.msRequestFullscreen) {
+          return element.msRequestFullscreen();
+        }
+
+        return Promise.reject(new Error('unsupported fullscreen'));
+      },
+
+      exitBrowserFullscreen() {
+        if (document.exitFullscreen) {
+          return document.exitFullscreen();
+        }
+
+        if (document.webkitExitFullscreen) {
+          return document.webkitExitFullscreen();
+        }
+
+        if (document.mozCancelFullScreen) {
+          return document.mozCancelFullScreen();
+        }
+
+        if (document.msExitFullscreen) {
+          return document.msExitFullscreen();
+        }
+
+        return Promise.resolve();
+      },
+
+      async toggleFullscreen() {
+        if (this.isFullscreen) {
+          await this.exitFullscreen();
+          return;
+        }
+
+        const element = this.$refs.previewWrap;
+        if (!element) {
+          return;
+        }
+
+        try {
+          await this.requestFullscreen(element);
+          this.fallbackFullscreen = false;
+          this.isFullscreen = true;
+        } catch (error) {
+          this.fallbackFullscreen = true;
+          this.isFullscreen = true;
+        }
+      },
+
+      async exitFullscreen() {
+        if (!this.isFullscreen) {
+          return;
+        }
+
+        const fullscreenElement = this.getFullscreenElement();
+        this.fallbackFullscreen = false;
+        this.isFullscreen = false;
+
+        if (fullscreenElement === this.$refs.previewWrap) {
+          try {
+            await this.exitBrowserFullscreen();
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      },
+
+      handleFullscreenChange() {
+        const fullscreenElement = this.getFullscreenElement();
+        if (fullscreenElement === this.$refs.previewWrap) {
+          this.isFullscreen = true;
+          this.fallbackFullscreen = false;
+          return;
+        }
+
+        if (!this.fallbackFullscreen) {
+          this.isFullscreen = false;
+        }
+      },
+
+      handleKeydown(event) {
+        if (event.key === 'Escape' && this.fallbackFullscreen) {
+          this.exitFullscreen();
+        }
       }
     }
   };
@@ -58,5 +225,33 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
+    background: #fff;
+
+    &.is-fullscreen {
+      position: fixed;
+      inset: 0;
+      z-index: 3000;
+      padding: 10px;
+      background: #fff;
+    }
+  }
+
+  .preview-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 36px;
+    flex-shrink: 0;
+    padding: 0 4px;
+  }
+
+  .preview-content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .preview-iframe {
+    height: 100%;
+    display: block;
   }
 </style>

vue.config.js

@@ -32,8 +32,8 @@ module.exports = {
       // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
       '/api': {
         // target: 'http://124.71.68.31:50001',
-        target: 'http://192.168.1.125:18086',
-        // target: 'http://192.168.1.251:18086',
+        // target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.251:18086',
         // target: 'http://192.168.1.251:18186',
         // target: 'http://192.168.1.251:18086', // 开发环境
         // target: 'http://192.168.1.103:18086',192.168.1.116