cip-components/cip-cron/Index.vue

<template>
  <div class="cip-cron__container">
    <div class="cip-cron">
      <ul class="cip-cron__tabs">
        <li
          class="cip-cron__tab"
          v-for="item in state.text.tabs"
          :key="item"
          :class="{ 'active': state.activeComponent === item.value }"
          @click="onHandleTab(item.value)"
        >
          {{ item.name }}
        </li>
      </ul>
      <keep-alive>
        <component
          class="cip-cron__content"
          :size="size"
          :text="state.text"
          :is="state.activeComponent"
          @postResult="getResult"
        ></component>
      </keep-alive>
    </div>
    <express-field
      v-if="showField"
      :text="state.text"
      :cron="state.cron"
    ></express-field>
    <div class="cip-cron__express" v-if="showCron">
      <span class="cip-cron__express__name">Cron表达式 </span>
      <span class="cip-cron__express__value">{{ state.cron }}</span>
    </div>
    <div class="cip-cron__button">
      <el-button @click="handleChange" type="primary" size="small">
        {{ state.text.Save }}
      </el-button>
    </div>
    <slot name="append"></slot>
  </div>
</template>

<script>
import { config } from './config'
import second from './children/second.vue'
import minute from './children/minute.vue'
import hour from './children/hour.vue'
import day from './children/day.vue'
import month from './children/month.vue'
import year from './children/year.vue'
import week from './children/week.vue'
import expressField from './children/express-field.vue'
import { reactive, computed, defineComponent, watch } from 'vue'
import { generateProps, generateEmits } from '../helper/component-util'
import { componentScheme } from './component.scheme'

import {
  ElSelect,
  ElOption,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElButton
} from 'element-plus'
export default defineComponent({
  name: 'cip-cron',
  components: {
    ElSelect,
    ElOption,
    ElInputNumber,
    ElRadioGroup,
    ElRadio,
    ElButton,
    expressField,
    second,
    minute,
    hour,
    day,
    month,
    year,
    week
  },
  props: generateProps(componentScheme),
  emits: generateEmits(componentScheme),
  setup (props, { emit }) {
    const state = reactive({
      text: computed(() => config),
      activeComponent: 'second',
      secondsText: '',
      minutesText: '',
      hoursText: '',
      daysText: '',
      weeksText: '',
      monthsText: '',
      yearsText: '',
      cron: computed(() => {
        return `${state.secondsText || '*'} ${state.minutesText || '*'} ${state.hoursText || '*'
          } ${state.daysText || '*'} ${state.monthsText || '*'} ${state.weeksText || '?'
          } ${state.yearsText || ''}`
      })
    })

    const getResult = ({ textData, type }) => {
      state[type] = textData
    }

    const handleChange = () => {
      if (typeof state.cron !== 'string') return false
      emit('postChange', state.cron)
    }

    const onHandleTab = (index) => {
      state.activeComponent = index
    }

    watch(
      () => state.cron,
      (value) => {
        if (typeof state.cron !== 'string') return
        emit('update:value', value)
      }
    )

    return {
      state,
      getResult,
      handleChange,
      onHandleTab
    }
  }
})
</script>
<style lang="less">
@import url('./index.less');
</style>