Workflow definition and task instance page add scroll

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">
+          <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>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 <template>
+  <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>
@@ -38,6 +38,7 @@
         <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
       </template>
     </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>

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">
+          <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>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 <template>
+  <div class="wrap-taskInstance">
     <m-list-construction :title="$t('Task 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'
@@ -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>