前言

• 这周https://github.com/YMFE/yapi新出了漏洞，需要协助IT部门探测公司内网资产是否有私搭的yapi平台，但是IT那边需要到晚上十点过后才可以开通ACL给探测节点，所以需要给内网探测平台的任务添加一个定时任务，虽然使用crontab也可以做到定时发任务，但是觉得平台应该要有这个功能，所以开始修改界面。

封装vuetifyjs的日期时间组件

• 官方组件只有https://vuetifyjs.com/zh-Hans/components/time-pickers/和https://vuetifyjs.com/zh-Hans/components/date-pickers/，时间和日期选择，为了方便将两个组件和到一起选择后返回选择的日期和时间。

<v-row>
  <v-col
    cols="12"
    sm="2"
    md="2"
  >
    <v-menu
      ref="date_menu"
      v-model="show_date_menu"
      :close-on-content-click="false"
      :return-value.sync="date"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="date"
          label="选择日期"
          prepend-icon="mdi-calendar"
          readonly
          v-bind="attrs"
          v-on="on"
        />
      </template>
      <v-date-picker
        v-model="date"
        no-title
        locale="zh-cn"
        :first-day-of-week="0"
        scrollable
      >
        <v-spacer />
        <v-btn
          text
          color="primary"
          @click="show_date_menu = false"
        >
          取消
        </v-btn>
        <v-btn
          text
          color="primary"
          @click="$refs.date_menu.save(date)"
        >
          确定
        </v-btn>
      </v-date-picker>
    </v-menu>
  </v-col>
  <v-col
    cols="12"
    sm="2"
    md="2"
  >
    <v-menu
      ref="time_menu"
      v-model="show_time_menu"
      :close-on-content-click="false"
      :nudge-right="40"
      :return-value.sync="time"
      transition="scale-transition"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="time"
          label="选择时间"
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          v-bind="attrs"
          v-on="on"
        />
      </template>
      <v-time-picker
        v-if="show_time_menu"
        v-model="time"
        scrollable
        full-width
        format="24hr"
        @click:minute="$refs.time_menu.save(time)"
      />
    </v-menu>
  </v-col>
  <v-spacer />
  <v-col
    cols="11"
    sm="5"
  />
</v-row>

• 当组件创建完成后设置上当前时间

show_date_menu: false,
show_time_menu: false,
date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
time: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(11, 5),

• 最后每次改变后更新返回日期和时间，转换为自己想要的时间格式

schedules = new Date((new Date(this.date + ' ' + this.time) - (new Date()).getTimezoneOffset() * 60000)).toISOString().replace('Z', '000+08:00')

后端实现

• 只要任务加一个字段放过了这个时间再跑任务，等节点每次轮询接口时判断现在时间是否小于设置定时的时间，如果是就下发任务到节点执行任务。

schedules = models.DateTimeField(verbose_name="定时任务")

• 节点请求接口，过滤添加schedules__lte和现在时间比较，确保下发的任务是当前时间要跑的。

queryset = self.task_queryset.filter(user=request.user, status=0, node_uuid__has_key=node_uuid,schedules__lte=timezone.now())[:5]

效果

• 感觉还可以吧状态改成定时任务，当然到了要跑的时间就被节点接走了。