fix(接口测试): 修复抽屉样式频繁切换全屏操作时会发生无法窗口化的问题

--bug=1010482 --user=宋天阳 【接口测试】-【接口定义】-操作-编辑-mock-操作-编辑-点击缩小窗口未生效
https://www.tapd.cn/55049933/s/1108874

frontend/src/business/components/api/definition/components/mock/Components/MockApiScriptEditor.vue

@@ -70,8 +70,10 @@ export default {
     }
   },
   created() {
-    if (!this.jsr223Processor.scriptLanguage) {
-      this.jsr223Processor.scriptLanguage = "beanshell";
+    if(this.jsr223Processor){
+      if (!this.jsr223Processor.scriptLanguage) {
+        this.jsr223Processor.scriptLanguage = "beanshell";
+      }
     }
     if (this.showApi) {
       this.baseCodeTemplates = this.httpCodeTemplates;

frontend/src/business/components/api/definition/components/mock/Components/MockResponseParam.vue

@@ -47,7 +47,7 @@
       </el-row>
       <div class="text-container" style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%">
         <div style="padding: 15px 0;">
-          <mock-api-script-editor :jsr223-processor="response.body.scriptObject"/>
+          <mock-api-script-editor v-if="response.body.scriptObject" :jsr223-processor="response.body.scriptObject"/>
         </div>
       </div>
     </div>

frontend/src/business/components/common/components/MsDrawer.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="visible" id="ms-drawer" class="ms-drawer" :class="directionStyle" :style="{width: w + 'px', height: h + 'px'}" ref="msDrawer">
+  <div v-if="visible" id="ms-drawer" class="ms-drawer" :class="directionStyle"
+       :style="{width: w + 'px', height: h + 'px'}" ref="msDrawer">
 
     <ms-bottom2-top-drag-bar v-if="direction == 'bottom'"/>
 
@@ -7,7 +8,6 @@
 
     <ms-right2-left-drag-bar v-if="direction == 'default'"/>
 
-
     <div class="ms-drawer-header">
       <slot name="header"></slot>
       <i v-if="isShowClose" class="el-icon-close" @click="close"/>
@@ -22,246 +22,251 @@
 </template>
 
 <script>
-    import MsRight2LeftDragBar from "./dragbar/MsRight2LeftDragBar";
-    import MsLeft2RightDragBar from "./dragbar/MsLeft2RightDragBar";
-    import MsBottom2TopDragBar from "./dragbar/MsBottom2TopDragBar";
-    import MsFullScreenButton from "@/business/components/common/components/MsFullScreenButton";
-    export default {
-      name: "MsDrawer",
-      components: {MsFullScreenButton, MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
-      data() {
-        return {
-          x: 0,
-          y: 0,
-          w: 100,
-          h: 100,
-          directionStyle: 'left-style',
-          dragBarDirection: 'vertical',
-          isFullScreen: false,
-          originalW: 100,
-          originalH: 100,
-        }
-      },
-      props: {
-        direction: {
-          type: String,
-          default() {
-            return "left";
-          }
-        },
-        visible: {
-          type: Boolean,
-          default() {
-            return true;
-          }
-        },
-        size: {
-          type: Number,
-          default() {
-            return 40;
-          }
-        },
-        showFullScreen: {
-          type: Boolean,
-          default() {
-            return true;
-          }
-        },
-        isShowClose: {
-          type: Boolean,
-          default() {
-            return true;
-          }
-        }
-      },
-      mounted() {
-        this.init();
-      },
-      watch: {
-        isFullScreen() {
-          if (this.isFullScreen) {
-            this.fullScreen()
-          } else {
-            this.unFullScreen();
-          }
-        }
-      },
-      methods: {
-        setfullScreen(){
-          if(this.isFullScreen){
-            this.fullScreen();
-          }else {
-            this.isFullScreen = true;
-          }
-        },
-        init() {
-          window.addEventListener("resize", this.listenScreenChange,false);
-          //  todo 其他方向待优化
-          switch (this.direction) {
-            case 'left':
-              this.w = this.getWidthPercentage(this.size);
-              this.h = this.getHeightPercentage(100);
-              this.x = 0;
-              this.y = 0;
-              this.directionStyle = 'left-style';
-              this.dragBarDirection = 'horizontal';
-              break;
-            case 'right':
-              this.w = this.getWidthPercentage(this.size);
-              this.h = this.getHeightPercentage(100);
-              this.x = document.body.clientWidth - this.w;
-              this.y = 0;
-              this.directionStyle = 'right-style';
-              this.dragBarDirection = 'horizontal';
-              break;
-            case 'top':
-              this.w = this.getWidthPercentage(100);
-              this.h = this.getHeightPercentage(this.size);
-              this.x = 0;
-              this.y = 0;
-              this.directionStyle = 'top-style';
-              this.dragBarDirection = 'vertical';
-              break;
-            case 'bottom':
-              this.w = this.getWidthPercentage(100);
-              this.h = this.getHeightPercentage(this.size);
-              this.x = 0;
-              this.y = document.body.clientHeight - this.h;
-              this.directionStyle = 'bottom-style';
-              this.dragBarDirection = 'vertical';
-              break;
-            default:
-              this.w = this.getWidthPercentage(this.size);
-              this.h = this.getHeightPercentage(100);
-              this.x = document.body.clientWidth - this.w;
-              this.y = 0;
-              this.directionStyle = 'right-style';
-              this.dragBarDirection = 'horizontal';
-              break;
-          }
-        },
-        getWidthPercentage(per) {
-          return document.body.clientWidth * per / 100.0;
-        },
-        getHeightPercentage(per) {
-          return document.body.clientHeight * per / 100.0;
-        },
-        fullScreen() {
-          this.originalW = this.w;
-          this.originalH = this.h;
-          this.w = document.body.clientWidth;
-          this.h = document.body.clientHeight;
-        },
-        unFullScreen() {
-          this.w = this.originalW;
-          this.h = this.originalH;
-        },
-        close() {
-          this.$emit('close');
-          window.removeEventListener("resize", this.listenScreenChange);
-        },
-        listenScreenChange() {
-          if(this.isFullScreen){
-            this.w = document.body.clientWidth;
-            this.h = document.body.clientHeight;
-          }else {
-            switch (this.direction) {
-              case 'left':
-                this.h = document.documentElement.clientHeight;
-                break;
-              case 'right':
-                this.h = document.documentElement.clientHeight;
-                break;
-              case 'top':
-                this.w = document.documentElement.clientWidth;
-                break;
-              case 'bottom':
-                this.w = document.documentElement.clientWidth;
-                break;
-              default:
-                this.h = document.documentElement.clientHeight;
-                this.w = document.documentElement.clientWidth;
-                break;
-            }
-          }
+import MsRight2LeftDragBar from "./dragbar/MsRight2LeftDragBar";
+import MsLeft2RightDragBar from "./dragbar/MsLeft2RightDragBar";
+import MsBottom2TopDragBar from "./dragbar/MsBottom2TopDragBar";
+import MsFullScreenButton from "@/business/components/common/components/MsFullScreenButton";
+
+export default {
+  name: "MsDrawer",
+  components: {MsFullScreenButton, MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
+  data() {
+    return {
+      x: 0,
+      y: 0,
+      w: 100,
+      h: 100,
+      directionStyle: 'left-style',
+      dragBarDirection: 'vertical',
+      isFullScreen: false,
+      originalW: 0,
+      originalH: 0,
+    }
+  },
+  props: {
+    direction: {
+      type: String,
+      default() {
+        return "left";
+      }
+    },
+    visible: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    size: {
+      type: Number,
+      default() {
+        return 40;
+      }
+    },
+    showFullScreen: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    isShowClose: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    isFullScreen() {
+      if (this.isFullScreen) {
+        this.fullScreen()
+      } else {
+        this.unFullScreen();
+      }
+    }
+  },
+  methods: {
+    setfullScreen() {
+      if (!this.isFullScreen) {
+        this.$nextTick(() => {
+          this.isFullScreen = true;
+        })
+      }
+    },
+    init() {
+      window.addEventListener("resize", this.listenScreenChange, false);
+      //  todo 其他方向待优化
+      switch (this.direction) {
+        case 'left':
+          this.w = this.getWidthPercentage(this.size);
+          this.h = this.getHeightPercentage(100);
+          this.x = 0;
+          this.y = 0;
+          this.directionStyle = 'left-style';
+          this.dragBarDirection = 'horizontal';
+          break;
+        case 'right':
+          this.w = this.getWidthPercentage(this.size);
+          this.h = this.getHeightPercentage(100);
+          this.x = document.body.clientWidth - this.w;
+          this.y = 0;
+          this.directionStyle = 'right-style';
+          this.dragBarDirection = 'horizontal';
+          break;
+        case 'top':
+          this.w = this.getWidthPercentage(100);
+          this.h = this.getHeightPercentage(this.size);
+          this.x = 0;
+          this.y = 0;
+          this.directionStyle = 'top-style';
+          this.dragBarDirection = 'vertical';
+          break;
+        case 'bottom':
+          this.w = this.getWidthPercentage(100);
+          this.h = this.getHeightPercentage(this.size);
+          this.x = 0;
+          this.y = document.body.clientHeight - this.h;
+          this.directionStyle = 'bottom-style';
+          this.dragBarDirection = 'vertical';
+          break;
+        default:
+          this.w = this.getWidthPercentage(this.size);
+          this.h = this.getHeightPercentage(100);
+          this.x = document.body.clientWidth - this.w;
+          this.y = 0;
+          this.directionStyle = 'right-style';
+          this.dragBarDirection = 'horizontal';
+          break;
+      }
+    },
+    getWidthPercentage(per) {
+      return document.body.clientWidth * per / 100.0;
+    },
+    getHeightPercentage(per) {
+      return document.body.clientHeight * per / 100.0;
+    },
+    fullScreen() {
+      if (this.originalW === 0) {
+        this.originalW = this.w;
+      }
+      if (this.originalH === 0) {
+        this.originalH = this.h;
+      }
+      this.w = document.body.clientWidth;
+      this.h = document.body.clientHeight;
+    },
+    unFullScreen() {
+      this.w = this.originalW;
+      this.h = this.originalH;
+    },
+    close() {
+      this.$emit('close');
+      window.removeEventListener("resize", this.listenScreenChange);
+    },
+    listenScreenChange() {
+      if (this.isFullScreen) {
+        this.w = document.body.clientWidth;
+        this.h = document.body.clientHeight;
+      } else {
+        switch (this.direction) {
+          case 'left':
+            this.h = document.documentElement.clientHeight;
+            break;
+          case 'right':
+            this.h = document.documentElement.clientHeight;
+            break;
+          case 'top':
+            this.w = document.documentElement.clientWidth;
+            break;
+          case 'bottom':
+            this.w = document.documentElement.clientWidth;
+            break;
+          default:
+            this.h = document.documentElement.clientHeight;
+            this.w = document.documentElement.clientWidth;
+            break;
         }
       }
     }
+  }
+}
 </script>
 
 <style scoped>
 
-  .ms-drawer {
-    background-color: white;
-    border: 1px #DCDFE6 solid;
-    -webkit-box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
-    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
-    z-index: 999 !important;
-    position: fixed;
-    overflow: auto;
-  }
+.ms-drawer {
+  background-color: white;
+  border: 1px #DCDFE6 solid;
+  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
+  z-index: 999 !important;
+  position: fixed;
+  overflow: auto;
+}
 
-  .left-style {
-    top: 0;
-    left: 0;
-  }
+.left-style {
+  top: 0;
+  left: 0;
+}
 
-  .right-style {
-    top: 0;
-    right: 0;
-  }
+.right-style {
+  top: 0;
+  right: 0;
+}
 
-  .top-style {
-    top: 0;
-    left: 0;
-  }
+.top-style {
+  top: 0;
+  left: 0;
+}
 
-  .bottom-style {
-    bottom: 0;
-    left: 0;
-    border-top: 5px;
-  }
+.bottom-style {
+  bottom: 0;
+  left: 0;
+  border-top: 5px;
+}
 
-  .ms-drawer-body {
-    overflow: scroll;
-  }
+.ms-drawer-body {
+  overflow: scroll;
+}
 
-  .ms-drawer-header {
-    z-index: 999;
-    width: 100%;
-  }
+.ms-drawer-header {
+  z-index: 999;
+  width: 100%;
+}
 
-  .bottom-style .ms-drawer-header {
-    position: fixed;
-  }
+.bottom-style .ms-drawer-header {
+  position: fixed;
+}
 
-  .el-icon-close {
-    position: absolute;
-    font-size: 20px;
-    right: 10px;
-    top: 10px;
-    color: gray;
-  }
+.el-icon-close {
+  position: absolute;
+  font-size: 20px;
+  right: 10px;
+  top: 10px;
+  color: gray;
+}
 
-  .bottom-style .el-icon-close {
-    right: 10px;
-    top: 13px;
-  }
+.bottom-style .el-icon-close {
+  right: 10px;
+  top: 13px;
+}
 
-  .right-style .el-icon-close {
-    position: fixed;
-    right: 10px;
-    top: 10px;
-  }
+.right-style .el-icon-close {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+}
 
-  .el-icon-close:hover {
-    color: red;
-  }
+.el-icon-close:hover {
+  color: red;
+}
 
-  /deep/ .alt-ico {
-    position: absolute;
-    right: 40px;
-    top: 15px;
-  }
+/deep/ .alt-ico {
+  position: absolute;
+  right: 40px;
+  top: 15px;
+}
 
 </style>