sh-view 2.1.0 → 2.3.0

package/packages/components/other-components/sh-cron-modal/tabs/cron-second-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: 'CronSecondBox',
-	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 cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+export default defineComponent({
+	name: 'CronSecondBox',
+	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-week-box.vue

@@ -1,115 +1,126 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
-				<span class="tip-info">日和周只能设置其中之一</span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-				<span> 至 </span>
-				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
-				<span> 至 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-			</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'
-
-const WEEK_MAP_EN = {
-	1: 'SUN',
-	2: 'MON',
-	3: 'TUE',
-	4: 'WED',
-	5: 'THU',
-	6: 'FRI',
-	7: 'SAT'
-}
-
-const WEEK_MAP_CN = {
-	1: '周日',
-	2: '周一',
-	3: '周二',
-	4: '周三',
-	5: '周四',
-	6: '周五',
-	7: '周六'
-}
-
-export default {
-	name: 'CronWeekBox',
-	mixins: [cronMixin],
-	props: {
-		day: {
-			type: String,
-			default: '*'
-		}
-	},
-	data() {
-		return {
-			defaultValue: '*',
-			valueWork: 1,
-			minValue: 1,
-			maxValue: 7,
-			valueRange: { start: 1, end: 7 },
-			valueLoop: { start: 2, interval: 1 }
-		}
-	},
-	computed: {
-		disabledChoice() {
-			return (this.day && this.day !== '?') || this.disabled
-		},
-		weekOptions() {
-			let options = []
-			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
-				let weekName = WEEK_MAP_CN[weekKey]
-				options.push({
-					value: Number.parseInt(weekKey),
-					label: weekName
-				})
-			}
-			return options
-		},
-		typeRangeSelectAttrs() {
-			return {
-				class: ['cron-item-input'],
-				disabled: this.typeRangeAttrs.disabled
-			}
-		},
-		typeLoopSelectAttrs() {
-			return {
-				class: ['cron-item-input'],
-				disabled: this.typeLoopAttrs.disabled
-			}
-		}
-	},
-	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 :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
+				<span class="tip-info">日和周只能设置其中之一</span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+				<span> 至 </span>
+				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
+				<span> 至 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+			</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'
+emits: cronEmits,
+import cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+const WEEK_MAP_EN = {
+	1: 'SUN',
+	2: 'MON',
+	3: 'TUE',
+	4: 'WED',
+	5: 'THU',
+	6: 'FRI',
+	7: 'SAT'
+}
+const WEEK_MAP_CN = {
+	1: '周日',
+	2: '周一',
+	3: '周二',
+	4: '周三',
+	5: '周四',
+	6: '周五',
+	7: '周六'
+}
+export default defineComponent({
+	name: 'CronWeekBox',
+	props: {
+		...cronProps,
+		day: {
+			type: String,
+			default: '*'
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 1,
+			maxValue: 7,
+			valueRange: { start: 1, end: 7 },
+			valueLoop: { start: 2, interval: 1 }
+		})
+
+		const disabledChoice = computed(() => {
+			return (props.day && props.day !== '?') || props.disabled
+		})
+		const weekOptions = computed(() => {
+			let options = []
+			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
+				let weekName = WEEK_MAP_CN[weekKey]
+				options.push({
+					value: Number.parseInt(weekKey),
+					label: weekName
+				})
+			}
+			return options
+		})
+		const typeRangeSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeRangeAttrs.value.disabled
+			}
+		})
+		const typeLoopSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeLoopAttrs.value.disabled
+			}
+		})
+
+		watch(
+			() => props.day,
+			() => {
+				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
+			}
+		)
+
+		return {
+			...useCron,
+			weekOptions,
+			typeRangeSelectAttrs,
+			typeLoopSelectAttrs
+		}
+	}
+})
+</script>
+
+<style scoped></style>

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

@@ -1,46 +1,59 @@
-<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>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import cronMixin from '../mixin/cron-box'
-
-const nowYear = new Date().getFullYear()
-export default {
-	name: 'CronYearBox',
-	mixins: [cronMixin],
-	data() {
-		return {
-			defaultValue: '*',
-			minValue: 0,
-			valueRange: { start: nowYear, end: nowYear + 100 },
-			valueLoop: { start: nowYear, 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>
+		</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: 'CronYearBox',
+	props: {
+		...cronProps
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const nowYear = new Date().getFullYear()
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 0,
+			valueRange: { start: nowYear, end: nowYear + 100 },
+			valueLoop: { start: nowYear, interval: 1 }
+		})
+
+		return {
+			...useCron
+		}
+	}
+})
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-menu/index.vue

@@ -9,17 +9,13 @@
 </template>
 
 <script>
+import { defineComponent, computed, provide, ref, getCurrentInstance, watch, onMounted } from 'vue'
 import menuGroupContent from './menu-group-content.vue'
-export default {
+export default defineComponent({
 	name: 'ShMenu',
 	components: {
 		menuGroupContent
 	},
-	provide() {
-		return {
-			MenuInstance: this
-		}
-	},
 	props: {
 		modelValue: {
 			type: String
@@ -60,72 +56,89 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'change', 'expand'],
-	data() {
-		return {
-			activeName: this.modelValue,
-			activeNames: [],
-			openedNames: []
-		}
-	},
-	computed: {
-		classes() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const activeName = ref(props.modelValue)
+		const activeNames = ref([])
+		const openedNames = ref([])
+
+		const classes = computed(() => {
 			return {
-				theme: this.theme,
-				fix: this.fix,
-				collapsed: this.collapsed,
-				[`${this.mode}`]: this.mode
+				theme: props.theme,
+				fix: props.fix,
+				collapsed: props.collapsed,
+				[`${props.mode}`]: props.mode
 			}
-		}
-	},
-	watch: {
-		modelValue(to, from) {
-			this.resetMenu()
-		}
-	},
-	mounted() {
-		this.resetMenu()
-	},
-	methods: {
+		})
+
 		// 重新渲染菜单
-		resetMenu() {
-			this.activeName = this.modelValue
-			this.resetExpand(this.activeName, true)
-		},
-		resetExpand(menuName, mount) {
-			let activeNames = []
-			let parentTree = this.$vUtils.searchTree(this.options, item => item.name === menuName)
-			this.$vUtils.eachTree(parentTree, item => {
-				activeNames.push(item.name)
+		const resetMenu = () => {
+			activeName.value = props.modelValue
+			resetExpand(activeName.value, true)
+		}
+		const resetExpand = (menuName, mount) => {
+			let setActiveNames = []
+			let parentTree = $vUtils.searchTree(props.options, item => item.name === menuName)
+			$vUtils.eachTree(parentTree, item => {
+				setActiveNames.push(item.name)
 			})
 			if (mount) {
-				this.activeNames = activeNames
-				if (this.collapsed || this.mode !== 'vertical') return
+				activeNames.value = setActiveNames
+				if (props.collapsed || props.mode !== 'vertical') return
 			}
 			// 过滤掉所有子节点
-			let menuIndex = activeNames.findIndex(item => item === menuName)
-			let parentNames = activeNames.filter((item, itemIndex) => menuIndex >= itemIndex)
-			if (!this.accordion) parentNames = Array.from(new Set(this.openedNames.concat(parentNames)))
-			this.openedNames = parentNames
-		},
-		onMenuSelect(menu) {
-			this.$emit('update:modelValue', menu.name)
-			this.$emit('change', menu)
-			this.handleOut()
-		},
-		onMenuExpand(expand, menu) {
-			this.$emit('expand', expand, menu)
+			let menuIndex = setActiveNames.findIndex(item => item === menuName)
+			let parentNames = setActiveNames.filter((item, itemIndex) => menuIndex >= itemIndex)
+			if (!props.accordion) parentNames = Array.from(new Set(openedNames.value.concat(parentNames)))
+			openedNames.value = parentNames
+		}
+		const onMenuSelect = menu => {
+			emit('update:modelValue', menu.name)
+			emit('change', menu)
+			handleOut()
+		}
+		const onMenuExpand = (expand, menu) => {
+			emit('expand', expand, menu)
 			if (!expand) {
-				this.openedNames = this.openedNames.filter(name => name !== menu.name)
+				openedNames.value = openedNames.value.filter(name => name !== menu.name)
 				return
 			}
-			this.resetExpand(menu.name)
-		},
-		handleOut() {
-			if (!this.collapsed && this.mode === 'vertical') return
-			this.openedNames = []
+			resetExpand(menu.name)
+		}
+		const handleOut = () => {
+			if (!props.collapsed && props.mode === 'vertical') return
+			openedNames.value = []
+		}
+
+		provide('MenuInstance', {
+			...props,
+			activeName,
+			activeNames,
+			openedNames,
+			onMenuSelect,
+			onMenuExpand
+		})
+
+		watch(
+			() => props.modelValue,
+			() => {
+				resetMenu()
+			}
+		)
+
+		onMounted(() => {
+			resetMenu()
+		})
+
+		return {
+			classes,
+			handleOut
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">