表格列表-表单构建-redis监控

nladmin-ui/src/views/system/timing/index.vue

@@ -37,7 +37,15 @@
           <el-input v-model="form.methodName" style="width: 220px;" />
         </el-form-item>
         <el-form-item label="Cron表达式" prop="cronExpression">
-          <el-input v-model="form.cronExpression" style="width: 220px;" />
+          <!--          <el-input v-model="form.cronExpression" style="width: 220px;" />-->
+          <el-input v-model="form.cronExpression" placeholder="请输入CRON 表达式" style="width: 220px;">
+            <template slot="append">
+              <el-button type="primary" @click="handleShowCron">
+                生成表达式
+                <i class="el-icon-time el-icon--right" />
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="子任务ID">
           <el-input v-model="form.subTask" placeholder="多个用逗号隔开，按顺序执行" style="width: 220px;" />
@@ -114,6 +122,9 @@
     </el-table>
     <!--分页组件-->
     <pagination />
+    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body class="scrollbar" destroy-on-close>
+      <crontab :expression="expression" @hide="openCron=false" @fill="crontabFill" />
+    </el-dialog>
   </div>
 </template>
 
@@ -125,11 +136,12 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
+import Crontab from './components/crontab'
 
 const defaultForm = { id: null, jobName: null, subTask: null, beanName: null, methodName: null, params: null, cronExpression: null, pauseAfterFailure: true, isPause: false, personInCharge: null, email: null, description: null }
 export default {
   name: 'Timing',
-  components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
+  components: { Log, pagination, crudOperation, rrOperation, DateRangePicker, Crontab },
   cruds() {
     return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }})
   },
@@ -161,7 +173,11 @@ export default {
         personInCharge: [
           { required: true, message: '请输入负责人名称', trigger: 'blur' }
         ]
-      }
+      },
+      // 是否显示Cron表达式弹出层
+      openCron: false,
+      // 传入的表达式
+      expression: ''
     }
   },
   methods: {
@@ -208,6 +224,15 @@ export default {
     },
     checkboxT(row, rowIndex) {
       return row.id !== 1
+    },
+    /** cron表达式按钮操作 */
+    handleShowCron() {
+      this.expression = this.form.cronExpression
+      this.openCron = true
+    },
+    /** 确定后回传值 */
+    crontabFill(value) {
+      this.form.cronExpression = value
     }
   }
 }