sh-view 2.0.8 → 2.2.0

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
+	}
+}

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

@@ -0,0 +1,9 @@
+export default {
+	modelValue: {
+		type: String,
+		default: '*'
+	},
+	disabled: {
+		type: Boolean
+	}
+}

package/packages/components/other-components/sh-cron-modal/tabs/cron-day-box.vue

@@ -1,92 +1,101 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
-				<span class="tip-info">日和周只能设置其中之一</span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每日</vxe-radio>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
-				<span> 日 至 </span>
-				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
-				<span> 日 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 从 </span>
-				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
-				<span> 日开始，间隔 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-				<span> 日 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.work" v-bind="beforeRadioAttrs">工作日</vxe-radio>
-				<span> 本月 </span>
-				<vxe-input v-model="valueWork" v-bind="typeWorkAttrs" />
-				<span> 日，最近的工作日 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.last" v-bind="beforeRadioAttrs">最后一日</vxe-radio>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
-				<div class="list">
-					<vxe-checkbox-group v-model="valueList">
-						<template v-for="i in specifyRange" :key="i">
-							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
-						</template>
-					</vxe-checkbox-group>
-				</div>
-			</div>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import cronMixin from '../mixin/cron-box'
-
-export default {
-	name: 'CronDayBox',
-	mixins: [cronMixin],
-	props: {
-		week: {
-			type: String,
-			default: '?'
-		}
-	},
-	data() {
-		return {
-			defaultValue: '*',
-			valueWork: 1,
-			minValue: 1,
-			maxValue: 31,
-			valueRange: { start: 1, end: 31 },
-			valueLoop: { start: 1, interval: 1 }
-		}
-	},
-	computed: {
-		disabledChoice() {
-			return (this.week && this.week !== '?') || this.disabled
-		},
-		typeWorkAttrs() {
-			return {
-				...this.inputNumberAttrs,
-				disabled: this.type !== this.TypeEnum.work || this.disabled || this.disabledChoice
-			}
-		}
-	},
-	watch: {
-		week() {
-			this.updateValue(this.disabledChoice ? '?' : this.computeValue)
-		}
-	},
-	methods: {}
-}
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-config-list">
+		<vxe-radio-group v-model="type">
+			<div class="item">
+				<vxe-radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
+				<span class="tip-info">日和周只能设置其中之一</span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每日</vxe-radio>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
+				<span> 日 至 </span>
+				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
+				<span> 日 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 从 </span>
+				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
+				<span> 日开始，间隔 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+				<span> 日 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.work" v-bind="beforeRadioAttrs">工作日</vxe-radio>
+				<span> 本月 </span>
+				<vxe-input v-model="valueWork" v-bind="typeWorkAttrs" />
+				<span> 日，最近的工作日 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.last" v-bind="beforeRadioAttrs">最后一日</vxe-radio>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
+				<div class="list">
+					<vxe-checkbox-group v-model="valueList">
+						<template v-for="i in specifyRange" :key="i">
+							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
+						</template>
+					</vxe-checkbox-group>
+				</div>
+			</div>
+		</vxe-radio-group>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch, emits } from 'vue'
+import cronProps from '../mixin/cron-props'
+import cronEmits from '../mixin/cron-emits'
+import cronHooks from '../mixin/cron-hooks'
+export default defineComponent({
+	name: 'CronDayBox',
+	props: {
+		...cronProps,
+		week: {
+			type: String,
+			default: '?'
+		}
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 1,
+			maxValue: 31,
+			valueRange: { start: 1, end: 31 },
+			valueLoop: { start: 1, interval: 1 }
+		})
+
+		const disabledChoice = computed(() => (props.week && props.week !== '?') || props.disabled)
+		const typeWorkAttrs = computed(() => {
+			return {
+				...useCron.inputNumberAttrs,
+				disabled: useCron.type.value !== useCron.TypeEnum.work || props.disabled || disabledChoice.value
+			}
+		})
+
+		watch(
+			() => props.week,
+			() => {
+				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
+			}
+		)
+
+		return {
+			...useCron,
+			typeWorkAttrs
+		}
+	}
+})
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-cron-modal/tabs/cron-hour-box.vue

@@ -1,56 +1,68 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每时</vxe-radio>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
-				<span> 时 至 </span>
-				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
-				<span> 时 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 从 </span>
-				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
-				<span> 时开始，间隔 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-				<span> 时 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
-				<div class="list">
-					<vxe-checkbox-group v-model="valueList">
-						<template v-for="i in specifyRange" :key="i">
-							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
-						</template>
-					</vxe-checkbox-group>
-				</div>
-			</div>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import cronMixin from '../mixin/cron-box'
-
-export default {
-	name: 'CronHourBox',
-	mixins: [cronMixin],
-	data() {
-		return {
-			defaultValue: '*',
-			minValue: 0,
-			maxValue: 23,
-			valueRange: { start: 0, end: 23 },
-			valueLoop: { start: 0, interval: 1 }
-		}
-	},
-	methods: {}
-}
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-config-list">
+		<vxe-radio-group v-model="type">
+			<div class="item">
+				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每时</vxe-radio>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
+				<span> 时 至 </span>
+				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
+				<span> 时 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 从 </span>
+				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
+				<span> 时开始，间隔 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+				<span> 时 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
+				<div class="list">
+					<vxe-checkbox-group v-model="valueList">
+						<template v-for="i in specifyRange" :key="i">
+							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
+						</template>
+					</vxe-checkbox-group>
+				</div>
+			</div>
+		</vxe-radio-group>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
+import cronProps from '../mixin/cron-props'
+import cronEmits from '../mixin/cron-emits'
+import cronHooks from '../mixin/cron-hooks'
+export default defineComponent({
+	name: 'CronHourBox',
+	props: {
+		...cronProps
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 0,
+			maxValue: 23,
+			valueRange: { start: 0, end: 23 },
+			valueLoop: { start: 0, interval: 1 }
+		})
+
+		return {
+			...useCron
+		}
+	}
+})
+</script>
+
+<style scoped></style>