sh-view 1.5.2

package/packages/components/index.js

@@ -0,0 +1,64 @@
+// 全局公共封装组件
+import ShCard from './global-components/sh-card'
+import ShCodeEditor from './global-components/sh-code-editor'
+import ShCorner from './global-components/sh-corner'
+import ShCountTo from './global-components/sh-count-to'
+import ShEmpty from './global-components/sh-empty'
+import ShHeader from './global-components/sh-header'
+import ShIcon from './global-components/sh-icon'
+import ShIvForm from './global-components/sh-iv-form'
+import ShLayout from './global-components/sh-layout'
+import ShLoading from './global-components/sh-loading'
+import ShNoticeBar from './global-components/sh-noticebar'
+import ShPreview from './global-components/sh-preview'
+import ShPullRefresh from './global-components/sh-pull-refresh'
+import ShResult from './global-components/sh-result'
+import ShSheet from './global-components/sh-sheet'
+import ShUpload from './global-components/sh-upload'
+import ShForm from './global-components/sh-vxe-form'
+import ShList from './global-components/sh-vxe-list'
+import ShModal from './global-components/sh-vxe-modal'
+import ShQuery from './global-components/sh-vxe-query'
+import ShTable from './global-components/sh-vxe-table'
+import ShToolbar from './global-components/sh-vxe-toolbar'
+import ShTree from './global-components/sh-vxe-tree'
+import ShWaterFall from './global-components/sh-water-fall'
+import ShWord from './global-components/sh-word'
+
+const components = {
+	ShCard,
+	ShCodeEditor,
+	ShCorner,
+	ShCountTo,
+	ShEmpty,
+	ShHeader,
+	ShIcon,
+	ShIvForm,
+	ShLayout,
+	ShLoading,
+	ShNoticeBar,
+	ShPreview,
+	ShPullRefresh,
+	ShResult,
+	ShSheet,
+	ShUpload,
+	ShForm,
+	ShList,
+	ShModal,
+	ShQuery,
+	ShTable,
+	ShToolbar,
+	ShTree,
+	ShWaterFall,
+	ShWord
+}
+
+const index = {
+	install: function (Vue) {
+		Object.keys(components).forEach(key => {
+			Vue.component(key, components[key])
+		})
+	}
+}
+
+export default index

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

@@ -0,0 +1,287 @@
+<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>

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

@@ -0,0 +1,45 @@
+.sh-cron-content {
+  .ivu-tabs{
+    .ivu-tabs-bar{
+      margin-bottom: 5px;
+    }
+  }
+  .sh-cron-config-list{
+    text-align: left;
+    margin: 0 10px 10px 10px;
+    .item {
+      margin-top: 5px;
+      display: flex;
+      align-items: center;
+      font-size: var(--font-size-base);
+      .choice{
+        padding: 5px 8px;
+        margin-right: 10px;
+      }
+      .cron-item-input{
+        width: 70px;
+        margin: 0 5px;
+      }
+      .list {
+      }
+      .list-check-item {
+        padding: 1px 3px;
+        width: 4em;
+        margin: 0;
+      }
+      .list-cn .list-check-item {
+        width: 5em;
+      }
+      .tip-info{
+        color: #999;
+      }
+    }
+  }
+  .cron-title{
+    font-weight: bold;
+    border-left: 3px solid var(--theme-color);
+    padding: 0 5px;
+    box-sizing: border-box;
+    margin: 10px 0;
+  }
+}

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

@@ -0,0 +1,67 @@
+<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>

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

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