refactor(接口场景): 场景导入场景的组件分离

frontend/src/business/components/api/automation/scenario/api/RelevanceScenarioList.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <el-input :placeholder="$t('api_test.definition.request.select_case')" @blur="search"
+              @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
+    <ms-table-adv-search-bar :condition.sync="condition" class="adv-search-bar"
+                             v-if="condition.components !== undefined && condition.components.length > 0"
+                             @search="search"/>
+    <version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"
+                    style="float: left"
+                    class="search-input"/>
+
+    <ms-table ref="scenarioTable"
+              v-loading="result.loading"
+              :data="tableData"
+              :condition="condition"
+              :page-size="pageSize"
+              :total="total"
+              :remember-order="true"
+              row-key="id"
+              :row-order-group-id="projectId"
+              @refresh="search"
+              :disable-header-config="true"
+              @selectCountChange="selectCountChange">
+
+      <el-table-column v-if="!customNum" prop="num" label="ID"
+                       show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column v-if="customNum" prop="customNum" label="ID"
+                       show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="name" :label="$t('api_test.automation.scenario_name')"
+                       show-overflow-tooltip/>
+      <el-table-column
+        v-if="versionEnable"
+        column-key="version_id"
+        :filters="versionFilters"
+        :label="$t('commons.version')"
+        min-width="120px">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.versionName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="level" :label="$t('api_test.automation.case_level')"
+                       show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <priority-table-item :value="scope.row.level" ref="level"/>
+        </template>
+
+      </el-table-column>
+      <el-table-column prop="tagNames" :label="$t('api_test.automation.tag')" min-width="120">
+        <template v-slot:default="scope">
+          <ms-tag v-for="itemName in scope.row.tags" :key="itemName" type="success" effect="plain" :content="itemName"
+                  style="margin-left: 0px; margin-right: 2px"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userId" :label="$t('api_test.automation.creator')" show-overflow-tooltip/>
+      <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" width="180">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" show-overflow-tooltip/>
+      <el-table-column prop="lastResult" :label="$t('api_test.automation.last_result')">
+        <template v-slot:default="{row}">
+          <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
+            {{ $t('api_test.automation.success') }}
+          </el-link>
+          <el-link type="danger" @click="showReport(row)" v-if="row.lastResult === 'Fail'">
+            {{ $t('api_test.automation.fail') }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
+                       show-overflow-tooltip/>
+    </ms-table>
+    <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                         :total="total"/>
+  </div>
+</template>
+
+<script>
+import MsTableHeader from "@/business/components/common/components/MsTableHeader";
+import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
+import MsApiReportDetail from "@/business/components/api/automation/report/ApiReportDetail";
+import MsTableMoreBtn from "@/business/components/api/automation/scenario/TableMoreBtn";
+import PriorityTableItem from "@/business/components/track/common/tableItems/planview/PriorityTableItem";
+import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
+import {
+  API_SCENARIO_CONFIGS,
+  TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS
+} from "@/business/components/common/components/search/search-components";
+import {ENV_TYPE} from "@/common/js/constants";
+import {getCurrentProjectID, hasLicense} from "@/common/js/utils";
+import MsTable from "@/business/components/common/components/table/MsTable";
+import MsTag from "@/business/components/common/components/MsTag";
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const VersionSelect = requireComponent.keys().length > 0 ? requireComponent("./version/VersionSelect.vue") : {};
+
+export default {
+  name: "RelevanceScenarioList",
+  components: {
+    MsTable,
+    PriorityTableItem,
+    MsTablePagination,
+    MsTableMoreBtn,
+    ShowMoreBtn,
+    MsTableHeader,
+    MsTag,
+    MsApiReportDetail,
+    MsTableAdvSearchBar,
+    'VersionSelect': VersionSelect.default,
+  },
+  props: {
+    referenced: {
+      type: Boolean,
+      default: false,
+    },
+    selectNodeIds: Array,
+    projectId: String,
+    planId: String,
+    versionEnable: Boolean,
+  },
+  data() {
+    return {
+      result: {},
+      showConfigButtonWithOutPermission: false,
+      condition: {
+        components: API_SCENARIO_CONFIGS
+      },
+      currentScenario: {},
+      schedule: {},
+      selectAll: false,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      reportId: "",
+      infoDb: false,
+      selectRows: new Set(),
+      projectEnvMap: new Map(),
+      projectList: [],
+      projectIds: new Set(),
+      map: new Map(),
+      customNum: false,
+      environmentType: ENV_TYPE.JSON,
+      envGroupId: "",
+      versionFilters: [],
+    };
+  },
+  computed: {
+    ENV_TYPE() {
+      return ENV_TYPE;
+    }
+  },
+  watch: {
+    selectNodeIds() {
+      this.search();
+    },
+    projectId() {
+      this.search();
+    },
+  },
+  created() {
+    this.getWsProjects();
+    this.getVersionOptions();
+  },
+  methods: {
+    search() {
+      this.selectRows = new Set();
+      this.condition.moduleIds = this.selectNodeIds;
+      if (this.trashEnable) {
+        this.condition.filters = {status: ["Trash"]};
+        this.condition.moduleIds = [];
+      }
+
+      if (this.projectId != null && typeof projectId === 'string') {
+        this.condition.projectId = this.projectId;
+      } else if (this.projectId != null) {
+        this.condition.projectId = this.projectId;
+      }
+
+      let url = "/api/automation/list/" + this.currentPage + "/" + this.pageSize;
+      if (this.condition.projectId) {
+        this.result = this.$post(url, this.condition, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
+          this.tableData.forEach(item => {
+            if (item.tags && item.tags.length > 0) {
+              item.tags = JSON.parse(item.tags);
+            }
+          });
+        });
+      }
+    },
+    clear() {
+      this.selectRows.clear();
+    },
+    setProjectEnvMap(projectEnvMap) {
+      this.projectEnvMap = projectEnvMap;
+    },
+    setEnvGroup(id) {
+      this.envGroupId = id;
+    },
+    getWsProjects() {
+      this.$get("/project/getOwnerProjects", res => {
+        this.projectList = res.data;
+      });
+    },
+    getProject(projectId) {
+      if (projectId) {
+        this.$get('/project_application/get/config/' + projectId + "/SCENARIO_CUSTOM_NUM", result => {
+          let data = result.data;
+          if (data) {
+            this.customNum = data.scenarioCustomNum;
+          }
+        });
+      }
+    },
+    getConditions() {
+      return this.condition;
+    },
+    checkEnv() {
+      return this.$refs.envPopover.checkEnv();
+    },
+    changeVersion(currentVersion) {
+      this.condition.versionId = currentVersion || null;
+      this.search();
+    },
+    getVersionOptions() {
+      if (hasLicense()) {
+        this.$get('/project/version/get-project-versions/' + getCurrentProjectID(), response => {
+          this.versionFilters = response.data.map(u => {
+            return {text: u.name, value: u.id};
+          });
+        });
+      }
+    },
+    filter(field) {
+      this.condition.filters = field || null;
+      this.search();
+    },
+    selectCountChange(data) {
+      this.selectRows = this.$refs.scenarioTable.selectRows;
+      this.$emit("selectCountChange", data);
+    }
+  }
+};
+</script>
+
+<style scoped>
+/deep/ .el-drawer__header {
+  margin-bottom: 0px;
+}
+
+.env-popover {
+  float: right;
+  margin-top: 10px;
+}
+
+.search-input {
+  float: right;
+  width: 250px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-right: 20px;
+}
+
+.adv-search-bar {
+  float: right;
+  margin-top: 15px;
+  margin-right: 10px;
+}
+</style>

frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue

@@ -15,23 +15,19 @@
         ref="nodeTree"/>
     </template>
 
-    <ms-api-scenario-list
+    <relevance-scenario-list
-      v-if="versionEnable"
+      :version-enable="versionEnable"
       :select-node-ids="selectNodeIds"
-      :select-project-id="projectId"
+      :project-id="projectId"
       :referenced="true"
       :trash-enable="false"
-      :is-reference-table="true"
+      @selectCountChange="setSelectCounts"
-      @selection="setData"
-      :is-relate="true"
-      :custom-num="customNum"
       ref="apiScenarioList">
-      <template v-slot:version>
+    </relevance-scenario-list>
-        <version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
-      </template>
-    </ms-api-scenario-list>
 
     <template v-slot:headerBtn>
+      <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
+
       <el-button type="primary" @click="copy" :loading="buttonIsWorking" @keydown.enter.native.prevent size="mini">
         {{ $t('commons.copy') }}
       </el-button>
@@ -47,29 +43,28 @@ import MsContainer from "../../../../common/components/MsContainer";
 import MsAsideContainer from "../../../../common/components/MsAsideContainer";
 import MsMainContainer from "../../../../common/components/MsMainContainer";
 import MsApiScenarioModule from "../ApiScenarioModule";
-import MsApiScenarioList from "../ApiScenarioList";
 import {getUUID, hasLicense} from "@/common/js/utils";
 import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
+import RelevanceScenarioList from "./RelevanceScenarioList";
 import TestCaseRelevanceBase from "@/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase";
+import TableSelectCountBar from "@/business/components/api/automation/scenario/api/TableSelectCountBar";
 
-const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
-const VersionSelect = requireComponent.keys().length > 0 ? requireComponent("./version/VersionSelect.vue") : {};
 
 export default {
   name: "ScenarioRelevance",
-  props:{
+  props: {
-    isAcrossSpace:{
+    isAcrossSpace: {
-      type:Boolean,
+      type: Boolean,
       default() {
         return false;
       }
     }
   },
   components: {
-    'VersionSelect': VersionSelect.default,
+    TableSelectCountBar,
     TestCaseRelevanceBase,
+    RelevanceScenarioList,
     RelevanceDialog,
-    MsApiScenarioList,
     MsApiScenarioModule,
     MsMainContainer, MsAsideContainer, MsContainer
   },
@@ -88,6 +83,7 @@ export default {
       versionOptions: [],
       currentVersion: '',
       versionEnable: true,
+      selectCounts: null,
     };
   },
   watch: {
@@ -151,7 +147,7 @@ export default {
           }
           this.result = this.$post("/api/automation/getApiScenarios/", this.currentScenarioIds, response => {
             if (response.data) {
-              this.createScenarioDefinition(scenarios, response.data, referenced)
+              this.createScenarioDefinition(scenarios, response.data, referenced);
               this.$emit('save', scenarios);
               this.$refs.baseRelevance.close();
               this.buttonIsWorking = false;
@@ -170,7 +166,7 @@ export default {
         }
         this.result = this.$post("/api/automation/getApiScenarios/", this.currentScenarioIds, response => {
           if (response.data) {
-            this.createScenarioDefinition(scenarios, response.data, referenced)
+            this.createScenarioDefinition(scenarios, response.data, referenced);
             this.$emit('save', scenarios);
             this.$refs.baseRelevance.close();
             this.buttonIsWorking = false;
@@ -193,6 +189,7 @@ export default {
     },
     open() {
       this.buttonIsWorking = false;
+      this.selectCounts = 0;
       this.$refs.baseRelevance.open();
       if (this.$refs.apiScenarioList) {
         this.$refs.apiScenarioList.search(this.projectId);
@@ -247,6 +244,10 @@ export default {
         });
       }
     },
+    setSelectCounts(data) {
+      this.selectCounts = data;
+      this.setData(this.$refs.apiScenarioList.selectRows);
+    }
   }
 };
 </script>

frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue

@@ -17,7 +17,7 @@
     <ms-table-adv-search-bar :condition.sync="condition" class="adv-search-bar"
                              v-if="condition.components !== undefined && condition.components.length > 0"
                              @search="search"/>
-    <version-select v-xpack :project-id="projectId" @changeVersion="changeVersion" margin-right="20"
+    <version-select v-xpack :project-id="projectId" @changeVersion="changeVersion" style="float: left;"
                     class="search-input"/>
 
     <ms-table ref="scenarioTable"