From 50e4b23e1f51e3eb24de53989006c00d0e134f0a Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Wed, 6 May 2020 11:22:11 +0800
Subject: [PATCH] Workflow definition and task instance page add scroll

---
 .../definition/pages/list/_source/list.vue    | 24 ++++---
 .../pages/definition/pages/list/index.vue     | 70 +++++++++++++------
 .../pages/instance/pages/list/index.vue       | 32 ++++-----
 .../pages/taskInstance/_source/list.vue       | 30 ++++----
 .../projects/pages/taskInstance/index.vue     | 62 +++++++++++-----
 5 files changed, 140 insertions(+), 78 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index 310725dd51..dd4530786d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -19,34 +19,36 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th scope="col" width="50">
+          <th scope="col" style="min-width: 50px">
             <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
           </th>
-          <th scope="col" width="40">
+          <th scope="col" style="min-width: 40px">
             <span>{{$t('#')}}</span>
           </th>
-          <th scope="col" width="200">
+          <th scope="col" style="min-width: 200px">
             <span>{{$t('Process Name')}}</span>
           </th>
-          <th scope="col" width="50">
+          <th scope="col" style="min-width: 50px">
             <span>{{$t('State')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Create Time')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th scope="col" width="150">
+          <th scope="col" style="min-width: 150px">
             <span>{{$t('Description')}}</span>
           </th>
-          <th scope="col" width="80">
+          <th scope="col" style="min-width: 70px">
             <span>{{$t('Modify User')}}</span>
           </th>
-          <th scope="col" width="80">
-            <span>{{$t('Timing state')}}</span>
+          <th scope="col" style="min-width: 70px">
+            <div style="width: 80px">
+              <span>{{$t('Timing state')}}</span>
+            </div>
           </th>
-          <th scope="col" width="300">
+          <th scope="col" style="min-width: 300px">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index 5dd12b4355..5fcb3f6f21 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -15,29 +15,30 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="$t('Process definition')">
-    <template slot="conditions">
-      <m-conditions @on-conditions="_onConditions">
-        <template slot="button-group">
-          <x-button type="ghost" size="small"  @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button>
-          <x-button type="ghost" size="small"  @click="_uploading">{{$t('Import process')}}</x-button>
-
-        </template>
-      </m-conditions>
-    </template>
-    <template slot="content">
-      <template v-if="processListP.length || total>0">
-        <m-list :process-list="processListP" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
-        <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
-        </div>
+  <div class="wrap-definition">
+    <m-list-construction :title="$t('Process definition')">
+      <template slot="conditions">
+        <m-conditions @on-conditions="_onConditions">
+          <template slot="button-group">
+            <x-button type="ghost" size="small"  @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button>
+            <x-button type="ghost" size="small"  @click="_uploading">{{$t('Import process')}}</x-button>
+          </template>
+        </m-conditions>
       </template>
-      <template v-if="!processListP.length && total<=0">
-        <m-no-data></m-no-data>
+      <template slot="content">
+        <template v-if="processListP.length || total>0">
+          <m-list :process-list="processListP" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
+          <div class="page-box">
+            <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+          </div>
+        </template>
+        <template v-if="!processListP.length && total<=0">
+          <m-no-data></m-no-data>
+        </template>
+        <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
       </template>
-      <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
-    </template>
-  </m-list-construction>
+    </m-list-construction>
+  </div>
 </template>
 <script>
   import _ from 'lodash'
@@ -146,3 +147,30 @@
   }
 </script>
 
+<style lang="scss" rel="stylesheet/scss">
+  .wrap-definition {
+    .table-box {
+      overflow-y: scroll;
+    }
+    .table-box {
+      .fixed {
+        table-layout: auto;
+        tr {
+          th:last-child,td:last-child {
+            background: inherit;
+            width: 300px;
+            height: 40px;
+            line-height: 40px;
+            border-left:1px solid #ecf3ff;
+            position: absolute;
+            right: 0;
+            z-index: 2;
+          }
+          th:nth-last-child(2) {
+            padding-right: 330px;
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index d26da294f3..7ed4126dc0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -16,24 +16,24 @@
  */
 <template>
   <div class="wrap-table">
-  <m-list-construction :title="$t('Process Instance')">
-    <template slot="conditions">
-      <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
-    </template>
-    <template slot="content">
-      <template v-if="processInstanceList.length || total>0">
-        <m-list :process-instance-list="processInstanceList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
-        </m-list>
-        <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
-        </div>
+    <m-list-construction :title="$t('Process Instance')">
+      <template slot="conditions">
+        <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
       </template>
-      <template v-if="!processInstanceList.length && total<=0">
-        <m-no-data></m-no-data>
+      <template slot="content">
+        <template v-if="processInstanceList.length || total>0">
+          <m-list :process-instance-list="processInstanceList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
+          </m-list>
+          <div class="page-box">
+            <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+          </div>
+        </template>
+        <template v-if="!processInstanceList.length && total<=0">
+          <m-no-data></m-no-data>
+        </template>
+        <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
       </template>
-      <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
-    </template>
-  </m-list-construction>
+    </m-list-construction>
   </div>
 </template>
 <script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index f014874175..97d7364901 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -19,43 +19,45 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th scope="col">
+          <th scope="col" style="min-width: 50px">
             <span>{{$t('#')}}</span>
           </th>
-          <th scope="col">
+          <th scope="col" style="min-width: 250px">
             <span>{{$t('Name')}}</span>
           </th>
-          <th scope="col">
+          <th scope="col" style="min-width: 250px">
             <span>{{$t('Process Instance')}}</span>
           </th>
-          <th scope="col" width="70">
+          <th scope="col" style="min-width: 60px">
             <span>{{$t('Executor')}}</span>
           </th>
-          <th scope="col" width="90">
+          <th scope="col" style="min-width: 70px">
             <span>{{$t('Node Type')}}</span>
           </th>
-          <th scope="col" width="40">
+          <th scope="col" style="min-width: 30px">
             <span>{{$t('State')}}</span>
           </th>
-          <th scope="col" width="140">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Submit Time')}}</span>
           </th>
-          <th scope="col" width="140">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Start Time')}}</span>
           </th>
-          <th scope="col" width="125">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('End Time')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('host')}}</span>
           </th>
-          <th scope="col" width="70">
+          <th scope="col" style="min-width: 70px">
             <span>{{$t('Duration')}}(s)</span>
           </th>
-          <th scope="col" width="84">
-            <span>{{$t('Retry Count')}}</span>
+          <th scope="col" style="min-width: 60px">
+            <div style="width: 50px">
+              <span>{{$t('Retry Count')}}</span>
+            </div>
           </th>
-          <th scope="col" width="50">
+          <th scope="col" style="min-width: 50px">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
index 594ffad14e..e5cfd16478 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
@@ -15,24 +15,26 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="$t('Task Instance')">
-    <template slot="conditions">
-      <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
-    </template>
-    <template slot="content">
-      <template v-if="taskInstanceList.length">
-        <m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
-        </m-list>
-        <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
-        </div>
+  <div class="wrap-taskInstance">
+    <m-list-construction :title="$t('Task Instance')">
+      <template slot="conditions">
+        <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
       </template>
-      <template v-if="!taskInstanceList.length">
-        <m-no-data></m-no-data>
+      <template slot="content">
+        <template v-if="taskInstanceList.length">
+          <m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
+          </m-list>
+          <div class="page-box">
+            <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+          </div>
+        </template>
+        <template v-if="!taskInstanceList.length">
+          <m-no-data></m-no-data>
+        </template>
+        <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
       </template>
-      <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
-    </template>
-  </m-list-construction>
+    </m-list-construction>
+  </div>
 </template>
 <script>
   import _ from 'lodash'
@@ -157,3 +159,31 @@
     components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }
 </script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .wrap-taskInstance {
+    .table-box {
+      overflow-y: scroll;
+    }
+    .table-box {
+      .fixed {
+        table-layout: auto;
+        tr {
+          th:last-child,td:last-child {
+            background: inherit;
+            width: 50px;
+            height: 40px;
+            line-height: 40px;
+            border-left:1px solid #ecf3ff;
+            position: absolute;
+            right: 0;
+            z-index: 2;
+          }
+          th:nth-last-child(2) {
+            padding-right: 80px;
+          }
+        }
+      }
+    }
+  }
+</style>