style(接口定义): 统一TAG 样式

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

@@ -72,7 +72,7 @@
           </el-row>
           <el-row>
             <el-col :span="7">
-              <el-form-item label="Tag" prop="tags">
+              <el-form-item :label="$t('api_test.automation.tag')"  prop="tags">
                 <ms-input-tag :currentScenario="currentScenario" ref="tag"/>
               </el-form-item>
             </el-col>

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

@@ -1,68 +1,165 @@
 <template>
-  <input-tag v-model="data" placeholder="输入回车添加标签" class="ms-tag-input ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
+  <div
+    class="el-input-tag input-tag-wrapper"
+    :class="[size ? 'el-input-tag--' + size : '']"
+    style="height: auto"
+    @click="foucusTagInput">
+    <el-tag
+      v-for="(tag, idx) in innerTags"
+      v-bind="$attrs"
+      type="info"
+      :key="tag"
+      :size="size"
+      :closable="!readOnly"
+      :disable-transitions="false"
+      @close="remove(idx)">
+      {{tag}}
+    </el-tag>
+    <input
+      v-if="!readOnly"
+      class="tag-input el-input"
+      v-model="newTag"
+      placeholder="输入回车添加"
+      @keydown.delete.stop="removeLastTag"
+      @keydown="addNew"
+      @blur="addNew"/>
+  </div>
 </template>
 
 <script>
-  import InputTag from 'vue-input-tag'
-
   export default {
-    name: "MsInputTag",
+    name: 'MsInputTag',
-    components: {InputTag},
+    props: {
-    props: {currentScenario: {}},
+      currentScenario: {},
-    created() {
+      addTagOnKeys: {
-      if (!this.currentScenario.tags) {
+        type: Array,
-        this.currentScenario.tags = [];
+        default: () => [13, 188, 9]
-      }
+      },
-      this.data = this.currentScenario.tags;
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
+      size: {type: String, default: "small"}
     },
     data() {
       return {
-        data: [],
+        newTag: '',
+        innerTags: [...this.currentScenario.tags]
       }
     },
     watch: {
-      data() {
+      innerTags() {
-        this.currentScenario.tags = this.data;
+        this.currentScenario.tags = this.innerTags;
       }
     },
-    methods: {}
+    methods: {
+      foucusTagInput() {
+        if (this.readOnly || !this.$el.querySelector('.tag-input')) {
+          console.log()
+        } else {
+          this.$el.querySelector('.tag-input').focus()
+        }
+      },
+      addNew(e) {
+        if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
+          return
+        }
+        if (e) {
+          e.stopPropagation()
+          e.preventDefault()
+        }
+        let addSuucess = false
+        if (this.newTag.includes(',')) {
+          this.newTag.split(',').forEach(item => {
+            if (this.addTag(item.trim())) {
+              addSuucess = true
+            }
+          })
+        } else {
+          if (this.addTag(this.newTag.trim())) {
+            addSuucess = true
+          }
+        }
+        if (addSuucess) {
+          this.tagChange()
+          this.newTag = ''
+        }
+      },
+      addTag(tag) {
+        tag = tag.trim()
+        if (tag && !this.innerTags.includes(tag)) {
+          this.innerTags.push(tag)
+          return true
+        }
+        return false
+      },
+      remove(index) {
+        this.innerTags.splice(index, 1)
+        this.tagChange()
+      },
+      removeLastTag() {
+        if (this.newTag) {
+          return
+        }
+        this.innerTags.pop()
+        this.tagChange()
+      },
+      tagChange() {
+        this.$emit('input', this.innerTags)
+      }
+    }
   }
 </script>
 
 <style scoped>
-
+  .input-tag-wrapper {
-  .ms-input-tag-wrapper >>> .vue-input-tag-wrapper {
+    position: relative;
-    border-radius: 2px;
+    font-size: 14px;
-    border: 1px solid #a5d24a;
-    color: #909399;
-    display: inline-block;
-  }
-
-  .ms-input-remove >>> .remove {
-    color: #909399;
-  }
-
-  .ms-input-div {
-    border-radius: 4px;
-  }
-
-  .ms-input >>> .input-tag {
-    display: inline-block;
-    font-size: 12px;
-    min-width: auto;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    white-space: nowrap;
     background-color: #fff;
-    border-color: #909399;
+    background-image: none;
-    color: #909399;
+    border-radius: 4px;
-    width: auto;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    outline: none;
+    padding: 0 10px 0 5px;
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    width: 100%;
+  }
 
-    height: 23px;
+  .el-tag {
-    padding: 0 5px;
+    margin-right: 4px;
-    line-height: 19px;
+  }
+
+  .tag-input {
+    background: transparent;
+    border: 0;
+    color: #303133;
+    font-size: 12px;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+    outline: none;
+    padding-left: 0;
+    width: 100px;
+  }
+
+  .el-input-tag {
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .el-input-tag--mini {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+  }
+
+  .el-input-tag--small {
+    line-height: 30px;
+  }
+
+  .el-input-tag--medium {
+    height: 36px;
+    line-height: 36px;
   }
 </style>

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

@@ -53,12 +53,12 @@
       </el-row>
 
       <el-row>
-        <el-col :span="8">
+        <el-col :span="12">
           <el-form-item :label="$t('commons.tag')" prop="tag">
             <ms-input-tag :currentScenario="basicForm" ref="tag"/>
           </el-form-item>
         </el-col>
-        <el-col :span="16">
+        <el-col :span="12">
           <el-form-item :label="$t('commons.description')" prop="description">
             <el-input class="ms-http-textarea"
                       v-model="basicForm.description"

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

@@ -3,7 +3,7 @@
   <div class="card-container">
     <el-card class="card-content" v-loading="httpForm.loading">
 
-      <el-form :model="httpForm" :rules="rule" ref="httpForm" :inline="true" label-position="right">
+      <el-form :model="httpForm" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
         <!-- 操作按钮 -->
         <div style="float: right;margin-right: 20px">
           <el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
@@ -34,6 +34,20 @@
 
           <el-row>
             <el-col :span="8">
+              <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+                <el-select v-model="httpForm.userId"
+                           :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                           class="ms-http-select">
+                  <el-option
+                    v-for="item in maintainerOptions"
+                    :key="item.id"
+                    :label="item.id + ' (' + item.name + ')'"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
               <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
                 <el-select class="ms-http-select" size="small" v-model="httpForm.moduleId">
                   <div v-if="moduleOptions.length>0">
@@ -51,21 +65,8 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+
-              <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+            <el-col :span="7">
-                <el-select v-model="httpForm.userId"
-                           :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                           class="ms-http-select">
-                  <el-option
-                    v-for="item in maintainerOptions"
-                    :key="item.id"
-                    :label="item.id + ' (' + item.name + ')'"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
               <el-form-item :label="$t('commons.status')" prop="status">
                 <el-select class="ms-http-select" size="small" v-model="httpForm.status">
                   <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
@@ -73,7 +74,6 @@
               </el-form-item>
             </el-col>
           </el-row>
-
           <el-row>
             <el-col :span="8">
               <el-form-item :label="$t('commons.tag')" prop="tag">
@@ -262,7 +262,7 @@ export default {
   }
 
   .ms-http-textarea {
-  width: 400px;
+    width: 100%;
   }
 
   .ms-left-cell {