Merge remote-tracking branch 'origin/master'

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

@@ -8,8 +8,7 @@
     <div class="ms-drawer-header">
       <slot name="header"></slot>
       <i v-if="isShowClose" class="el-icon-close" @click="close"/>
-      <font-awesome-icon v-if="!isFullScreen && showFullScreen" class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
-      <font-awesome-icon v-if="isFullScreen && showFullScreen" class="alt-ico" :icon="['fa', 'compress-alt']" size="lg" @click="unFullScreen"/>
+      <ms-full-screen-button v-if="showFullScreen" :is-full-screen.sync="isFullScreen"/>
     </div>
     <div class="ms-drawer-body">
       <slot></slot>
@@ -23,9 +22,10 @@
     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: {MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
+      components: {MsFullScreenButton, MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
       data() {
         return {
           x: 0,
@@ -74,6 +74,15 @@
       mounted() {
         this.init();
       },
+      watch: {
+        isFullScreen() {
+          if (this.isFullScreen) {
+            this.fullScreen()
+          } else {
+            this.unFullScreen();
+          }
+        }
+      },
       methods: {
         init() {
           //  todo 其他方向待优化
@@ -123,12 +132,10 @@
           this.originalH = this.h;
           this.w = document.body.clientWidth;
           this.h = document.body.clientHeight;
-          this.isFullScreen = true;
         },
         unFullScreen() {
           this.w = this.originalW;
           this.h = this.originalH;
-          this.isFullScreen = false;
         },
         close() {
           this.$emit('close')
@@ -206,18 +213,10 @@
     color: red;
   }
 
-  .alt-ico {
+  /deep/ .alt-ico {
     position: absolute;
-    font-size: 15px;
     right: 40px;
     top: 15px;
-    color: #8c939d;
   }
 
-  .alt-ico:hover {
-    color: black;
-    font-size: 18px;
-  }
-
-
 </style>

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

+<template>
+  <span class="fulls-screen-btn">
+    <font-awesome-icon v-if="!isFullScreen" class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="change(true)"/>
+    <font-awesome-icon v-if="isFullScreen" class="alt-ico" :icon="['fa', 'compress-alt']" size="lg" @click="change(false)"/>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "MsFullScreenButton",
+  props: {
+    isFullScreen: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    change(bool) {
+      this.$emit("update:isFullScreen", bool);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.alt-ico:hover {
+  color: black;
+  font-size: 18px;
+}
+
+.alt-ico {
+  font-size: 15px;
+  color: #8c939d;
+}
+
+</style>

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

 <template>
-  <div class="minder">
+  <div class="minder" :class="{'full-screen': isFullScreen}">
+    <ms-full-screen-button :is-full-screen.sync="isFullScreen"/>
     <minder-editor
       v-if="isActive"
       class="minder-container"
       :import-json="importJson"
-      :height="700"
       :progress-enable="false"
       :tags="tags"
       :distinct-tags="distinctTags"
@@ -15,9 +15,10 @@
 
 <script>
 
+import MsFullScreenButton from "@/business/components/common/components/MsFullScreenButton";
 export default {
   name: "MsModuleMinder",
-  components: {},
+  components: {MsFullScreenButton},
   props: {
     treeNodes: {
       type: Array,
@@ -58,10 +59,11 @@ export default {
         },
         "template":"default"
       },
-      isActive: true
+      isActive: true,
+      isFullScreen: false
     }
   },
-  mounted() {
+  created() {
   },
   watch: {
     dataMap() {
@@ -128,4 +130,33 @@ export default {
   bottom: auto;
   top: 30px;
 }
+
+.minder {
+  position: relative;
+}
+
+.fulls-screen-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
+
+.full-screen {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  background: white;
+  height: 100vh;
+  z-index: 999999;
+}
+
+.full-screen >>> .minder-container {
+  height: calc(100vh - 109px) !important;
+}
+
+.full-screen .fulls-screen-btn {
+  right: 30px;
+}
 </style>