style(接口测试): 优化接口用例编辑抽屉的布局

--story=1011683 --user=宋天阳 固定接口case执行按钮行
https://www.tapd.cn/55049933/s/1360395

api-test/frontend/src/business/definition/components/case/ApiCaseItem.vue

@@ -1,207 +1,214 @@
 <template>
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
-    <div @click="active(apiCase)" v-if="type !== 'detail'">
+    <el-container>
-      <el-row>
+      <el-header style="margin-bottom: 20px">
-        <el-col :span="api.protocol === 'HTTP' ? 4 : 8" v-loading="loading && !(apiCase.active || type === 'detail')">
+        <div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader">
-          <span @click.stop>
-            <i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
-            <el-input
-              v-if="!apiCase.id || isShowInput"
-              size="small"
-              v-model="apiCase.name"
-              :name="index"
-              :key="index"
-              class="ms-api-header-select"
-              style="width: 180px"
-              :readonly="!hasPermission('PROJECT_API_DEFINITION:READ+EDIT_CASE')"
-              :placeholder="$t('commons.input_name')"
-              ref="nameEdit" />
-            <span v-else>
-              <el-tooltip :content="apiCase.id ? apiCase.name : ''" placement="top">
-                <span>{{ apiCase.id ? apiCase.name : '' | ellipsis }}</span>
-              </el-tooltip>
-
-              <i class="el-icon-edit" style="cursor: pointer" @click="showInput(apiCase)" />
-            </span>
-
-            <el-link type="primary" style="margin-left: 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
-              $t('operating_log.change_history')
-            }}</el-link>
-          </span>
-          <div v-if="apiCase.id" style="color: #999999; font-size: 12px">
-            <span style="margin-left: 10px">
-              {{ apiCase.updateTime | datetimeFormat }}
-              {{ apiCase.updateUser }}
-              {{ $t('api_test.definition.request.update_info') }}
-            </span>
-          </div>
-        </el-col>
-        <el-col :span="2">
-          <el-select
-            size="mini"
-            v-model="apiCase.priority"
-            class="ms-api-select"
-            @change="changePriority(apiCase)"
-            :disabled="readonly">
-            <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
-          </el-select>
-        </el-col>
-        <el-col :span="api.protocol === 'HTTP' ? 4 : 0">
-          <span v-if="api.protocol === 'HTTP'">
-            <el-tag
-              size="mini"
-              :style="{
-                'background-color': getColor(true, apiCase.request.method),
-                border: getColor(true, apiCase.request.method),
-              }"
-              class="api-el-tag">
-              {{ apiCase.request.method }}
-            </el-tag>
-            <el-tooltip :content="apiCase.request.path">
-              <span class="ms-col-name">{{ apiCase.request.path }}</span>
-            </el-tooltip>
-          </span>
-        </el-col>
-        <el-col :span="5">
           <el-row>
-            <el-col :span="8">
+            <el-col
-              <el-select
+              :span="api.protocol === 'HTTP' ? 4 : 8"
-                size="small"
+              v-loading="loading && !(apiCase.active || type === 'detail')">
-                v-model="apiCase.caseStatus"
+              <span @click.stop>
-                style="margin-right: 5px"
+                <i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
-                @change="saveTestCase(apiCase, true)"
+                <el-input
-                :disabled="readonly">
+                  v-if="!apiCase.id || isShowInput"
-                <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
+                  size="small"
-              </el-select>
+                  v-model="apiCase.name"
-            </el-col>
+                  :name="index"
-            <el-col :span="16">
+                  :key="index"
-              <div class="tag-item" @click.stop>
+                  class="ms-api-header-select"
-                <el-tooltip
+                  style="width: 180px"
-                  :content="$t('commons.follow')"
+                  :readonly="!hasPermission('PROJECT_API_DEFINITION:READ+EDIT_CASE')"
-                  placement="bottom"
+                  :placeholder="$t('commons.input_name')"
-                  effect="dark"
+                  ref="nameEdit" />
-                  v-if="!showFollow"
+                <span v-else>
-                  :disabled="true">
+                  <el-tooltip :content="apiCase.id ? apiCase.name : ''" placement="top">
-                  <i
+                    <span>{{ apiCase.id ? apiCase.name : '' | ellipsis }}</span>
-                    class="el-icon-star-off"
+                  </el-tooltip>
-                    style="
+
-                      color: var(--primary_color);
+                  <i class="el-icon-edit" style="cursor: pointer" @click="showInput(apiCase)" />
-                      font-size: 25px;
+                </span>
-                      margin-top: 2px;
+
-                      margin-right: 15px;
+                <el-link type="primary" style="margin-left: 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
-                      cursor: pointer;
+                  $t('operating_log.change_history')
-                    "
+                }}</el-link>
-                    @click="saveFollow" />
+              </span>
-                </el-tooltip>
+              <div v-if="apiCase.id" style="color: #999999; font-size: 12px">
-                <el-tooltip
+                <span style="margin-left: 10px">
-                  :content="$t('commons.cancel')"
+                  {{ apiCase.updateTime | datetimeFormat }}
-                  placement="bottom"
+                  {{ apiCase.updateUser }}
-                  effect="dark"
+                  {{ $t('api_test.definition.request.update_info') }}
-                  v-if="showFollow"
+                </span>
-                  :disabled="true">
-                  <i
-                    class="el-icon-star-on"
-                    style="color: #783987; font-size: 28px; margin-top: 2px; margin-right: 15px; cursor: pointer"
-                    @click="saveFollow"
-                    v-if="showFollow" />
-                </el-tooltip>
               </div>
             </el-col>
-          </el-row>
+            <el-col :span="2">
-          <el-row style="margin-top: 5px">
+              <el-select
-            <div class="tag-item" @click.stop>
-              <ms-input-tag
-                :currentScenario="apiCase"
-                ref="tag"
-                @keyup.enter.native="saveTestCase(apiCase, true)"
-                :read-only="readonly" />
-            </div>
-          </el-row>
-        </el-col>
-
-        <el-col :span="3">
-          <span @click.stop v-if="!loaded">
-            <ms-tip-button
-              @click="singleRun(apiCase)"
-              :tip="$t('api_test.run')"
-              icon="el-icon-video-play"
-              v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
-              class="run-button"
-              size="mini"
-              :disabled="!apiCase.id || loaded"
-              circle
-              v-if="!loading" />
-            <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
-              <el-button
-                :disabled="!apiCase.id"
-                @click.once="stop(apiCase)"
                 size="mini"
-                style="color: white; padding: 0; width: 28px; height: 28px"
+                v-model="apiCase.priority"
-                class="stop-btn"
+                class="ms-api-select"
-                circle>
+                @change="changePriority(apiCase)"
-                <div style="transform: scale(0.72)">
+                :disabled="readonly">
-                  <span style="margin-left: -3.5px; font-weight: bold">STOP</span>
+                <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
+              </el-select>
+            </el-col>
+            <el-col :span="api.protocol === 'HTTP' ? 4 : 0">
+              <span v-if="api.protocol === 'HTTP'">
+                <el-tag
+                  size="mini"
+                  :style="{
+                    'background-color': getColor(true, apiCase.request.method),
+                    border: getColor(true, apiCase.request.method),
+                  }"
+                  class="api-el-tag">
+                  {{ apiCase.request.method }}
+                </el-tag>
+                <el-tooltip :content="apiCase.request.path">
+                  <span class="ms-col-name">{{ apiCase.request.path }}</span>
+                </el-tooltip>
+              </span>
+            </el-col>
+            <el-col :span="5">
+              <el-row>
+                <el-col :span="8">
+                  <el-select
+                    size="small"
+                    v-model="apiCase.caseStatus"
+                    style="margin-right: 5px"
+                    @change="saveTestCase(apiCase, true)"
+                    :disabled="readonly">
+                    <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
+                  </el-select>
+                </el-col>
+                <el-col :span="16">
+                  <div class="tag-item" @click.stop>
+                    <el-tooltip
+                      :content="$t('commons.follow')"
+                      placement="bottom"
+                      effect="dark"
+                      v-if="!showFollow"
+                      :disabled="true">
+                      <i
+                        class="el-icon-star-off"
+                        style="
+                          color: var(--primary_color);
+                          font-size: 25px;
+                          margin-top: 2px;
+                          margin-right: 15px;
+                          cursor: pointer;
+                        "
+                        @click="saveFollow" />
+                    </el-tooltip>
+                    <el-tooltip
+                      :content="$t('commons.cancel')"
+                      placement="bottom"
+                      effect="dark"
+                      v-if="showFollow"
+                      :disabled="true">
+                      <i
+                        class="el-icon-star-on"
+                        style="color: #783987; font-size: 28px; margin-top: 2px; margin-right: 15px; cursor: pointer"
+                        @click="saveFollow"
+                        v-if="showFollow" />
+                    </el-tooltip>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top: 5px">
+                <div class="tag-item" @click.stop>
+                  <ms-input-tag
+                    :currentScenario="apiCase"
+                    ref="tag"
+                    @keyup.enter.native="saveTestCase(apiCase, true)"
+                    :read-only="readonly" />
                 </div>
-              </el-button>
+              </el-row>
-            </el-tooltip>
+            </el-col>
-          </span>
-          <span @click.stop>
-            <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" />
-          </span>
-        </el-col>
 
-        <el-col :span="4">
+            <el-col :span="3">
-          <ms-api-report-status :status="apiCase.execResult" />
+              <span @click.stop v-if="!loaded">
-          <div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px">
+                <ms-tip-button
-            <span> {{ apiCase.execTime | datetimeFormat }}</span>
+                  @click="singleRun(apiCase)"
-            {{ apiCase.updateUser }}
+                  :tip="$t('api_test.run')"
+                  icon="el-icon-video-play"
+                  v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
+                  class="run-button"
+                  size="mini"
+                  :disabled="!apiCase.id || loaded"
+                  circle
+                  v-if="!loading" />
+                <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
+                  <el-button
+                    :disabled="!apiCase.id"
+                    @click.once="stop(apiCase)"
+                    size="mini"
+                    style="color: white; padding: 0; width: 28px; height: 28px"
+                    class="stop-btn"
+                    circle>
+                    <div style="transform: scale(0.72)">
+                      <span style="margin-left: -3.5px; font-weight: bold">STOP</span>
+                    </div>
+                  </el-button>
+                </el-tooltip>
+              </span>
+              <span @click.stop>
+                <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" />
+              </span>
+            </el-col>
+
+            <el-col :span="4">
+              <ms-api-report-status :status="apiCase.execResult" />
+              <div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px">
+                <span> {{ apiCase.execTime | datetimeFormat }}</span>
+                {{ apiCase.updateUser }}
+              </div>
+            </el-col>
+            <el-col :span="2">
+              <el-link style="float: right" type="primary" @click.stop @click="showHistory(apiCase.id)">
+                {{ $t('commons.execute_history') }}
+              </el-link>
+            </el-col>
+          </el-row>
+        </div>
+      </el-header>
+      <el-main :style="{ height: componentHeight + 'px' }">
+        <!-- 请求参数-->
+        <el-collapse-transition>
+          <div v-if="apiCase.active || type === 'detail'" v-loading="loading">
+            <el-divider></el-divider>
+            <p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
+            <ms-api-request-form
+              :isShowEnable="true"
+              :showScript="true"
+              :headers="apiCase.request.headers"
+              :response="apiCase.responseData"
+              :request="apiCase.request"
+              :case-id="apiCase.apiDefinitionId"
+              v-if="api.protocol === 'HTTP'" />
+            <tcp-format-parameters
+              :showScript="true"
+              :show-pre-script="true"
+              :request="apiCase.request"
+              :response="apiCase.responseData"
+              v-if="api.method === 'TCP' || api.method === 'ESB'" />
+            <ms-sql-basis-parameters
+              :showScript="true"
+              :request="apiCase.request"
+              :response="apiCase.responseData"
+              v-if="api.method === 'SQL'" />
+            <ms-dubbo-basis-parameters
+              :showScript="true"
+              :request="apiCase.request"
+              :response="apiCase.responseData"
+              v-if="api.protocol === 'DUBBO'" />
+            <!-- HTTP 请求返回数据 -->
+            <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
+            <api-response-component
+              :currentProtocol="apiCase.request.protocol"
+              :api-item="apiCase"
+              :result="apiCase.responseData" />
           </div>
-        </el-col>
+        </el-collapse-transition>
-        <el-col :span="2">
+      </el-main>
-          <el-link style="float: right" type="primary" @click.stop @click="showHistory(apiCase.id)">
+    </el-container>
-            {{ $t('commons.execute_history') }}
-          </el-link>
-        </el-col>
-      </el-row>
-    </div>
-
-    <!-- 请求参数-->
-    <el-collapse-transition>
-      <div v-if="apiCase.active || type === 'detail'" v-loading="loading">
-        <el-divider></el-divider>
-        <p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
-        <ms-api-request-form
-          :isShowEnable="true"
-          :showScript="true"
-          :headers="apiCase.request.headers"
-          :response="apiCase.responseData"
-          :request="apiCase.request"
-          :case-id="apiCase.apiDefinitionId"
-          v-if="api.protocol === 'HTTP'" />
-        <tcp-format-parameters
-          :showScript="true"
-          :show-pre-script="true"
-          :request="apiCase.request"
-          :response="apiCase.responseData"
-          v-if="api.method === 'TCP' || api.method === 'ESB'" />
-        <ms-sql-basis-parameters
-          :showScript="true"
-          :request="apiCase.request"
-          :response="apiCase.responseData"
-          v-if="api.method === 'SQL'" />
-        <ms-dubbo-basis-parameters
-          :showScript="true"
-          :request="apiCase.request"
-          :response="apiCase.responseData"
-          v-if="api.protocol === 'DUBBO'" />
-        <!-- HTTP 请求返回数据 -->
-        <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
-        <api-response-component
-          :currentProtocol="apiCase.request.protocol"
-          :api-item="apiCase"
-          :result="apiCase.responseData" />
-      </div>
-    </el-collapse-transition>
     <ms-change-history ref="changeHistory" />
     <el-dialog
       :visible.sync="syncCaseVisible"
@@ -326,6 +333,7 @@ export default {
       checkedCases: new Set(),
       visible: false,
       condition: {},
+      componentHeight: document.body.clientHeight - 170,
       responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
       isShowInput: false,
       methodColorMap: new Map(API_METHOD_COLOUR),
@@ -367,6 +375,7 @@ export default {
         return 0;
       },
     },
+    caseItemHeight: Number,
     api: {
       type: Object,
       default() {
@@ -388,6 +397,7 @@ export default {
     this.$EventBus.$off('showXpackCaseSet');
   },
   created() {
+    window.addEventListener('resize', this.resizeTable, false);
     store.scenarioEnvMap = undefined;
     if (this.apiCase.request && this.apiCase.request.hashTree && this.apiCase.request.hashTree.length > 0) {
       let index = this.apiCase.request.hashTree.findIndex((item) => item.type === 'Assertions');
@@ -421,8 +431,12 @@ export default {
       });
     }
     this.reload();
+    this.resizeTable();
   },
   watch: {
+    caseItemHeight() {
+      this.changeScreen(this.caseItemHeight);
+    },
     'apiCase.name': {
       handler(v) {
         this.saveStatus();
@@ -477,6 +491,25 @@ export default {
     }
   },
   methods: {
+    changeScreen(height) {
+      let headerHeight = 100 + this.$refs.elementHeader.clientHeight;
+      if (height > headerHeight) {
+        this.componentHeight = height - headerHeight;
+      } else {
+        this.componentHeight = headerHeight;
+      }
+    },
+    resizeTable() {
+      if (this.$refs.elementHeader) {
+        let headerHeight = 100 + this.$refs.elementHeader.clientHeight;
+        let documentClientHeight = document.body.clientHeight;
+        if (documentClientHeight > headerHeight) {
+          this.componentHeight = documentClientHeight - headerHeight;
+        } else {
+          this.componentHeight = headerHeight;
+        }
+      }
+    },
     setOriginal(scenarioDefinition) {
       for (let i in scenarioDefinition) {
         let typeArray = ['JDBCPostProcessor', 'JDBCSampler', 'JDBCPreProcessor'];

api-test/frontend/src/business/definition/components/case/EditApiCase.vue

@@ -1,6 +1,12 @@
 <template>
   <div v-if="visible">
-    <ms-drawer :size="60" @close="apiCaseClose" direction="bottom" ref="testCaseDrawer" class="ms-drawer-case-header">
+    <ms-drawer
+      :size="60"
+      @close="apiCaseClose"
+      @changeScreen="changeScreen"
+      direction="bottom"
+      ref="testCaseDrawer"
+      class="ms-drawer-case-header">
       <template v-slot:header>
         <api-case-header
           :api="api"
@@ -32,6 +38,7 @@
                 @showHistory="showHistory"
                 @reLoadCase="reLoadCase"
                 :environment="environment"
+                :case-item-height="caseItemHeight"
                 @setSelectedCaseId="setSelectedCaseId"
                 :is-case-edit="isCaseEdit"
                 :api="api"
@@ -60,7 +67,7 @@
   </div>
 </template>
 <script>
-import {apiTestCaseList, editApiCaseByParam, getCaseById, getPassRateById} from '@/api/api-test-case';
+import { apiTestCaseList, editApiCaseByParam, getCaseById, getPassRateById } from '@/api/api-test-case';
 import { getMaintainer } from '@/api/project';
 import ApiCaseHeader from './ApiCaseHeader';
 import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
@@ -105,6 +112,7 @@ export default {
       apiCaseList: [],
       batchLoadingIds: [],
       singleLoading: false,
+      caseItemHeight: 100,
       singleRunId: '',
       runData: [],
       reportId: '',
@@ -155,6 +163,9 @@ export default {
     },
   },
   methods: {
+    changeScreen(height) {
+      this.caseItemHeight = height;
+    },
     getMaintainerOptions() {
       getMaintainer().then((response) => {
         this.maintainerOptions = response.data;
@@ -432,8 +443,8 @@ export default {
           this.apiCaseList[0].responseData = data;
           this.apiCaseList[0].passRate = passRate;
           this.$refs.apiCaseItem.runLoading = false;
-          store.currentApiCase = {refresh: true, id: data.id, status: status, passRate: passRate};
+          store.currentApiCase = { refresh: true, id: data.id, status: status, passRate: passRate };
-        })
+        });
       }
     },
     errorRefresh() {
@@ -677,6 +688,7 @@ export default {
 .ms-drawer-case-header :deep(.ms-drawer-header) {
   margin-left: 0px;
 }
+
 fieldset {
   padding: 0px;
   margin: 0px;

framework/sdk-parent/frontend/src/components/MsDrawer.vue

@@ -1,23 +1,31 @@
 <template>
-  <div v-if="visible" id="ms-drawer" class="ms-drawer" :class="directionStyle"
+  <div
-       :style="{width: w + 'px', height: h + 'px'}" ref="msDrawer">
+    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'" />
 
-    <ms-bottom2-top-drag-bar v-if="direction == 'bottom'"/>
+    <ms-right2-left-drag-bar v-if="direction == 'right'" />
 
-    <ms-right2-left-drag-bar v-if="direction == 'right'"/>
+    <ms-right2-left-drag-bar v-if="direction == 'default'" />
-
-    <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"/>
+      <i v-if="isShowClose" class="el-icon-close" @click="close" />
-      <ms-full-screen-button v-if="showFullScreen" :is-full-screen.sync="isFullScreen"/>
+      <ms-full-screen-button
+        v-if="showFullScreen"
+        :is-full-screen.sync="isFullScreen"
+      />
     </div>
     <div class="ms-drawer-body">
       <slot></slot>
     </div>
 
-    <ms-left2-right-drag-bar v-if="direction == 'left'"/>
+    <ms-left2-right-drag-bar v-if="direction == 'left'" />
   </div>
 </template>
 
@@ -29,51 +37,56 @@ import MsFullScreenButton from "./MsFullScreenButton";
 
 export default {
   name: "MsDrawer",
-  components: {MsFullScreenButton, MsBottom2TopDragBar, MsLeft2RightDragBar, MsRight2LeftDragBar},
+  components: {
+    MsFullScreenButton,
+    MsBottom2TopDragBar,
+    MsLeft2RightDragBar,
+    MsRight2LeftDragBar,
+  },
   data() {
     return {
       x: 0,
       y: 0,
       w: 100,
       h: 100,
-      directionStyle: 'left-style',
+      directionStyle: "left-style",
-      dragBarDirection: 'vertical',
+      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();
@@ -81,71 +94,71 @@ export default {
   watch: {
     isFullScreen() {
       if (this.isFullScreen) {
-        this.fullScreen()
+        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':
+        case "left":
           this.w = this.getWidthPercentage(this.size);
           this.h = this.getHeightPercentage(100);
           this.x = 0;
           this.y = 0;
-          this.directionStyle = 'left-style';
+          this.directionStyle = "left-style";
-          this.dragBarDirection = 'horizontal';
+          this.dragBarDirection = "horizontal";
           break;
-        case 'right':
+        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.directionStyle = "right-style";
-          this.dragBarDirection = 'horizontal';
+          this.dragBarDirection = "horizontal";
           break;
-        case 'top':
+        case "top":
           this.w = this.getWidthPercentage(100);
           this.h = this.getHeightPercentage(this.size);
           this.x = 0;
           this.y = 0;
-          this.directionStyle = 'top-style';
+          this.directionStyle = "top-style";
-          this.dragBarDirection = 'vertical';
+          this.dragBarDirection = "vertical";
           break;
-        case 'bottom':
+        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.directionStyle = "bottom-style";
-          this.dragBarDirection = 'vertical';
+          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.directionStyle = "right-style";
-          this.dragBarDirection = 'horizontal';
+          this.dragBarDirection = "horizontal";
           break;
       }
     },
     getWidthPercentage(per) {
-      return document.body.clientWidth * per / 100.0;
+      return (document.body.clientWidth * per) / 100.0;
     },
     getHeightPercentage(per) {
-      return document.body.clientHeight * per / 100.0;
+      return (document.body.clientHeight * per) / 100.0;
     },
     fullScreen() {
       if (this.originalW === 0) {
@@ -156,13 +169,15 @@ export default {
       }
       this.w = document.body.clientWidth;
       this.h = document.body.clientHeight;
+      this.$emit("changeScreen", this.h);
     },
     unFullScreen() {
       this.w = this.originalW;
       this.h = this.originalH;
+      this.$emit("changeScreen", this.h);
     },
     close() {
-      this.$emit('close');
+      this.$emit("close");
       window.removeEventListener("resize", this.listenScreenChange);
     },
     listenScreenChange() {
@@ -171,16 +186,16 @@ export default {
         this.h = document.body.clientHeight;
       } else {
         switch (this.direction) {
-          case 'left':
+          case "left":
             this.h = document.documentElement.clientHeight;
             break;
-          case 'right':
+          case "right":
             this.h = document.documentElement.clientHeight;
             break;
-          case 'top':
+          case "top":
             this.w = document.documentElement.clientWidth;
             break;
-          case 'bottom':
+          case "bottom":
             this.w = document.documentElement.clientWidth;
             break;
           default:
@@ -189,18 +204,19 @@ export default {
             break;
         }
       }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 .ms-drawer {
   background-color: white;
-  border: 1px #DCDFE6 solid;
+  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);
+  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-  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);
+    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
   z-index: 999 !important;
   position: fixed;
   overflow: auto;
@@ -269,5 +285,4 @@ export default {
   right: 40px;
   top: 15px;
 }
-
 </style>