From 24464651c649ccef4dc94bc0f37afadb9c943f6d Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Thu, 30 Apr 2020 11:31:00 +0800
Subject: [PATCH] Work example page list supports scrolling

---
 .../definition/pages/list/_source/list.vue    |  8 +++---
 .../instance/pages/list/_source/list.vue      |  6 +++--
 .../pages/instance/pages/list/index.vue       | 26 +++++++++++++++++++
 3 files changed, 34 insertions(+), 6 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 53939f3f7b..4406a666d3 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
@@ -25,7 +25,7 @@
           <th scope="col" width="40">
             <span>{{$t('#')}}</span>
           </th>
-          <th scope="col">
+          <th scope="col" width="200">
             <span>{{$t('Process Name')}}</span>
           </th>
           <th scope="col" width="50">
@@ -37,13 +37,13 @@
           <th scope="col" width="130">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th scope="col">
+          <th scope="col" width="150">
             <span>{{$t('Description')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" width="80">
             <span>{{$t('Modify User')}}</span>
           </th>
-          <th scope="col" width="90">
+          <th scope="col" width="80">
             <span>{{$t('Timing state')}}</span>
           </th>
           <th scope="col" width="240">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index 641c7aaa63..bf2cfe49fd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -25,7 +25,7 @@
           <th scope="col" width="30">
             <span>{{$t('#')}}</span>
           </th>
-          <th scope="col" width="70">
+          <th scope="col" width="200">
             <span>{{$t('Process Name')}}</span>
           </th>
           <th scope="col" width="60">
@@ -56,7 +56,9 @@
             <span>{{$t('fault-tolerant sign')}}</span>
           </th>
           <th scope="col" width="30">
-            <span>{{$t('State')}}</span>
+            <div style="width: 30px">
+              <span>{{$t('State')}}</span>
+            </div>
           </th>
           <th scope="col" width="210">
             <span>{{$t('Operation')}}</span>
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 891dc2e281..4a4206218a 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
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 <template>
+  <div class="wrap-table">
   <m-list-construction :title="$t('Process Instance')">
     <template slot="conditions">
       <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
@@ -33,6 +34,7 @@
       <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
     </template>
   </m-list-construction>
+  </div>
 </template>
 <script>
   import _ from 'lodash'
@@ -196,4 +198,28 @@
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
+  .wrap-table {
+    .table-box {
+      overflow-y: scroll;
+    }
+    .table-box {
+      .fixed {
+        tr {
+          th:last-child,td:last-child {
+            background: inherit;
+            width: 230px;
+            height: 40px;
+            line-height: 40px;
+            border-left:1px solid #ecf3ff;
+            position: absolute;
+            right: 0;
+            z-index: 2;
+          }
+          th:nth-last-child(2) {
+            padding-right: 260px;
+          }
+        }
+      }
+    }
+  }
 </style>