style(接口自动化): 整体展示样式优化

2021-02-03 10:46:56 +08:00 · 2021-02-03 10:46:56 +08:00 · f41beb6147
parent f26b96a38b
commit f41beb6147
8 changed files with 31 additions and 22 deletions
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@ -273,5 +273,7 @@
 </script>

 <style scoped>
-
+  /deep/ .el-tabs__header {
+    margin: 0 0 0px;
+  }
 </style>
--- a/frontend/src/business/components/api/automation/scenario/AddBasisScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/AddBasisScenario.vue
@ -74,7 +74,7 @@
        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'}
+            {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
          ],
          principal: [{
            required: true,
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@ -11,6 +11,7 @@
                @filter-change="filter"
                @select-all="select" @select="select"
                @header-dragend="headerDragend"
+                :height="screenHeight"
                v-loading="loading">

        <el-table-column type="selection" width="50"/>
@ -21,7 +22,7 @@
                                        @selectPageAll="isSelectDataAll(false)"
                                        @selectAll="isSelectDataAll(true)"/>

-        <el-table-column v-if="!referenced" width="30" min-width="30"  :resizable="false" align="center">
+        <el-table-column v-if="!referenced" width="30" min-width="30" :resizable="false" align="center">
          <template v-slot:default="scope">
            <show-more-btn :is-show="isSelect(scope.row)" :buttons="buttons" :size="selectDataCounts"/>
          </template>
@ -65,7 +66,7 @@
          </template>
        </el-table-column>
        <el-table-column prop="tags" min-width="120px"
-                          :label="$t('api_test.automation.tag')">
+                         :label="$t('api_test.automation.tag')">
          <template v-slot:default="scope">
            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
              <ms-tag type="success" effect="plain" :content="itemName"/>
@ -73,19 +74,19 @@
          </template>
        </el-table-column>
        <el-table-column prop="userId" min-width="120px"
-                          :label="$t('api_test.automation.creator')"
+                         :label="$t('api_test.automation.creator')"
                         :filters="userFilters"
                         column-key="user_id"
                         sortable="custom"
                         show-overflow-tooltip/>
-        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom"  min-width="180px"
-                         >
+        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom" min-width="180px"
+        >
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" min-width="80px"
-                          show-overflow-tooltip/>
+                         show-overflow-tooltip/>
        <el-table-column prop="lastResult" :label="$t('api_test.automation.last_result')"
                         :filters="resultFilters"

@ -214,6 +215,7 @@
    data() {
      return {
        loading: false,
+        screenHeight: document.documentElement.clientHeight - 280,//屏幕高度,
        condition: {
          components: API_SCENARIO_CONFIGS
        },
@ -437,7 +439,7 @@
          });
        });
      },
-      cancel(){
+      cancel() {
        this.planVisible = false;
      },
      addTestPlan(plans) {
@ -609,9 +611,9 @@
        _filter(filters, this.condition);
        this.search();
      },
-      headerDragend(newWidth,oldWidth,column,event){
+      headerDragend(newWidth, oldWidth, column, event) {
        let finalWidth = newWidth;
-        if(column.minWidth>finalWidth){
+        if (column.minWidth > finalWidth) {
          finalWidth = column.minWidth;
        }
        column.width = finalWidth;
@ -649,4 +651,8 @@
  /deep/ .el-table__fixed {
    height: 110px !important;
  }
+
+  /deep/ .el-card__header {
+    padding: 10px;
+  }
 </style>
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@ -250,7 +250,7 @@
        rules: {
          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'}
+            {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
          ],
          userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
          apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
--- a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@ -1,9 +1,9 @@
 <template>
  <el-dialog :title="$t('api_test.scenario.variables')" :close-on-click-modal="false"
-             :visible.sync="visible" class="environment-dialog" width="850px"
+             :visible.sync="visible" class="visible-dialog" width="60%"
             @close="close" v-loading="loading">
    <div>
-      <el-input placeholder="变量名称搜索" style="width: 50%;margin: 0px 0px 20px" v-model="selectVariable" size="small" @change="filter" @keyup.enter="filter">
+      <el-input placeholder="变量名称搜索" style="width: 50%;margin: 0px 0px 10px" v-model="selectVariable" size="small" @change="filter" @keyup.enter="filter">
        <el-select v-model="searchType" slot="prepend" placeholder="类型" style="width: 90px" @change="filter">
          <el-option value="CONSTANT" label="常量"></el-option>
          <el-option value="LIST" label="列表"></el-option>
@ -36,15 +36,12 @@
          <ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
          <ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
        </el-col>
-
      </el-row>
-
    </div>

    <template v-slot:footer>
-      <div style="margin:20px">
+      <div>
        <el-button style="margin-right:10px" @click="deleteVariable">{{$t('commons.delete')}}</el-button>
-
        <el-dropdown split-button type="primary" @command="handleClick" @click="handleClick('CONSTANT')" placement="top-end">
          {{$t('commons.add')}}
          <el-dropdown-menu slot="dropdown">
@ -205,8 +202,12 @@
  }
 </script>

-<style>
+<style scoped>
  .ms-variable-hidden-row {
    display: none;
  }
+
+  /deep/ .el-dialog__body {
+    padding: 10px 10px;
+  }
 </style>
--- a/frontend/src/business/components/api/definition/components/basis/AddBasisApi.vue
+++ b/frontend/src/business/components/api/definition/components/basis/AddBasisApi.vue
@ -86,7 +86,7 @@
        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'}
+            {max: 100, message: this.$t('test_track.length_less_than') + '100', 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'}],
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
@ -131,7 +131,7 @@
        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'}
+            {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
          ],
          path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {
            validator: validateURL,
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@ -273,7 +273,7 @@ export default {
      currentPage: 1,
      pageSize: 10,
      total: 0,
-      screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
+      screenHeight: document.documentElement.clientHeight - 270,//屏幕高度,
      environmentId: undefined,
      selectAll: false,
      unSelection: [],