sh-view 2.8.0 → 2.8.2

package/packages/other/sh-cron-modal/components/cron-content.vue

@@ -1,294 +1,294 @@
-<template>
-	<div class="sh-cron-content">
-		<sh-tabs v-model="activeKey" size="small" :options="cronTabList" :is-content="false"></sh-tabs>
-		<template v-if="activeKey === 'second'">
-			<cronSecondBox v-model="second" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'minute'">
-			<cronMinuteBox v-model="minute" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'hour'">
-			<cronHourBox v-model="hour" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'day'">
-			<cronDayBox v-model="day" :week="week" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'month'">
-			<cronMonthBox v-model="month" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'week'">
-			<cronWeekBox v-model="week" :day="day" :disabled="disabled" />
-		</template>
-		<template v-else-if="activeKey === 'year'">
-			<cronYearBox v-model="year" :disabled="disabled" />
-		</template>
-		<!-- 执行时间预览 -->
-		<vxe-grid v-bind="tableConfig" @edit-closed="onTableEditClosed" @header-cell-click="onTableHeaderClick">
-			<template #bottom>
-				<!-- cron错误提示 -->
-				<sh-alert v-if="errMessage" type="error" show-icon>
-					<span>表达式错误，请检查</span>
-					<template #desc>{{ errMessage }}</template>
-				</sh-alert>
-				<template v-else>
-					<div class="cron-title">近十次执行时间（不含年）</div>
-					<vxe-textarea v-model="preTimeList" :rows="5" disabled />
-				</template>
-			</template>
-		</vxe-grid>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, reactive, watch, onBeforeMount } from 'vue'
-import cronSecondBox from '../tabs/cron-second-box.vue'
-import cronMinuteBox from '../tabs/cron-minute-box.vue'
-import cronHourBox from '../tabs/cron-hour-box.vue'
-import cronDayBox from '../tabs/cron-day-box.vue'
-import cronMonthBox from '../tabs/cron-month-box.vue'
-import cronWeekBox from '../tabs/cron-week-box.vue'
-import cronYearBox from '../tabs/cron-year-box.vue'
-import cronUtils from '../utils'
-export default defineComponent({
-	name: 'CronContent',
-	components: {
-		cronSecondBox,
-		cronMinuteBox,
-		cronHourBox,
-		cronDayBox,
-		cronMonthBox,
-		cronWeekBox,
-		cronYearBox
-	},
-	props: {
-		modelValue: {
-			type: String,
-			default: ''
-		},
-		disabled: {
-			type: Boolean
-		},
-		hideSecond: {
-			type: Boolean
-		},
-		hideYear: {
-			type: Boolean
-		},
-		remote: {
-			type: Function
-		}
-	},
-	emits: ['update:modelValue', 'change'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		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 tableConfig = reactive({
-			align: 'center',
-			columns: [
-				{ title: '秒', field: 'second', editRender: { name: '$input' } },
-				{ title: '分', field: 'minute', editRender: { name: '$input' } },
-				{ title: '时', field: 'hour', editRender: { name: '$input' } },
-				{ title: '日', field: 'day', editRender: { name: '$input' } },
-				{ title: '月', field: 'month', editRender: { name: '$input' } },
-				{ title: '周', field: 'week', editRender: { name: '$input' } },
-				{ title: '年', field: 'year', editRender: { name: '$input' } }
-			],
-			data: [],
-			editConfig: {
-				enable: !props.disabled
-			}
-		})
-		const preTimeList = ref('执行预览，会忽略年份参数。')
-		const errMessage = ref('')
-
-		const cronTabList = computed(() => {
-			let list = [
-				{ value: 'second', label: '秒' },
-				{ value: 'minute', label: '分' },
-				{ value: 'hour', label: '时' },
-				{ value: 'day', label: '日' },
-				{ value: 'month', label: '月' },
-				{ value: 'week', label: '周' },
-				{ value: 'year', label: '年' }
-			]
-			if (props.hideSecond) {
-				list = list.filter(item => !['second', 'year'].includes(item.value))
-			} else if (props.hideYear) {
-				list = list.filter(item => !['year'].includes(item.value))
-			}
-			return list
-		})
-		const cronValueInner = computed(() => {
-			let result = []
-			if (!props.hideSecond) {
-				result.push(second.value || '*')
-			}
-			result.push(minute.value || '*')
-			result.push(hour.value || '*')
-			result.push(day.value || '*')
-			result.push(month.value || '*')
-			result.push(week.value || '?')
-			if (!props.hideYear && !props.hideSecond) result.push(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 formatValue = () => {
-			let { modelValue, hideSecond } = props
-			if (!modelValue) return
-			const values = modelValue.split(' ').filter(item => !!item)
-			if (!values || values.length <= 0) return
-			let i = 0
-			if (!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]
-			assignTable()
-		}
-		const assignTable = () => {
-			tableConfig.data = [{ second: second.value, minute: minute.value, hour: hour.value, day: day.value, month: month.value, week: week.value, year: year.value }]
-		}
-		const calTriggerListInner = () => {
-			errMessage.value = ''
-			// 设置了回调函数
-			if (props.remote) {
-				props.remote(cronValueInner.value, +new Date(), v => {
-					preTimeList.value = v
-				})
-				return
-			}
-			try {
-				const format = 'yyyy-MM-dd hh:mm:ss'
-				const options = {
-					currentDate: $vUtils.toDateString(new Date(), format)
-				}
-				const iter = cronUtils.parse(cronValueNoYear.value, options)
-				const result = []
-				for (let i = 1; i <= 10; i++) {
-					result.push($vUtils.toDateString(new Date(iter.next()), format))
-				}
-				preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间'
-			} catch (e) {
-				errMessage.value = e
-			}
-		}
-		// Quartz 的规则：
-		// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
-		const convertWeekToQuartz = week => {
-			let convert = v => {
-				if (v === '0') {
-					return '1'
-				}
-				if (v === '1') {
-					return '0'
-				}
-				return (Number.parseInt(v) - 1).toString()
-			}
-			// 匹配示例 1-7 or 1/7
-			let patten1 = /^([0-7])([-/])([0-7])$/
-			// 匹配示例 1,4,7
-			let 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
-		}
-		const onTableHeaderClick = ({ column }) => {
-			activeKey.value = column.property
-		}
-		const onTableEditClosed = ({ row, column }) => {
-			second.value = row.second
-			minute.value = row.minute
-			hour.value = row.hour
-			day.value = row.day
-			month.value = row.month
-			week.value = row.week
-			year.value = row.year
-		}
-		const emitValue = value => {
-			emit('change', value)
-			emit('update:modelValue', value)
-		}
-
-		const calTriggerList = $vUtils.debounce(calTriggerListInner, 500)
-
-		watch(
-			() => props.modelValue,
-			nv => {
-				if (nv === cronValueInner.value) {
-					return
-				}
-				formatValue()
-			}
-		)
-		watch(
-			() => cronValueInner.value,
-			nv => {
-				calTriggerList()
-				emitValue(nv)
-				assignTable()
-			}
-		)
-
-		onBeforeMount(() => {
-			assignTable()
-			formatValue()
-			calTriggerListInner()
-		})
-
-		return {
-			activeKey,
-			cronTabList,
-			second,
-			minute,
-			hour,
-			day,
-			month,
-			week,
-			year,
-			tableConfig,
-			errMessage,
-			preTimeList,
-			onTableEditClosed,
-			onTableHeaderClick
-		}
-	}
-})
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-content">
+		<sh-tabs v-model="activeKey" size="small" :options="cronTabList" :is-content="false"></sh-tabs>
+		<template v-if="activeKey === 'second'">
+			<cronSecondBox v-model="second" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'minute'">
+			<cronMinuteBox v-model="minute" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'hour'">
+			<cronHourBox v-model="hour" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'day'">
+			<cronDayBox v-model="day" :week="week" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'month'">
+			<cronMonthBox v-model="month" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'week'">
+			<cronWeekBox v-model="week" :day="day" :disabled="disabled" />
+		</template>
+		<template v-else-if="activeKey === 'year'">
+			<cronYearBox v-model="year" :disabled="disabled" />
+		</template>
+		<!-- 执行时间预览 -->
+		<vxe-grid v-bind="tableConfig" @edit-closed="onTableEditClosed" @header-cell-click="onTableHeaderClick">
+			<template #bottom>
+				<!-- cron错误提示 -->
+				<sh-alert v-if="errMessage" type="error" show-icon>
+					<span>表达式错误，请检查</span>
+					<template #desc>{{ errMessage }}</template>
+				</sh-alert>
+				<template v-else>
+					<div class="cron-title">近十次执行时间（不含年）</div>
+					<vxe-textarea v-model="preTimeList" :rows="5" disabled />
+				</template>
+			</template>
+		</vxe-grid>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, reactive, watch, onBeforeMount } from 'vue'
+import cronSecondBox from '../tabs/cron-second-box.vue'
+import cronMinuteBox from '../tabs/cron-minute-box.vue'
+import cronHourBox from '../tabs/cron-hour-box.vue'
+import cronDayBox from '../tabs/cron-day-box.vue'
+import cronMonthBox from '../tabs/cron-month-box.vue'
+import cronWeekBox from '../tabs/cron-week-box.vue'
+import cronYearBox from '../tabs/cron-year-box.vue'
+import cronUtils from '../utils'
+export default defineComponent({
+	name: 'CronContent',
+	components: {
+		cronSecondBox,
+		cronMinuteBox,
+		cronHourBox,
+		cronDayBox,
+		cronMonthBox,
+		cronWeekBox,
+		cronYearBox
+	},
+	props: {
+		modelValue: {
+			type: String,
+			default: ''
+		},
+		disabled: {
+			type: Boolean
+		},
+		hideSecond: {
+			type: Boolean
+		},
+		hideYear: {
+			type: Boolean
+		},
+		remote: {
+			type: Function
+		}
+	},
+	emits: ['update:modelValue', 'change'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		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 tableConfig = reactive({
+			align: 'center',
+			columns: [
+				{ title: '秒', field: 'second', editRender: { name: '$input' } },
+				{ title: '分', field: 'minute', editRender: { name: '$input' } },
+				{ title: '时', field: 'hour', editRender: { name: '$input' } },
+				{ title: '日', field: 'day', editRender: { name: '$input' } },
+				{ title: '月', field: 'month', editRender: { name: '$input' } },
+				{ title: '周', field: 'week', editRender: { name: '$input' } },
+				{ title: '年', field: 'year', editRender: { name: '$input' } }
+			],
+			data: [],
+			editConfig: {
+				enable: !props.disabled
+			}
+		})
+		const preTimeList = ref('执行预览，会忽略年份参数。')
+		const errMessage = ref('')
+
+		const cronTabList = computed(() => {
+			let list = [
+				{ value: 'second', label: '秒' },
+				{ value: 'minute', label: '分' },
+				{ value: 'hour', label: '时' },
+				{ value: 'day', label: '日' },
+				{ value: 'month', label: '月' },
+				{ value: 'week', label: '周' },
+				{ value: 'year', label: '年' }
+			]
+			if (props.hideSecond) {
+				list = list.filter(item => !['second', 'year'].includes(item.value))
+			} else if (props.hideYear) {
+				list = list.filter(item => !['year'].includes(item.value))
+			}
+			return list
+		})
+		const cronValueInner = computed(() => {
+			let result = []
+			if (!props.hideSecond) {
+				result.push(second.value || '*')
+			}
+			result.push(minute.value || '*')
+			result.push(hour.value || '*')
+			result.push(day.value || '*')
+			result.push(month.value || '*')
+			result.push(week.value || '?')
+			if (!props.hideYear && !props.hideSecond) result.push(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 formatValue = () => {
+			let { modelValue, hideSecond } = props
+			if (!modelValue) return
+			const values = modelValue.split(' ').filter(item => !!item)
+			if (!values || values.length <= 0) return
+			let i = 0
+			if (!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]
+			assignTable()
+		}
+		const assignTable = () => {
+			tableConfig.data = [{ second: second.value, minute: minute.value, hour: hour.value, day: day.value, month: month.value, week: week.value, year: year.value }]
+		}
+		const calTriggerListInner = () => {
+			errMessage.value = ''
+			// 设置了回调函数
+			if (props.remote) {
+				props.remote(cronValueInner.value, +new Date(), v => {
+					preTimeList.value = v
+				})
+				return
+			}
+			try {
+				const format = 'yyyy-MM-dd hh:mm:ss'
+				const options = {
+					currentDate: $vUtils.toDateString(new Date(), format)
+				}
+				const iter = cronUtils.parse(cronValueNoYear.value, options)
+				const result = []
+				for (let i = 1; i <= 10; i++) {
+					result.push($vUtils.toDateString(new Date(iter.next()), format))
+				}
+				preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间'
+			} catch (e) {
+				errMessage.value = e
+			}
+		}
+		// Quartz 的规则：
+		// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
+		const convertWeekToQuartz = week => {
+			let convert = v => {
+				if (v === '0') {
+					return '1'
+				}
+				if (v === '1') {
+					return '0'
+				}
+				return (Number.parseInt(v) - 1).toString()
+			}
+			// 匹配示例 1-7 or 1/7
+			let patten1 = /^([0-7])([-/])([0-7])$/
+			// 匹配示例 1,4,7
+			let 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
+		}
+		const onTableHeaderClick = ({ column }) => {
+			activeKey.value = column.property
+		}
+		const onTableEditClosed = ({ row, column }) => {
+			second.value = row.second
+			minute.value = row.minute
+			hour.value = row.hour
+			day.value = row.day
+			month.value = row.month
+			week.value = row.week
+			year.value = row.year
+		}
+		const emitValue = value => {
+			emit('change', value)
+			emit('update:modelValue', value)
+		}
+
+		const calTriggerList = $vUtils.debounce(calTriggerListInner, 500)
+
+		watch(
+			() => props.modelValue,
+			nv => {
+				if (nv === cronValueInner.value) {
+					return
+				}
+				formatValue()
+			}
+		)
+		watch(
+			() => cronValueInner.value,
+			nv => {
+				calTriggerList()
+				emitValue(nv)
+				assignTable()
+			}
+		)
+
+		onBeforeMount(() => {
+			assignTable()
+			formatValue()
+			calTriggerListInner()
+		})
+
+		return {
+			activeKey,
+			cronTabList,
+			second,
+			minute,
+			hour,
+			day,
+			month,
+			week,
+			year,
+			tableConfig,
+			errMessage,
+			preTimeList,
+			onTableEditClosed,
+			onTableHeaderClick
+		}
+	}
+})
+</script>
+
+<style scoped></style>