72 changed files with 3042 additions and 3973 deletions
@ -1,4 +0,0 @@
|
||||
export { default as CronTab } from './src/CronTabInput.vue' |
||||
export { default as CronTabInner } from './src/CronTabInner.vue' |
||||
export { default as CronTabModal } from './src/CronTabModal.vue' |
||||
export { default as CronValidator } from './src/validator' |
||||
@ -1,360 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { computed, provide, reactive, ref, watch } from 'vue' |
||||
import { Col, Divider, Input, Row, TabPane, Tabs, Textarea, Tooltip } from 'ant-design-vue' |
||||
import CronParser from 'cron-parser' |
||||
import SecondUI from './tabs/SecondUI.vue' |
||||
import MinuteUI from './tabs/MinuteUI.vue' |
||||
import HourUI from './tabs/HourUI.vue' |
||||
import DayUI from './tabs/DayUI.vue' |
||||
import MonthUI from './tabs/MonthUI.vue' |
||||
import WeekUI from './tabs/WeekUI.vue' |
||||
import YearUI from './tabs/YearUI.vue' |
||||
import { cronEmits, cronProps } from './cron.data' |
||||
import { useDesign } from '@/hooks/web/useDesign' |
||||
import { dateFormat } from '@/utils/dateUtil' |
||||
import { simpleDebounce } from '@/utils' |
||||
|
||||
const props = defineProps({ ...cronProps }) |
||||
const emit = defineEmits([...cronEmits]) |
||||
const { prefixCls } = useDesign('cron-inner') |
||||
provide('prefixCls', prefixCls) |
||||
const activeKey = ref(props.hideSecond ? 'minute' : 'second') |
||||
const second = ref('*') |
||||
const minute = ref('*') |
||||
const hour = ref('*') |
||||
const day = ref('*') |
||||
const month = ref('*') |
||||
const week = ref('?') |
||||
const year = ref('*') |
||||
const inputValues = reactive({ |
||||
second: '', |
||||
minute: '', |
||||
hour: '', |
||||
day: '', |
||||
month: '', |
||||
week: '', |
||||
year: '', |
||||
cron: '', |
||||
}) |
||||
const preTimeList = ref('执行预览，会忽略年份参数。') |
||||
|
||||
// cron表达式 |
||||
const cronValueInner = computed(() => { |
||||
const result: string[] = [] |
||||
if (!props.hideSecond) |
||||
result.push(second.value ? second.value : '*') |
||||
|
||||
result.push(minute.value ? minute.value : '*') |
||||
result.push(hour.value ? hour.value : '*') |
||||
result.push(day.value ? day.value : '*') |
||||
result.push(month.value ? month.value : '*') |
||||
result.push(week.value ? week.value : '?') |
||||
if (!props.hideYear && !props.hideSecond) |
||||
result.push(year.value ? year.value : '*') |
||||
return result.join(' ') |
||||
}) |
||||
// 不含年 |
||||
const cronValueNoYear = computed(() => { |
||||
const v = cronValueInner.value |
||||
if (props.hideYear || props.hideSecond) |
||||
return v |
||||
const vs = v.split(' ') |
||||
if (vs.length >= 6) { |
||||
// 转成 Quartz 的规则 |
||||
vs[5] = convertWeekToQuartz(vs[5]) |
||||
} |
||||
return vs.slice(0, vs.length - 1).join(' ') |
||||
}) |
||||
const calTriggerList = simpleDebounce(calTriggerListInner, 500) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(newVal) => { |
||||
if (newVal === cronValueInner.value) |
||||
return |
||||
|
||||
formatValue() |
||||
}, |
||||
) |
||||
|
||||
watch(cronValueInner, (newValue) => { |
||||
calTriggerList() |
||||
emitValue(newValue) |
||||
assignInput() |
||||
}) |
||||
|
||||
assignInput() |
||||
formatValue() |
||||
calTriggerListInner() |
||||
|
||||
function assignInput() { |
||||
inputValues.second = second.value |
||||
inputValues.minute = minute.value |
||||
inputValues.hour = hour.value |
||||
inputValues.day = day.value |
||||
inputValues.month = month.value |
||||
inputValues.week = week.value |
||||
inputValues.year = year.value |
||||
inputValues.cron = cronValueInner.value |
||||
} |
||||
|
||||
function formatValue() { |
||||
if (!props.value) |
||||
return |
||||
const values = props.value.split(' ').filter(item => !!item) |
||||
if (!values || values.length <= 0) |
||||
return |
||||
let i = 0 |
||||
if (!props.hideSecond) |
||||
second.value = values[i++] |
||||
if (values.length > i) |
||||
minute.value = values[i++] |
||||
if (values.length > i) |
||||
hour.value = values[i++] |
||||
if (values.length > i) |
||||
day.value = values[i++] |
||||
if (values.length > i) |
||||
month.value = values[i++] |
||||
if (values.length > i) |
||||
week.value = values[i++] |
||||
if (values.length > i) |
||||
year.value = values[i] |
||||
assignInput() |
||||
} |
||||
|
||||
// Quartz 的规则： |
||||
// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六 |
||||
function convertWeekToQuartz(week: string) { |
||||
const convert = (v: string) => { |
||||
if (v === '0') |
||||
return '1' |
||||
|
||||
if (v === '1') |
||||
return '0' |
||||
|
||||
return (Number.parseInt(v) - 1).toString() |
||||
} |
||||
// 匹配示例 1-7 or 1/7 |
||||
const patten1 = /^([0-7])([-/])([0-7])$/ |
||||
// 匹配示例 1,4,7 |
||||
const patten2 = /^([0-7])(,[0-7])+$/ |
||||
if (/^[0-7]$/.test(week)) { |
||||
return convert(week) |
||||
} |
||||
else if (patten1.test(week)) { |
||||
return week.replace(patten1, (_$0, before, separator, after) => { |
||||
if (separator === '/') |
||||
return convert(before) + separator + after |
||||
else |
||||
return convert(before) + separator + convert(after) |
||||
}) |
||||
} |
||||
else if (patten2.test(week)) { |
||||
return week |
||||
.split(',') |
||||
.map(v => convert(v)) |
||||
.join(',') |
||||
} |
||||
return week |
||||
} |
||||
|
||||
function calTriggerListInner() { |
||||
// 设置了回调函数 |
||||
if (props.remote) { |
||||
props.remote(cronValueInner.value, +new Date(), (v) => { |
||||
preTimeList.value = v |
||||
}) |
||||
return |
||||
} |
||||
const format = 'yyyy-MM-dd hh:mm:ss' |
||||
const options = { |
||||
currentDate: dateFormat(new Date(), format), |
||||
} |
||||
const iter = CronParser.parseExpression(cronValueNoYear.value, options) |
||||
const result: string[] = [] |
||||
for (let i = 1; i <= 10; i++) |
||||
result.push(dateFormat(new Date(iter.next() as any), format)) |
||||
|
||||
preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间' |
||||
} |
||||
|
||||
function onInputBlur() { |
||||
second.value = inputValues.second |
||||
minute.value = inputValues.minute |
||||
hour.value = inputValues.hour |
||||
day.value = inputValues.day |
||||
month.value = inputValues.month |
||||
week.value = inputValues.week |
||||
year.value = inputValues.year |
||||
} |
||||
|
||||
function onInputCronBlur(event) { |
||||
emitValue(event.target.value) |
||||
} |
||||
|
||||
function emitValue(value) { |
||||
emit('change', value) |
||||
emit('update:value', value) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}`"> |
||||
<div class="content"> |
||||
<Tabs v-model:activeKey="activeKey" size="small"> |
||||
<TabPane v-if="!hideSecond" key="second" tab="秒"> |
||||
<SecondUI v-model:value="second" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="minute" tab="分"> |
||||
<MinuteUI v-model:value="minute" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="hour" tab="时"> |
||||
<HourUI v-model:value="hour" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="day" tab="日"> |
||||
<DayUI v-model:value="day" :week="week" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="month" tab="月"> |
||||
<MonthUI v-model:value="month" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="week" tab="周"> |
||||
<WeekUI v-model:value="week" :day="day" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane v-if="!hideYear && !hideSecond" key="year" tab="年"> |
||||
<YearUI v-model:value="year" :disabled="disabled" /> |
||||
</TabPane> |
||||
</Tabs> |
||||
<Divider /> |
||||
<!-- 执行时间预览 --> |
||||
<Row :gutter="8"> |
||||
<Col :span="18" style="margin-top: 22px"> |
||||
<Row :gutter="8"> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.second" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'second'">秒</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.minute" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'minute'">分</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.hour" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'hour'">时</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.day" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'day'">日</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.month" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'month'">月</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.week" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'week'">周</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8"> |
||||
<Input v-model:value="inputValues.year" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'year'">年</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="16"> |
||||
<Input v-model:value="inputValues.cron" @blur="onInputCronBlur"> |
||||
<template #addonBefore> |
||||
<Tooltip title="Cron表达式"> |
||||
式 |
||||
</Tooltip> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
</Row> |
||||
</Col> |
||||
<Col :span="6"> |
||||
<div>近十次执行时间（不含年）</div> |
||||
<Textarea :value="preTimeList" :rows="5" /> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less"> |
||||
@prefix-cls: ~'@{namespace}-cron-inner'; |
||||
|
||||
.@{prefix-cls} { |
||||
.content { |
||||
.ant-checkbox-wrapper + .ant-checkbox-wrapper { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
|
||||
&-config-list { |
||||
margin: 0 10px 10px; |
||||
text-align: left; |
||||
|
||||
.item { |
||||
margin-top: 5px; |
||||
font-size: 14px; |
||||
|
||||
span { |
||||
padding: 0 2px; |
||||
} |
||||
} |
||||
|
||||
.choice { |
||||
padding: 5px 8px; |
||||
} |
||||
|
||||
.w60 { |
||||
width: 60px; |
||||
min-width: 60px; |
||||
} |
||||
|
||||
.w80 { |
||||
width: 80px; |
||||
min-width: 80px; |
||||
} |
||||
|
||||
.list { |
||||
margin: 0 20px; |
||||
} |
||||
|
||||
.list-check-item { |
||||
width: 4em; |
||||
padding: 1px 3px; |
||||
} |
||||
|
||||
.list-cn .list-check-item { |
||||
width: 5em; |
||||
} |
||||
|
||||
.tip-info { |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.allow-click { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,55 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref, watch } from 'vue' |
||||
import { Input } from 'ant-design-vue' |
||||
import CronTabModal from './CronTabModal.vue' |
||||
import { cronEmits, cronProps } from './cron.data' |
||||
import { useModal } from '@/components/Modal' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
...cronProps, |
||||
placeholder: propTypes.string.def('请输入cron表达式'), |
||||
exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0), |
||||
}) |
||||
const emit = defineEmits([...cronEmits]) |
||||
const [registerModal, { openModal }] = useModal() |
||||
const editCronValue = ref(props.value) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(newVal) => { |
||||
if (newVal !== editCronValue.value) |
||||
editCronValue.value = newVal |
||||
}, |
||||
) |
||||
watch(editCronValue, (newVal) => { |
||||
emit('change', newVal) |
||||
emit('update:value', newVal) |
||||
}) |
||||
|
||||
function showConfigModal() { |
||||
if (!props.disabled) |
||||
openModal() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<Input v-model:value="editCronValue" :placeholder="placeholder" :disabled="disabled"> |
||||
<template #addonAfter> |
||||
<a class="cursor-pointer" :disabled="disabled ? 'disabled' : null" @click="showConfigModal"> |
||||
<span class="i-ant-design:setting-outlined relative right-0.5 top-0.25" /> |
||||
<span>选择</span> |
||||
</a> |
||||
</template> |
||||
</Input> |
||||
<CronTabModal |
||||
v-model:value="editCronValue" |
||||
:exe-start-time="exeStartTime" |
||||
:hide-year="hideYear" |
||||
:remote="remote" |
||||
:hide-second="hideSecond" |
||||
@register="registerModal" |
||||
/> |
||||
</div> |
||||
</template> |
||||
@ -1,18 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import CronTab from './CronTabInner.vue' |
||||
import { BasicModal, useModalInner } from '@/components/Modal' |
||||
|
||||
defineOptions({ name: 'CronTabModal', inheritAttrs: false }) |
||||
|
||||
const [registerModal, { closeModal }] = useModalInner() |
||||
|
||||
function onOk() { |
||||
closeModal() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<BasicModal title="Cron表达式" width="800px" @register="registerModal" @ok="onOk"> |
||||
<CronTab v-bind="$attrs" /> |
||||
</BasicModal> |
||||
</template> |
||||
@ -1,10 +0,0 @@
|
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
export const cronEmits = ['change', 'update:value'] |
||||
export const cronProps = { |
||||
value: propTypes.string.def(''), |
||||
disabled: propTypes.bool.def(false), |
||||
hideSecond: propTypes.bool.def(false), |
||||
hideYear: propTypes.bool.def(false), |
||||
remote: propTypes.func, |
||||
} |
||||
@ -1,101 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { computed, defineComponent, watch } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { TypeEnum, useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'DayUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
props: { |
||||
week: { type: String, default: '?' }, |
||||
}, |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const disabledChoice = computed(() => { |
||||
return (props.week && props.week !== '?') || props.disabled |
||||
}) |
||||
const setup = useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
valueWork: 1, |
||||
minValue: 1, |
||||
maxValue: 31, |
||||
valueRange: { start: 1, end: 31 }, |
||||
valueLoop: { start: 1, interval: 1 }, |
||||
disabled: disabledChoice, |
||||
}) |
||||
const typeWorkAttrs = computed(() => ({ |
||||
disabled: setup.type.value !== TypeEnum.work || props.disabled || disabledChoice.value, |
||||
...setup.inputNumberAttrs.value, |
||||
})) |
||||
|
||||
watch( |
||||
() => props.week, |
||||
() => { |
||||
setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value) |
||||
}, |
||||
) |
||||
|
||||
return { ...setup, typeWorkAttrs } |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs"> |
||||
不设置 |
||||
</Radio> |
||||
<span class="tip-info">日和周只能设置其中之一</span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每日 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 日 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 日 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" class="w-4" v-bind="typeLoopAttrs" /> |
||||
<span> 日开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 日 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.last" v-bind="beforeRadioAttrs"> |
||||
最后一日 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'HourUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 23, |
||||
valueRange: { start: 0, end: 23 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每时 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 时 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 时 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 时开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 时 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'MinuteUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 59, |
||||
valueRange: { start: 0, end: 59 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每分 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 分 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 分 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 分开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 分 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'MonthUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 1, |
||||
maxValue: 12, |
||||
valueRange: { start: 1, end: 12 }, |
||||
valueLoop: { start: 1, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每月 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 月 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 月 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 月开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 月 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'SecondUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 59, |
||||
valueRange: { start: 0, end: 59 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每秒 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 秒 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 秒 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 秒开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 秒 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,135 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { computed, defineComponent, watch } from 'vue' |
||||
import { Checkbox, Input, Radio, Select } from 'ant-design-vue' |
||||
import { TypeEnum, useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
const WEEK_MAP_EN = { |
||||
1: 'SUN', |
||||
2: 'MON', |
||||
3: 'TUE', |
||||
4: 'WED', |
||||
5: 'THU', |
||||
6: 'FRI', |
||||
7: 'SAT', |
||||
} |
||||
|
||||
const WEEK_MAP_CN = { |
||||
1: '周日', |
||||
2: '周一', |
||||
3: '周二', |
||||
4: '周三', |
||||
5: '周四', |
||||
6: '周五', |
||||
7: '周六', |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'WeekUI', |
||||
components: { AInput: Input, ASelect: Select, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '?', |
||||
props: { |
||||
day: { type: String, default: '*' }, |
||||
}, |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const disabledChoice = computed(() => { |
||||
return (props.day && props.day !== '?') || props.disabled |
||||
}) |
||||
const setup = useTabSetup(props, context, { |
||||
defaultType: TypeEnum.unset, |
||||
defaultValue: '?', |
||||
minValue: 1, |
||||
maxValue: 7, |
||||
// 0,7表示周日 1表示周一 |
||||
valueRange: { start: 1, end: 7 }, |
||||
valueLoop: { start: 2, interval: 1 }, |
||||
disabled: disabledChoice, |
||||
}) |
||||
const weekOptions = computed(() => { |
||||
const options: { label: string, value: number }[] = [] |
||||
for (const weekKey of Object.keys(WEEK_MAP_CN)) { |
||||
const weekName: string = WEEK_MAP_CN[weekKey] |
||||
options.push({ |
||||
value: Number.parseInt(weekKey), |
||||
label: weekName, |
||||
}) |
||||
} |
||||
return options |
||||
}) |
||||
|
||||
const typeRangeSelectAttrs = computed(() => ({ |
||||
class: ['w80'], |
||||
disabled: setup.typeRangeAttrs.value.disabled, |
||||
})) |
||||
|
||||
const typeLoopSelectAttrs = computed(() => ({ |
||||
class: ['w80'], |
||||
disabled: setup.typeLoopAttrs.value.disabled, |
||||
})) |
||||
|
||||
watch( |
||||
() => props.day, |
||||
() => { |
||||
setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value) |
||||
}, |
||||
) |
||||
|
||||
return { |
||||
...setup, |
||||
weekOptions, |
||||
typeLoopSelectAttrs, |
||||
typeRangeSelectAttrs, |
||||
WEEK_MAP_CN, |
||||
WEEK_MAP_EN, |
||||
} |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs"> |
||||
不设置 |
||||
</Radio> |
||||
<span class="tip-info">日和周只能设置其中之一</span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<ASelect v-model:value="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" /> |
||||
<span> 至 </span> |
||||
<ASelect v-model:value="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" /> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<ASelect v-model:value="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" /> |
||||
<span> 开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 天 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list list-cn"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="opt in weekOptions" :key="opt.value"> |
||||
<Checkbox :value="opt.value" v-bind="typeSpecifyAttrs"> |
||||
{{ opt.label }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,55 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'YearUI', |
||||
components: { AInput: Input, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const nowYear = new Date().getFullYear() |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
valueRange: { start: nowYear, end: nowYear + 100 }, |
||||
valueLoop: { start: nowYear, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每年 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" class="w80" v-bind="typeRangeAttrs" /> |
||||
<span> 年 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" class="w80" v-bind="typeRangeAttrs" /> |
||||
<span> 年 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" class="w80" v-bind="typeLoopAttrs" /> |
||||
<span> 年开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" class="w80" v-bind="typeLoopAttrs" /> |
||||
<span> 年 </span> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,204 +0,0 @@
|
||||
// 主要用于日和星期的互斥使用
|
||||
import { computed, inject, reactive, ref, unref, watch } from 'vue' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
export enum TypeEnum { |
||||
unset = 'UNSET', |
||||
every = 'EVERY', |
||||
range = 'RANGE', |
||||
loop = 'LOOP', |
||||
work = 'WORK', |
||||
last = 'LAST', |
||||
specify = 'SPECIFY', |
||||
} |
||||
|
||||
// use 公共 props
|
||||
export function useTabProps(options) { |
||||
const defaultValue = options?.defaultValue ?? '?' |
||||
return { |
||||
value: propTypes.string.def(defaultValue), |
||||
disabled: propTypes.bool.def(false), |
||||
...options?.props, |
||||
} |
||||
} |
||||
|
||||
// use 公共 emits
|
||||
export function useTabEmits() { |
||||
return ['change', 'update:value'] |
||||
} |
||||
|
||||
// use 公共 setup
|
||||
export function useTabSetup(props, context, options) { |
||||
const { emit } = context |
||||
const prefixCls = inject('prefixCls') |
||||
const defaultValue = ref(options?.defaultValue ?? '?') |
||||
// 类型
|
||||
const type = ref(options.defaultType ?? TypeEnum.every) |
||||
const valueList = ref<any[]>([]) |
||||
// 对于不同的类型，所定义的值也有所不同
|
||||
const valueRange = reactive(options.valueRange) |
||||
const valueLoop = reactive(options.valueLoop) |
||||
const valueWeek = reactive(options.valueWeek) |
||||
const valueWork = ref(options.valueWork) |
||||
const maxValue = ref(options.maxValue) |
||||
const minValue = ref(options.minValue) |
||||
|
||||
// 根据不同的类型计算出的value
|
||||
const computeValue = computed(() => { |
||||
const valueArray: any[] = [] |
||||
switch (type.value) { |
||||
case TypeEnum.unset: |
||||
valueArray.push('?') |
||||
break |
||||
case TypeEnum.every: |
||||
valueArray.push('*') |
||||
break |
||||
case TypeEnum.range: |
||||
valueArray.push(`${valueRange.start}-${valueRange.end}`) |
||||
break |
||||
case TypeEnum.loop: |
||||
valueArray.push(`${valueLoop.start}/${valueLoop.interval}`) |
||||
break |
||||
case TypeEnum.work: |
||||
valueArray.push(`${valueWork.value}W`) |
||||
break |
||||
case TypeEnum.last: |
||||
valueArray.push('L') |
||||
break |
||||
case TypeEnum.specify: |
||||
if (valueList.value.length === 0) |
||||
valueList.value.push(minValue.value) |
||||
|
||||
valueArray.push(valueList.value.join(',')) |
||||
break |
||||
default: |
||||
valueArray.push(defaultValue.value) |
||||
break |
||||
} |
||||
return valueArray.length > 0 ? valueArray.join('') : defaultValue.value |
||||
}) |
||||
// 指定值范围区间，介于最小值和最大值之间
|
||||
const specifyRange = computed(() => { |
||||
const range: number[] = [] |
||||
if (maxValue.value != null) { |
||||
for (let i = minValue.value; i <= maxValue.value; i++) |
||||
range.push(i) |
||||
} |
||||
return range |
||||
}) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(val) => { |
||||
if (val !== computeValue.value) |
||||
parseValue(val) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
watch(computeValue, v => updateValue(v)) |
||||
|
||||
function updateValue(value) { |
||||
emit('change', value) |
||||
emit('update:value', value) |
||||
} |
||||
|
||||
/** |
||||
* parseValue |
||||
* @param value |
||||
*/ |
||||
function parseValue(value) { |
||||
if (value === computeValue.value) |
||||
return |
||||
|
||||
try { |
||||
if (!value || value === defaultValue.value) { |
||||
type.value = TypeEnum.every |
||||
} |
||||
else if (value.includes('?')) { |
||||
type.value = TypeEnum.unset |
||||
} |
||||
else if (value.includes('-')) { |
||||
type.value = TypeEnum.range |
||||
const values = value.split('-') |
||||
if (values.length >= 2) { |
||||
valueRange.start = Number.parseInt(values[0]) |
||||
valueRange.end = Number.parseInt(values[1]) |
||||
} |
||||
} |
||||
else if (value.includes('/')) { |
||||
type.value = TypeEnum.loop |
||||
const values = value.split('/') |
||||
if (values.length >= 2) { |
||||
valueLoop.start = value[0] === '*' ? 0 : Number.parseInt(values[0]) |
||||
valueLoop.interval = Number.parseInt(values[1]) |
||||
} |
||||
} |
||||
else if (value.includes('W')) { |
||||
type.value = TypeEnum.work |
||||
const values = value.split('W') |
||||
if (!values[0] && !Number.isNaN(values[0])) |
||||
valueWork.value = Number.parseInt(values[0]) |
||||
} |
||||
else if (value.includes('L')) { |
||||
type.value = TypeEnum.last |
||||
} |
||||
else if (value.includes(',') || !Number.isNaN(value)) { |
||||
type.value = TypeEnum.specify |
||||
valueList.value = value.split(',').map(item => Number.parseInt(item)) |
||||
} |
||||
else { |
||||
type.value = TypeEnum.every |
||||
} |
||||
} |
||||
catch (e) { |
||||
type.value = TypeEnum.every |
||||
} |
||||
} |
||||
|
||||
const beforeRadioAttrs = computed(() => ({ |
||||
class: ['choice'], |
||||
disabled: props.disabled || unref(options.disabled), |
||||
})) |
||||
const inputNumberAttrs = computed(() => ({ |
||||
class: ['w60'], |
||||
max: maxValue.value, |
||||
min: minValue.value, |
||||
precision: 0, |
||||
})) |
||||
const typeRangeAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.range || props.disabled || unref(options.disabled), |
||||
...inputNumberAttrs.value, |
||||
})) |
||||
const typeLoopAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.loop || props.disabled || unref(options.disabled), |
||||
...inputNumberAttrs.value, |
||||
})) |
||||
const typeSpecifyAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.specify || props.disabled || unref(options.disabled), |
||||
class: ['list-check-item'], |
||||
})) |
||||
|
||||
return { |
||||
type, |
||||
TypeEnum, |
||||
prefixCls, |
||||
defaultValue, |
||||
valueRange, |
||||
valueLoop, |
||||
valueWeek, |
||||
valueList, |
||||
valueWork, |
||||
maxValue, |
||||
minValue, |
||||
computeValue, |
||||
specifyRange, |
||||
updateValue, |
||||
parseValue, |
||||
beforeRadioAttrs, |
||||
inputNumberAttrs, |
||||
typeRangeAttrs, |
||||
typeLoopAttrs, |
||||
typeSpecifyAttrs, |
||||
} |
||||
} |
||||
@ -1,50 +0,0 @@
|
||||
/* eslint-disable prefer-promise-reject-errors */ |
||||
import CronParser from 'cron-parser' |
||||
import type { ValidatorRule } from 'ant-design-vue/lib/form/interface' |
||||
|
||||
const cronRule: ValidatorRule = { |
||||
// eslint-disable-next-line no-empty-pattern
|
||||
validator({}, value) { |
||||
// 没填写就不校验
|
||||
if (!value) |
||||
return Promise.resolve() |
||||
|
||||
const values: string[] = value.split(' ').filter(item => !!item) |
||||
if (values.length > 7) |
||||
return Promise.reject('Cron表达式最多7项！') |
||||
|
||||
// 检查第7项
|
||||
let val: string = value |
||||
if (values.length === 7) { |
||||
const year = values[6] |
||||
if (year !== '*' && year !== '?') { |
||||
let yearValues: string[] = [] |
||||
if (year.includes('-')) |
||||
yearValues = year.split('-') |
||||
else if (year.indexOf('/')) |
||||
yearValues = year.split('/') |
||||
else |
||||
yearValues = [year] |
||||
|
||||
// 判断是否都是数字
|
||||
const checkYear = yearValues.some(item => Number.isNaN(Number(item))) |
||||
if (checkYear) |
||||
return Promise.reject(`Cron表达式参数[年]错误：${year}`) |
||||
} |
||||
// 取其中的前六项
|
||||
val = values.slice(0, 6).join(' ') |
||||
} |
||||
// 6位 没有年
|
||||
// 5位没有秒、年
|
||||
try { |
||||
const iter = CronParser.parseExpression(val) |
||||
iter.next() |
||||
return Promise.resolve() |
||||
} |
||||
catch (e: any) { |
||||
return Promise.reject(`Cron表达式错误：${e}`) |
||||
} |
||||
}, |
||||
} |
||||
|
||||
export default cronRule.validator |
||||
Loading…
Reference in new issue