123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <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>
|