You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@shardingsphere.apache.org by zh...@apache.org on 2020/10/23 06:31:08 UTC

[shardingsphere-elasticjob-ui] branch master updated: Fix lite UI code style with ESLint

This is an automated email from the ASF dual-hosted git repository.

zhangliang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new acf827a  Fix lite UI code style with ESLint
     new 8657729  Merge pull request #64 from TeslaCN/fixes-eslint
acf827a is described below

commit acf827a746cf48c4f100ac47af77377788468a42
Author: 吴伟杰 <ro...@me.com>
AuthorDate: Fri Oct 23 13:09:10 2020 +0800

    Fix lite UI code style with ESLint
---
 .../package.json                                   |   1 +
 .../src/lang/zh-CN.js                              |   2 +-
 .../src/router/index.js                            |   2 +-
 .../src/views/data-source/module/dataSource.vue    |   7 +-
 .../views/history-status/module/historyStatus.vue  |   2 +-
 .../views/history-trace/module/historyTrace.vue    |   5 +-
 .../module/operationJobsDetail.vue                 | 107 +++---
 .../views/operation-jobs/module/operationJobs.vue  | 388 +++++++++++----------
 .../module/operationServersDetail.vue              | 202 +++++------
 .../src/views/operation-servers/api.js             |   2 +-
 .../operation-servers/module/operationServers.vue  |  77 ++--
 11 files changed, 404 insertions(+), 391 deletions(-)

diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/package.json b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/package.json
index ba8e586..bfd17ab 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/package.json
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/package.json
@@ -8,6 +8,7 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
+    "lint-fix": "eslint --fix --ext .js,.vue src",
     "build": "node build/build.js",
     "unit": "cross-env BABEL_ENV=test karma start test/karma.conf.js --single-run",
     "rimraf": "node build/rimraf.js"
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/lang/zh-CN.js
index 21ec29e..5065a83 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/lang/zh-CN.js
@@ -300,6 +300,6 @@ export default {
     major_features_info_4: '跨注册中心查看作业',
     major_features_info_5: '查看作业运行轨迹和运行状态',
     unsupported_title: '不支持项',
-    unsupported_info: '添加作业。因为作业都是在首次运行时自动添加,使用控制台添加作业并无必要。直接在作业服务器启动包含Elastic Job的作业进程即可。',
+    unsupported_info: '添加作业。因为作业都是在首次运行时自动添加,使用控制台添加作业并无必要。直接在作业服务器启动包含Elastic Job的作业进程即可。'
   }
 }
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/router/index.js
index 08cad6a..3f3fbc8 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/router/index.js
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/router/index.js
@@ -84,7 +84,7 @@ export const constantRouterMap = [
     component: () => import('@/views/history-status'),
     hidden: true,
     name: 'History status'
-  },
+  }
 ]
 
 export default new Router({
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/data-source/module/dataSource.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/data-source/module/dataSource.vue
index aa0887e..668040b 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/data-source/module/dataSource.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/data-source/module/dataSource.vue
@@ -230,7 +230,7 @@ export default {
         this.cloneTableData = clone(res.model)
         this.tableData = data.splice(0, this.pageSize)
       })
-      //this.getRegCenterActivated()
+      // this.getRegCenterActivated()
     },
     getRegCenterActivated() {
       API.getRegCenterActivated().then(res => {
@@ -249,7 +249,7 @@ export default {
           name: row.name
         }
         API.connect(params).then(res => {
-          if(res.model) {
+          if (res.model) {
             this.$notify({
               title: this.$t('common').notify.title,
               message: this.$t('common').notify.conSucMessage,
@@ -301,7 +301,7 @@ export default {
       this.$refs[formName].validate(valid => {
         if (valid) {
           API.connectTest(this.form).then(res => {
-            if(res.model) {
+            if (res.model) {
               this.$notify({
                 title: this.$t('common').notify.title,
                 message: this.$t('common').notify.conSucMessage,
@@ -314,7 +314,6 @@ export default {
                 type: 'error'
               })
             }
-
           })
         } else {
           return false
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-status/module/historyStatus.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-status/module/historyStatus.vue
index e7a5676..8af8d4a 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-status/module/historyStatus.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-status/module/historyStatus.vue
@@ -156,7 +156,7 @@ export default {
     fetchJobNameSuggestions(jobNamePrefix, callback) {
       API.getStatusJobNameSuggestions(jobNamePrefix).then(res => {
         const jobNames = res.model
-        const suggestions = jobNames.map(jobName => ({value: jobName}))
+        const suggestions = jobNames.map(jobName => ({ value: jobName }))
         callback(suggestions)
       })
     },
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
index e0ff031..aaac065 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/history-trace/module/historyTrace.vue
@@ -84,7 +84,6 @@
 </template>
 <script>
 import { mapActions } from 'vuex'
-import clone from 'lodash/clone'
 import API from '../api'
 export default {
   name: 'HistoryTrace',
@@ -168,14 +167,14 @@ export default {
     fetchJobNameSuggestions(jobNamePrefix, callback) {
       API.getExecutionJobNameSuggestions(jobNamePrefix).then(res => {
         const jobNames = res.model
-        const suggestions = jobNames.map(jobName => ({value: jobName}))
+        const suggestions = jobNames.map(jobName => ({ value: jobName }))
         callback(suggestions)
       })
     },
     fetchIpSuggestions(ipPrefix, callback) {
       API.getExecutionIpSuggestions(ipPrefix).then(res => {
         const ips = res.model
-        const suggestions = ips.map(ip => ({value: ip}))
+        const suggestions = ips.map(ip => ({ value: ip }))
         callback(suggestions)
       })
     },
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs-detail/module/operationJobsDetail.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs-detail/module/operationJobsDetail.vue
index 2bbb4d9..4236c0e 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs-detail/module/operationJobsDetail.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs-detail/module/operationJobsDetail.vue
@@ -19,27 +19,29 @@
   <el-row class="box-card">
     <el-form :model="searchForm" class="demo-form-inline">
       <el-form-item>
-          <el-col :span="4">
-            <el-button @click="goBack" type="info" icon="el-icon-arrow-left">Back</el-button>
-          </el-col>
-          <el-col :span="14">
-              <el-link type="info" disabled> {{$t('operationJobs.labelInfo.jobName') }}:</el-link>
-              <el-link type="info" disabled>{{jobName || "-" }}</el-link>
-          </el-col>
-          <el-col :span="6">
-            <el-input
-              v-model="searchForm.jobName"
-              placeholder="Search"
-              clearable
-              @clear="search"
-              @change="search"
-              autocomplete="off" >
-              <i slot="prefix" class="el-input__icon el-icon-search"></i>
-              <el-button slot="append" icon="el-icon-search"
-                @click="search"></el-button>
-            </el-input>
-          </el-col>
-        </el-form-item>
+        <el-col :span="4">
+          <el-button type="info" icon="el-icon-arrow-left" @click="goBack">Back</el-button>
+        </el-col>
+        <el-col :span="14">
+          <el-link type="info" disabled> {{ $t('operationJobs.labelInfo.jobName') }}:</el-link>
+          <el-link type="info" disabled>{{ jobName || "-" }}</el-link>
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model="searchForm.jobName"
+            placeholder="Search"
+            clearable
+            autocomplete="off"
+            @clear="search"
+            @change="search" >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="search"></el-button>
+          </el-input>
+        </el-col>
+      </el-form-item>
     </el-form>
     <div class="btn-group pull-right" style="float: right;">
 
@@ -57,37 +59,38 @@
           :label="item.label"
           :width="item.width"
         >
-        <template slot-scope="scope">
-          <span v-if="'item'===item.prop || 'serverIp'===item.prop || 'instanceId'===item.prop">{{ scope.row[item.prop] }}</span>
-          <span v-if="'failover'===item.prop">{{ scope.row.failover? scope.row.failover : "-" }}</span>
-          <el-button
-            v-if="'status'===item.prop"
-            size="mini"
-            :type="statusColor[scope.row.status]"
-            plain>
-            {{ $t("operationJobs.statusText."+scope.row[item.prop]) }}
+          <template slot-scope="scope">
+            <span v-if="'item'===item.prop || 'serverIp'===item.prop || 'instanceId'===item.prop">{{ scope.row[item.prop] }}</span>
+            <span v-if="'failover'===item.prop">{{ scope.row.failover? scope.row.failover : "-" }}</span>
+            <el-button
+              v-if="'status'===item.prop"
+              :type="statusColor[scope.row.status]"
+              size="mini"
+              plain>
+              {{ $t("operationJobs.statusText."+scope.row[item.prop]) }}
             </el-button>
-        </template>
+          </template>
         </el-table-column>
         <el-table-column
           :label="$t('operationJobs.table.operate')"
-          fixed="right" width="100">
+          fixed="right"
+          width="100">
           <template slot-scope="scope">
             <el-button-group>
               <el-button
+                v-if="'DISABLED'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="success"
-                :disabled="isGuest"
-                v-if="'DISABLED'===scope.row.status"
-                @click="handleEnable(scope.row)"
-                plain>{{ $t("operationJobs.actionText.enable") }}</el-button>
+                plain
+                @click="handleEnable(scope.row)">{{ $t("operationJobs.actionText.enable") }}</el-button>
               <el-button
+                v-if="'PENDING'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="warning"
-                :disabled="isGuest"
-                v-if="'PENDING'===scope.row.status"
-                @click="handleDisable(scope.row)"
-                plain>{{ $t("operationJobs.actionText.disable") }}</el-button>
+                plain
+                @click="handleDisable(scope.row)">{{ $t("operationJobs.actionText.disable") }}</el-button>
             </el-button-group>
           </template>
         </el-table-column>
@@ -103,8 +106,8 @@ export default {
   name: 'OperationJobs',
   data() {
     return {
-      isGuest: window.localStorage.getItem('isGuest') == 'true',
-      jobName: "",
+      isGuest: window.localStorage.getItem('isGuest') === 'true',
+      jobName: '',
       column: [
         {
           label: this.$t('operationJobs').labelInfo.item,
@@ -146,8 +149,8 @@ export default {
   },
   created() {
     this.jobName = this.$route.params.jobName ||
-      localStorage.getItem("/operation-jobs/status-detail/jobName")
-    if(!this.jobName){
+      localStorage.getItem('/operation-jobs/status-detail/jobName')
+    if (!this.jobName) {
       this.goBack()
       return
     }
@@ -157,10 +160,10 @@ export default {
     ...mapActions(['setRegCenterActivated']),
     handleCurrentChange(val) {
       const data = clone(this.cloneTableData)
-      this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize)
+      this.tableData = data.splice(this.pageSize * (val - 1), this.pageSize)
     },
     goBack() {
-      this.$router.push({path: '/operation-jobs'})
+      this.$router.push({ path: '/operation-jobs' })
     },
     getShardingInfo() {
       var params = {
@@ -174,13 +177,13 @@ export default {
       })
     },
     filterSearchData(model) {
-      if(!this.searchForm.jobName){
-        return true;
+      if (!this.searchForm.jobName) {
+        return true
       }
-      if(!model){
-        return true;
+      if (!model) {
+        return true
       }
-      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase());
+      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase())
     },
     handleEnable(row) {
       const params = {
@@ -211,7 +214,7 @@ export default {
       })
     },
     search() {
-        this.getShardingInfo()
+      this.getShardingInfo()
     }
   }
 }
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs/module/operationJobs.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs/module/operationJobs.vue
index 39e7182..cedbfc1 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs/module/operationJobs.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-jobs/module/operationJobs.vue
@@ -22,11 +22,13 @@
         v-model="searchForm.jobName"
         placeholder="Search"
         clearable
+        autocomplete="off"
         @clear="search"
-        @change="search"
-        autocomplete="off" >
+        @change="search" >
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        <el-button slot="append" icon="el-icon-search"
+        <el-button
+          slot="append"
+          icon="el-icon-search"
           @click="search"></el-button>
       </el-input>
     </div>
@@ -43,70 +45,71 @@
           :label="item.label"
           :width="item.width"
         >
-        <template slot-scope="scope">
-          <span v-if="'status'!==item.prop">{{ scope.row[item.prop] }}</span>
-          <el-button
-            v-if="'status'===item.prop"
-            size="mini"
-            :type="statusColor[scope.row[item.prop]]"
-            plain>
-            {{ $t("operationJobs.statusText."+scope.row[item.prop]) }}
+          <template slot-scope="scope">
+            <span v-if="'status'!==item.prop">{{ scope.row[item.prop] }}</span>
+            <el-button
+              v-if="'status'===item.prop"
+              :type="statusColor[scope.row[item.prop]]"
+              size="mini"
+              plain>
+              {{ $t("operationJobs.statusText."+scope.row[item.prop]) }}
             </el-button>
-        </template>
+          </template>
         </el-table-column>
         <el-table-column
           :label="$t('operationJobs.table.operate')"
-          fixed="right" width="380">
+          fixed="right"
+          width="380">
           <template slot-scope="scope">
             <el-button-group>
               <el-button
+                :disabled="isGuest"
                 size="mini"
                 type="primary"
-                :disabled="isGuest"
-                @click="handleModify(scope.row)"
-                plain>{{ $t("operationJobs.actionText.modify") }}</el-button>
+                plain
+                @click="handleModify(scope.row)">{{ $t("operationJobs.actionText.modify") }}</el-button>
               <el-button
+                v-if="'CRASHED'!==scope.row.status"
                 size="mini"
                 type="info"
-                v-if="'CRASHED'!==scope.row.status"
-                @click="handleDetail(scope.row)"
-                plain>{{ $t("operationJobs.actionText.detail") }}</el-button>
+                plain
+                @click="handleDetail(scope.row)">{{ $t("operationJobs.actionText.detail") }}</el-button>
               <el-button
+                v-if="'OK'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="success"
-                :disabled="isGuest"
-                v-if="'OK'===scope.row.status"
-                @click="handleTrigger(scope.row)"
-                plain>{{ $t("operationJobs.actionText.trigger") }}</el-button>
+                plain
+                @click="handleTrigger(scope.row)">{{ $t("operationJobs.actionText.trigger") }}</el-button>
               <el-button
+                v-if="'DISABLED'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="success"
-                :disabled="isGuest"
-                v-if="'DISABLED'===scope.row.status"
-                @click="handleEnable(scope.row)"
-                plain>{{ $t("operationJobs.actionText.enable") }}</el-button>
+                plain
+                @click="handleEnable(scope.row)">{{ $t("operationJobs.actionText.enable") }}</el-button>
               <el-button
+                v-if="'OK'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="warning"
-                :disabled="isGuest"
-                v-if="'OK'===scope.row.status"
-                @click="handleDisable(scope.row)"
-                plain>{{ $t("operationJobs.actionText.disable") }}</el-button>
+                plain
+                @click="handleDisable(scope.row)">{{ $t("operationJobs.actionText.disable") }}</el-button>
               <el-button
+                v-if="'CRASHED'!==scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
-                :disabled="isGuest"
-                v-if="'CRASHED'!==scope.row.status"
-                @click="handleShutdown(scope.row)"
-                plain>{{ $t("operationJobs.actionText.shutdown") }}</el-button>
+                plain
+                @click="handleShutdown(scope.row)">{{ $t("operationJobs.actionText.shutdown") }}</el-button>
               <el-button
+                v-if="'CRASHED'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
                 icon="el-icon-delete"
-                :disabled="isGuest"
-                v-if="'CRASHED'===scope.row.status"
-                @click="handlerRemove(scope.row)"
-                plain>{{ $t("operationJobs.actionText.remove") }}</el-button>
+                plain
+                @click="handlerRemove(scope.row)">{{ $t("operationJobs.actionText.remove") }}</el-button>
             </el-button-group>
           </template>
         </el-table-column>
@@ -129,157 +132,157 @@
       <el-form ref="editForm" :model="editForm" :rules="rules" label-width="40px">
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.jobName') }}
-            </el-col>
-            <el-col :span="7">
-              <el-input
-                  disabled
-                  :placeholder="$t('operationJobs.rules.jobName')"
-                  v-model="editForm.jobName"
-                  autocomplete="off"
-                />
-            </el-col>
-            <el-col :span="1">
-              &nbsp;
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.cron') }}
-            </el-col>
-            <el-col :span="1">
-              &nbsp;
-            </el-col>
-            <el-col :span="7">
-              <el-input
-                  :placeholder="$t('operationJobs.rules.cron')"
-                  v-model="editForm.cron"
-                  autocomplete="off"
-                />
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.jobName') }}
+          </el-col>
+          <el-col :span="7">
+            <el-input
+              :placeholder="$t('operationJobs.rules.jobName')"
+              v-model="editForm.jobName"
+              disabled
+              autocomplete="off"
+            />
+          </el-col>
+          <el-col :span="1">
+            &nbsp;
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.cron') }}
+          </el-col>
+          <el-col :span="1">
+            &nbsp;
+          </el-col>
+          <el-col :span="7">
+            <el-input
+              :placeholder="$t('operationJobs.rules.cron')"
+              v-model="editForm.cron"
+              autocomplete="off"
+            />
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.shardingTotalCount') }}
-            </el-col>
-            <el-col :span="8">
-              <el-input-number
-                  :placeholder="$t('operationJobs.labelInfo.shardingTotalCount')"
-                  v-model="editForm.shardingTotalCount"
-                  autocomplete="off"
-                />
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.jobParameter') }}
-            </el-col>
-            <el-col :span="8">
-              <el-input
-                  :placeholder="$t('operationJobs.labelInfo.jobParameter')"
-                  v-model="editForm.jobParameter"
-                  autocomplete="off"
-                />
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.shardingTotalCount') }}
+          </el-col>
+          <el-col :span="8">
+            <el-input-number
+              :placeholder="$t('operationJobs.labelInfo.shardingTotalCount')"
+              v-model="editForm.shardingTotalCount"
+              autocomplete="off"
+            />
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.jobParameter') }}
+          </el-col>
+          <el-col :span="8">
+            <el-input
+              :placeholder="$t('operationJobs.labelInfo.jobParameter')"
+              v-model="editForm.jobParameter"
+              autocomplete="off"
+            />
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.maxTimeDiffSeconds') }}
-            </el-col>
-            <el-col :span="8">
-              <el-input-number
-                  :placeholder="$t('operationJobs.labelInfo.maxTimeDiffSeconds')"
-                  v-model="editForm.maxTimeDiffSeconds"
-                  autocomplete="off"
-                />
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.monitorExecution') }}
-            </el-col>
-            <el-col :span="8">
-              <el-checkbox v-model="editForm.monitorExecution">{{ $t('operationJobs.labelInfo.monitorExecution')}} </el-checkbox>
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.maxTimeDiffSeconds') }}
+          </el-col>
+          <el-col :span="8">
+            <el-input-number
+              :placeholder="$t('operationJobs.labelInfo.maxTimeDiffSeconds')"
+              v-model="editForm.maxTimeDiffSeconds"
+              autocomplete="off"
+            />
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.monitorExecution') }}
+          </el-col>
+          <el-col :span="8">
+            <el-checkbox v-model="editForm.monitorExecution">{{ $t('operationJobs.labelInfo.monitorExecution') }} </el-checkbox>
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.failover') }}
-            </el-col>
-            <el-col :span="8">
-              <el-checkbox v-model="editForm.failover">{{ $t('operationJobs.labelInfo.failover')}} </el-checkbox>
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.misfire') }}
-            </el-col>
-            <el-col :span="8">
-              <el-checkbox v-model="editForm.misfire">{{ $t('operationJobs.labelInfo.misfire')}} </el-checkbox>
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.failover') }}
+          </el-col>
+          <el-col :span="8">
+            <el-checkbox v-model="editForm.failover">{{ $t('operationJobs.labelInfo.failover') }} </el-checkbox>
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.misfire') }}
+          </el-col>
+          <el-col :span="8">
+            <el-checkbox v-model="editForm.misfire">{{ $t('operationJobs.labelInfo.misfire') }} </el-checkbox>
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="6">
-              {{ $t('operationJobs.labelInfo.shardingItemParameters') }}
-            </el-col>
-            <el-col :span="18">
-              <el-input
-                  type="textarea"
-                  :placeholder="$t('operationJobs.labelInfo.shardingItemParameters')"
-                  v-model="editForm.shardingItemParameters"
-                  autocomplete="off"
-                />
-            </el-col>
+          <el-col :span="6">
+            {{ $t('operationJobs.labelInfo.shardingItemParameters') }}
+          </el-col>
+          <el-col :span="18">
+            <el-input
+              :placeholder="$t('operationJobs.labelInfo.shardingItemParameters')"
+              v-model="editForm.shardingItemParameters"
+              type="textarea"
+              autocomplete="off"
+            />
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.jobShardingStrategyType') }}
-            </el-col>
-            <el-col :span="7">
-              <el-input
-                  :placeholder="$t('operationJobs.labelInfo.jobShardingStrategyType')"
-                  v-model="editForm.jobShardingStrategyType"
-                  autocomplete="off"
-                />
-            </el-col>
-            <el-col :span="1">
-              &nbsp;
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.jobExecutorServiceHandlerType') }}
-            </el-col>
-            <el-col :span="8">
-              <el-input
-                  :placeholder="$t('operationJobs.labelInfo.jobExecutorServiceHandlerType')"
-                  v-model="editForm.jobExecutorServiceHandlerType"
-                  autocomplete="off"
-                />
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.jobShardingStrategyType') }}
+          </el-col>
+          <el-col :span="7">
+            <el-input
+              :placeholder="$t('operationJobs.labelInfo.jobShardingStrategyType')"
+              v-model="editForm.jobShardingStrategyType"
+              autocomplete="off"
+            />
+          </el-col>
+          <el-col :span="1">
+            &nbsp;
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.jobExecutorServiceHandlerType') }}
+          </el-col>
+          <el-col :span="8">
+            <el-input
+              :placeholder="$t('operationJobs.labelInfo.jobExecutorServiceHandlerType')"
+              v-model="editForm.jobExecutorServiceHandlerType"
+              autocomplete="off"
+            />
+          </el-col>
         </el-form-item>
 
         <el-form-item>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.jobErrorHandlerType') }}
-            </el-col>
-            <el-col :span="7">
-              <el-input
-                  :placeholder="$t('operationJobs.labelInfo.jobErrorHandlerType')"
-                  v-model="editForm.jobErrorHandlerType"
-                  autocomplete="off"
-                />
-            </el-col>
-            <el-col :span="1">
-              &nbsp;
-            </el-col>
-            <el-col :span="4">
-              {{ $t('operationJobs.labelInfo.description') }}
-            </el-col>
-            <el-col :span="8">
-              <el-input
-                  type="textarea"
-                  :placeholder="$t('operationJobs.rules.description')"
-                  v-model="editForm.description"
-                  autocomplete="off"
-                />
-            </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.jobErrorHandlerType') }}
+          </el-col>
+          <el-col :span="7">
+            <el-input
+              :placeholder="$t('operationJobs.labelInfo.jobErrorHandlerType')"
+              v-model="editForm.jobErrorHandlerType"
+              autocomplete="off"
+            />
+          </el-col>
+          <el-col :span="1">
+            &nbsp;
+          </el-col>
+          <el-col :span="4">
+            {{ $t('operationJobs.labelInfo.description') }}
+          </el-col>
+          <el-col :span="8">
+            <el-input
+              :placeholder="$t('operationJobs.rules.description')"
+              v-model="editForm.description"
+              type="textarea"
+              autocomplete="off"
+            />
+          </el-col>
         </el-form-item>
 
         <el-form-item>
@@ -322,12 +325,13 @@
 import { mapActions } from 'vuex'
 import clone from 'lodash/clone'
 import API from '../api'
+
 export default {
   name: 'OperationJobs',
   data() {
     return {
       modifyDialogVisible: false,
-      isGuest: window.localStorage.getItem('isGuest') == 'true',
+      isGuest: window.localStorage.getItem('isGuest') === 'true',
       column: [
         {
           label: this.$t('operationJobs').labelInfo.jobName,
@@ -361,7 +365,7 @@ export default {
       },
       editForm: {
         jobName: '',
-        propList : [],
+        propList: [],
         shardingTotalCount: 1,
         cron: '',
         description: '',
@@ -421,7 +425,7 @@ export default {
     handleCurrentChange(val) {
       const data = clone(this.cloneTableData)
       this.currentPage = val
-      this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize)
+      this.tableData = data.splice(this.pageSize * (val - 1), this.pageSize)
     },
     getAllJobsBriefInfo() {
       var params = {
@@ -430,24 +434,24 @@ export default {
         const data = Array.prototype.filter.call(res.model, this.filterSearchData)
         this.total = data.length
         this.cloneTableData = clone(data)
-        this.tableData = data.splice(this.pageSize*(this.currentPage - 1), this.pageSize)
+        this.tableData = data.splice(this.pageSize * (this.currentPage - 1), this.pageSize)
       })
     },
     filterSearchData(model) {
-      if(!this.searchForm.jobName){
-        return true;
+      if (!this.searchForm.jobName) {
+        return true
       }
-      if(!model){
-        return true;
+      if (!model) {
+        return true
       }
-      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase());
+      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase())
     },
     addProperty() {
-      this.editForm.propList.push({name: '', value: ''})
+      this.editForm.propList.push({ name: '', value: '' })
     },
     removeProperty(prop) {
       const index = this.editForm.propList.indexOf(prop)
-      if (-1 !== index) {
+      if (index !== -1) {
         this.editForm.propList.splice(index, 1)
       }
     },
@@ -456,11 +460,11 @@ export default {
         jobName: row.jobName
       }
       API.getJobConfig(params).then(res => {
-        const data = res.model;
-        data.props = data.props || {};
+        const data = res.model
+        data.props = data.props || {}
         data.propList = data.propList || []
-        for (let key in data.props) {
-          data.propList.push({name: key, value: data.props[key]})
+        for (const key in data.props) {
+          data.propList.push({ name: key, value: data.props[key] })
         }
         this.editForm = data
         this.modifyDialogVisible = true
@@ -470,8 +474,8 @@ export default {
       const params = {
         jobName: row.jobName
       }
-      localStorage.setItem("/operation-jobs/status-detail/jobName", params.jobName);
-      this.$router.push({path: '/operation-jobs/status-detail', params: params })
+      localStorage.setItem('/operation-jobs/status-detail/jobName', params.jobName)
+      this.$router.push({ path: '/operation-jobs/status-detail', params: params })
     },
     handleTrigger(row) {
       const params = {
@@ -541,10 +545,10 @@ export default {
     onEditConfirm(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          const data = clone(this.editForm);
+          const data = clone(this.editForm)
           data.props = {}
           data.propList = data.propList || []
-          for (let prop of data.propList) {
+          for (const prop of data.propList) {
             data.props[prop.name] = prop.value
           }
           delete data.propList
@@ -564,7 +568,7 @@ export default {
       })
     },
     search() {
-        this.getAllJobsBriefInfo()
+      this.getAllJobsBriefInfo()
     }
   }
 }
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue
index 02edac7..e96302e 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue
@@ -19,27 +19,29 @@
   <el-row class="box-card">
     <el-form :model="searchForm" class="demo-form-inline">
       <el-form-item>
-          <el-col :span="4">
-            <el-button @click="goBack" type="info" icon="el-icon-arrow-left">Back</el-button>
-          </el-col>
-          <el-col :span="14">
-              <el-link type="info" disabled> {{$t('operationServers.labelInfo.serverIp') }}:</el-link>
-              <el-link type="info" disabled>{{serverIp || "-" }}</el-link>
-          </el-col>
-          <el-col :span="6">
-            <el-input
-              v-model="searchForm.jobName"
-              placeholder="Search"
-              clearable
-              @clear="search"
-              @change="search"
-              autocomplete="off" >
-              <i slot="prefix" class="el-input__icon el-icon-search"></i>
-              <el-button slot="append" icon="el-icon-search"
-                @click="search"></el-button>
-            </el-input>
-          </el-col>
-        </el-form-item>
+        <el-col :span="4">
+          <el-button type="info" icon="el-icon-arrow-left" @click="goBack">Back</el-button>
+        </el-col>
+        <el-col :span="14">
+          <el-link type="info" disabled> {{ $t('operationServers.labelInfo.serverIp') }}:</el-link>
+          <el-link type="info" disabled>{{ serverIp || "-" }}</el-link>
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model="searchForm.jobName"
+            placeholder="Search"
+            clearable
+            autocomplete="off"
+            @clear="search"
+            @change="search" >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="search"></el-button>
+          </el-input>
+        </el-col>
+      </el-form-item>
     </el-form>
     <div class="btn-group pull-right" style="float: right;">
 
@@ -54,93 +56,94 @@
           :prop="columnJobName.prop"
           :label="columnJobName.label"
           :width="columnJobName.width">
-            <template slot-scope="scope">
-              <span>{{ scope.row.jobName }}</span>
-            </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.jobName }}</span>
+          </template>
         </el-table-column>
         <el-table-column
           :prop="columnInstanceCount.prop"
           :label="columnInstanceCount.label"
           :width="columnInstanceCount.width">
-            <template slot-scope="scope">
-              <span>{{ scope.row.instanceCount }}</span>
-            </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.instanceCount }}</span>
+          </template>
         </el-table-column>
         <el-table-column
           :prop="columnStatus.prop"
           :label="columnStatus.label"
           :width="columnStatus.width">
-            <template slot-scope="scope">
-              <el-button
-                v-if="'OK'===scope.row.status && scope.row.instanceCount"
-                size="mini"
-                :type="statusColor.OK"
-                plain>
-                {{ $t("operationServers.statusText.OK") }}
-              </el-button>
-              <el-button
-                v-if="'DISABLED'===scope.row.status && scope.row.instanceCount"
-                size="mini"
-                :type="statusColor.DISABLED"
-                plain>
-                {{ $t("operationServers.statusText.DISABLED") }}
-              </el-button>
-              <el-button
-                v-if="'SHARDING_FLAG'===scope.row.status && scope.row.instanceCount"
-                size="mini"
-                :type="statusColor.SHARDING_FLAG"
-                plain>
-                {{ $t("operationServers.statusText.SHARDING_FLAG") }}
-              </el-button>
-              <el-button
-                v-if="'PENDING'===scope.row.status && scope.row.instanceCount"
-                size="mini"
-                :type="statusColor.PENDING"
-                plain>
-                {{ $t("operationServers.statusText.PENDING") }}
-              </el-button>
-              <el-button
-                v-if="!scope.row.instanceCount || 'CRASHED'===scope.row.status"
-                size="mini"
-                :type="statusColor.CRASHED"
-                plain>
-                {{ $t("operationServers.statusText.CRASHED") }}
-              </el-button>
-            </template>
+          <template slot-scope="scope">
+            <el-button
+              v-if="'OK'===scope.row.status && scope.row.instanceCount"
+              :type="statusColor.OK"
+              size="mini"
+              plain>
+              {{ $t("operationServers.statusText.OK") }}
+            </el-button>
+            <el-button
+              v-if="'DISABLED'===scope.row.status && scope.row.instanceCount"
+              :type="statusColor.DISABLED"
+              size="mini"
+              plain>
+              {{ $t("operationServers.statusText.DISABLED") }}
+            </el-button>
+            <el-button
+              v-if="'SHARDING_FLAG'===scope.row.status && scope.row.instanceCount"
+              :type="statusColor.SHARDING_FLAG"
+              size="mini"
+              plain>
+              {{ $t("operationServers.statusText.SHARDING_FLAG") }}
+            </el-button>
+            <el-button
+              v-if="'PENDING'===scope.row.status && scope.row.instanceCount"
+              :type="statusColor.PENDING"
+              size="mini"
+              plain>
+              {{ $t("operationServers.statusText.PENDING") }}
+            </el-button>
+            <el-button
+              v-if="!scope.row.instanceCount || 'CRASHED'===scope.row.status"
+              :type="statusColor.CRASHED"
+              size="mini"
+              plain>
+              {{ $t("operationServers.statusText.CRASHED") }}
+            </el-button>
+          </template>
         </el-table-column>
         <el-table-column
           :label="$t('operationServers.labelInfo.operate')"
-          fixed="right" width="300">
+          fixed="right"
+          width="300">
           <template slot-scope="scope">
             <el-button-group>
               <el-button
+                v-if="scope.row.instanceCount && 'DISABLED'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="success"
-                :disabled="isGuest"
-                v-if="scope.row.instanceCount && 'DISABLED'===scope.row.status"
-                @click="handleEnable(scope.row)"
-                plain>{{ $t("operationServers.actionText.enable") }}</el-button>
+                plain
+                @click="handleEnable(scope.row)">{{ $t("operationServers.actionText.enable") }}</el-button>
               <el-button
+                v-if="scope.row.instanceCount && 'OK'===scope.row.status"
+                :disabled="isGuest"
                 size="mini"
                 type="warning"
-                :disabled="isGuest"
-                v-if="scope.row.instanceCount && 'OK'===scope.row.status"
-                @click="handleDisable(scope.row)"
-                plain>{{ $t("operationServers.actionText.disable") }}</el-button>
+                plain
+                @click="handleDisable(scope.row)">{{ $t("operationServers.actionText.disable") }}</el-button>
               <el-button
+                v-if="scope.row.instanceCount"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
-                :disabled="isGuest"
-                v-if="scope.row.instanceCount"
-                @click="handleShutdown(scope.row)"
-                plain>{{ $t("operationServers.actionText.shutdown") }}</el-button>
+                plain
+                @click="handleShutdown(scope.row)">{{ $t("operationServers.actionText.shutdown") }}</el-button>
               <el-button
+                v-if="!scope.row.instanceCount"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
-                :disabled="isGuest"
-                v-if="!scope.row.instanceCount"
-                @click="handleRemove(scope.row)"
-                plain>{{ $t("operationServers.actionText.remove") }}</el-button>
+                plain
+                @click="handleRemove(scope.row)">{{ $t("operationServers.actionText.remove") }}</el-button>
             </el-button-group>
           </template>
         </el-table-column>
@@ -161,23 +164,24 @@
 import { mapActions } from 'vuex'
 import clone from 'lodash/clone'
 import API from '../../operation-servers/api'
+
 export default {
   name: 'OperationServers',
   data() {
     return {
-      isGuest: window.localStorage.getItem('isGuest') == 'true',
-      serverIp: "",
+      isGuest: window.localStorage.getItem('isGuest') === 'true',
+      serverIp: '',
       columnJobName: {
-          label: this.$t('operationServers').labelInfo.jobName,
-          prop: 'jobName'
+        label: this.$t('operationServers').labelInfo.jobName,
+        prop: 'jobName'
       },
       columnInstanceCount: {
-          label: this.$t('operationServers').labelInfo.instanceCount,
-          prop: 'instanceCount'
+        label: this.$t('operationServers').labelInfo.instanceCount,
+        prop: 'instanceCount'
       },
       columnStatus: {
-          label: this.$t('operationServers').labelInfo.status,
-          prop: 'status'
+        label: this.$t('operationServers').labelInfo.status,
+        prop: 'status'
       },
       statusColor: {
         OK: 'success',
@@ -198,8 +202,8 @@ export default {
   },
   created() {
     this.serverIp = this.$route.params.serverIp ||
-      localStorage.getItem("/operation-servers/status-detail/serverIp")
-    if(!this.serverIp){
+      localStorage.getItem('/operation-servers/status-detail/serverIp')
+    if (!this.serverIp) {
       this.goBack()
       return
     }
@@ -209,10 +213,10 @@ export default {
     ...mapActions(['setRegCenterActivated']),
     handleCurrentChange(val) {
       const data = clone(this.cloneTableData)
-      this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize)
+      this.tableData = data.splice(this.pageSize * (val - 1), this.pageSize)
     },
     goBack() {
-      this.$router.push({path: '/operation-servers'})
+      this.$router.push({ path: '/operation-servers' })
     },
     getJobs() {
       var params = {
@@ -226,13 +230,13 @@ export default {
       })
     },
     filterSearchData(model) {
-      if(!this.searchForm.jobName){
-        return true;
+      if (!this.searchForm.jobName) {
+        return true
       }
-      if(!model){
-        return true;
+      if (!model) {
+        return true
       }
-      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase());
+      return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase())
     },
     handleEnable(row) {
       const params = {
@@ -291,7 +295,7 @@ export default {
       })
     },
     search() {
-        this.getJobs()
+      this.getJobs()
     }
   }
 }
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/api.js b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/api.js
index be42216..4ca2924 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/api.js
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/api.js
@@ -24,7 +24,7 @@ export default {
   disableServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/disable'),
   enableServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/enable'),
   shutdownServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/shutdown'),
-  removeServer: (params = {}) => API.delete('/api/servers/' + params.serverIp + ""),
+  removeServer: (params = {}) => API.delete('/api/servers/' + params.serverIp + ''),
 
   getJobs: (params = {}) => API.get('/api/servers/' + params.serverIp + '/jobs'),
   disableServerJob: (params) => API.post('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '/disable'),
diff --git a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/module/operationServers.vue b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/module/operationServers.vue
index 12be63e..aa72625 100644
--- a/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/module/operationServers.vue
+++ b/shardingsphere-elasticjob-lite-ui/shardingsphere-elasticjob-lite-ui-frontend/src/views/operation-servers/module/operationServers.vue
@@ -22,11 +22,13 @@
         v-model="searchForm.serverIp"
         placeholder="Search"
         clearable
+        autocomplete="off"
         @clear="search"
-        @change="search"
-        autocomplete="off" >
+        @change="search" >
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        <el-button slot="append" icon="el-icon-search"
+        <el-button
+          slot="append"
+          icon="el-icon-search"
           @click="search"></el-button>
       </el-input>
     </div>
@@ -43,50 +45,51 @@
           :label="item.label"
           :width="item.width"
         >
-        <template slot-scope="scope">
-          <span v-if="'status'!==item.prop">{{ scope.row[item.prop] }}</span>
-        </template>
+          <template slot-scope="scope">
+            <span v-if="'status'!==item.prop">{{ scope.row[item.prop] }}</span>
+          </template>
         </el-table-column>
         <el-table-column
           :label="$t('operationServers.labelInfo.operate')"
-          fixed="right" width="300">
+          fixed="right"
+          width="300">
           <template slot-scope="scope">
             <el-button-group>
               <el-button
+                v-if="scope.row.instancesNum"
                 size="mini"
                 type="info"
-                v-if="scope.row.instancesNum"
-                @click="handleDetail(scope.row)"
-                plain>{{ $t("operationServers.actionText.detail") }}</el-button>
+                plain
+                @click="handleDetail(scope.row)">{{ $t("operationServers.actionText.detail") }}</el-button>
               <el-button
+                v-if="scope.row.instancesNum && scope.row.disabledJobsNum"
+                :disabled="isGuest"
                 size="mini"
                 type="success"
-                :disabled="isGuest"
-                v-if="scope.row.instancesNum && scope.row.disabledJobsNum"
-                @click="handleEnable(scope.row)"
-                plain>{{ $t("operationServers.actionText.enable") }}</el-button>
+                plain
+                @click="handleEnable(scope.row)">{{ $t("operationServers.actionText.enable") }}</el-button>
               <el-button
+                v-if="0===scope.row.disabledJobsNum && scope.row.instancesNum"
+                :disabled="isGuest"
                 size="mini"
                 type="warning"
-                :disabled="isGuest"
-                v-if="0===scope.row.disabledJobsNum && scope.row.instancesNum"
-                @click="handleDisable(scope.row)"
-                plain>{{ $t("operationServers.actionText.disable") }}</el-button>
+                plain
+                @click="handleDisable(scope.row)">{{ $t("operationServers.actionText.disable") }}</el-button>
               <el-button
+                v-if="scope.row.instancesNum"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
-                :disabled="isGuest"
-                v-if="scope.row.instancesNum"
-                @click="handleShutdown(scope.row)"
-                plain>{{ $t("operationServers.actionText.shutdown") }}</el-button>
+                plain
+                @click="handleShutdown(scope.row)">{{ $t("operationServers.actionText.shutdown") }}</el-button>
               <el-button
+                v-if="0===scope.row.instancesNum"
+                :disabled="isGuest"
                 size="mini"
                 type="danger"
                 icon="el-icon-delete"
-                :disabled="isGuest"
-                v-if="0===scope.row.instancesNum"
-                @click="handlerRemove(scope.row)"
-                plain>{{ $t("operationServers.actionText.remove") }}</el-button>
+                plain
+                @click="handlerRemove(scope.row)">{{ $t("operationServers.actionText.remove") }}</el-button>
             </el-button-group>
           </template>
         </el-table-column>
@@ -111,7 +114,7 @@ export default {
   name: 'OperationServers',
   data() {
     return {
-      isGuest: window.localStorage.getItem('isGuest') == 'true',
+      isGuest: window.localStorage.getItem('isGuest') === 'true',
       column: [
         {
           label: this.$t('operationServers').labelInfo.serverIp,
@@ -148,7 +151,7 @@ export default {
     handleCurrentChange(val) {
       const data = clone(this.cloneTableData)
       this.currentPage = val
-      this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize)
+      this.tableData = data.splice(this.pageSize * (val - 1), this.pageSize)
     },
     getAllServersBriefInfo() {
       var params = {
@@ -157,24 +160,24 @@ export default {
         const data = Array.prototype.filter.call(res.model, this.filterSearchData)
         this.total = data.length
         this.cloneTableData = clone(data)
-        this.tableData = data.splice(this.pageSize*(this.currentPage - 1), this.pageSize)
+        this.tableData = data.splice(this.pageSize * (this.currentPage - 1), this.pageSize)
       })
     },
     filterSearchData(model) {
-      if(!this.searchForm.serverIp){
-        return true;
+      if (!this.searchForm.serverIp) {
+        return true
       }
-      if(!model){
-        return true;
+      if (!model) {
+        return true
       }
-      return model.serverIp && model.serverIp.toLowerCase().includes(this.searchForm.serverIp.toLowerCase());
+      return model.serverIp && model.serverIp.toLowerCase().includes(this.searchForm.serverIp.toLowerCase())
     },
     handleDetail(row) {
       const params = {
         serverIp: row.serverIp
       }
-      localStorage.setItem("/operation-servers/status-detail/serverIp", params.serverIp);
-      this.$router.push({path: '/operation-servers/status-detail', params: params })
+      localStorage.setItem('/operation-servers/status-detail/serverIp', params.serverIp)
+      this.$router.push({ path: '/operation-servers/status-detail', params: params })
     },
     handleEnable(row) {
       const params = {
@@ -229,7 +232,7 @@ export default {
       })
     },
     search() {
-        this.getAllServersBriefInfo()
+      this.getAllServersBriefInfo()
     }
   }
 }