sh-view 2.0.8 → 2.2.0

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

@@ -1,287 +1,294 @@
-<template>
-	<div class="sh-cron-content">
-		<Tabs v-model="activeKey" :size="`small`">
-			<template v-for="tab in cronTabList" :key="tab.name">
-				<TabPane v-bind="tab"></TabPane>
-			</template>
-		</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错误提示 -->
-				<Alert v-if="errMessage" type="error" show-icon>
-					<span>表达式错误，请检查</span>
-					<template #desc>{{ errMessage }}</template>
-				</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 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 {
-	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'],
-	data() {
-		return {
-			activeKey: this.hideSecond ? 'minute' : 'second',
-			second: '*',
-			minute: '*',
-			hour: '*',
-			day: '*',
-			month: '*',
-			week: '?',
-			year: '*',
-			tableConfig: {
-				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: !this.disabled
-				}
-			},
-			preTimeList: '执行预览，会忽略年份参数。',
-			errMessage: '',
-			calTriggerList: this.$vUtils.debounce(this.calTriggerListInner, 500)
-		}
-	},
-	computed: {
-		cronTabList() {
-			let list = [
-				{ name: 'second', label: '秒' },
-				{ name: 'minute', label: '分' },
-				{ name: 'hour', label: '时' },
-				{ name: 'day', label: '日' },
-				{ name: 'month', label: '月' },
-				{ name: 'week', label: '周' },
-				{ name: 'year', label: '年' }
-			]
-			if (this.hideSecond) {
-				list = list.filter(item => !['second', 'year'].includes(item.name))
-			} else if (this.hideYear) {
-				list = list.filter(item => !['year'].includes(item.name))
-			}
-			return list
-		},
-		cronValueInner() {
-			let { hideSecond, hideYear, second, minute, hour, day, month, week, year } = this
-			let result = []
-			if (!hideSecond) {
-				result.push(second ? second : '*')
-			}
-			result.push(minute ? minute : '*')
-			result.push(hour ? hour : '*')
-			result.push(day ? day : '*')
-			result.push(month ? month : '*')
-			result.push(week ? week : '?')
-			if (!hideYear && !hideSecond) result.push(year ? year : '*')
-			return result.join(' ')
-		},
-		cronValueNoYear() {
-			const v = this.cronValueInner
-			if (this.hideYear || this.hideSecond) return v
-			const vs = v.split(' ')
-			if (vs.length >= 6) {
-				// 转成 Quartz 的规则
-				vs[5] = this.convertWeekToQuartz(vs[5])
-			}
-			return vs.slice(0, vs.length - 1).join(' ')
-		}
-	},
-	watch: {
-		modelValue(nv) {
-			if (nv === this.cronValueInner) {
-				return
-			}
-			this.formatValue()
-		},
-		cronValueInner(nv) {
-			this.calTriggerList()
-			this.emitValue(nv)
-			this.assignTable()
-		}
-	},
-	created() {
-		this.assignTable()
-		this.formatValue()
-		this.calTriggerListInner()
-	},
-	methods: {
-		formatValue() {
-			let { modelValue, hideSecond } = this
-			if (!modelValue) return
-			const values = modelValue.split(' ').filter(item => !!item)
-			if (!values || values.length <= 0) return
-			let i = 0
-			if (!hideSecond) this.second = values[i++]
-			if (values.length > i) this.minute = values[i++]
-			if (values.length > i) this.hour = values[i++]
-			if (values.length > i) this.day = values[i++]
-			if (values.length > i) this.month = values[i++]
-			if (values.length > i) this.week = values[i++]
-			if (values.length > i) this.year = values[i]
-			this.assignTable()
-		},
-		assignTable() {
-			this.tableConfig.data = [
-				{
-					second: this.second,
-					minute: this.minute,
-					hour: this.hour,
-					day: this.day,
-					month: this.month,
-					week: this.week,
-					year: this.year
-				}
-			]
-		},
-		calTriggerListInner() {
-			this.errMessage = ''
-			// 设置了回调函数
-			if (this.remote) {
-				this.remote(this.cronValueInner, +new Date(), v => {
-					this.preTimeList = v
-				})
-				return
-			}
-			try {
-				const format = 'yyyy-MM-dd hh:mm:ss'
-				const options = {
-					currentDate: this.$vUtils.toDateString(new Date(), format)
-				}
-				const iter = cronUtils.parse(this.cronValueNoYear, options)
-				const result = []
-				for (let i = 1; i <= 10; i++) {
-					result.push(this.$vUtils.toDateString(new Date(iter.next()), format))
-				}
-				this.preTimeList = result.length > 0 ? result.join('\n') : '无执行时间'
-			} catch (e) {
-				this.errMessage = e
-			}
-		},
-		// Quartz 的规则：
-		// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
-		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
-		},
-		onTableHeaderClick({ column }) {
-			this.activeKey = column.property
-		},
-		onTableEditClosed({ row, column }) {
-			this.second = row.second
-			this.minute = row.minute
-			this.hour = row.hour
-			this.day = row.day
-			this.month = row.month
-			this.week = row.week
-			this.year = row.year
-		},
-		onInputCronBlur(event) {
-			this.emitValue(event.target.value)
-		},
-		emitValue(value) {
-			this.$emit('change', value)
-			this.$emit('update:modelValue', value)
-		}
-	}
-}
-</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>

package/packages/components/other-components/sh-cron-modal/css/index.scss

@@ -1,9 +1,4 @@
 .sh-cron-content {
-  .ivu-tabs{
-    .ivu-tabs-bar{
-      margin-bottom: 5px;
-    }
-  }
   .sh-cron-config-list{
     text-align: left;
     margin: 0 10px 10px 10px;