sh-view 2.1.0 → 2.3.0

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

@@ -40,6 +40,7 @@
 </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'
@@ -48,7 +49,7 @@ 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 {
+export default defineComponent({
 	name: 'CronContent',
 	components: {
 		cronSecondBox,
@@ -78,39 +79,39 @@ export default {
 		}
 	},
 	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() {
+	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: '分' },
@@ -120,112 +121,82 @@ export default {
 				{ value: 'week', label: '周' },
 				{ value: 'year', label: '年' }
 			]
-			if (this.hideSecond) {
+			if (props.hideSecond) {
 				list = list.filter(item => !['second', 'year'].includes(item.value))
-			} else if (this.hideYear) {
+			} else if (props.hideYear) {
 				list = list.filter(item => !['year'].includes(item.value))
 			}
 			return list
-		},
-		cronValueInner() {
-			let { hideSecond, hideYear, second, minute, hour, day, month, week, year } = this
+		})
+		const cronValueInner = computed(() => {
 			let result = []
-			if (!hideSecond) {
-				result.push(second ? second : '*')
+			if (!props.hideSecond) {
+				result.push(second.value || '*')
 			}
-			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 : '*')
+			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(' ')
-		},
-		cronValueNoYear() {
-			const v = this.cronValueInner
-			if (this.hideYear || this.hideSecond) return v
+		})
+		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] = this.convertWeekToQuartz(vs[5])
+				vs[5] = 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
+		})
+
+		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) 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 (!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 (this.remote) {
-				this.remote(this.cronValueInner, +new Date(), v => {
-					this.preTimeList = v
+			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: this.$vUtils.toDateString(new Date(), format)
+					currentDate: $vUtils.toDateString(new Date(), format)
 				}
-				const iter = cronUtils.parse(this.cronValueNoYear, options)
+				const iter = cronUtils.parse(cronValueNoYear.value, options)
 				const result = []
 				for (let i = 1; i <= 10; i++) {
-					result.push(this.$vUtils.toDateString(new Date(iter.next()), format))
+					result.push($vUtils.toDateString(new Date(iter.next()), format))
 				}
-				this.preTimeList = result.length > 0 ? result.join('\n') : '无执行时间'
+				preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间'
 			} catch (e) {
-				this.errMessage = e
+				errMessage.value = e
 			}
-		},
+		}
 		// Quartz 的规则：
 		// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
-		convertWeekToQuartz(week) {
+		const convertWeekToQuartz = week => {
 			let convert = v => {
 				if (v === '0') {
 					return '1'
@@ -256,28 +227,68 @@ export default {
 					.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)
+		}
+		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;

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

@@ -1,67 +1,81 @@
-<template>
-	<sh-modal v-bind="modalConfig" @close="onModalClose" @confirm="onModalConfim">
-		<cron-content v-model="cronValue" :disabled="disabled"></cron-content>
-	</sh-modal>
-</template>
-
-<script>
-import cronContent from './components/cron-content.vue'
-export default {
-	name: 'ShCronModal',
-	components: {
-		cronContent
-	},
-	props: {
-		modelValue: {
-			type: String,
-			default: ''
-		},
-		visible: {
-			type: Boolean
-		},
-		disabled: {
-			type: Boolean
-		}
-	},
-	emits: ['update:modelValue', 'update:visible', 'submit'],
-	data() {
-		return {
-			cronValue: '',
-			modalConfig: {
-				loading: false,
-				width: '70%',
-				title: 'cron表达式',
-				visible: this.visible
-			}
-		}
-	},
-	watch: {
-		modelValue(nv) {
-			this.cronValue = this.modelValue
-		},
-		visible() {
-			this.modalConfig.visible = this.visible
-			this.cronValue = this.modelValue
-		}
-	},
-	methods: {
-		emitValue() {
-			this.$emit('update:modelValue', this.cronValue)
-			this.$emit('submit', this.cronValue)
-		},
-		// 提交
-		async onModalConfim() {
-			this.emitValue()
-			this.onModalClose()
-		},
-		// 关闭
-		onModalClose() {
-			this.$emit('update:visible', false)
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-@import './css/index.scss';
-</style>
+<template>
+	<sh-modal v-bind="modalConfig" @close="onModalClose" @confirm="onModalConfim">
+		<cron-content v-model="cronValue" :disabled="disabled"></cron-content>
+	</sh-modal>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, reactive, watch, onBeforeMount } from 'vue'
+import cronContent from './components/cron-content.vue'
+export default defineComponent({
+	name: 'ShCronModal',
+	components: {
+		cronContent
+	},
+	props: {
+		modelValue: {
+			type: String,
+			default: ''
+		},
+		visible: {
+			type: Boolean
+		},
+		disabled: {
+			type: Boolean
+		}
+	},
+	emits: ['update:modelValue', 'update:visible', 'submit'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const cronValue = ref('')
+		const modalConfig = reactive({
+			loading: false,
+			width: '70%',
+			title: 'cron表达式',
+			visible: props.visible
+		})
+
+		const emitValue = () => {
+			emit('update:modelValue', cronValue.value)
+			emit('submit', cronValue.value)
+		}
+		// 提交
+		const onModalConfim = () => {
+			emitValue()
+			onModalClose()
+		}
+		// 关闭
+		const onModalClose = () => {
+			emit('update:visible', false)
+		}
+
+		watch(
+			() => props.modelValue,
+			nv => {
+				cronValue.value = nv
+			}
+		)
+		watch(
+			() => props.visible,
+			nv => {
+				modalConfig.visible = nv
+				cronValue.value = props.modelValue
+			}
+		)
+
+		return {
+			modalConfig,
+			cronValue,
+			onModalClose,
+			onModalConfim
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+@import './css/index.scss';
+</style>

package/packages/components/other-components/sh-cron-modal/mixin/cron-emits.js

@@ -0,0 +1 @@
+export default ['update:modelValue', 'change']

package/packages/components/other-components/sh-cron-modal/mixin/cron-hooks.js

@@ -0,0 +1,179 @@
+import { computed, ref, reactive } from 'vue'
+
+const TypeEnum = {
+	unset: 'UNSET',
+	every: 'EVERY',
+	range: 'RANGE',
+	loop: 'LOOP',
+	work: 'WORK',
+	last: 'LAST',
+	specify: 'SPECIFY'
+}
+
+export default function (props, context, proxy, state) {
+	const { emit, slots } = context
+	const { $vUtils } = proxy
+
+	const type = ref(TypeEnum.every)
+	const defaultValue = ref(state.defaultValue)
+	const minValue = ref(state.minValue)
+	const maxValue = ref(state.maxValue)
+	const valueRange = reactive(state.valueRange)
+	const valueLoop = reactive(state.valueLoop)
+	const valueWork = ref(1)
+	const valueList = ref([])
+
+	const beforeRadioAttrs = computed(() => {
+		return {
+			class: ['choice'],
+			disabled: props.disabled
+		}
+	})
+	const inputNumberAttrs = computed(() => {
+		return {
+			class: ['cron-item-input'],
+			type: 'integer',
+			size: 'mini'
+		}
+	})
+	const typeRangeAttrs = computed(() => {
+		return {
+			...inputNumberAttrs.value,
+			disabled: type.value !== TypeEnum.range || props.disabled
+		}
+	})
+	const typeLoopAttrs = computed(() => {
+		return {
+			...inputNumberAttrs.value,
+			disabled: type.value !== TypeEnum.loop || props.disabled
+		}
+	})
+	const typeSpecifyAttrs = computed(() => {
+		return {
+			class: ['list-check-item'],
+			disabled: type.value !== TypeEnum.specify || props.disabled
+		}
+	})
+	const specifyRange = computed(() => {
+		let range = []
+		if (maxValue.value != null) {
+			for (let i = minValue.value; i <= maxValue.value; i++) {
+				range.push(i)
+			}
+		}
+		return range
+	})
+	// 根据不同的类型计算出的value
+	const computeValue = computed(() => {
+		let valueArray = []
+		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)
+				}
+				valueArray.push(valueList.value.join(','))
+				break
+			default:
+				valueArray.push(defaultValue.value)
+				break
+		}
+		return valueArray.length > 0 ? valueArray.join('') : defaultValue.value
+	})
+	const parseValue = value => {
+		if (value === computeValue.value) {
+			return
+		}
+		try {
+			if (!value || value === defaultValue.value) {
+				type.value = TypeEnum.every
+			} else if (value.indexOf('?') >= 0) {
+				type.value = TypeEnum.unset
+			} else if (value.indexOf('-') >= 0) {
+				type.value = TypeEnum.range
+				const values = value.split('-')
+				if (values.length >= 2) {
+					valueRange.start = parseInt(values[0])
+					valueRange.end = parseInt(values[1])
+				}
+			} else if (value.indexOf('/') >= 0) {
+				type.value = TypeEnum.loop
+				const values = value.split('/')
+				if (values.length >= 2) {
+					valueLoop.start = value[0] === '*' ? 0 : parseInt(values[0])
+					valueLoop.interval = parseInt(values[1])
+				}
+			} else if (value.indexOf('W') >= 0) {
+				type.value = TypeEnum.work
+				const values = value.split('W')
+				if (!values[0] && !isNaN(values[0])) {
+					valueWork.value = parseInt(values[0])
+				}
+			} else if (value.indexOf('L') >= 0) {
+				type.value = TypeEnum.last
+			} else if (value.indexOf(',') >= 0 || !isNaN(value)) {
+				type.value = TypeEnum.specify
+				valueList.value = value.split(',').map(item => parseInt(item))
+			} else {
+				type.value = TypeEnum.every
+			}
+		} catch (e) {
+			type.value = TypeEnum.every
+		}
+	}
+	const updateValue = value => {
+		emit('change', value)
+		emit('update:modelValue', value)
+	}
+
+	watch(
+		() => props.modelValue,
+		val => {
+			if (val !== computeValue.value) {
+				parseValue(val)
+			}
+		},
+		{ immediate: true }
+	)
+
+	watch(
+		() => computeValue.value,
+		val => {
+			updateValue(v)
+		}
+	)
+
+	return {
+		TypeEnum,
+		type,
+		valueRange,
+		valueLoop,
+		valueWork,
+		valueList,
+		specifyRange,
+		computeValue,
+		inputNumberAttrs,
+		beforeRadioAttrs,
+		typeRangeAttrs,
+		typeLoopAttrs,
+		typeSpecifyAttrs,
+		updateValue
+	}
+}