Merge branch 'master' of https://github.com/metersphere/metersphere

backend/src/main/java/io/metersphere/api/dto/definition/ApiBatchRequest.java

@@ -6,6 +6,7 @@ import lombok.Getter;
 import lombok.Setter;
 
 import java.util.List;
+import java.util.Map;
 
 @Getter
 @Setter
@@ -24,7 +25,7 @@ public class ApiBatchRequest extends ApiDefinitionWithBLOBs {
      */
     private boolean isSelectAllDate;
 
-    private List<String> filters;
+    private Map<String, List<String>> filters;
 
     private String name;
 

backend/src/main/java/io/metersphere/api/dto/definition/ApiDefinitionBatchProcessingRequest.java

@@ -4,6 +4,7 @@ import lombok.Getter;
 import lombok.Setter;
 
 import java.util.List;
+import java.util.Map;
 
 /**
  * 接口定义模块-批量处理请求类
@@ -24,7 +25,7 @@ public class ApiDefinitionBatchProcessingRequest {
      */
     private boolean isSelectAllDate;
 
-    private List<String> filters;
+    private Map<String, List<String>> filters;
 
     private String name;
 

backend/src/main/java/io/metersphere/api/dto/definition/ApiDefinitionRequest.java

@@ -23,7 +23,7 @@ public class ApiDefinitionRequest {
     private String planId;
     private boolean recent = false;
     private List<OrderRequest> orders;
-    private List<String> filters;
+    private Map<String, List<String>> filters;
     private Map<String, Object> combine;
     private List<String> ids;
     private boolean isSelectThisWeedData = false;

backend/src/main/java/io/metersphere/api/dto/definition/SaveApiDefinitionRequest.java

@@ -6,7 +6,6 @@ import io.metersphere.base.domain.Schedule;
 import lombok.Getter;
 import lombok.Setter;
 
-import java.util.ArrayList;
 import java.util.List;
 
 @Setter
@@ -49,5 +48,5 @@ public class SaveApiDefinitionRequest {
 
     private List<String> bodyUploadIds;
 
-    private List<String> tags = new ArrayList<>();
+    private String tags;
 }

backend/src/main/java/io/metersphere/api/dto/definition/SaveApiTestCaseRequest.java

@@ -4,7 +4,6 @@ import io.metersphere.api.dto.definition.request.MsTestElement;
 import lombok.Getter;
 import lombok.Setter;
 
-import java.util.ArrayList;
 import java.util.List;
 
 @Setter
@@ -37,5 +36,5 @@ public class SaveApiTestCaseRequest {
 
     private List<String> bodyUploadIds;
 
-    private List<String> tags = new ArrayList<>();
+    private String tags;
 }

backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java

@@ -29,7 +29,6 @@ import io.metersphere.base.mapper.ext.ExtApiScenarioMapper;
 import io.metersphere.base.mapper.ext.ExtTestPlanMapper;
 import io.metersphere.commons.constants.APITestStatus;
 import io.metersphere.commons.constants.ApiRunMode;
-import io.metersphere.commons.constants.ReportTriggerMode;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.*;
 import io.metersphere.i18n.Translator;
@@ -235,7 +234,7 @@ public class ApiDefinitionService {
         test.setResponse(JSONObject.toJSONString(request.getResponse()));
         test.setEnvironmentId(request.getEnvironmentId());
         test.setUserId(request.getUserId());
-        test.setTags(JSON.toJSONString(new HashSet<>(request.getTags())));
+        test.setTags(request.getTags());
 
         apiDefinitionMapper.updateByPrimaryKeySelective(test);
         return test;
@@ -266,7 +265,7 @@ public class ApiDefinitionService {
             test.setUserId(request.getUserId());
         }
         test.setDescription(request.getDescription());
-        test.setTags(JSON.toJSONString(new HashSet<>(request.getTags())));
+        test.setTags(request.getTags());
         apiDefinitionMapper.insert(test);
         return test;
     }
@@ -342,10 +341,11 @@ public class ApiDefinitionService {
 
     /**
      * 内部构建HashTree 定时任务发起的执行
+     *
      * @param request
      * @return
      */
-    public String run(RunDefinitionRequest request,ApiTestCaseWithBLOBs item) {
+    public String run(RunDefinitionRequest request, ApiTestCaseWithBLOBs item) {
         MsTestPlan testPlan = new MsTestPlan();
         testPlan.setHashTree(new LinkedList<>());
         HashTree jmeterHashTree = new ListedHashTree();
@@ -362,12 +362,14 @@ public class ApiDefinitionService {
             // 多态JSON普通转换会丢失内容，需要通过 ObjectMapper 获取
             if (element != null && StringUtils.isNotEmpty(element.getString("hashTree"))) {
                 LinkedList<MsTestElement> elements = mapper.readValue(element.getString("hashTree"),
-                        new TypeReference<LinkedList<MsTestElement>>() {});
+                        new TypeReference<LinkedList<MsTestElement>>() {
+                        });
                 scenario.setHashTree(elements);
             }
             if (StringUtils.isNotEmpty(element.getString("variables"))) {
                 LinkedList<KeyValue> variables = mapper.readValue(element.getString("variables"),
-                        new TypeReference<LinkedList<KeyValue>>() {});
+                        new TypeReference<LinkedList<KeyValue>>() {
+                        });
                 scenario.setVariables(variables);
             }
             group.setEnableCookieShare(scenario.isEnableCookieShare());
@@ -572,9 +574,9 @@ public class ApiDefinitionService {
         apiDefinitionMapper.deleteByExample(example);
     }
 
-    private List<String> getAllApiIdsByFontedSelect(List<String> filter, String name, List<String> moduleIds, String projectId, List<String> unSelectIds) {
+    private List<String> getAllApiIdsByFontedSelect(Map<String, List<String>> filters, String name, List<String> moduleIds, String projectId, List<String> unSelectIds) {
         ApiDefinitionRequest request = new ApiDefinitionRequest();
-        request.setFilters(filter);
+        request.setFilters(filters);
         request.setName(name);
         request.setModuleIds(moduleIds);
         request.setProjectId(projectId);

backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java

@@ -225,7 +225,7 @@ public class ApiTestCaseService {
         test.setPriority(request.getPriority());
         test.setUpdateTime(System.currentTimeMillis());
         test.setDescription(request.getDescription());
-        test.setTags(JSON.toJSONString(new HashSet<>(request.getTags())));
+        test.setTags(request.getTags());
         apiTestCaseMapper.updateByPrimaryKeySelective(test);
         return test;
     }
@@ -247,7 +247,7 @@ public class ApiTestCaseService {
         test.setUpdateTime(System.currentTimeMillis());
         test.setDescription(request.getDescription());
         test.setNum(getNextNum(request.getApiDefinitionId()));
-        test.setTags(JSON.toJSONString(new HashSet<>(request.getTags())));
+        test.setTags(request.getTags());
         apiTestCaseMapper.insert(test);
         return test;
     }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml

@@ -243,9 +243,17 @@
                 </foreach>
             </if>
             <if test="request.filters != null and request.filters.size() > 0">
-                and api_definition.status in
+                <foreach collection="request.filters.entrySet()" index="key" item="values">
-                <foreach collection="request.filters" item="value" separator="," open="(" close=")">
+                    <if test="values != null and values.size() > 0">
-                    #{value}
+                        <choose>
+                            <when test="key=='status'">
+                                and api_definition.status in
+                                <foreach collection="values" item="value" separator="," open="(" close=")">
+                                    #{value}
+                                </foreach>
+                            </when>
+                        </choose>
+                    </if>
                 </foreach>
             </if>
             <if test="request.apiCaseCoverage == 'uncoverage' ">

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.java

@@ -8,5 +8,5 @@ import java.util.List;
 public interface ExtTestPlanLoadCaseMapper {
 
     List<String> selectIdsNotInPlan(@Param("projectId") String projectId, @Param("planId") String planId);
-    List<TestPlanLoadCaseDTO> selectTestPlanLoadCaseList(@Param("planId") String planId);
+    List<TestPlanLoadCaseDTO> selectTestPlanLoadCaseList(@Param("planId") String planId, @Param("projectId") String projectId);
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml

@@ -11,11 +11,25 @@
         )
     </select>
     <select id="selectTestPlanLoadCaseList" resultType="io.metersphere.track.dto.TestPlanLoadCaseDTO">
-        select tplc.id, u.name as userName, tplc.create_time, tplc.update_time, tplc.test_plan_id, tplc.load_case_id,
+        select tplc.id,
-               lt.status, lt.name as caseName, tplc.load_report_id
+               u.name  as userName,
+               tplc.create_time,
+               tplc.update_time,
+               tplc.test_plan_id,
+               tplc.load_case_id,
+               lt.status,
+               lt.name as caseName,
+               tplc.load_report_id,
+               p.name as projectName
         from test_plan_load_case tplc
                  inner join load_test lt on tplc.load_case_id = lt.id
                  inner join user u on lt.user_id = u.id
-        where tplc.test_plan_id = #{planId}
+                 inner join project p on lt.project_id = p.id
+            <where>
+                tplc.test_plan_id = #{planId}
+                <if test="projectId != null and projectId != ''">
+                    and lt.project_id = #{projectId}
+                </if>
+            </where>
     </select>
 </mapper>

backend/src/main/java/io/metersphere/track/controller/TestPlanLoadCaseController.java

@@ -52,4 +52,9 @@ public class TestPlanLoadCaseController {
     public Boolean isExistReport(@RequestBody LoadCaseReportRequest request) {
         return testPlanLoadCaseService.isExistReport(request);
     }
+
+    @PostMapping("/batch/delete")
+    public void batchDelete(@RequestBody List<String> ids) {
+        testPlanLoadCaseService.batchDelete(ids);
+    }
 }

backend/src/main/java/io/metersphere/track/dto/TestPlanLoadCaseDTO.java

@@ -9,4 +9,5 @@ import lombok.Setter;
 public class TestPlanLoadCaseDTO extends TestPlanLoadCase {
     private String userName;
     private String caseName;
+    private String projectName;
 }

backend/src/main/java/io/metersphere/track/request/testcase/EditTestCaseRequest.java

@@ -16,5 +16,4 @@ public class EditTestCaseRequest extends TestCaseWithBLOBs {
      * 复制测试用例后，要进行复制的文件Id list
      */
     private List<String> fileIds = new ArrayList<>();
-    private List<String> caseTags = new ArrayList<>();
 }

backend/src/main/java/io/metersphere/track/service/TestCaseService.java

@@ -585,7 +585,6 @@ public class TestCaseService {
             throw new IllegalArgumentException(Translator.get("file_cannot_be_null"));
         }
 
-        request.setTags(JSON.toJSONString(new HashSet<>(request.getCaseTags())));
         final TestCaseWithBLOBs testCaseWithBLOBs = addTestCase(request);
 
         // 复制用例时传入文件ID进行复制
@@ -642,7 +641,6 @@ public class TestCaseService {
             });
         }
 
-        request.setTags(JSON.toJSONString(new HashSet<>(request.getCaseTags())));
         editTestCase(request);
         return request.getId();
     }

backend/src/main/java/io/metersphere/track/service/TestPlanLoadCaseService.java

@@ -1,6 +1,7 @@
 package io.metersphere.track.service;
 
 import io.metersphere.base.domain.*;
+import io.metersphere.base.mapper.LoadTestMapper;
 import io.metersphere.base.mapper.LoadTestReportMapper;
 import io.metersphere.base.mapper.TestPlanLoadCaseMapper;
 import io.metersphere.base.mapper.ext.ExtTestPlanLoadCaseMapper;
@@ -20,6 +21,7 @@ import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.UUID;
+import java.util.stream.Collectors;
 
 @Service
 @Transactional(rollbackFor = Exception.class)
@@ -35,6 +37,8 @@ public class TestPlanLoadCaseService {
     private SqlSessionFactory sqlSessionFactory;
     @Resource
     private LoadTestReportMapper loadTestReportMapper;
+    @Resource
+    private LoadTestMapper loadTestMapper;
 
     public List<LoadTest> relevanceList(LoadCaseRequest request) {
         List<String> ids = extTestPlanLoadCaseMapper.selectIdsNotInPlan(request.getProjectId(), request.getTestPlanId());
@@ -45,7 +49,7 @@ public class TestPlanLoadCaseService {
     }
 
     public List<TestPlanLoadCaseDTO> list(LoadCaseRequest request) {
-        return extTestPlanLoadCaseMapper.selectTestPlanLoadCaseList(request.getTestPlanId());
+        return extTestPlanLoadCaseMapper.selectTestPlanLoadCaseList(request.getTestPlanId(), request.getProjectId());
     }
 
     public void relevanceCase(LoadCaseRequest request) {
@@ -96,4 +100,26 @@ public class TestPlanLoadCaseService {
         }
         return true;
     }
+
+    public void deleteByRelevanceProjectIds(String id, List<String> relevanceProjectIds) {
+        LoadTestExample loadTestExample = new LoadTestExample();
+        loadTestExample.createCriteria().andProjectIdIn(relevanceProjectIds);
+        List<LoadTest> loadTests = loadTestMapper.selectByExample(loadTestExample);
+        TestPlanLoadCaseExample testPlanLoadCaseExample = new TestPlanLoadCaseExample();
+        TestPlanLoadCaseExample.Criteria criteria = testPlanLoadCaseExample.createCriteria().andTestPlanIdEqualTo(id);
+        if (!CollectionUtils.isEmpty(loadTests)) {
+            List<String> ids = loadTests.stream().map(LoadTest::getId).collect(Collectors.toList());
+            criteria.andLoadCaseIdNotIn(ids);
+        }
+        testPlanLoadCaseMapper.deleteByExample(testPlanLoadCaseExample);
+    }
+
+    public void batchDelete(List<String> ids) {
+        if (CollectionUtils.isEmpty(ids)) {
+            return;
+        }
+        TestPlanLoadCaseExample example = new TestPlanLoadCaseExample();
+        example.createCriteria().andIdIn(ids);
+        testPlanLoadCaseMapper.deleteByExample(example);
+    }
 }

backend/src/main/java/io/metersphere/track/service/TestPlanService.java

@@ -87,6 +87,8 @@ public class TestPlanService {
     private TestPlanApiCaseService testPlanApiCaseService;
     @Resource
     private TestPlanScenarioCaseService testPlanScenarioCaseService;
+    @Resource
+    private TestPlanLoadCaseService testPlanLoadCaseService;
 
     public synchronized void addTestPlan(AddTestPlanRequest testPlan) {
         if (getTestPlanByName(testPlan.getName()).size() > 0) {
@@ -234,6 +236,7 @@ public class TestPlanService {
             }
             testPlanApiCaseService.deleteByRelevanceProjectIds(testPlan.getId(), relevanceProjectIds);
             testPlanScenarioCaseService.deleteByRelevanceProjectIds(testPlan.getId(), relevanceProjectIds);
+            testPlanLoadCaseService.deleteByRelevanceProjectIds(testPlan.getId(), relevanceProjectIds);
         }
     }
 

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

@@ -24,26 +24,7 @@
 
 
         <label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
-        <el-tag
+        <ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;"/>
-          :key="apiCase.id + '_' + index"
-          v-for="(tag, index) in apiCase.tags"
-          closable
-          size="mini"
-          :disable-transitions="false"
-          @close="handleClose(tag)">
-          {{ tag }}
-        </el-tag>
-        <el-input
-          class="input-new-tag"
-          v-if="inputVisible"
-          v-model="inputValue"
-          ref="saveTagInput"
-          size="mini"
-          @keyup.enter.native="handleInputConfirm"
-          @blur="handleInputConfirm"
-        >
-        </el-input>
-        <el-button v-else class="button-new-tag" size="mini" @click="showTagInput">+</el-button>
 
         <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
                   <span>
@@ -57,15 +38,15 @@
         </div>
       </el-col>
 
-          <el-col :span="4">
+      <el-col :span="4">
-            <ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
+        <ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
-                           style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
+                       style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
-            <ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
+        <ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
-                           size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
+                       size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
-            <ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
+        <ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
-                           size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
+                       size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
-            <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
+        <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
-          </el-col>
+      </el-col>
 
       <el-col :span="3">
         <el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">
@@ -112,10 +93,12 @@ import MsSqlBasisParameters from "../request/database/BasisParameters";
 import MsTcpBasisParameters from "../request/tcp/BasisParameters";
 import MsDubboBasisParameters from "../request/dubbo/BasisParameters";
 import MsApiExtendBtns from "../reference/ApiExtendBtns";
+import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
 
 export default {
   name: "ApiCaseItem",
   components: {
+    MsInputTag,
     MsTag,
     MsTipButton,
     MsApiRequestForm,
@@ -139,8 +122,6 @@ export default {
       visible: false,
       condition: {},
       isShowInput: false,
-      inputVisible: false,
-      inputValue: ''
     }
   },
   props: {
@@ -213,21 +194,25 @@ export default {
       }
     },
     saveTestCase(row) {
+      let tmp = JSON.parse(JSON.stringify(row));
       this.isShowInput = false;
-      if (this.validate(row)) {
+      if (this.validate(tmp)) {
         return;
       }
-      let bodyFiles = this.getBodyUploadFiles(row);
+      let bodyFiles = this.getBodyUploadFiles(tmp);
-      row.projectId = getCurrentProjectID();
+      tmp.projectId = getCurrentProjectID();
-      row.active = true;
+      tmp.active = true;
-      row.request.path = this.api.path;
+      tmp.request.path = this.api.path;
-      row.request.method = this.api.method;
+      tmp.request.method = this.api.method;
-      row.apiDefinitionId = row.apiDefinitionId || this.api.id;
+      tmp.apiDefinitionId = tmp.apiDefinitionId || this.api.id;
       let url = "/api/testcase/create";
-      if (row.id) {
+      if (tmp.id) {
         url = "/api/testcase/update";
       }
-      this.$fileUpload(url, null, bodyFiles, row, () => {
+      if (tmp.tags instanceof Array) {
+        tmp.tags = JSON.stringify(tmp.tags);
+      }
+      this.$fileUpload(url, null, bodyFiles, tmp, () => {
         this.$success(this.$t('commons.save_success'));
         this.$emit('refresh');
       });
@@ -293,28 +278,6 @@ export default {
       }
       return bodyUploadFiles;
     },
-    handleClose(tag) {
-      this.apiCase.tags.splice(this.apiCase.tags.indexOf(tag), 1);
-      this.saveTestCase(this.apiCase)
-    },
-
-    showTagInput() {
-      this.inputVisible = true;
-      this.$nextTick(_ => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      if (inputValue) {
-        this.apiCase.tags.push(inputValue);
-        this.saveTestCase(this.apiCase)
-      }
-      this.inputVisible = false;
-      this.inputValue = '';
-    }
-
   }
 }
 </script>
@@ -356,22 +319,4 @@ export default {
 .is-selected {
   background: #EFF7FF;
 }
-
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-
-.button-new-tag {
-  margin-left: 10px;
-  height: 20px;
-  /*line-height: 30px;*/
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

frontend/src/business/components/api/definition/components/case/ApiCaseList.vue

@@ -177,9 +177,7 @@ export default {
             this.addCase();
           }
           this.apiCaseList.forEach(apiCase => {
-            if (!apiCase.tags) {
+            if (apiCase.tags && apiCase.tags.length > 0) {
-              apiCase.tags = [];
-            } else {
               apiCase.tags = JSON.parse(apiCase.tags);
             }
           })

frontend/src/business/components/api/definition/components/complete/BasisApi.vue

@@ -17,8 +17,9 @@
               <div v-else>
                 <el-option :key="0" :value="''">
                   <div style="margin-left: 40px">
-                        <span style="font-size: 14px;color: #606266;font-weight: 48.93">{{$t('api_test.definition.select_comp.no_data')}},
+                        <span style="font-size: 14px;color: #606266;font-weight: 48.93">{{ $t('api_test.definition.select_comp.no_data') }},
-                        </span><el-link type="primary" @click="createModules">{{$t('api_test.definition.select_comp.add_data')}}</el-link>
+                        </span>
+                    <el-link type="primary" @click="createModules">{{ $t('api_test.definition.select_comp.add_data') }}</el-link>
                   </div>
                 </el-option>
               </div>
@@ -54,27 +55,7 @@
       <el-row>
         <el-col :span="8">
           <el-form-item :label="$t('commons.tag')" prop="tag">
-            <el-tag
+            <ms-input-tag :currentScenario="basicForm" ref="tag"/>
-              :key="basicForm + '_' + index"
-              v-for="(tag, index) in basicForm.tags"
-              closable
-              size="mini"
-              :disable-transitions="false"
-              @close="handleClose(tag)">
-              {{ tag }}
-            </el-tag>
-            <el-input
-              class="input-new-tag"
-              v-if="inputVisible"
-              v-model="inputValue"
-              ref="saveTagInput"
-              size="mini"
-              @keyup.enter.native="handleInputConfirm"
-              @blur="handleInputConfirm"
-            >
-            </el-input>
-            <el-button v-else class="button-new-tag" size="mini" @click="showInput">+</el-button>
-
           </el-form-item>
         </el-col>
         <el-col :span="16">
@@ -94,111 +75,69 @@
 <script>
 import {API_STATUS} from "../../model/JsonData";
 import {WORKSPACE_ID} from '../../../../../../common/js/constants';
+import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
 
 export default {
-    name: "MsBasisApi",
+  name: "MsBasisApi",
-    components: {},
+  components: {MsInputTag},
-    props: {
+  props: {
-      currentProtocol: {
+    currentProtocol: {
-        type: String,
+      type: String,
-        default: "HTTP"
+      default: "HTTP"
-      },
-      moduleOptions: Array,
-      basisData: {},
     },
-    created() {
+    moduleOptions: Array,
-      this.getMaintainerOptions();
+    basisData: {},
-      if (!this.basisData.tags) {
+  },
-        this.basisData.tags = [];
+  created() {
-      } else {
+    this.getMaintainerOptions();
-        this.basisData.tags = JSON.parse(this.basisData.tags);
+    this.basicForm = this.basisData;
-      }
+  },
-      this.basicForm = this.basisData;
+  data() {
-    },
+    return {
-    data() {
+      basicForm: {},
-      return {
+      httpVisible: false,
-        basicForm: {},
+      currentModule: {},
-        httpVisible: false,
+      maintainerOptions: [],
-        currentModule: {},
+      loading: false,
-        maintainerOptions: [],
+      rule: {
-        loading: false,
+        name: [
-        rule: {
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-          name: [
+          {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+        ],
-            {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
+        userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-          ],
+        moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-          userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+        status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
-          moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-          status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
-        },
-        value: API_STATUS[0].id,
-        options: API_STATUS,
-        inputVisible: false,
-        inputValue: ''
-      }
-    },
-    methods: {
-      getMaintainerOptions() {
-        let workspaceId = localStorage.getItem(WORKSPACE_ID);
-        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-          this.maintainerOptions = response.data;
-        });
       },
-      reload() {
+      value: API_STATUS[0].id,
-        this.loading = true
+      options: API_STATUS,
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      validate() {
-        this.$refs['basicForm'].validate((valid) => {
-          if (valid) {
-            this.$emit('callback');
-          }
-        })
-      },
-      createModules(){
-        this.$emit("createRootModelInTree");
-      },
-      handleClose(tag) {
-        this.basicForm.tags.splice(this.basicForm.tags.indexOf(tag), 1);
-      },
-
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          this.basicForm.tags.push(inputValue);
-        }
-        this.inputVisible = false;
-        this.inputValue = '';
-      }
     }
+  },
+  methods: {
+    getMaintainerOptions() {
+      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+        this.maintainerOptions = response.data;
+      });
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    validate() {
+      this.$refs['basicForm'].validate((valid) => {
+        if (valid) {
+          this.$emit('callback');
+        }
+      })
+    },
+    createModules() {
+      this.$emit("createRootModelInTree");
+    },
   }
+}
 </script>
 
 <style scoped>
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-
-.button-new-tag {
-  margin-left: 10px;
-  height: 20px;
-  /*line-height: 30px;*/
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue

@@ -6,87 +6,91 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
-          <el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
+          <el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
-          <el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
+          <el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
         </div>
       </el-col>
     </el-row>
     <!-- 基础信息 -->
-    <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
+    <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
+                      @callback="callback"/>
       </el-col>
     </el-row>
 
     <!-- 请求参数 -->
-    <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+    <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
     <ms-basis-parameters :showScript="false" :request="request"/>
 
   </div>
 </template>
 
 <script>
-  import MsBasisApi from "./BasisApi";
+import MsBasisApi from "./BasisApi";
-  import MsBasisParameters from "../request/dubbo/BasisParameters";
+import MsBasisParameters from "../request/dubbo/BasisParameters";
 
-  export default {
+export default {
-    name: "MsApiDubboRequestForm",
+  name: "MsApiDubboRequestForm",
-    components: {
+  components: {
-      MsBasisApi, MsBasisParameters
+    MsBasisApi, MsBasisParameters
+  },
+  props: {
+    request: {},
+    basisData: {},
+    moduleOptions: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {validated: false}
+  },
+  methods: {
+    callback() {
+      this.validated = true;
     },
-    props: {
+    validateApi() {
-      request: {},
+      this.validated = false;
-      basisData: {},
+      this.basisData.method = this.request.protocol;
-      moduleOptions: Array,
+      this.$refs['basicForm'].validate();
-      isReadOnly: {
+    },
-        type: Boolean,
+    saveApi() {
-        default: false
+      this.validateApi();
+      if (this.validated) {
+        this.basisData.request = this.request;
+        console.log(this.basisData)
+        if (this.basisData.tags instanceof Array) {
+          this.basisData.tags = JSON.stringify(this.basisData.tags);
+        }
+        this.$emit('saveApi', this.basisData);
       }
     },
-    data() {
+    runTest() {
-      return {validated: false}
+      this.validateApi();
+      if (this.validated) {
+        this.basisData.request = this.request;
+        this.$emit('runTest', this.basisData);
+      }
     },
-    methods: {
+    createRootModelInTree() {
-      callback() {
+      this.$emit("createRootModelInTree");
-        this.validated = true;
-      },
-      validateApi() {
-        this.validated = false;
-        this.basisData.method = this.request.protocol;
-        this.$refs['basicForm'].validate();
-      },
-      saveApi() {
-        this.validateApi();
-        if (this.validated) {
-          this.basisData.request = this.request;
-          console.log(this.basisData)
-          this.$emit('saveApi', this.basisData);
-        }
-      },
-      runTest() {
-        this.validateApi();
-        if (this.validated) {
-          this.basisData.request = this.request;
-          this.$emit('runTest', this.basisData);
-        }
-      },
-      createRootModelInTree(){
-        this.$emit("createRootModelInTree");
-      },
     },
+  },
 
-    computed: {}
+  computed: {}
-  }
+}
 </script>
 
 <style scoped>
-  .tip {
+.tip {
-    padding: 3px 5px;
+  padding: 3px 5px;
-    font-size: 16px;
+  font-size: 16px;
-    border-radius: 4px;
+  border-radius: 4px;
-    border-left: 4px solid #783887;
+  border-left: 4px solid #783887;
-    margin: 0px 20px 0px;
+  margin: 0px 20px 0px;
-  }
+}
 </style>

frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue

@@ -77,27 +77,7 @@
           <el-row>
             <el-col :span="8">
               <el-form-item :label="$t('commons.tag')" prop="tag">
-                <el-tag
+                <ms-input-tag :currentScenario="httpForm" ref="tag"/>
-                  :key="httpForm + '_' + index"
-                  v-for="(tag, index) in httpForm.tags"
-                  closable
-                  size="mini"
-                  :disable-transitions="false"
-                  @close="handleClose(tag)">
-                  {{ tag }}
-                </el-tag>
-                <el-input
-                  class="input-new-tag"
-                  v-if="inputVisible"
-                  v-model="inputValue"
-                  ref="saveTagInput"
-                  size="mini"
-                  @keyup.enter.native="handleInputConfirm"
-                  @blur="handleInputConfirm"
-                >
-                </el-input>
-                <el-button v-else class="button-new-tag" size="mini" @click="showInput">+</el-button>
-
               </el-form-item>
             </el-col>
             <el-col :span="16">
@@ -134,10 +114,11 @@ import {WORKSPACE_ID} from '../../../../../../common/js/constants';
 import {API_STATUS, REQ_METHOD} from "../../model/JsonData";
 import MsJsr233Processor from "../processor/Jsr233Processor";
 import {KeyValue} from "../../model/ApiTestModel";
+import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
 
 export default {
   name: "MsAddCompleteHttpApi",
-  components: {MsResponseText, MsApiRequestForm, MsJsr233Processor},
+  components: {MsResponseText, MsApiRequestForm, MsJsr233Processor, MsInputTag},
   data() {
     let validateURL = (rule, value, callback) => {
       if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
@@ -165,8 +146,6 @@ export default {
       currentModule: {},
       reqOptions: REQ_METHOD,
       options: API_STATUS,
-      inputVisible: false,
-      inputValue: ''
     }
   },
   props: {moduleOptions: {}, request: {}, response: {}, basisData: {}},
@@ -192,6 +171,9 @@ export default {
       this.request.path = this.httpForm.path;
       this.request.method = this.httpForm.method;
       this.httpForm.request.useEnvironment = undefined;
+      if (this.httpForm.tags instanceof Array) {
+        this.httpForm.tags = JSON.stringify(this.httpForm.tags);
+      }
     },
     saveApi() {
       this.$refs['httpForm'].validate((valid) => {
@@ -243,26 +225,6 @@ export default {
         this.$error(this.$t('api_test.request.url_invalid'), 2000);
       }
     },
-
-    handleClose(tag) {
-      this.httpForm.tags.splice(this.httpForm.tags.indexOf(tag), 1);
-    },
-
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick(_ => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      if (inputValue) {
-        this.httpForm.tags.push(inputValue);
-      }
-      this.inputVisible = false;
-      this.inputValue = '';
-    }
   },
 
   created() {
@@ -270,11 +232,6 @@ export default {
     if (!this.basisData.environmentId) {
       this.basisData.environmentId = "";
     }
-    if (!this.basisData.tags) {
-      this.basisData.tags = [];
-    } else {
-      this.basisData.tags = JSON.parse(this.basisData.tags);
-    }
 
     this.httpForm = JSON.parse(JSON.stringify(this.basisData));
   }
@@ -314,22 +271,4 @@ export default {
 .ms-left-buttion {
   margin: 6px 0px 8px 30px;
 }
-
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-
-.button-new-tag {
-  margin-left: 10px;
-  height: 20px;
-  /*line-height: 30px;*/
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue

@@ -5,84 +5,88 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
-          <el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
+          <el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
-          <el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
+          <el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
         </div>
       </el-col>
     </el-row>
     <!-- 基础信息 -->
-    <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
+    <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
+                      @callback="callback"/>
       </el-col>
     </el-row>
 
     <!-- 请求参数 -->
-    <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+    <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
     <ms-basis-parameters :showScript="false" :request="request"/>
 
   </div>
 </template>
 
 <script>
-  import MsBasisApi from "./BasisApi";
+import MsBasisApi from "./BasisApi";
-  import MsBasisParameters from "../request/database/BasisParameters";
+import MsBasisParameters from "../request/database/BasisParameters";
 
-  export default {
+export default {
-    name: "MsApiSqlRequestForm",
+  name: "MsApiSqlRequestForm",
-    components: {
+  components: {
-      MsBasisApi, MsBasisParameters
+    MsBasisApi, MsBasisParameters
+  },
+  props: {
+    request: {},
+    basisData: {},
+    moduleOptions: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {validated: false}
+  },
+  methods: {
+    callback() {
+      this.validated = true;
     },
-    props: {
+    validateApi() {
-      request: {},
+      this.validated = false;
-      basisData: {},
+      this.$refs['basicForm'].validate();
-      moduleOptions: Array,
+    },
-      isReadOnly: {
+    saveApi() {
-        type: Boolean,
+      this.validateApi();
-        default: false
+      if (this.validated) {
+        this.basisData.method = this.basisData.protocol;
+        if (this.basisData.tags instanceof Array) {
+          this.basisData.tags = JSON.stringify(this.basisData.tags);
+        }
+        this.$emit('saveApi', this.basisData);
       }
     },
-
+    runTest() {
-    data() {
+      this.validateApi();
-      return {validated: false}
+      if (this.validated) {
+        this.basisData.request = this.request;
+        this.$emit('runTest', this.basisData);
+      }
     },
-    methods: {
+    createRootModelInTree() {
-      callback() {
+      this.$emit("createRootModelInTree");
-        this.validated = true;
-      },
-      validateApi() {
-        this.validated = false;
-        this.$refs['basicForm'].validate();
-      },
-      saveApi() {
-        this.validateApi();
-        if (this.validated) {
-          this.basisData.method = this.basisData.protocol;
-          this.$emit('saveApi', this.basisData);
-        }
-      },
-      runTest() {
-        this.validateApi();
-        if (this.validated) {
-          this.basisData.request = this.request;
-          this.$emit('runTest', this.basisData);
-        }
-      },
-      createRootModelInTree(){
-        this.$emit("createRootModelInTree");
-      },
     },
-  }
+  },
+}
 </script>
 
 <style scoped>
-  .tip {
+.tip {
-    padding: 3px 5px;
+  padding: 3px 5px;
-    font-size: 16px;
+  font-size: 16px;
-    border-radius: 4px;
+  border-radius: 4px;
-    border-left: 4px solid #783887;
+  border-left: 4px solid #783887;
-    margin: 0px 20px 0px;
+  margin: 0px 20px 0px;
-  }
+}
 </style>

frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue

@@ -5,22 +5,23 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
-          <el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
+          <el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
-          <el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
+          <el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
         </div>
       </el-col>
     </el-row>
     <!-- 基础信息 -->
-    <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
+    <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
+                      @callback="callback"/>
       </el-col>
     </el-row>
 
     <!-- 请求参数 -->
-    <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+    <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
     <ms-basis-parameters :request="request"/>
 
   </div>
@@ -28,62 +29,65 @@
 </template>
 
 <script>
-  import MsBasisApi from "./BasisApi";
+import MsBasisApi from "./BasisApi";
-  import MsBasisParameters from "../request/tcp/BasisParameters";
+import MsBasisParameters from "../request/tcp/BasisParameters";
 
-  export default {
+export default {
-    name: "MsAddCompleteTcpApi",
+  name: "MsAddCompleteTcpApi",
-    components: {MsBasisApi, MsBasisParameters},
+  components: {MsBasisApi, MsBasisParameters},
-    props: {
+  props: {
-      request: {},
+    request: {},
-      basisData: {},
+    basisData: {},
-      moduleOptions: Array,
+    moduleOptions: Array,
-      isReadOnly: {
+    isReadOnly: {
-        type: Boolean,
+      type: Boolean,
-        default: false
+      default: false
+    }
+  },
+  data() {
+    return {
+      validated: false,
+    }
+  },
+
+  methods: {
+    callback() {
+      this.validated = true;
+    },
+    validateApi() {
+      this.validated = false;
+      this.basisData.method = "TCP";
+      this.$refs['basicForm'].validate();
+    },
+    saveApi() {
+      this.validateApi();
+      if (this.validated) {
+        if (this.basisData.tags instanceof Array) {
+          this.basisData.tags = JSON.stringify(this.basisData.tags);
+        }
+        this.$emit('saveApi', this.basisData);
       }
     },
-    data() {
+    runTest() {
-      return {
+      this.validateApi();
-        validated: false,
+      if (this.validated) {
+        this.basisData.request = this.request;
+        this.$emit('runTest', this.basisData);
       }
     },
-
+    createRootModelInTree() {
-    methods: {
+      this.$emit("createRootModelInTree");
-      callback() {
-        this.validated = true;
-      },
-      validateApi() {
-        this.validated = false;
-        this.basisData.method = "TCP";
-        this.$refs['basicForm'].validate();
-      },
-      saveApi() {
-        this.validateApi();
-        if (this.validated) {
-          this.$emit('saveApi', this.basisData);
-        }
-      },
-      runTest() {
-        this.validateApi();
-        if (this.validated) {
-          this.basisData.request = this.request;
-          this.$emit('runTest', this.basisData);
-        }
-      },
-      createRootModelInTree(){
-        this.$emit("createRootModelInTree");
-      },
     },
-  }
+  },
+}
 </script>
 
 <style scoped>
-  .tip {
+.tip {
-    padding: 3px 5px;
+  padding: 3px 5px;
-    font-size: 16px;
+  font-size: 16px;
-    border-radius: 4px;
+  border-radius: 4px;
-    border-left: 4px solid #783887;
+  border-left: 4px solid #783887;
-    margin: 0px 20px 0px;
+  margin: 0px 20px 0px;
-  }
+}
 </style>

frontend/src/business/components/api/definition/components/list/ApiList.vue

@@ -10,6 +10,8 @@
       <el-table v-loading="result.loading"
                 ref="apiDefinitionTable"
                 border
+                @sort-change="sort"
+                @filter-change="filter"
                 :data="tableData" row-key="id" class="test-content adjust-table ms-select-all"
                 @select-all="handleSelectAll"
                 @select="handleSelect" :height="screenHeight">
@@ -27,18 +29,21 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="num" label="ID" show-overflow-tooltip/>
+        <el-table-column prop="num" label="ID" show-overflow-tooltip
-        <el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
+                         sortable="custom"/>
+        <el-table-column prop="name" :label="$t('api_test.definition.api_name')"
+                         show-overflow-tooltip
+                         sortable="custom"/>
         <el-table-column
           prop="status"
-          column-key="api_status"
+          column-key="status"
-          :label="$t('api_test.definition.api_status')"
+          sortable="custom"
-          show-overflow-tooltip>
+          :filters="statusFilters"
+          :label="$t('api_test.definition.api_status')">
           <template v-slot:default="scope">
-            <ms-tag v-if="scope.row.status == 'Prepare'" type="info" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
+            <span class="el-dropdown-link">
-            <ms-tag v-if="scope.row.status == 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
+              <api-status :value="scope.row.status"/>
-            <ms-tag v-if="scope.row.status == 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
+            </span>
-            <ms-tag v-if="scope.row.status == 'Trash'" type="danger" effect="plain" content="废弃"/>
           </template>
         </el-table-column>
 
@@ -66,10 +71,9 @@
 
         <el-table-column prop="tags" :label="$t('commons.tag')">
           <template v-slot:default="scope">
-            <ms-tag v-for="(tag, index) in scope.row.showTags"
+            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                    :key="tag + '_' + index"
+              <ms-tag type="success" effect="plain" :content="itemName"/>
-                    :effect="'light'"
+            </div>
-                    :content="tag"/>
           </template>
         </el-table-column>
 
@@ -128,14 +132,16 @@ import MsBottomContainer from "../BottomContainer";
 import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
 import MsBatchEdit from "../basis/BatchEdit";
 import {API_METHOD_COLOUR, API_STATUS, REQ_METHOD} from "../../model/JsonData";
-import {getCurrentProjectID} from "@/common/js/utils";
+import {_filter, _sort, getCurrentProjectID} from "@/common/js/utils";
 import {WORKSPACE_ID} from '@/common/js/constants';
 import ApiListContainer from "./ApiListContainer";
 import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
+import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
 
 export default {
   name: "ApiList",
   components: {
+    ApiStatus,
     MsTableSelectAll,
     ApiListContainer,
     MsTableButton,
@@ -168,6 +174,12 @@ export default {
         {id: 'method', name: this.$t('api_test.definition.api_type')},
         {id: 'userId', name: this.$t('api_test.definition.api_principal')},
       ],
+      statusFilters: [
+        {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
+        {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
+        {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
+        {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
+      ],
       valueArr: {
         status: API_STATUS,
         method: REQ_METHOD,
@@ -208,6 +220,7 @@ export default {
     },
   },
   created: function () {
+    this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
     this.initTable();
     this.getMaintainerOptions();
   },
@@ -220,8 +233,12 @@ export default {
     },
     trashEnable() {
       if (this.trashEnable) {
-        this.initTable();
+        this.condition.filters = {status: ["Trash"]};
+        this.condition.moduleIds = [];
+      } else {
+        this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
       }
+      this.initTable();
     }
   },
   methods: {
@@ -235,14 +252,8 @@ export default {
       this.unSelection = [];
       this.selectDataCounts = 0;
 
-      this.condition.filters = ["Prepare", "Underway", "Completed"];
 
       this.condition.moduleIds = this.selectNodeIds;
-      if (this.trashEnable) {
-        this.condition.filters = ["Trash"];
-        this.condition.moduleIds = [];
-      }
-
       this.condition.projectId = getCurrentProjectID();
       if (this.currentProtocol != null) {
         this.condition.protocol = this.currentProtocol;
@@ -256,15 +267,6 @@ export default {
         case 'thisWeekCount':
           this.condition.selectThisWeedData = true;
           break;
-        case 'Prepare':
-          this.condition.filters = [this.selectDataRange];
-          break;
-        case 'Completed':
-          this.condition.filters = [this.selectDataRange];
-          break;
-        case 'Underway':
-          this.condition.filters = [this.selectDataRange];
-          break;
         case 'uncoverage':
           this.condition.apiCaseCoverage = 'uncoverage';
           break;
@@ -278,9 +280,9 @@ export default {
           this.tableData = response.data.listObject;
           this.unSelection = response.data.listObject.map(s => s.id);
 
-          this.tableData.forEach(row => {
+          this.tableData.forEach(item => {
-            if (row.tags) {
+            if (item.tags && item.tags.length > 0) {
-              row.showTags = JSON.parse();
+              item.tags = JSON.parse(item.tags);
             }
           })
         });
@@ -344,9 +346,13 @@ export default {
       this.$emit('editApi', row);
     },
     reductionApi(row) {
-      row.request = null;
+      let tmp = JSON.parse(JSON.stringify(row));
-      row.response = null;
+      tmp.request = null;
-      let rows = [row];
+      tmp.response = null;
+      if (tmp.tags instanceof Array) {
+        tmp.tags = JSON.stringify(tmp.tags);
+      }
+      let rows = [tmp];
       this.$post('/api/definition/reduction/', rows, () => {
         this.$success(this.$t('commons.save_success'));
         this.search();
@@ -497,7 +503,19 @@ export default {
       let rowArray = Array.from(rowSets)
       let ids = rowArray.map(s => s.id);
       return ids;
-    }
+    },
+    sort(column) {
+      // 每次只对一个字段排序
+      if (this.condition.orders) {
+        this.condition.orders = [];
+      }
+      _sort(column, this.condition);
+      this.initTable();
+    },
+    filter(filters) {
+      _filter(filters, this.condition);
+      this.initTable();
+    },
   },
 }
 </script>

frontend/src/business/components/api/definition/components/list/ApiStatus.vue

@@ -0,0 +1,26 @@
+<template>
+  <span>
+    <ms-tag v-if="value === 'Prepare'" type="info" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
+    <ms-tag v-if="value === 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
+    <ms-tag v-if="value === 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
+    <ms-tag v-if="value === 'Trash'" type="danger" effect="plain" content="废弃"/>
+    </span>
+</template>
+
+<script>
+import MsTag from "@/business/components/common/components/MsTag";
+
+export default {
+  name: "ApiStatus",
+  components: {MsTag},
+  props: {
+    value: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/track/case/components/TestCaseEdit.vue

@@ -69,27 +69,7 @@
               <el-row>
                 <el-col :span="10" :offset="1">
                   <el-form-item :label="$t('commons.tag')" :label-width="formLabelWidth" prop="tag">
-                    <el-tag
+                    <ms-input-tag :currentScenario="form" ref="tag"/>
-                      :key="form + '_' + index"
-                      v-for="(tag, index) in form.caseTags"
-                      closable
-                      size="mini"
-                      :disable-transitions="false"
-                      @close="handleClose(tag)">
-                      {{ tag }}
-                    </el-tag>
-                    <el-input
-                      class="input-new-tag"
-                      v-if="inputVisible"
-                      v-model="inputValue"
-                      ref="saveTagInput"
-                      size="mini"
-                      @keyup.enter.native="handleInputConfirm"
-                      @blur="handleInputConfirm"
-                    >
-                    </el-input>
-                    <el-button v-else class="button-new-tag" size="mini" @click="showInput">+</el-button>
-
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -298,10 +278,11 @@ import TestCaseAttachment from "@/business/components/track/case/components/Test
 import {getCurrentProjectID} from "../../../../../common/js/utils";
 import {buildNodePath} from "../../../api/definition/model/NodeTree";
 import CaseComment from "@/business/components/track/case/components/CaseComment";
+import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
 
 export default {
   name: "TestCaseEdit",
-  components: {CaseComment, MsDialogFooter, TestCaseAttachment},
+  components: {MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment},
   data() {
     return {
       result: {},
@@ -323,7 +304,6 @@ export default {
           result: ''
         }],
         remark: '',
-        caseTags: []
       },
       moduleOptions: [],
       maintainerOptions: [],
@@ -355,8 +335,6 @@ export default {
         {value: 'manual', label: this.$t('test_track.case.manual')}
       ],
       testCase: {},
-      inputVisible: false,
-      inputValue: ''
     };
   },
   props: {
@@ -387,7 +365,7 @@ export default {
     open(testCase) {
       this.testCase = {};
       if (testCase) {
-        testCase.caseTags = JSON.parse(testCase.tags);
+        testCase.tags = JSON.parse(testCase.tags);
         // 复制 不查询评论
         this.testCase = testCase.isCopy ? {} : testCase;
       }
@@ -425,7 +403,6 @@ export default {
         this.form.type = 'functional';
         this.form.method = 'manual';
         this.form.maintainer = user.id;
-        this.form.caseTags = [];
       }
 
       this.getSelectOptions();
@@ -538,6 +515,10 @@ export default {
       if (param.method != 'auto') {
         param.testId = null;
       }
+      if (this.form.tags instanceof Array) {
+        this.form.tags = JSON.stringify(this.form.tags);
+      }
+      param.tags = this.form.tags;
       return param;
     },
     getOption(param) {
@@ -641,7 +622,6 @@ export default {
             desc: '',
             result: ''
           }];
-          this.caseTags = [];
           this.uploadList = [];
           this.fileList = [];
           this.tableData = [];
@@ -729,26 +709,6 @@ export default {
       /// todo: 是否需要对文件内容和大小做限制
       return file.size > 0;
     },
-
-    handleClose(tag) {
-      this.form.caseTags.splice(this.form.caseTags.indexOf(tag), 1);
-    },
-
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick(_ => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      if (inputValue) {
-        this.form.caseTags.push(inputValue);
-      }
-      this.inputVisible = false;
-      this.inputValue = '';
-    }
   }
 }
 </script>
@@ -788,21 +748,4 @@ export default {
   height: calc(100vh - 120px);
 }
 
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-
-.button-new-tag {
-  margin-left: 10px;
-  height: 20px;
-  /*line-height: 30px;*/
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

frontend/src/business/components/track/case/components/TestCaseList.vue

@@ -113,10 +113,9 @@
 
         <el-table-column prop="tags" :label="$t('commons.tag')">
           <template v-slot:default="scope">
-            <ms-tag v-for="(tag, index) in scope.row.showTags"
+            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                    :key="tag + '_' + index"
+              <ms-tag type="success" effect="plain" :content="itemName"/>
-                    :effect="'light'"
+            </div>
-                    :content="tag"/>
           </template>
         </el-table-column>
 
@@ -319,8 +318,10 @@ export default {
           this.tableData = data.listObject;
           // this.selectIds.clear();
           this.selectRows.clear();
-          this.tableData.forEach(row => {
+          this.tableData.forEach(item => {
-            row.showTags = JSON.parse(row.tags);
+            if (item.tags && item.tags.length > 0) {
+              item.tags = JSON.parse(item.tags);
+            }
           })
         });
       }

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

@@ -62,10 +62,9 @@
 
         <el-table-column prop="tags" :label="$t('commons.tag')">
           <template v-slot:default="scope">
-            <ms-tag v-for="(tag, index) in scope.row.showTags"
+            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                    :key="tag + '_' + index"
+              <ms-tag type="success" effect="plain" :content="itemName"/>
-                    :effect="'light'"
+            </div>
-                    :content="tag"/>
           </template>
         </el-table-column>
 
@@ -265,8 +264,10 @@ export default {
       this.result = this.$post('/test/plan/api/case/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
         this.total = response.data.itemCount;
         this.tableData = response.data.listObject;
-        this.tableData.forEach(row => {
+        this.tableData.forEach(item => {
-          row.showTags = JSON.parse(row.tags);
+          if (item.tags && item.tags.length > 0) {
+            item.tags = JSON.parse(item.tags);
+          }
         })
       });
     },
@@ -479,7 +480,4 @@ export default {
   margin-right: 20px;
 }
 
-.el-tag {
-  margin-left: 10px;
-}
 </style>

frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoad.vue

@@ -12,7 +12,7 @@
         class="table-list"
         @refresh="refresh"
         :plan-id="planId"
-        :select-node-ids="selectNodeIds"
+        :select-project-id="selectProjectId"
         :select-parent-nodes="selectParentNodes"
         @relevanceCase="openTestCaseRelevanceDialog"
         ref="testPlanLoadCaseList"/>
@@ -46,6 +46,7 @@ export default {
       result: {},
       selectNodeIds: [],
       selectParentNodes: [],
+      selectProjectId: "",
       treeNodes: [],
     }
   },
@@ -74,8 +75,7 @@ export default {
       this.$refs.testCaseLoadRelevance.open();
     },
     nodeChange(node, nodeIds, pNodes) {
-      this.selectNodeIds = nodeIds;
+      this.selectProjectId = node.key;
-      this.selectParentNodes = pNodes;
       // 切换node后，重置分页数
       this.$refs.testPlanLoadCaseList.currentPage = 1;
       this.$refs.testPlanLoadCaseList.pageSize = 10;
@@ -84,6 +84,8 @@ export default {
       if (this.planId) {
         this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
           this.treeNodes = response.data;
+          // 性能测试与模块无关，过滤项目下模块
+          this.treeNodes.map(node => node.children = null);
         });
       }
     },

frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue

@@ -30,12 +30,11 @@
           :label="$t('commons.name')"
           show-overflow-tooltip>
         </el-table-column>
-        <!--        <el-table-column-->
+        <el-table-column
-        <!--          prop="projectName"-->
+          prop="projectName"
-        <!--          :label="$t('load_test.project_name')"-->
+          :label="$t('load_test.project_name')"
-        <!--          width="150"-->
+          show-overflow-tooltip>
-        <!--          show-overflow-tooltip>-->
+        </el-table-column>
-        <!--        </el-table-column>-->
         <el-table-column
           prop="userName"
           :label="$t('load_test.user_name')"
@@ -148,7 +147,7 @@ export default {
     }
   },
   props: {
-    selectNodeIds: Array,
+    selectProjectId: String,
     isReadOnly: {
       type: Boolean,
       default: false
@@ -159,7 +158,7 @@ export default {
     this.initTable();
   },
   watch: {
-    selectNodeIds() {
+    selectProjectId() {
       this.initTable();
     },
     planId() {
@@ -168,7 +167,13 @@ export default {
   },
   methods: {
     initTable() {
-      this.$post("/test/plan/load/case/list/" + this.currentPage + "/" + this.pageSize, {testPlanId: this.planId}, response => {
+      this.selectRows = new Set();
+      let param = {};
+      param.testPlanId = this.planId;
+      if (this.selectProjectId && this.selectProjectId !== 'root') {
+        param.projectId = this.selectProjectId;
+      }
+      this.$post("/test/plan/load/case/list/" + this.currentPage + "/" + this.pageSize, param, response => {
         let data = response.data;
         this.total = data.itemCount;
         this.tableData = data.listObject;
@@ -200,7 +205,19 @@ export default {
     //
     // },
     handleDeleteBatch() {
-
+      this.$alert(this.$t('test_track.plan_view.confirm_cancel_relevance') + "？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            let ids = Array.from(this.selectRows).map(row => row.id);
+            this.result = this.$post('/test/plan/load/case/batch/delete', ids, () => {
+              this.selectRows.clear();
+              this.initTable();
+              this.$success(this.$t('test_track.cancel_relevance_success'));
+            });
+          }
+        }
+      })
     },
     handleRunBatch() {
 
@@ -216,7 +233,7 @@ export default {
       })
     },
     handleDelete(loadCase) {
-      this.$get('/test/plan/load/case/delete/' + loadCase.id, () => {
+      this.result = this.$get('/test/plan/load/case/delete/' + loadCase.id, () => {
         this.$success(this.$t('test_track.cancel_relevance_success'));
         this.$emit('refresh');
         this.initTable();

frontend/src/common/css/main.css

@@ -161,7 +161,7 @@ html,body {
   overflow: visible;
 }
 
-.ms-select-all .el-icon-arrow-down {
+.ms-select-all th:nth-child(2) .el-icon-arrow-down {
   position: absolute;
   display: inline-block;
   top: -7px;

frontend/src/i18n/en-US.js

@@ -1089,6 +1089,7 @@ export default {
       plan_status_prepare: "Not started",
       plan_status_running: "Starting",
       plan_status_completed: "Completed",
+      plan_status_trash: "Trashed",
       planned_start_time: "Scheduled Start Time",
       planned_end_time: "Scheduled End Time",
       actual_start_time: "Actual Start Time",

frontend/src/i18n/zh-CN.js

@@ -1090,6 +1090,7 @@ export default {
       plan_status_prepare: "未开始",
       plan_status_running: "进行中",
       plan_status_completed: "已完成",
+      plan_status_trash: "废弃",
       planned_start_time: "计划开始",
       planned_end_time: "计划结束",
       actual_start_time: "实际开始",

frontend/src/i18n/zh-TW.js

@@ -1090,6 +1090,7 @@ export default {
       plan_status_prepare: "未開始",
       plan_status_running: "進行中",
       plan_status_completed: "已完成",
+      plan_status_trash: "廢棄",
       planned_start_time: "計劃開始",
       planned_end_time: "計劃結束",
       actual_start_time: "實際開始",