init

src/components/cron-input/index.vue

@@ -0,0 +1,105 @@
+<template>
+
+  <Dropdown trigger="click" style="width:100%" @on-visible-change="showDrop">
+
+    <Input :value="value" readonly placeholder="请选择" />
+
+    <Dropdown-menu slot="list">
+      <Form :model="cronForm" ref="cronForm" label-position="left" :label-width="160" class="cron-form">
+
+        <!-- Minute Input -->
+        <FormItem label="Minute">
+          <Select v-model="cronForm.minute" placeholder="Minute" class="scrollable-select">
+            <Option v-for="minute in minutes" :value="minute" :key="minute">{{ minute }}</Option>
+          </Select>
+        </FormItem>
+
+        <!-- Hour Input -->
+        <FormItem label="Hour">
+          <Select v-model="cronForm.hour" placeholder="Hour" class="scrollable-select">
+            <Option v-for="hour in hours" :value="hour" :key="hour">{{ hour }}</Option>
+          </Select>
+        </FormItem>
+
+        <!-- Day of Month Input -->
+        <FormItem label="Day">
+          <Select v-model="cronForm.day" placeholder="Day" class="scrollable-select">
+            <Option v-for="day in days" :value="day" :key="day">{{ day }}</Option>
+          </Select>
+        </FormItem>
+
+        <!-- Month Input -->
+        <FormItem label="Month">
+          <Select v-model="cronForm.month" placeholder="Month" class="scrollable-select">
+            <Option v-for="month in months" :value="month" :key="month">{{ month }}</Option>
+          </Select>
+        </FormItem>
+
+        <!-- Day of Week Input -->
+        <FormItem label="Week">
+          <Select v-model="cronForm.dayOfWeek" placeholder="Day of Week" class="scrollable-select">
+            <Option v-for="dayOfWeek in daysOfWeek" :value="dayOfWeek" :key="dayOfWeek">{{ dayOfWeek }}</Option>
+          </Select>
+        </FormItem>
+
+        <Button type="primary" @click="applyCron">确定</Button>
+
+      </Form>
+    </Dropdown-menu>
+  </Dropdown>
+
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  data() {
+    return {
+      cronForm: {
+        minute: '*',
+        hour: '*',
+        day: '*',
+        month: '*',
+        dayOfWeek: '*'
+      },
+
+      minutes: ['*', ...Array.from({ length: 60 }, (_, i) => i.toString())],
+      hours: ['*', ...Array.from({ length: 24 }, (_, i) => i.toString())],
+      days: ['*', ...Array.from({ length: 31 }, (_, i) => (i + 1).toString())],
+      months: ['*', ...Array.from({ length: 12 }, (_, i) => (i + 1).toString())],
+      daysOfWeek: ['*', '0', '1', '2', '3', '4', '5', '6']
+    }
+  },
+  methods: {
+    showDrop(visible) {
+      if (visible && this.value) {
+        let timeArray = this.value.split(' ')
+
+        this.cronForm = {
+          minute: timeArray[0],
+          hour: timeArray[1],
+          day: timeArray[2],
+          month: timeArray[3],
+          dayOfWeek: timeArray[4]
+        }
+      }
+    },
+    applyCron() {
+      const { minute, hour, day, month, dayOfWeek } = this.cronForm
+      this.$emit('input', `${minute} ${hour} ${day} ${month} ${dayOfWeek}`)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ivu-dropdown-menu {
+  padding: 10px;
+}
+.scrollable-select {
+  .ivu-select-dropdown {
+    max-height: 200px; /* Adjust this value to your needs */
+    overflow-y: auto; /* Enable vertical scrollbar */
+  }
+}
+</style>