add pasue icon button and adjust operation button style

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -17,7 +17,7 @@
 <template>
   <div class="list-model" style="position: relative;">
     <div class="table-box">
-      <el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
+      <el-table class="fixed" :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
         <el-table-column type="selection" width="50"></el-table-column>
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column :label="$t('Process Name')" min-width="200">
@@ -107,35 +107,34 @@
             <div v-show="!scope.row.disabled">
               <!--Edit-->
               <el-button
-                      type="info"
+                  type="info"
-                      size="mini"
+                  size="mini"
-                      icon="el-icon-edit-outline"
+                  icon="el-icon-edit-outline"
-                      disabled="true"
+                  disabled="true"
-                      circle>
+                  circle>
               </el-button>
 
               <!--Rerun-->
-              <el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
+              <span>
-                <span>
+                <el-button
-                  <el-button
+                  v-show="buttonType === 'run'"
-                    v-show="buttonType === 'run'"
+                  type="info"
-                    type="info"
+                  size="mini"
-                    size="mini"
+                  disabled="true"
-                    disabled="true"
+                  circle>
-                    circle>
+                  <span style="padding: 0 2px">{{scope.row.count}}</span>
-                    <span style="padding: 0 2px">{{scope.row.count}}</span>
+                </el-button>
-                  </el-button>
+              </span>
-                </span>
-              </el-tooltip>
               <el-button
-                      v-show="buttonType !== 'run'"
+                  v-show="buttonType !== 'run'"
-                      type="info"
+                  type="info"
-                      size="mini"
+                  size="mini"
-                      icon="el-icon-refresh"
+                  icon="el-icon-refresh"
-                      disabled="true"
+                  disabled="true"
-                      circle>
+                  circle>
               </el-button>
 
+              <!--Store-->
               <span>
                 <el-button
                   v-show="buttonType === 'store'"
@@ -176,13 +175,12 @@
               <!--Recovery Suspend/Pause-->
               <span>
                 <el-button
-                  style="padding: 0 3px"
                   v-show="(scope.row.state === 'PAUSE' || scope.row.state === 'STOP') && buttonType === 'suspend'"
                   type="warning"
                   size="mini"
                   circle
                   disabled="true">
-                  {{scope.row.count}}
+                  <span style="padding: 0 3px">{{scope.row.count}}</span>
                 </el-button>
               </span>
 
@@ -208,7 +206,19 @@
                 </el-button>
               </span>
 
-              <!--delete-->
+              <!--Stop-->
+              <span>
+                <el-button
+                  v-show="scope.row.state !== 'STOP'"
+                  type="warning"
+                  size="mini"
+                  circle
+                  icon="el-icon-video-pause"
+                  disabled="true">
+                </el-button>
+              </span>
+
+              <!--Delete-->
               <el-button
                   type="danger"
                   circle
@@ -309,7 +319,6 @@
        * @param REPEAT_RUNNING
        */
       _reRun (item, index) {
-        console.log(index)
         this._countDownFn({
           id: item.id,
           executeType: 'REPEAT_RUNNING',

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

@@ -213,21 +213,10 @@
       .fixed {
         table-layout: auto;
         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;
-          }
           td:last-child {
-            border-bottom:1px solid #ecf3ff;
+            .el-button+.el-button {
-          }
+              margin-left: 0;
-          th:nth-last-child(2) {
+            }
-            padding-right: 260px;
           }
         }
       }