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,33 +30,31 @@
               </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') }}
               </span>
             </div>
           </div>
-          <div class="flex-item">
-            <el-select
-              size="mini"
-              v-model="apiCase.priority"
-              class="ms-api-select"
-              @change="changePriority(apiCase)"
-              :disabled="readonly">
-              <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="apiCase.caseStatus"
-              style="margin: 0 12px; width: 100px"
-              @change="saveTestCase(apiCase, true)"
-              :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-select
+                size="mini"
+                v-model="apiCase.priority"
+                class="ms-api-select"
+                @change="changePriority(apiCase)"
+                :disabled="readonly">
+                <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
+              </el-select>
+              <el-select
+                size="mini"
+                v-model="apiCase.caseStatus"
+                style="margin: 0 12px; width: 100px"
+                @change="saveTestCase(apiCase, true)"
+                :disabled="readonly">
+                <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
+              </el-select>
               <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) {
-        return value.slice(0, 20) + '...';
+      if (value.length > 28) {
+        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: 100px;
+  min-width: 350px;
 }
 
 .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"
@@ -15,7 +17,7 @@
           :enable-selection="false"
           @refresh="search"
           :condition="condition">
-          <ms-table-column prop="num" label="ID" sortable width="80"/>
+          <ms-table-column prop="num" label="ID" sortable width="80" />
           <ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
             <template v-slot:default="{ row }">
               <el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
@@ -61,7 +63,7 @@
             :enable-selection="false"
             @refresh="search"
             :condition="condition">
-            <ms-table-column prop="num" label="ID" sortable width="80"/>
+            <ms-table-column prop="num" label="ID" sortable width="80" />
             <ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
               <template v-slot:default="{ row }">
                 <el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
@@ -100,7 +102,7 @@
             :enable-selection="false"
             @refresh="search"
             :condition="condition">
-            <ms-table-column prop="num" label="ID" sortable width="80"/>
+            <ms-table-column prop="num" label="ID" sortable width="80" />
             <ms-table-column prop="name" :label="$t('api_report.scenario_name')" width="200">
               <template v-slot:default="{ row }">
                 <el-link @click="openScenario(row)" style="cursor: pointer">{{ row.name }}</el-link>
@@ -130,8 +132,10 @@
           </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')"
-                   name="testPlan">
+      <el-tab-pane
+        v-if="showPlan"
+        :label="$t('api_test.home_page.running_task_list.test_plan_schedule')"
+        name="testPlan">
         <ms-table
           :data="planData"
           style="width: 100%"
@@ -167,21 +171,15 @@
 </template>
 <script>
 import MsTablePagination from 'metersphere-frontend/src/components/pagination/TablePagination';
-import {
-  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';
-import {getDefinitionReference, getPlanReference} from '@/api/definition';
+import { 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';
+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",
-      unShowTextColor: "unShowTextColor",
+      showTextColor: 'showTextColor',
+      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) => {
-              return data.listObject.find((i) => i.versionId === version.id);
-            }).map((u) => {
-              return {text: u.name + "-" + this.getProjectName(u.projectId), value: u.id};
-            });
+            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 };
+              });
           }
         });
       }
     },
     getProjectName(id) {
-      let name
+      let name;
       for (let item of this.projectFilters) {
         if (item.value === id) {
           name = item.text;
@@ -318,7 +318,7 @@ export default {
                 return data.listObject.find((i) => i.workspaceId === workspace.id);
               })
               .map((e) => {
-                return {text: e.name, value: e.id};
+                return { text: e.name, value: e.id };
               });
           }
           let workspaceIds = [];
@@ -337,13 +337,13 @@ export default {
           }
           getOwnerProjects().then((res) => {
             this.projectFilters = res.data
-                .filter((project) => {
-                  return data.listObject.find((i) => i.projectId === project.id);
-                })
-                .map((e) => {
-                  return {text: e.name, value: e.id};
-                });
-            let map = res.data.map(item => item.id);
+              .filter((project) => {
+                return data.listObject.find((i) => i.projectId === project.id);
+              })
+              .map((e) => {
+                return { text: e.name, value: e.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.activeDom = 'left'
+            this.condition.refType = 'Copy';
+            this.activeDom = 'left';
           } else {
-            this.condition.refType = "REF"
-            this.activeDom = 'right'
+            this.condition.refType = 'REF';
+            this.activeDom = 'right';
           }
         }
         this.getReferenceData(this.condition);
@@ -379,7 +379,7 @@ export default {
               return data.listObject.find((i) => i.projectId === project.id);
             })
             .map((e) => {
-              return {text: e.name, value: e.id};
+              return { text: e.name, value: e.id };
             });
           this.planData = data.listObject || [];
         });
@@ -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);
       }
     },