cip-components/cip-cron/children/day.vue

<template>
  <el-radio-group v-model="state.day.cronEvery" class="el-radio-flex">
    <el-radio :label="1">{{ text.Days.every }}</el-radio>
    <el-radio :label="7">{{ text.Days.noTouch }}</el-radio>
    <el-radio :label="2">
      {{ text.Days.cycleDay[0] }}
      <el-input-number
        :size="size"
        type="number"
        v-model="state.day.cycleStart"
        :min="1"
        :max="31"
      />
      {{ text.Days.cycleDay[1] }}
      <el-input-number
        :size="size"
        type="number"
        v-model="state.day.cycleEnd"
        :min="1"
        :max="31"
      />
      {{ text.Days.cycleDay[2] }}
    </el-radio>
    <el-radio :label="3">
      {{ text.Days.intervalDay[0] }}
      <el-input-number
        :size="size"
        type="number"
        v-model="state.day.loopStart"
        :min="1"
        :max="31"
      />
      {{ text.Days.intervalDay[1] }}
      <el-input-number
        :size="size"
        type="number"
        v-model="state.day.loopEnd"
        :min="1"
        :max="31"
      />
      {{ text.Days.intervalDay[2] }}
    </el-radio>
    <el-radio :label="4">
      {{ text.Days.workDay[0] }}
      <el-input-number
        :size="size"
        type="number"
        v-model="state.day.workDay"
        :min="1"
        :max="7"
      />
      {{ text.Days.workDay[1] }}
    </el-radio>
    <el-radio :label="5">
      {{ text.Days.lastDay }}
    </el-radio>
    <el-radio :label="6">
      {{ text.Days.specificDay }}
      <el-select multiple v-model="state.day.specificSpecific" :size="size">
        <el-option v-for="(val, index) in 31" :key="index" :value="val">
          {{ val }}
        </el-option>
      </el-select>
    </el-radio>
  </el-radio-group>
</template>
<script>
import { reactive, computed, defineComponent, watch } from 'vue'
import {
  ElSelect,
  ElOption,
  ElInputNumber,
  ElRadioGroup,
  ElRadio
} from 'element-plus'
export default defineComponent({
  name: 'day',
  components: {
    ElSelect,
    ElOption,
    ElInputNumber,
    ElRadioGroup,
    ElRadio
  },
  props: {
    text: {},
    size: {
      type: String,
      default: 'small'
    }
  },
  setup(props, { emit }) {
    const dealData = () => {
      let days = ''
      state.day.specificSpecific.map((val) => {
        days += val + ','
      })
      days = days.slice(0, -1)
      return days
    }
    const state = reactive({
      day: {
        cronEvery: 1,
        cycleStart: 1,
        cycleEnd: 2,
        loopStart: 1,
        loopEnd: 1,
        workDay: 1,
        lastDay: 0,
        specificSpecific: []
      },
      daysText: computed(() => {
        const cronEvery = state.day.cronEvery
        const dayObj = {
          1: '*',
          2: state.day.cycleStart + '-' + state.day.cycleEnd,
          3: state.day.loopStart + '/' + state.day.loopEnd,
          4: state.day.workDay + 'W',
          5: 'L',
          6: dealData(),
          7: '?'
        }
        return dayObj[cronEvery]
      })
    })
    watch(
      () => state.daysText,
      (v) => {
        const result = {
          textData: v,
          type: 'daysText'
        }
        emit('postResult', result)
      },
      { immediate: true, deep: true }
    )

    return {
      state
    }
  }
})
</script>