refactor: 场景编辑页面优化

2020-12-29 11:05:06 +08:00 · 2020-12-29 11:05:06 +08:00 · df1ebcdb96
parent 8f7a32698f
commit df1ebcdb96
6 changed files with 138 additions and 100 deletions
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@ -8,7 +8,7 @@

      <el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select" v-loading="loading">
        <el-table-column type="selection"/>
-        <el-table-column width="40" :resizable="false" align="center">
+        <el-table-column v-if="!referenced" width="40" :resizable="false" align="center">
          <template v-slot:default="{row}">
            <show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selection.length"/>
          </template>
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
@ -15,10 +15,9 @@
      ref="nodeTree">

      <template v-slot:header>
-        <el-input class="module-input" :placeholder="$t('test_track.module.search')" v-model="condition.filterText"
-                  size="small">
+        <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
          <template v-slot:append>
-            <el-button icon="el-icon-folder-add" @click="addScenario" v-tester/>
+            <el-button v-if="!isReadOnly" icon="el-icon-folder-add" @click="addScenario" v-tester/>
          </template>
        </el-input>
        <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
@ -247,7 +246,4 @@
    width: 30px;
  }

-  .module-input {
-    width: 275px;
-  }
 </style>
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@ -115,7 +115,6 @@
                  <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
                </el-col>
                <el-col :span="7" class="ms-font">
-                  {{$t('api_test.definition.request.run_env')}}：
                  <el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width"
                             :placeholder="$t('api_test.definition.request.run_env')"
                             clearable>
@ -177,19 +176,21 @@
          </el-col>
          <!-- 按钮列表 -->
          <el-col :span="3">
-            <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
-                     :click-auto-close="false" v-outside-click="outsideClick">
-              <fab-item
-                v-for="(item, index) in buttons"
-                :key="index"
-                :idx="getIdx(index)"
-                :title="item.title"
-                :title-bg-color="item.titleBgColor"
-                :title-color="item.titleColor"
-                :color="item.titleColor"
-                :icon="item.icon"
-                @clickItem="item.click"/>
-            </vue-fab>
+            <div @click="fabClick">
+              <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
+                       :click-auto-close="false" v-outside-click="outsideClick">
+                <fab-item
+                  v-for="(item, index) in buttons"
+                  :key="index"
+                  :idx="getIdx(index)"
+                  :title="item.title"
+                  :title-bg-color="item.titleBgColor"
+                  :title-color="item.titleColor"
+                  :color="item.titleColor"
+                  :icon="item.icon"
+                  @clickItem="item.click"/>
+              </vue-fab>
+            </div>
          </el-col>
        </el-row>
      </div>
@ -248,7 +249,7 @@
  import InputTag from 'vue-input-tag'
  import "@/common/css/material-icons.css"
  import OutsideClick from "@/common/js/outside-click";
-  import ScenarioApiRelevance from "./api/ScenarioApiRelevance";
+  import ScenarioApiRelevance from "./api/ApiRelevance";
  import ScenarioRelevance from "./api/ScenarioRelevance";

  export default {
@ -451,9 +452,14 @@
        return false;
      },
      outsideClick(e) {
-        e.stopPropagation()
+        e.stopPropagation();
        this.showAll();
      },
+      fabClick() {
+        if (this.operatingElements.length < 1) {
+          this.$info("引用的场景或接口无法添加配置");
+        }
+      },
      addComponent(type) {
        switch (type) {
          case ELEMENT_TYPE.IfController:
--- a/frontend/src/business/components/api/automation/scenario/api/ScenarioApiRelevance.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/ScenarioApiRelevance.vue
@ -1,47 +1,38 @@
 <template>
-  <el-dialog class="api-relevance" :title="'接口导入'"
-             :visible.sync="dialogVisible"
-             width="70%"
-             :close-on-click-modal="false"
-             top="50px">
+  <relevance-dialog :title="'接口导入'" ref="relevanceDialog">

-    <ms-container>
-      <ms-aside-container :enable-aside-hidden="false">
-        <ms-api-module
-          @nodeSelectEvent="nodeChange"
-          @protocolChange="handleProtocolChange"
-          @refreshTable="refresh"
-          @setModuleOptions="setModuleOptions"
-          :is-read-only="true"
-          ref="nodeTree"/>
-      </ms-aside-container>
+    <template v-slot:aside>
+      <ms-api-module
+        @nodeSelectEvent="nodeChange"
+        @protocolChange="handleProtocolChange"
+        @refreshTable="refresh"
+        @setModuleOptions="setModuleOptions"
+        :is-read-only="true"
+        ref="nodeTree"/>
+    </template>

-      <ms-main-container>
-        <scenario-relevance-api-list
-          v-if="isApiListEnable"
-          :current-protocol="currentProtocol"
-          :select-node-ids="selectNodeIds"
-          :is-api-list-enable="isApiListEnable"
-          @isApiListEnableChange="isApiListEnableChange"
-          ref="apiList"
-        />
+    <scenario-relevance-api-list
+      v-if="isApiListEnable"
+      :current-protocol="currentProtocol"
+      :select-node-ids="selectNodeIds"
+      :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange"
+      ref="apiList"/>

-        <scenario-relevance-case-list
-          v-if="!isApiListEnable"
-          :current-protocol="currentProtocol"
-          :select-node-ids="selectNodeIds"
-          :is-api-list-enable="isApiListEnable"
-          @isApiListEnableChange="isApiListEnableChange"
-          ref="apiCaseList"/>
-      </ms-main-container>
-    </ms-container>
+    <scenario-relevance-case-list
+      v-if="!isApiListEnable"
+      :current-protocol="currentProtocol"
+      :select-node-ids="selectNodeIds"
+      :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange"
+      ref="apiCaseList"/>

    <template v-slot:footer>
      <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
      <el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
    </template>

-  </el-dialog>
+  </relevance-dialog>
 </template>

 <script>
@ -51,14 +42,15 @@
    import MsAsideContainer from "../../../../common/components/MsAsideContainer";
    import MsMainContainer from "../../../../common/components/MsMainContainer";
    import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList";
+    import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
    export default {
-      name: "ScenarioApiRelevance",
+      name: "ApiRelevance",
      components: {
+        RelevanceDialog,
        ScenarioRelevanceApiList,
        MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList},
      data() {
          return {
-            dialogVisible: false,
            result: {},
            currentProtocol: null,
            selectNodeIds: [],
@ -91,10 +83,10 @@
        },
        close() {
          this.refresh();
-          this.dialogVisible = false;
+          this.$refs.relevanceDialog.close();
        },
        open() {
-          this.dialogVisible = true;
+          this.$refs.relevanceDialog.open();
        },
        isApiListEnableChange(data) {
          this.isApiListEnable = data;
@ -120,13 +112,4 @@
 </script>

 <style scoped>
-
-  .ms-aside-container {
-    border: 0px;
-  }
-
-  .api-relevance >>> .el-dialog__body {
-    padding: 10px 20px;
-  }
-
 </style>
--- a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
@ -1,12 +1,7 @@
 <template>
-  <el-dialog class="api-relevance" :title="'场景导入'"
-             :visible.sync="dialogVisible"
-             width="70%"
-             :close-on-click-modal="false"
-             top="50px">
+  <relevance-dialog :title="'场景导入'" ref="relevanceDialog">

-    <ms-container>
-      <ms-aside-container :enable-aside-hidden="false">
+    <template v-slot:aside>
        <ms-api-scenario-module
          @nodeSelectEvent="nodeChange"
          @refreshTable="refresh"
@ -14,24 +9,21 @@
          @enableTrash="false"
          :is-read-only="true"
          ref="nodeTree"/>
-      </ms-aside-container>
+    </template>

-      <ms-main-container>
-        <ms-api-scenario-list
-          :select-node-ids="selectNodeIds"
-          :referenced="true"
-          :trash-enable="false"
-          @selection="setData"
-          ref="apiScenarioList"/>
-      </ms-main-container>
-    </ms-container>
+    <ms-api-scenario-list
+      :select-node-ids="selectNodeIds"
+      :referenced="true"
+      :trash-enable="false"
+      @selection="setData"
+      ref="apiScenarioList"/>

    <template v-slot:footer>
      <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
      <el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
    </template>

-  </el-dialog>
+  </relevance-dialog>
 </template>

 <script>
@ -44,21 +36,21 @@
    import MsApiScenarioModule from "../ApiScenarioModule";
    import MsApiScenarioList from "../ApiScenarioList";
    import {getUUID} from "../../../../../../common/js/utils";
+    import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
    export default {
      name: "ScenarioRelevance",
      components: {
+        RelevanceDialog,
        MsApiScenarioList,
        MsApiScenarioModule,
        MsMainContainer, MsAsideContainer, MsContainer},
      data() {
          return {
-            dialogVisible: false,
            result: {},
            currentProtocol: null,
            selectNodeIds: [],
            moduleOptions: {},
            isApiListEnable: true,
-
            currentScenario: [],
            currentScenarioIds: [],
          }
@ -97,10 +89,10 @@
        },
        close() {
          this.refresh();
-          this.dialogVisible = false;
+          this.$refs.relevanceDialog.close();
        },
        open() {
-          this.dialogVisible = true;
+          this.$refs.relevanceDialog.open();
          if (this.$refs.apiScenarioList) {
            this.$refs.apiScenarioList.search();
          }
@ -127,12 +119,4 @@

 <style scoped>

-  .ms-aside-container {
-    border: 0px;
-  }
-
-  .api-relevance >>> .el-dialog__body {
-    padding: 10px 20px;
-  }
-
 </style>
--- a/frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue
@ -0,0 +1,69 @@
+<template>
+  <el-dialog :title="title"
+             :visible.sync="dialogVisible"
+             @close="close"
+             width="60%" v-loading="result.loading"
+             :close-on-click-modal="false"
+             top="50px">
+
+    <el-container class="main-content">
+
+      <el-aside class="tree-aside" width="250px">
+        <slot name="aside"></slot>
+      </el-aside>
+
+      <el-container>
+        <el-main class="case-content">
+          <slot></slot>
+        </el-main>
+      </el-container>
+
+    </el-container>
+
+    <template v-slot:footer>
+      <slot name="footer"></slot>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+
+  import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
+  import SelectMenu from "../../../../common/SelectMenu";
+
+  export default {
+    name: "RelevanceDialog",
+    components: {
+      SelectMenu,
+      MsDialogFooter,
+    },
+    data() {
+      return {
+        result: {},
+        dialogVisible: false,
+      };
+    },
+    props: ['title'],
+    methods: {
+      open() {
+        this.dialogVisible = true;
+      },
+      close() {
+        this.dialogVisible = false;
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+  .el-dialog {
+    min-height: 700px;
+  }
+
+  .el-dialog >>> .el-dialog__body {
+    padding: 10px 20px;
+  }
+
+</style>