action button cannot be clicked when it is disabled (#158)

byzer-org · Mar 28, 2022 · 783f962 · 783f962
1 parent b9efb5c
commit 783f962
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 28 deletions.
diff --git a/src/components/CheckAction/index.vue b/src/components/CheckAction/index.vue
@@ -106,7 +106,9 @@ export default class CheckAction extends Vue {
     try {
       const res = await this.updateSchedule({ id, params })
       if (res?.msg === 'success') {
-        this.$t('schedules.updateSuccessMsg')
+        this.$message.success(
+          this.$t('schedules.updateSuccessMsg')
+        )
       }
       if (this.checked) {
         await this.checkOnline()

diff --git a/src/locale/zh.json b/src/locale/zh.json
@@ -303,7 +303,7 @@
     "editTaskTitle": "编辑任务",
     "remove_task": "移除任务",
     "onlineSchedule": "上线调度",
-    "actionSuccessMsg": "{action}调度任务成功。",
+    "actionSuccessMsg": "{action}调度任务成功",
     "updateSuccessMsg": "调度任务更新成功",
     "editTaskConfirmInfo": "确定{action}任务吗？当前任务所属调度为“上线”状态，在该调度上{action}任务会导致其“下线”。若需要重新上线该调度，请勾选左下角“上线调度”，或稍后前往「调度」进行设置。",
     "editTaskConfirmTitle": "{action}任务",

diff --git a/src/page/Schedules/Instance/index.vue b/src/page/Schedules/Instance/index.vue
@@ -112,7 +112,7 @@
                 v-if="!checkScope(['2', '5'], scope.row.state)"
                 class="el-ksd-icon-pause_with_border_22 content-icon hasEvent"
                 :class="{ 'setting-disabled': !checkScope(['0'], scope.row.state) }"
-                @click="handleAction(scope.row, 0)"
+                @click="handleAction(scope.row, 0, ['0'])"
               ></i>
             </el-tooltip>
             <!-- resume -->
@@ -132,7 +132,7 @@
               <i
                 class="el-ksd-icon-stop_with_border_22 content-icon hasEvent"
                 :class="{ 'setting-disabled': !checkScope(['0', '8', '9', '10'], scope.row.state) }"
-                @click="handleAction(scope.row, 2)"
+                @click="handleAction(scope.row, 2, ['0', '8', '9', '10'])"
               ></i>
             </el-tooltip>
             <!-- repeat running -->
@@ -142,7 +142,7 @@
               <i
                 class="el-ksd-icon-resure_22 content-icon hasEvent"
                 :class="{ 'setting-disabled': !checkScope(['2', '5'], scope.row.state) }"
-                @click="handleAction(scope.row, 3)"
+                @click="handleAction(scope.row, 3, ['2', '5'])"
               ></i>
             </el-tooltip>
           </div>
@@ -304,7 +304,10 @@ export default class Instance extends Vue {
    * @param {*} index
    * @Date: 2022-03-17 10:58:13
    */
-  async handleAction ({ id, state }, index) {
+  async handleAction ({ id, state }, index, scopeList = []) {
+    if (scopeList.length > 0 && !this.checkScope(scopeList, state)) {
+      return
+    }
     if (this.cancelSearch) {
       this.cancelSearch('cancel')
     }

diff --git a/src/page/Workspace/Notebook/CellList/index.vue b/src/page/Workspace/Notebook/CellList/index.vue
@@ -62,25 +62,27 @@
               <i class="el-ksd-icon-confirm_22"></i>
               {{ $t('schedules.addedToSchedule') }}
             </span>
-            <el-dropdown @command="handleCommand" trigger="click">
-              <span class="add-to-schedule update-btn">
-                <svg-icon
-                  class="menu-icon font-14"
-                  :icon-class="'schedule_update'"
-                ></svg-icon>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="'handleUpdate'">{{ $t('schedules.updateScheduleTask') }}</el-dropdown-item>
-                  <!-- <div class="update-btn-dropdown-wrap">
-                    <svg-icon
-                      class="menu-icon font-14"
-                      :icon-class="'schedule_update'"
-                    ></svg-icon>
-                    <div class="update-btn-dropdown-text">{{ $t('schedules.updateScheduleTask') }}</div>
-                  </div>
-                </el-dropdown-item> -->
-              </el-dropdown-menu>
-            </el-dropdown>
+            <el-tooltip placement="top" :content="$t('schedules.updateScheduleTask')">
+              <el-dropdown @command="handleCommand" trigger="click">
+                <span class="add-to-schedule update-btn">
+                  <svg-icon
+                    class="menu-icon font-14"
+                    :icon-class="'schedule_update'"
+                  ></svg-icon>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item :command="'handleUpdate'">{{ $t('schedules.updateScheduleTask') }}</el-dropdown-item>
+                    <!-- <div class="update-btn-dropdown-wrap">
+                      <svg-icon
+                        class="menu-icon font-14"
+                        :icon-class="'schedule_update'"
+                      ></svg-icon>
+                      <div class="update-btn-dropdown-text">{{ $t('schedules.updateScheduleTask') }}</div>
+                    </div>
+                  </el-dropdown-item> -->
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-tooltip>
           </div>
           <span
             v-else
@@ -1100,16 +1102,19 @@ export default {
         try {
           const res = await this.updateSchedule(params)
           if (res?.msg === 'success') {
-            this.$message.success(
-              this.$t('schedules.actionSuccessMsg', { action: this.$t('update') })
-            )
+            this.showUpdatesuccessMsg()
           }
         } catch (err) {
           console.log(err)
         }
       }
       this.checkNotebook()
     },
+    showUpdatesuccessMsg () {
+      this.$message.success(
+        this.$t('schedules.updateSuccessMsg')
+      )
+    },
     formatParams () {
       const {
         scheduleInfo: { name, connects, entities, description },