调整样式

2020-04-20 18:58:19 +08:00 · 2020-04-20 18:58:19 +08:00 · a2521651c4
parent b740cb91d6
commit a2521651c4
6 changed files with 105 additions and 112 deletions
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@ -1,7 +1,5 @@
 <template>
-  <div class="container">
    <div class="main-content">
-      <el-card>

        <el-container class="case-container">
          <el-aside class="tree-aside">
@ -19,7 +17,7 @@
            </node-tree>
          </el-aside>

-          <el-main class="case-main">
+          <el-main>
            <test-case-list
              :current-project="currentProject"
              @openTestCaseEditDialog="openTestCaseEditDialog"
@ -35,9 +33,7 @@
          ref="testCaseEditDialog">
        </test-case-edit>

-      </el-card>
-    </div>
-  </div>
+      </div>
 </template>

 <script>
@ -207,21 +203,22 @@
    margin: 3%;
  }

-
  .tree-aside {
    position: relative;
-    border-radius: 4px;
    border: 1px solid #EBEEF5;
    box-sizing: border-box;
+    background: white;
  }

  .case-container {
    height: calc(100vh - 150px);
    min-height: 600px;
+    margin-top: 0;
+    margin-left: 0;
  }

-  .case-main {
-    padding-top: 0;
+  .main-content {
+    background: white;
  }

 </style>
--- a/frontend/src/business/components/track/case/components/TestCaseImport.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseImport.vue
@ -3,16 +3,14 @@
  <div>
    <el-tooltip class="item" effect="dark" content="导入用例" placement="right">
      <el-button type="info" icon="el-icon-upload2" size="mini" circle
-        @click="dialogVisible = true"></el-button>
-    </el-tooltip>
+        @click="dialogVisible = true"></el-button></el-tooltip>

    <el-dialog width="30%" title="导入测试用例" :visible.sync="dialogVisible"
               @close="init">

      <el-row>
        <el-link type="primary" class="download-template"
-                 href="/test/case/export/template">下载模版</el-link>
-      </el-row>
+                 href="/test/case/export/template">下载模版</el-link></el-row>

      <el-row>
        <el-upload
@ -32,17 +30,14 @@
          <template v-slot:tip>
            <div class="el-upload__tip">只能上传xls/xlsx文件，且不超过20M</div>
          </template>
-        </el-upload>
-
-      </el-row>
+        </el-upload></el-row>

      <el-row>
        <ul>
          <li v-for="errFile in errList" :key="errFile.rowNum">
            {{errFile.errMsg}}
          </li>
-        </ul>
-      </el-row>
+        </ul></el-row>

    </el-dialog>

--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@ -4,29 +4,21 @@
    <el-card v-loading="result.loading">
      <template v-slot:header>
        <div>
-          <el-row type="flex" justify="start" align="middle">
-            <el-col :span="5">
-              <span class="title">{{$t('test_track.test_case')}}</span>
-              <ms-create-box :tips="$t('test_track.create')" :exec="testCaseCreate"/>
-            </el-col>
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">{{$t('test_track.test_case')}}
+              <ms-create-box :tips="$t('test_track.create')" :exec="testCaseCreate"/></span>

-            <el-col :span="1" :offset="12">
-             <test-case-import :projectId="currentProject == null? null : currentProject.id"
-                               @refresh="refresh"/>
-            </el-col>
-
-            <el-col :span="1">
+            <span class="operate-button">
+              <test-case-import :projectId="currentProject == null? null : currentProject.id"
+                                @refresh="refresh"/>
              <test-case-export/>
-            </el-col>
-
-            <el-col :span="5">
-                  <span class="search">
-                    <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
-                              prefix-icon="el-icon-search"
-                              maxlength="60"
-                              v-model="condition" @change="search" clearable/>
-                  </span>
-            </el-col>
+              <el-input type="text" size="small"
+                        class="search"
+                        :placeholder="$t('load_test.search_by_name')"
+                        prefix-icon="el-icon-search"
+                        maxlength="60"
+                        v-model="condition"
+                        @change="search" clearable/></span>
          </el-row>
        </div>
      </template>
@ -194,4 +186,18 @@
    float: right;
  }

+  .operate-button {
+    float: right;
+  }
+
+  .operate-button > div {
+    display: inline-block;
+    margin-left: 10px;
+  }
+
+  .search {
+    margin-left: 10px;
+    width: 240px;
+  }
+
 </style>
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/TestPlanView.vue
@ -1,41 +1,37 @@
 <template>
-  <div class="container">
-    <div class="main-content">
-      <el-card>
-        <el-container class="view-container">
-          <el-aside class="tree-aside">
-            <select-menu
-              :data="testPlans"
-              :current-data="currentPlan"
-              :title="$t('test_track.plan')"
-              @dataChange="changePlan">
-            </select-menu>
+  <div class="main-content">
+    <el-container class="view-container">
+      <el-aside class="tree-aside">
+        <select-menu
+          :data="testPlans"
+          :current-data="currentPlan"
+          :title="$t('test_track.plan')"
+          @dataChange="changePlan">
+        </select-menu>

-            <plan-node-tree
-              class="node-tree"
-              :plan-id="planId"
-              @nodeSelectEvent="getPlanCases"
-              ref="tree">
-            </plan-node-tree>
+        <plan-node-tree
+          class="node-tree"
+          :plan-id="planId"
+          @nodeSelectEvent="getPlanCases"
+          ref="tree">
+        </plan-node-tree>

-          </el-aside>
+      </el-aside>

-          <el-main class="view-main">
-            <test-plan-test-case-list
-              @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
-              @refresh="refresh"
-              :plan-id="planId"
-              ref="testCasePlanList"></test-plan-test-case-list>
-          </el-main>
-        </el-container>
-
-        <test-case-relevance
+      <el-main class="view-main">
+        <test-plan-test-case-list
+          @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
          @refresh="refresh"
          :plan-id="planId"
-          ref="testCaseRelevance">
-        </test-case-relevance>
-      </el-card>
-    </div>
+          ref="testCasePlanList"></test-plan-test-case-list>
+      </el-main>
+    </el-container>
+
+    <test-case-relevance
+      @refresh="refresh"
+      :plan-id="planId"
+      ref="testCaseRelevance">
+    </test-case-relevance>
  </div>

 </template>
@ -112,7 +108,6 @@

  .tree-aside {
    position: relative;
-    border-radius: 4px;
    border: 1px solid #EBEEF5;
    box-sizing: border-box;
  }
@ -121,4 +116,8 @@
    padding-top: 0;
  }

+  .main-content {
+    background: white;
+  }
+
 </style>
--- a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
+++ b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
@ -5,17 +5,17 @@
                 :icon="status == 'Pass' ? 'el-icon-check' : ''"
                 @click="setStatus('Pass')"> {{$t('test_track.pass')}}</el-button>
    </el-col>
-    <el-col >
+    <el-col>
      <el-button type="danger" round size="mini"
                 :icon="status == 'Failure' ? 'el-icon-check' : ''"
                 @click="setStatus('Failure')"> {{$t('test_track.failure')}}</el-button>
    </el-col>
-    <el-col >
+    <el-col>
      <el-button type="warning" round size="mini"
                 :icon="status == 'Blocking' ? 'el-icon-check' : ''"
                 @click="setStatus('Blocking')"> {{$t('test_track.blocking')}}</el-button>
    </el-col>
-    <el-col >
+    <el-col>
      <el-button type="info" round size="mini"
                 :icon="status == 'Skip' ? 'el-icon-check' : ''"
                 @click="setStatus('Skip')"> {{$t('test_track.skip')}}</el-button>
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
@ -4,50 +4,43 @@
    <el-card v-loading="result.loading">
      <template v-slot:header>
        <div>
-          <el-row type="flex" justify="end">
-            <el-col>
-              <span class="title">{{$t('test_track.test_case')}} </span>
-                <ms-tip-button v-if="!showMyTestCase"
-                  :tip="'我的用例'"
-                  icon="el-icon-s-custom" @click="searchMyTestCase"/>
-                <ms-tip-button v-if="showMyTestCase"
-                  :tip="'全部用例'"
-                  icon="el-icon-files" @click="searchMyTestCase"/>
-            </el-col>
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">{{$t('test_track.test_case')}}
+              <ms-tip-button v-if="!showMyTestCase"
+                            :tip="'我的用例'"
+                            icon="el-icon-s-custom" @click="searchMyTestCase"/>
+              <ms-tip-button v-if="showMyTestCase"
+                           :tip="'全部用例'"
+                           icon="el-icon-files" @click="searchMyTestCase"/></span>

-            <el-col :offset="8">
+            <span class="operate-button">
              <el-button icon="el-icon-connection" size="small" round
                         @click="$emit('openTestCaseRelevanceDialog')" >{{$t('test_track.relevance_test_case')}}</el-button>
-            </el-col>

-            <el-col>
              <el-button icon="el-icon-edit-outline" size="small" round
                         @click="handleBatch('status')" >更改执行结果</el-button>
-            </el-col>

-            <el-col>
              <el-button icon="el-icon-user" size="small" round
                         @click="handleBatch('executor')" >更改执行人</el-button>
-            </el-col>

-            <executor-edit
-              ref="executorEdit"
-              :select-ids="selectIds"
-              @refresh="initTableData"/>
-            <status-edit
-              ref="statusEdit"
-              :select-ids="selectIds"
-              @refresh="initTableData"/>
-
-            <el-col>
-                  <span class="search">
-                    <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
-                              prefix-icon="el-icon-search"
-                              maxlength="60"
-                              v-model="condition.name" @change="search" clearable/>
-                  </span>
-            </el-col>
+              <el-input type="text" size="small"
+                        class="search"
+                        :placeholder="$t('load_test.search_by_name')"
+                        prefix-icon="el-icon-search"
+                        maxlength="60"
+                        v-model="condition.name" @change="search" clearable/>
+            </span>
          </el-row>
+
+          <executor-edit
+            ref="executorEdit"
+            :select-ids="selectIds"
+            @refresh="initTableData"/>
+          <status-edit
+            ref="statusEdit"
+            :select-ids="selectIds"
+            @refresh="initTableData"/>
+
        </div>
      </template>

@ -297,9 +290,12 @@

 <style scoped>

-  .table-page {
-    padding-top: 20px;
-    margin-right: -9px;
+  .search {
+    margin-left: 10px;
+    width: 240px;
+  }
+
+  .operate-button {
    float: right;
  }