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">
@@ -109,167 +109,167 @@
 
 <script>
 
-import MsApiRequestForm from "../request/http/ApiHttpRequestForm";
+  import MsApiRequestForm from "../request/http/ApiHttpRequestForm";
-import MsResponseText from "../response/ResponseText";
+  import MsResponseText from "../response/ResponseText";
-import {WORKSPACE_ID} from '../../../../../../common/js/constants';
+  import {WORKSPACE_ID} from '../../../../../../common/js/constants';
-import {API_STATUS, REQ_METHOD} from "../../model/JsonData";
+  import {API_STATUS, REQ_METHOD} from "../../model/JsonData";
-import {KeyValue} from "../../model/ApiTestModel";
+  import {KeyValue} from "../../model/ApiTestModel";
-import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
+  import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
-import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
+  import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
 
-export default {
+  export default {
-  name: "MsAddCompleteHttpApi",
+    name: "MsAddCompleteHttpApi",
-  components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag},
+    components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag},
-  data() {
+    data() {
-    let validateURL = (rule, value, callback) => {
+      let validateURL = (rule, value, callback) => {
-      if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
+        if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
-        callback(this.$t('api_test.definition.request.path_valid_info'));
+          callback(this.$t('api_test.definition.request.path_valid_info'));
-      }
-      callback();
-    };
-    return {
-      rule: {
-        name: [
-          {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'}
-        ],
-        path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {
-          validator: validateURL,
-          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'}],
-        status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
-      },
-      httpForm: {environmentId: "", tags: []},
-      isShowEnable: false,
-      maintainerOptions: [],
-      currentModule: {},
-      reqOptions: REQ_METHOD,
-      options: API_STATUS,
-    }
-  },
-  props: {moduleOptions: {}, request: {}, response: {}, basisData: {}},
-  methods: {
-    runTest() {
-      this.$refs['httpForm'].validate((valid) => {
-        if (valid) {
-          this.setParameter();
-          this.$emit('runTest', this.httpForm);
-        } else {
-          return false;
         }
-      })
+        callback();
-    },
+      };
-    getMaintainerOptions() {
+      return {
-      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+        rule: {
-      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+          name: [
-        this.maintainerOptions = response.data;
+            {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'}
-    },
+          ],
-    setParameter() {
+          path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {
-      this.httpForm.modulePath = this.getPath(this.httpForm.moduleId);
+            validator: validateURL,
-      this.request.path = this.httpForm.path;
+            trigger: 'blur'
-      this.request.method = this.httpForm.method;
+          }],
-      this.httpForm.request.useEnvironment = undefined;
+          userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-      if (this.httpForm.tags instanceof Array) {
+          moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-        this.httpForm.tags = JSON.stringify(this.httpForm.tags);
+          status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
+        },
+        httpForm: {environmentId: "", tags: []},
+        isShowEnable: false,
+        maintainerOptions: [],
+        currentModule: {},
+        reqOptions: REQ_METHOD,
+        options: API_STATUS,
       }
     },
-    saveApi() {
+    props: {moduleOptions: {}, request: {}, response: {}, basisData: {}},
-      this.$refs['httpForm'].validate((valid) => {
+    methods: {
-        if (valid) {
+      runTest() {
-          this.setParameter();
+        this.$refs['httpForm'].validate((valid) => {
-          this.$emit('saveApi', this.httpForm);
+          if (valid) {
-        } else {
+            this.setParameter();
-          return false;
+            this.$emit('runTest', this.httpForm);
-        }
+          } else {
-      })
+            return false;
-    },
-    createModules() {
-      this.$emit("createRootModelInTree");
-    },
-    getPath(id) {
-      if (id === null) {
-        return null;
-      }
-      let path = this.moduleOptions.filter(function (item) {
-        return item.id === id ? item.path : "";
-      });
-      return path[0].path;
-    },
-    urlChange() {
-      if (!this.httpForm.path || this.httpForm.path.indexOf('?') === -1) return;
-      let url = this.getURL(this.addProtocol(this.httpForm.path));
-      if (url) {
-        this.httpForm.path = decodeURIComponent(this.httpForm.path.substr(0,this.httpForm.path.indexOf("?")));
-      }
-    },
-    addProtocol(url) {
-      if (url) {
-        if (!url.toLowerCase().startsWith("https") && !url.toLowerCase().startsWith("http")) {
-          return "https://" + url;
-        }
-      }
-      return url;
-    },
-    getURL(urlStr) {
-      try {
-        let url = new URL(urlStr);
-        url.searchParams.forEach((value, key) => {
-          if (key && value) {
-            this.request.arguments.splice(0, 0, new KeyValue({name: key, required: false, value: value}));
           }
+        })
+      },
+      getMaintainerOptions() {
+        let workspaceId = localStorage.getItem(WORKSPACE_ID);
+        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+          this.maintainerOptions = response.data;
         });
+      },
+      setParameter() {
+        this.httpForm.modulePath = this.getPath(this.httpForm.moduleId);
+        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) => {
+          if (valid) {
+            this.setParameter();
+            this.$emit('saveApi', this.httpForm);
+          } else {
+            return false;
+          }
+        })
+      },
+      createModules() {
+        this.$emit("createRootModelInTree");
+      },
+      getPath(id) {
+        if (id === null) {
+          return null;
+        }
+        let path = this.moduleOptions.filter(function (item) {
+          return item.id === id ? item.path : "";
+        });
+        return path[0].path;
+      },
+      urlChange() {
+        if (!this.httpForm.path || this.httpForm.path.indexOf('?') === -1) return;
+        let url = this.getURL(this.addProtocol(this.httpForm.path));
+        if (url) {
+          this.httpForm.path = decodeURIComponent(this.httpForm.path.substr(0, this.httpForm.path.indexOf("?")));
+        }
+      },
+      addProtocol(url) {
+        if (url) {
+          if (!url.toLowerCase().startsWith("https") && !url.toLowerCase().startsWith("http")) {
+            return "https://" + url;
+          }
+        }
         return url;
-      } catch (e) {
+      },
-        this.$error(this.$t('api_test.request.url_invalid'), 2000);
+      getURL(urlStr) {
-      }
+        try {
+          let url = new URL(urlStr);
+          url.searchParams.forEach((value, key) => {
+            if (key && value) {
+              this.request.arguments.splice(0, 0, new KeyValue({name: key, required: false, value: value}));
+            }
+          });
+          return url;
+        } catch (e) {
+          this.$error(this.$t('api_test.request.url_invalid'), 2000);
+        }
+      },
     },
-  },
 
-  created() {
+    created() {
-    this.getMaintainerOptions();
+      this.getMaintainerOptions();
-    if (!this.basisData.environmentId) {
+      if (!this.basisData.environmentId) {
-      this.basisData.environmentId = "";
+        this.basisData.environmentId = "";
+      }
+
+      this.httpForm = JSON.parse(JSON.stringify(this.basisData));
     }
-
-    this.httpForm = JSON.parse(JSON.stringify(this.basisData));
   }
-}
 </script>
 
 <style scoped>
 
-.base-info .el-form-item {
+  .base-info .el-form-item {
-  width: 100%;
+    width: 100%;
-}
+  }
 
-.base-info .el-form-item >>> .el-form-item__content {
+  .base-info .el-form-item >>> .el-form-item__content {
-  width: 80%;
+    width: 80%;
-}
+  }
 
-.base-info .ms-http-select {
+  .base-info .ms-http-select {
-  width: 100%;
+    width: 100%;
-}
+  }
 
-.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: 20px 0;
+    margin: 20px 0;
-}
+  }
 
-.ms-http-textarea {
+  .ms-http-textarea {
-  width: 400px;
+    width: 100%;
-}
+  }
 
-.ms-left-cell {
+  .ms-left-cell {
-  margin-top: 100px;
+    margin-top: 100px;
-}
+  }
 
-.ms-left-buttion {
+  .ms-left-buttion {
-  margin: 6px 0px 8px 30px;
+    margin: 6px 0px 8px 30px;
-}
+  }
 </style>