From 23a92b8e1961a247ff17db2cd115ae16846a7179 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 20 Jan 2021 11:06:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=94=A8=E4=BE=8B=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/automation/scenario/MsInputTag.vue    |   2 +-
 .../scenario/common/ApiBaseComponent.vue      |  10 +-
 .../components/case/ApiCaseItem.vue           | 127 +++++++++++-------
 3 files changed, 83 insertions(+), 56 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/MsInputTag.vue b/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
index 674b9336e5..ffd7c2112c 100644
--- a/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
+++ b/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
@@ -1,5 +1,5 @@
 <template>
-  <input-tag v-model="data" placeholder="输入回车添加" class="ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
+  <input-tag v-model="data" placeholder="输入回车添加" class="ms-tag-input ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
 </template>
 
 <script>
diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
index 09f399b1d4..3b20cbe6e8 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -2,10 +2,12 @@
   <el-card class="api-component">
     <div class="header" @click="active(data)">
 
-      <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
-        <div class="el-step__icon-inner">{{data.index}}</div>
-      </div>
-      <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
+      <slot name="beforeHeaderLeft">
+        <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
+          <div class="el-step__icon-inner">{{data.index}}</div>
+        </div>
+        <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
+      </slot>
 
       <span @click.stop>
         <slot name="headerLeft">
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
index 21c0807e38..c92b569039 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
@@ -1,70 +1,76 @@
 <template>
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
-    <el-row>
-      <el-col :span="4">
+    <div @click="active(apiCase)">
+      <el-row>
+        <el-col :span="4">
 
-        <el-checkbox v-model="apiCase.selected"/>
+          <el-checkbox v-model="apiCase.selected"/>
 
-        <div class="el-step__icon is-text ms-api-col">
-          <div class="el-step__icon-inner">{{ index + 1 }}</div>
-        </div>
+          <div class="el-step__icon is-text ms-api-col">
+            <div class="el-step__icon-inner">{{ index + 1 }}</div>
+          </div>
 
-        <label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
-        <el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
-          <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
-        </el-select>
-      </el-col>
-      <el-col :span="12">
-        <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}"
-           @click="active(apiCase)"/>
-        <el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
-                  class="ms-api-header-select" style="width: 180px"
-                  @blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')"/>
-        <span v-else>
-          {{ apiCase.id ? apiCase.name : '' }}
-          <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
-        </span>
+          <label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
+          <el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
+            <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
+          </el-select>
+        </el-col>
 
-        <label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
-        <ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;" @keyup.enter.native="saveTestCase(apiCase)"/>
-
-        <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
+        <el-col :span="8">
+          <span @click.stop>
+            <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
+            <el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
+                      class="ms-api-header-select" style="width: 180px"
+                      @blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
+            <span v-else>
+              {{ apiCase.id ? apiCase.name : '' }}
+              <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
+            </span>
+          </span>
+          <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
           <span>
             {{ apiCase.createTime | timestampFormatDate }}
             {{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
           </span>
-          <span>
+            <span>
             {{ apiCase.updateTime | timestampFormatDate }}
             {{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
           </span>
-        </div>
-      </el-col>
+          </div>
+        </el-col>
 
-      <el-col :span="4">
-        <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/>
-        <ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
-                       size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
-        <ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
-                       size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
-        <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
-      </el-col>
+        <el-col class="tag-item" :span="4">
+          <span class="ms-api-label tag-label">{{ $t('commons.tag') }}</span>
+          <ms-input-tag :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
+        </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 v-else-if="apiCase.execResult && apiCase.execResult==='success'" @click="showExecResult(apiCase)">
-          {{ getResult(apiCase.execResult) }}
-        </el-link>
-        <div v-else> {{ getResult(apiCase.execResult) }}</div>
+        <el-col :span="4">
+          <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/>
+          <ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
+                         size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
+          <ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
+                         size="mini" :disabled="!apiCase.id || isCaseEdit" circle v-tester/>
+          <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" v-tester/>
+        </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 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">
+            <span> {{ apiCase.execTime | timestampFormatDate }}</span>
+            {{ apiCase.updateUser }}
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
-        <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
-          <span> {{ apiCase.execTime | timestampFormatDate }}</span>
-          {{ apiCase.updateUser }}
-        </div>
-      </el-col>
-    </el-row>
     <!-- 请求参数-->
     <el-collapse-transition>
       <div v-if="apiCase.active">
@@ -241,6 +247,9 @@
         this.isShowInput = true;
         row.active = true;
         this.active(row);
+        this.$nextTick(() => {
+          this.$refs.nameEdit.focus();
+        });
       },
       active(item) {
         item.active = !item.active;
@@ -304,4 +313,20 @@
   .is-selected {
     background: #EFF7FF;
   }
+
+  .ms-tag-input {
+    /*display: inline-block;*/
+    /*height: 32px;*/
+    /*box-sizing: border-box;*/
+  }
+
+  .tag-item {
+    /*height: 30px;*/
+    /*line-height: 30px;*/
+  }
+
+  .tag-label {
+    /*height: 32px;*/
+    /*line-height: 32px;*/
+  }
 </style>