style(接口测试): 用例编辑页面样式优化

--story=1014456 --user=赵勇 github#28927优化接口case名称的显示长度 https://www.tapd.cn/55049933/s/1463274

Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>

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

@@ -1,11 +1,10 @@
 <template>
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
     <el-container>
-      <el-header style="margin-bottom: 20px; height: 65px">
+      <el-header style="margin-bottom: 20px; height: 70px">
         <div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader" class="case-header">
           <div v-loading="loading && !(apiCase.active || type === 'detail')">
             <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"
@@ -13,7 +12,6 @@
                 :name="index"
                 :key="index"
                 class="ms-api-header-select"
-                style="width: 180px"
                 :readonly="
                   !hasPermissions(
                     'PROJECT_API_DEFINITION:READ+EDIT_CASE',
@@ -32,7 +30,7 @@
               </span>
             </span>
             <div v-if="apiCase.id" style="color: #999999; font-size: 12px; margin-top: 8px">
-              <span style="margin-left: 10px">
+              <span>
                 {{ apiCase.updateTime | datetimeFormat }}
                 {{ apiCase.updateUser }}
                 {{ $t('api_test.definition.request.update_info') }}
@@ -40,6 +38,7 @@
             </div>
           </div>
           <div class="flex-item">
+            <div @click.stop>
               <el-select
                 size="mini"
                 v-model="apiCase.priority"
@@ -56,9 +55,6 @@
                 :disabled="readonly">
                 <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
               </el-select>
-          </div>
-          <div class="flex-item">
-            <div @click.stop>
               <el-tooltip
                 :content="$t('commons.follow')"
                 placement="bottom"
@@ -150,7 +146,6 @@
         <!-- 请求参数-->
         <el-collapse-transition>
           <div v-if="apiCase.active || type === 'detail'" v-loading="loading">
-            <el-divider></el-divider>
             <p class="tip">{{ $t('api_test.definition.request.req_param') }}</p>
             <ms-api-request-form
               :isShowEnable="true"
@@ -280,8 +275,8 @@ export default {
       if (!value) {
         return '';
       }
-      if (value.length > 20) {
+      if (value.length > 28) {
-        return value.slice(0, 20) + '...';
+        return value.slice(0, 28) + '...';
       }
       return value;
     },
@@ -842,7 +837,7 @@ export default {
       });
     },
     active(item) {
-      item.active = !item.active;
+      item.active = true;
     },
     validate(row) {
       if (!row.name) {
@@ -1004,8 +999,7 @@ export default {
 }
 
 .ms-api-header-select {
-  margin-left: 20px;
+  min-width: 350px;
-  min-width: 100px;
 }
 
 .is-selected {

api-test/frontend/src/business/definition/components/reference/ShowReference.vue

@@ -1,8 +1,10 @@
 <template>
-  <el-dialog :visible.sync="isVisible" class="advanced-item-value" width="922px">
+  <el-dialog :visible.sync="isVisible" class="advanced-item-value" width="922px" append-to-body>
     <el-tabs tab-position="top" style="width: 100%" v-model="activeName" @tab-click="handleClick">
       <el-tab-pane
-        :label="$t('api_test.home_page.api_details_card.title')+$t('api_test.home_page.test_scene_details_card.title')"
+        :label="
+          $t('api_test.home_page.api_details_card.title') + $t('api_test.home_page.test_scene_details_card.title')
+        "
         name="scenario">
         <ms-table
           v-if="!isHasRef"
@@ -130,7 +132,9 @@
           </ms-table>
         </ms-tab-button>
       </el-tab-pane>
-      <el-tab-pane v-if="showPlan" :label="$t('api_test.home_page.running_task_list.test_plan_schedule')"
+      <el-tab-pane
+        v-if="showPlan"
+        :label="$t('api_test.home_page.running_task_list.test_plan_schedule')"
         name="testPlan">
         <ms-table
           :data="planData"
@@ -167,13 +171,7 @@
 </template>
 <script>
 import MsTablePagination from 'metersphere-frontend/src/components/pagination/TablePagination';
-import {
+import { getOwnerProjectIds, getOwnerProjects, getProject, getUserWorkspace, projectRelated } from '@/api/project';
-  getOwnerProjectIds,
-  getOwnerProjects,
-  getProject,
-  getUserWorkspace,
-  projectRelated
-} from '@/api/project';
 import { getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId } from 'metersphere-frontend/src/utils/token';
 import { getUUID } from 'metersphere-frontend/src/utils';
 import { hasLicense } from 'metersphere-frontend/src/utils/permission';
@@ -181,7 +179,7 @@ import {getDefinitionReference, getPlanReference} from '@/api/definition';
 import MsTable from 'metersphere-frontend/src/components/table/MsTable';
 import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
 import MsTabButton from '@/business/commons/MsTabs';
-import {getVersionsByProjectIds} from "@/api/xpack";
+import { getVersionsByProjectIds } from '@/api/xpack';
 
 export default {
   name: 'ShowReference',
@@ -189,8 +187,8 @@ export default {
     return {
       isVisible: false,
       isCopy: true,
-      showTextColor: "showTextColor",
+      showTextColor: 'showTextColor',
-      unShowTextColor: "unShowTextColor",
+      unShowTextColor: 'unShowTextColor',
       scenarioData: [],
       planData: [],
       currentPage: 1,
@@ -208,7 +206,7 @@ export default {
       type: '',
       projectPlanFilters: [],
       activeDom: 'left',
-      result: false
+      result: false,
     };
   },
   props: {
@@ -226,7 +224,7 @@ export default {
     MsTablePagination,
     MsTable,
     MsTableColumn,
-    MsTabButton
+    MsTabButton,
   },
   watch: {
     activeDom() {
@@ -263,17 +261,19 @@ export default {
           if (this.projectFilters.length === 0 || !this.projectFilters.length) {
             this.versionFilters = [];
           } else {
-            this.versionFilters = response.data.filter((version) => {
+            this.versionFilters = response.data
+              .filter((version) => {
                 return data.listObject.find((i) => i.versionId === version.id);
-            }).map((u) => {
+              })
-              return {text: u.name + "-" + this.getProjectName(u.projectId), value: u.id};
+              .map((u) => {
+                return { text: u.name + '-' + this.getProjectName(u.projectId), value: u.id };
               });
           }
         });
       }
     },
     getProjectName(id) {
-      let name
+      let name;
       for (let item of this.projectFilters) {
         if (item.value === id) {
           name = item.text;
@@ -343,7 +343,7 @@ export default {
               .map((e) => {
                 return { text: e.name, value: e.id };
               });
-            let map = res.data.map(item => item.id);
+            let map = res.data.map((item) => item.id);
             this.getVersionOptions(map, data);
           });
         }
@@ -362,11 +362,11 @@ export default {
       if (this.activeName === 'scenario') {
         if (!this.condition.refType) {
           if (!this.isHasRef) {
-            this.condition.refType = "Copy"
+            this.condition.refType = 'Copy';
-            this.activeDom = 'left'
+            this.activeDom = 'left';
           } else {
-            this.condition.refType = "REF"
+            this.condition.refType = 'REF';
-            this.activeDom = 'right'
+            this.activeDom = 'right';
           }
         }
         this.getReferenceData(this.condition);
@@ -448,10 +448,10 @@ export default {
     },
     getScenarioData() {
       if (this.activeDom === 'left') {
-        this.condition.refType = 'Copy'
+        this.condition.refType = 'Copy';
         this.getReferenceData(this.condition);
       } else {
-        this.condition.refType = 'REF'
+        this.condition.refType = 'REF';
         this.getReferenceData(this.condition);
       }
     },