Merge pull request #2586 from break60/dev

Work example page list supports scrolling #2554

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="300">

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>

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>