优化配置Cron

frontend/src/components/Cron/index.vue

@@ -6,6 +6,10 @@
       z-index: 1;
     }
 
+    .cron-wrapper {
+      margin-bottom: 10px;
+    }
+
     .el-tabs {
       box-shadow: none;
     }
@@ -41,7 +45,14 @@
 </style>
 <template>
   <div id="change-crontab">
-    <!--        <el-button class="language" type="text" @click="i18n=(i18n==='en'?'cn':'en')">{{i18n}}</el-button>-->
+    <div class="cron-wrapper">
+      <label>
+        {{$t('Cron Expression')}}:
+      </label>
+      <el-tag type="success" size="small">
+        {{cron}}
+      </el-tag>
+    </div>
     <el-tabs type="border-card">
       <el-tab-pane>
         <span slot="label"><i class="el-icon-date"></i> {{text.Minutes.name}}</span>
@@ -388,9 +399,6 @@ export default {
     }
   },
   methods: {
-    getValue () {
-      return this.cron
-    },
     change () {
       this.$emit('change', this.cron)
       this.close()
@@ -398,6 +406,22 @@ export default {
     close () {
       this.$emit('close')
     },
+    submit () {
+      if (!this.validate()) {
+        this.$message.error(this.$t('Cron expression is invalid'))
+        return false
+      }
+      this.$emit('submit', this.cron)
+      return true
+    },
+    validate () {
+      if (!this.minutesText) return false
+      if (!this.hoursText) return false
+      if (!this.daysText) return false
+      if (!this.monthsText) return false
+      if (!this.weeksText) return false
+      return true
+    },
     updateCronItem (key, value) {
       if (value === undefined) {
         this[key].cronEvery = '0'

frontend/src/i18n/zh.js

@@ -289,6 +289,8 @@ export default {
   '[minute] [hour] [day] [month] [day of week]': '[分] [时] [天] [月] [星期几]',
   'Enable/Disable': '启用/禁用',
   'Cron': 'Cron',
+  'Cron Expression': 'Cron 表达式',
+  'Cron expression is invalid': 'Cron 表达式不正确',
 
   // 网站
   'Site': '网站',

frontend/src/views/schedule/ScheduleList.vue

@@ -115,21 +115,23 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('Cron')" prop="cron" required>
-          <el-popover v-model="isShowCron" trigger="focus">
-            <template>
-              <vue-cron-linux :data="scheduleForm.cron" :i18n="lang" @change="onCronChange"/>
-            </template>
-            <template slot="reference">
-              <el-input
-                id="cron"
-                ref="cron"
-                v-model="scheduleForm.cron"
-                :placeholder="`${$t('[minute] [hour] [day] [month] [day of week]')}`"
-              >
-              </el-input>
-            </template>
-          </el-popover>
-          <!--<el-button size="small" style="width:100px" type="primary" @click="onShowCronDialog">{{$t('schedules.add_cron')}}</el-button>-->
+          <el-input
+            class="cron"
+            ref="cron"
+            v-model="scheduleForm.cron"
+            :placeholder="`${$t('[minute] [hour] [day] [month] [day of week]')}`"
+            style="width: calc(100% - 100px)"
+          >
+          </el-input>
+          <el-button
+            class="cron-edit"
+            type="primary"
+            icon="el-icon-edit"
+            style="width: 100px"
+            @click="onShowCronDialog"
+          >
+            {{$t('Edit')}}
+          </el-button>
         </el-form-item>
         <el-form-item :label="$t('Execute Command')" prop="cmd">
           <el-input
@@ -161,9 +163,14 @@
     </el-dialog>
 
     <!--cron generation popup-->
-    <!--<el-dialog title="生成 Cron" :visible.sync="showCron">-->
-    <!--<vcrontab @hide="showCron=false" @fill="onCrontabFill" :expression="expression"></vcrontab>-->
-    <!--</el-dialog>-->
+    <el-dialog title="生成 Cron" :visible.sync="cronDialogVisible">
+      <vue-cron-linux ref="vue-cron-linux" :data="scheduleForm.cron" :i18n="lang" @submit="onCronChange"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="cronDialogVisible = false">{{$t('Cancel')}}</el-button>
+        <el-button size="small" type="primary" @click="onCronDialogSubmit">{{$t('Confirm')}}</el-button>
+      </span>
+    </el-dialog>
+    <!--./cron generation popup-->
 
     <el-card style="border-radius: 0" class="schedule-list">
       <!--filter-->
@@ -290,7 +297,7 @@ export default {
       isEdit: false,
       dialogTitle: '',
       dialogVisible: false,
-      showCron: false,
+      cronDialogVisible: false,
       expression: '',
       spiderList: [],
       nodeList: [],
@@ -560,6 +567,12 @@ export default {
       this.$set(this.scheduleForm, 'cron', value)
       this.$st.sendEv('定时任务', '配置Cron')
     },
+    onCronDialogSubmit () {
+      const valid = this.$refs['vue-cron-linux'].submit()
+      if (valid) {
+        this.cronDialogVisible = false
+      }
+    },
     onOpenParameters () {
       this.isParametersVisible = true
     },
@@ -573,6 +586,10 @@ export default {
         this.$set(this.scheduleForm, 'scrapy_spider', this.spiderForm.spider_names[0])
         this.$set(this.scheduleForm, 'scrapy_log_level', 'INFO')
       }
+    },
+    onShowCronDialog () {
+      this.cronDialogVisible = true
+      this.$st.sendEv('定时任务', '点击编辑Cron')
     }
   },
   created () {
@@ -637,4 +654,20 @@ export default {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  .cron {
+    width: calc(100% - 100px);
+  }
+
+  .cron >>> .el-input__inner {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+
+  .cron-edit {
+    width: 100px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 </style>