sh-view 2.1.0 → 2.2.0

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>

package/packages/components/other-components/sh-cron-modal/tabs/cron-minute-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: 'CronMinuteBox',
-	mixins: [cronMixin],
-	data() {
-		return {
-			defaultValue: '*',
-			minValue: 0,
-			maxValue: 59,
-			valueRange: { start: 0, end: 59 },
-			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: 'CronMinuteBox',
+	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: 59,
+			valueRange: { start: 0, end: 59 },
+			valueLoop: { start: 0, interval: 1 }
+		})
+
+		return {
+			...useCron
+		}
+	}
+})
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-cron-modal/tabs/cron-month-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: 'CronMonthBox',
-	mixins: [cronMixin],
-	data() {
-		return {
-			defaultValue: '*',
-			minValue: 1,
-			maxValue: 12,
-			valueRange: { start: 1, end: 12 },
-			valueLoop: { start: 1, 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 cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+export default defineComponent({
+	name: 'CronMonthBox',
+	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: 1,
+			maxValue: 12,
+			valueRange: { start: 1, end: 12 },
+			valueLoop: { start: 1, interval: 1 }
+		})
+
+		return {
+			...useCron
+		}
+	}
+})
+</script>
+
+<style scoped></style>