feat: 接口测试用例保存tag

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

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

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

@@ -222,6 +222,7 @@ public class ApiTestCaseService {
         test.setPriority(request.getPriority());
         test.setUpdateTime(System.currentTimeMillis());
         test.setDescription(request.getDescription());
+        test.setTags(JSON.toJSONString(new HashSet<>(request.getTags())));
         apiTestCaseMapper.updateByPrimaryKeySelective(test);
         return test;
     }
@@ -243,6 +244,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())));
         apiTestCaseMapper.insert(test);
         return test;
     }

backend/src/main/java/io/metersphere/base/domain/ApiTestCase.java

@@ -1,8 +1,9 @@
 package io.metersphere.base.domain;
 
-import java.io.Serializable;
 import lombok.Data;
 
+import java.io.Serializable;
+
 @Data
 public class ApiTestCase implements Serializable {
     private String id;
@@ -25,5 +26,7 @@ public class ApiTestCase implements Serializable {
 
     private Integer num;
 
+    private String tags;
+
     private static final long serialVersionUID = 1L;
 }

backend/src/main/java/io/metersphere/base/domain/ApiTestCaseExample.java

@@ -773,6 +773,76 @@ public class ApiTestCaseExample {
             addCriterion("num not between", value1, value2, "num");
             return (Criteria) this;
         }
+
+        public Criteria andTagsIsNull() {
+            addCriterion("tags is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsIsNotNull() {
+            addCriterion("tags is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsEqualTo(String value) {
+            addCriterion("tags =", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsNotEqualTo(String value) {
+            addCriterion("tags <>", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsGreaterThan(String value) {
+            addCriterion("tags >", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsGreaterThanOrEqualTo(String value) {
+            addCriterion("tags >=", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsLessThan(String value) {
+            addCriterion("tags <", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsLessThanOrEqualTo(String value) {
+            addCriterion("tags <=", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsLike(String value) {
+            addCriterion("tags like", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsNotLike(String value) {
+            addCriterion("tags not like", value, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsIn(List<String> values) {
+            addCriterion("tags in", values, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsNotIn(List<String> values) {
+            addCriterion("tags not in", values, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsBetween(String value1, String value2) {
+            addCriterion("tags between", value1, value2, "tags");
+            return (Criteria) this;
+        }
+
+        public Criteria andTagsNotBetween(String value1, String value2) {
+            addCriterion("tags not between", value1, value2, "tags");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {

backend/src/main/java/io/metersphere/base/mapper/ApiTestCaseMapper.xml

@@ -12,6 +12,7 @@
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
     <result column="num" jdbcType="INTEGER" property="num" />
+    <result column="tags" jdbcType="VARCHAR" property="tags" />
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.metersphere.base.domain.ApiTestCaseWithBLOBs">
     <result column="description" jdbcType="LONGVARCHAR" property="description" />
@@ -78,7 +79,7 @@
   </sql>
   <sql id="Base_Column_List">
     id, project_id, `name`, priority, api_definition_id, create_user_id, update_user_id, 
-    create_time, update_time, num
+    create_time, update_time, num, tags
   </sql>
   <sql id="Blob_Column_List">
     description, request, response
@@ -135,13 +136,13 @@
     insert into api_test_case (id, project_id, `name`, 
       priority, api_definition_id, create_user_id, 
       update_user_id, create_time, update_time, 
-      num, description, request, 
+      num, tags, description, 
-      response)
+      request, response)
     values (#{id,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
       #{priority,jdbcType=VARCHAR}, #{apiDefinitionId,jdbcType=VARCHAR}, #{createUserId,jdbcType=VARCHAR}, 
       #{updateUserId,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
-      #{num,jdbcType=INTEGER}, #{description,jdbcType=LONGVARCHAR}, #{request,jdbcType=LONGVARCHAR}, 
+      #{num,jdbcType=INTEGER}, #{tags,jdbcType=VARCHAR}, #{description,jdbcType=LONGVARCHAR}, 
-      #{response,jdbcType=LONGVARCHAR})
+      #{request,jdbcType=LONGVARCHAR}, #{response,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.metersphere.base.domain.ApiTestCaseWithBLOBs">
     insert into api_test_case
@@ -176,6 +177,9 @@
       <if test="num != null">
         num,
       </if>
+      <if test="tags != null">
+        tags,
+      </if>
       <if test="description != null">
         description,
       </if>
@@ -217,6 +221,9 @@
       <if test="num != null">
         #{num,jdbcType=INTEGER},
       </if>
+      <if test="tags != null">
+        #{tags,jdbcType=VARCHAR},
+      </if>
       <if test="description != null">
         #{description,jdbcType=LONGVARCHAR},
       </if>
@@ -267,6 +274,9 @@
       <if test="record.num != null">
         num = #{record.num,jdbcType=INTEGER},
       </if>
+      <if test="record.tags != null">
+        tags = #{record.tags,jdbcType=VARCHAR},
+      </if>
       <if test="record.description != null">
         description = #{record.description,jdbcType=LONGVARCHAR},
       </if>
@@ -293,6 +303,7 @@
       create_time = #{record.createTime,jdbcType=BIGINT},
       update_time = #{record.updateTime,jdbcType=BIGINT},
       num = #{record.num,jdbcType=INTEGER},
+      tags = #{record.tags,jdbcType=VARCHAR},
       description = #{record.description,jdbcType=LONGVARCHAR},
       request = #{record.request,jdbcType=LONGVARCHAR},
       response = #{record.response,jdbcType=LONGVARCHAR}
@@ -311,7 +322,8 @@
       update_user_id = #{record.updateUserId,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
       update_time = #{record.updateTime,jdbcType=BIGINT},
-      num = #{record.num,jdbcType=INTEGER}
+      num = #{record.num,jdbcType=INTEGER},
+      tags = #{record.tags,jdbcType=VARCHAR}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -346,6 +358,9 @@
       <if test="num != null">
         num = #{num,jdbcType=INTEGER},
       </if>
+      <if test="tags != null">
+        tags = #{tags,jdbcType=VARCHAR},
+      </if>
       <if test="description != null">
         description = #{description,jdbcType=LONGVARCHAR},
       </if>
@@ -369,6 +384,7 @@
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT},
       num = #{num,jdbcType=INTEGER},
+      tags = #{tags,jdbcType=VARCHAR},
       description = #{description,jdbcType=LONGVARCHAR},
       request = #{request,jdbcType=LONGVARCHAR},
       response = #{response,jdbcType=LONGVARCHAR}
@@ -384,7 +400,8 @@
       update_user_id = #{updateUserId,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT},
-      num = #{num,jdbcType=INTEGER}
+      num = #{num,jdbcType=INTEGER},
+      tags = #{tags,jdbcType=VARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>

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

@@ -162,6 +162,7 @@
             atc.update_user_id,
             atc.update_time,
             atc.num,
+            atc.tags,
             ader.status execResult,
             ader.create_time execTime
         from

backend/src/main/resources/db/migration/V63__add_tag.sql

@@ -1,8 +1,8 @@
 ALTER TABLE api_definition
-    ADD tag VARCHAR(1000) NULL;
+    ADD tags VARCHAR(1000) NULL;
 
 ALTER TABLE api_test_case
-    ADD tag VARCHAR(1000) NULL;
+    ADD tags VARCHAR(1000) NULL;
 
 ALTER TABLE test_case
-    ADD tag VARCHAR(1000) NULL;
+    ADD tags VARCHAR(1000) NULL;

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

@@ -21,6 +21,30 @@
                   {{ apiCase.id ? apiCase.name : '' }}
                   <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
         </span>
+
+
+        <label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
+        <el-tag
+          :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>
                     {{ apiCase.createTime | timestampFormatDate }}
@@ -44,8 +68,12 @@
       </el-col>
 
       <el-col :span="3">
-            <el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">{{getResult(apiCase.execResult)}}</el-link>
+        <el-link type="danger" v-if="apiCase.execResult && apiCase.execResult==='error'" @click="showExecResult(apiCase)">
-            <el-link v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">{{getResult(apiCase.execResult)}}</el-link>
+          {{ getResult(apiCase.execResult) }}
+        </el-link>
+        <el-link v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">
+          {{ getResult(apiCase.execResult) }}
+        </el-link>
         <div v-else> {{ getResult(apiCase.execResult) }}</div>
 
         <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
@@ -111,7 +139,9 @@
       checkedCases: new Set(),
       visible: false,
       condition: {},
-          isShowInput: false
+      isShowInput: false,
+      inputVisible: false,
+      inputValue: ''
     }
   },
   props: {
@@ -135,8 +165,7 @@
     },
     isCaseEdit: Boolean,
   },
-      watch: {
+  watch: {},
-      },
   methods: {
 
     deleteCase(index, row) {
@@ -264,6 +293,27 @@
       }
       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 = '';
+    }
 
   }
 }
@@ -306,4 +356,22 @@
 .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

@@ -45,7 +45,7 @@
 import ApiCaseHeader from "./ApiCaseHeader";
 import ApiCaseItem from "./ApiCaseItem";
 import MsRun from "../Run";
-  import {downloadFile, getUUID, getCurrentProjectID} from "@/common/js/utils";
+import {getCurrentProjectID, getUUID} from "@/common/js/utils";
 import MsDrawer from "../../../../common/components/MsDrawer";
 import {PRIORITY} from "../../model/JsonData";
 
@@ -175,6 +175,14 @@
           if (this.apiCaseList.length == 0 && !this.loaded) {
             this.addCase();
           }
+          this.apiCaseList.forEach(apiCase => {
+            if (!apiCase.tags) {
+              apiCase.tags = [];
+            } else {
+              apiCase.tags = JSON.parse(apiCase.tags);
+            }
+          })
+
         });
       }
     },
@@ -187,7 +195,7 @@
         } else {
           request = JSON.parse(this.api.request);
         }
-          let obj = {apiDefinitionId: this.api.id, name: '', priority: 'P0', active: true};
+        let obj = {apiDefinitionId: this.api.id, name: '', priority: 'P0', active: true, tags: []};
         obj.request = request;
         this.apiCaseList.unshift(obj);
       }

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

@@ -55,8 +55,8 @@
         <el-col :span="8">
           <el-form-item :label="$t('commons.tag')" prop="tag">
             <el-tag
-              :key="tag"
+              :key="basicForm + '_' + index"
-              v-for="tag in basicForm.tags"
+              v-for="(tag, index) in basicForm.tags"
               closable
               size="mini"
               :disable-transitions="false"

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

@@ -78,8 +78,8 @@
             <el-col :span="8">
               <el-form-item :label="$t('commons.tag')" prop="tag">
                 <el-tag
-                  :key="tag"
+                  :key="httpForm + '_' + index"
-                  v-for="tag in httpForm.tags"
+                  v-for="(tag, index) in httpForm.tags"
                   closable
                   size="mini"
                   :disable-transitions="false"