sh-view 2.8.0 → 2.8.2

package/packages/components/sh-date/index.vue

@@ -1,301 +1,301 @@
-<template>
-	<div class="sh-date">
-		<template v-if="range">
-			<vxe-pulldown v-model="pulldownValue" v-bind="pulldownConfig" @hide-panel="onHidePanel">
-				<template #default>
-					<div class="sh-date-range-input" @click="onRangeFocus">
-						<input class="vxe-input vxe-input--inner" v-bind="startInputConfig" />
-						<span>{{ separator }}</span>
-						<input class="vxe-input vxe-input--inner" v-bind="endInputConfig" />
-						<span class="sh-date-range-suffix sh-date-clear" @click.stop="onRangeClear"><i class="vxe-icon-error-circle-fill"></i></span>
-						<span class="sh-date-range-suffix"><i class="vxe-icon-calendar"></i></span>
-					</div>
-				</template>
-				<template #dropdown>
-					<div class="sh-date-content">
-						<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig" @change="onCalendarChange($event, 1)"></sh-calendar>
-						<div style="min-width: 10px"></div>
-						<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig" @change="onCalendarChange($event, 2)"></sh-calendar>
-					</div>
-				</template>
-			</vxe-pulldown>
-		</template>
-		<template v-else>
-			<vxe-input
-				v-model="inputValue"
-				v-bind="inputConfig"
-				@input="dispatch('input', $event)"
-				@change="dispatch('change', $event)"
-				@keydown="dispatch('keydown', $event)"
-				@keyup="dispatch('keyup', $event)"
-				@click="dispatch('click', $event)"
-				@focus="dispatch('focus', $event)"
-				@blur="dispatch('blur', $event)"
-				@clear="dispatch('clear', $event)"
-				@search-click="dispatch('search-click', $event)"
-				@toggle-visible="dispatch('toggle-visible', $event)"
-				@prefix-click="dispatch('prefix-click', $event)"
-				@suffix-click="dispatch('suffix-click', $event)"
-				@date-prev="dispatch('date-prev', $event)"
-				@date-today="dispatch('date-today', $event)"
-				@date-next="dispatch('date-next', $event)"></vxe-input>
-		</template>
-	</div>
-</template>
-
-<script>
-// 记录自定义参数,传给vxe要过滤掉
-let omitProps = ['range', 'separator', 'startPlaceholder', 'endPlaceholder', 'pulldown']
-import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, watch } from 'vue'
-export default defineComponent({
-	name: 'ShDate',
-	props: {
-		modelValue: [String, Number, Date, Array],
-		type: { type: String, default: 'date' },
-		clearable: { type: Boolean },
-		readonly: Boolean,
-		disabled: Boolean,
-		placeholder: String,
-		className: String,
-		size: String,
-		multiple: Boolean,
-		// date、week、month、quarter、year
-		startDate: { type: [String, Number, Date] },
-		endDate: { type: [String, Number, Date] },
-		minDate: [String, Number, Date],
-		maxDate: [String, Number, Date],
-		startDay: { type: [String, Number] },
-		labelFormat: { type: String, default: 'yyyy-MM-dd' },
-		valueFormat: { type: String, default: 'yyyy-MM-dd' },
-		editable: { type: Boolean, default: true },
-		festivalMethod: { type: Function },
-		disabledMethod: { type: Function },
-		// week
-		selectDay: { type: [String, Number] },
-		prefixIcon: String,
-		suffixIcon: String,
-		placement: String,
-		transfer: Boolean,
-		// 个性化参数
-		range: Boolean,
-		rangeFormat: String,
-		autoBlur: { type: Boolean, default: true },
-		separator: { type: String, default: '至' },
-		startPlaceholder: { type: String, default: '起始日期' },
-		endPlaceholder: { type: String, default: '截止日期' },
-		pulldown: Object
-	},
-	emits: [
-		'update:modelValue',
-		'focus',
-		'change',
-		'blur',
-		'input',
-		'keydown',
-		'keyup',
-		'click',
-		'clear',
-		'search-click',
-		'toggle-visible',
-		'prefix-click',
-		'suffix-click',
-		'date-prev',
-		'date-today',
-		'date-next'
-	],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const pulldownValue = ref(false)
-		const inputValue = ref(props.modelValue)
-		const rangeValue = ref(props.modelValue || [])
-
-		const inputConfig = computed(() => {
-			let defaultProps = {}
-			let vxeProps = $vUtils.omit(props, (val, key) => {
-				return omitProps.includes(key) || $vUtils.isNone(val)
-			})
-			let shProps = {}
-			return Object.assign(defaultProps, vxeProps, shProps)
-		})
-		const pulldownConfig = computed(() => {
-			return Object.assign({ transfer: true }, props.pulldown)
-		})
-		const calendarFormat = computed(() => {
-			if (props.rangeFormat) return props.rangeFormat
-			else if (props.type === 'month') return 'yyyy-MM'
-			else if (props.type === 'year') return 'yyyy'
-			return props.valueFormat
-		})
-		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
-		const startInputConfig = computed(() => {
-			let startValue = rangeValue.value[0] || ''
-			let startLabel = $vUtils.toDateString(startValue, calendarFormat.value)
-			return { ...rangeInputConfig.value, value: startLabel, placeholder: props.startPlaceholder }
-		})
-		const endInputConfig = computed(() => {
-			let endValue = rangeValue.value[1] || ''
-			let endLabel = $vUtils.toDateString(endValue, calendarFormat.value)
-			return { ...rangeInputConfig.value, value: endLabel, placeholder: props.endPlaceholder }
-		})
-		const calendarConfig = computed(() => {
-			return {
-				pulldown: true,
-				style: { height: '100%' },
-				align: 'center',
-				valueFormat: calendarFormat.value,
-				type: props.type
-			}
-		})
-		const startCalendarConfig = computed(() => {
-			let startValue = rangeValue.value[0] || ''
-			return {
-				...calendarConfig.value,
-				modelValue: startValue,
-				disabledMethod: ({ date, viewType }) => {
-					let endTime = rangeValue.value[1]
-					let { done, time } = $vUtils.getDateDiff(endTime, date)
-					return done
-				}
-			}
-		})
-		const endCalendarConfig = computed(() => {
-			let endValue = rangeValue.value[1] || ''
-			return {
-				...calendarConfig.value,
-				modelValue: endValue,
-				disabledMethod: ({ date, viewType }) => {
-					let startTime = rangeValue.value[0]
-					let { done, time } = $vUtils.getDateDiff(startTime, date)
-					return startTime ? !done : false
-				}
-			}
-		})
-
-		const onRangeFocus = async e => {
-			pulldownValue.value = !pulldownValue.value
-			if (pulldownValue.value) {
-				dispatch('focus', e)
-			}
-		}
-		const onRangeClear = () => {
-			pulldownValue.value = false
-			rangeValue.value = []
-			onHidePanel()
-		}
-		const onHidePanel = () => {
-			dispatch('value')
-			dispatch('change')
-			dispatch('blur')
-		}
-
-		const onCalendarChange = (date, type) => {
-			let valueList = rangeValue.value.filter(_ => _)
-			if (props.autoBlur && valueList.length === 2) {
-				pulldownValue.value = false
-				onHidePanel()
-			}
-		}
-
-		// 回调事件
-		const dispatch = (code, params) => {
-			if (props.range) {
-				let formarValue = rangeValue.value.map(item => $vUtils.toDateString(item, calendarFormat.value))
-				if (code === 'value') {
-					emit('update:modelValue', formarValue)
-				} else {
-					emit(code, { value: formarValue, params })
-				}
-			} else {
-				if (code === 'change') {
-					emit('update:modelValue', params.value)
-				}
-				emit(code, params)
-			}
-		}
-
-		watch(
-			() => props.modelValue,
-			(value, oldValue) => {
-				if (props.range) {
-					rangeValue.value = value
-				} else {
-					inputValue.value = value
-				}
-			}
-		)
-
-		return {
-			pulldownValue,
-			inputValue,
-			rangeValue,
-			inputConfig,
-			pulldownConfig,
-			startInputConfig,
-			endInputConfig,
-			startCalendarConfig,
-			endCalendarConfig,
-			onRangeFocus,
-			onHidePanel,
-			onRangeClear,
-			onCalendarChange,
-			dispatch
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-date {
-	display: inline-block;
-	position: relative;
-}
-.sh-date-range-input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	border-radius: var(--vxe-border-radius);
-	color: var(--vxe-font-color);
-	border: 1px solid var(--vxe-input-border-color);
-	background-color: var(--vxe-input-background-color);
-	box-shadow: none;
-	&:hover {
-		.sh-date-clear {
-			display: flex;
-		}
-	}
-	input {
-		width: 100%;
-		border: none;
-		color: inherit;
-		text-align: center;
-	}
-	.sh-date-range-suffix {
-		color: var(--vxe-table-column-icon-border-color);
-		height: 100%;
-		display: inline-flex;
-		margin-right: 8px;
-	}
-	.sh-date-clear {
-		cursor: pointer;
-		display: none;
-		position: absolute;
-		right: 0;
-		height: 100%;
-		justify-content: center;
-		align-items: center;
-		&:hover {
-			color: inherit;
-		}
-	}
-}
-.sh-date-content {
-	display: flex;
-	justify-content: space-between;
-	padding: 12px;
-	width: 600px;
-	max-width: 100%;
-}
-</style>
+<template>
+	<div class="sh-date">
+		<template v-if="range">
+			<vxe-pulldown v-model="pulldownValue" v-bind="pulldownConfig" @hide-panel="onHidePanel">
+				<template #default>
+					<div class="sh-date-range-input" @click="onRangeFocus">
+						<input class="vxe-input vxe-input--inner" v-bind="startInputConfig" />
+						<span>{{ separator }}</span>
+						<input class="vxe-input vxe-input--inner" v-bind="endInputConfig" />
+						<span class="sh-date-range-suffix sh-date-clear" @click.stop="onRangeClear"><i class="vxe-icon-error-circle-fill"></i></span>
+						<span class="sh-date-range-suffix"><i class="vxe-icon-calendar"></i></span>
+					</div>
+				</template>
+				<template #dropdown>
+					<div class="sh-date-content">
+						<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig" @change="onCalendarChange($event, 1)"></sh-calendar>
+						<div style="min-width: 10px"></div>
+						<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig" @change="onCalendarChange($event, 2)"></sh-calendar>
+					</div>
+				</template>
+			</vxe-pulldown>
+		</template>
+		<template v-else>
+			<vxe-input
+				v-model="inputValue"
+				v-bind="inputConfig"
+				@input="dispatch('input', $event)"
+				@change="dispatch('change', $event)"
+				@keydown="dispatch('keydown', $event)"
+				@keyup="dispatch('keyup', $event)"
+				@click="dispatch('click', $event)"
+				@focus="dispatch('focus', $event)"
+				@blur="dispatch('blur', $event)"
+				@clear="dispatch('clear', $event)"
+				@search-click="dispatch('search-click', $event)"
+				@toggle-visible="dispatch('toggle-visible', $event)"
+				@prefix-click="dispatch('prefix-click', $event)"
+				@suffix-click="dispatch('suffix-click', $event)"
+				@date-prev="dispatch('date-prev', $event)"
+				@date-today="dispatch('date-today', $event)"
+				@date-next="dispatch('date-next', $event)"></vxe-input>
+		</template>
+	</div>
+</template>
+
+<script>
+// 记录自定义参数,传给vxe要过滤掉
+let omitProps = ['range', 'separator', 'startPlaceholder', 'endPlaceholder', 'pulldown']
+import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, watch } from 'vue'
+export default defineComponent({
+	name: 'ShDate',
+	props: {
+		modelValue: [String, Number, Date, Array],
+		type: { type: String, default: 'date' },
+		clearable: { type: Boolean },
+		readonly: Boolean,
+		disabled: Boolean,
+		placeholder: String,
+		className: String,
+		size: String,
+		multiple: Boolean,
+		// date、week、month、quarter、year
+		startDate: { type: [String, Number, Date] },
+		endDate: { type: [String, Number, Date] },
+		minDate: [String, Number, Date],
+		maxDate: [String, Number, Date],
+		startDay: { type: [String, Number] },
+		labelFormat: { type: String, default: 'yyyy-MM-dd' },
+		valueFormat: { type: String, default: 'yyyy-MM-dd' },
+		editable: { type: Boolean, default: true },
+		festivalMethod: { type: Function },
+		disabledMethod: { type: Function },
+		// week
+		selectDay: { type: [String, Number] },
+		prefixIcon: String,
+		suffixIcon: String,
+		placement: String,
+		transfer: Boolean,
+		// 个性化参数
+		range: Boolean,
+		rangeFormat: String,
+		autoBlur: { type: Boolean, default: true },
+		separator: { type: String, default: '至' },
+		startPlaceholder: { type: String, default: '起始日期' },
+		endPlaceholder: { type: String, default: '截止日期' },
+		pulldown: Object
+	},
+	emits: [
+		'update:modelValue',
+		'focus',
+		'change',
+		'blur',
+		'input',
+		'keydown',
+		'keyup',
+		'click',
+		'clear',
+		'search-click',
+		'toggle-visible',
+		'prefix-click',
+		'suffix-click',
+		'date-prev',
+		'date-today',
+		'date-next'
+	],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const pulldownValue = ref(false)
+		const inputValue = ref(props.modelValue)
+		const rangeValue = ref(props.modelValue || [])
+
+		const inputConfig = computed(() => {
+			let defaultProps = {}
+			let vxeProps = $vUtils.omit(props, (val, key) => {
+				return omitProps.includes(key) || $vUtils.isNone(val)
+			})
+			let shProps = {}
+			return Object.assign(defaultProps, vxeProps, shProps)
+		})
+		const pulldownConfig = computed(() => {
+			return Object.assign({ transfer: true }, props.pulldown)
+		})
+		const calendarFormat = computed(() => {
+			if (props.rangeFormat) return props.rangeFormat
+			else if (props.type === 'month') return 'yyyy-MM'
+			else if (props.type === 'year') return 'yyyy'
+			return props.valueFormat
+		})
+		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
+		const startInputConfig = computed(() => {
+			let startValue = rangeValue.value[0] || ''
+			let startLabel = $vUtils.toDateString(startValue, calendarFormat.value)
+			return { ...rangeInputConfig.value, value: startLabel, placeholder: props.startPlaceholder }
+		})
+		const endInputConfig = computed(() => {
+			let endValue = rangeValue.value[1] || ''
+			let endLabel = $vUtils.toDateString(endValue, calendarFormat.value)
+			return { ...rangeInputConfig.value, value: endLabel, placeholder: props.endPlaceholder }
+		})
+		const calendarConfig = computed(() => {
+			return {
+				pulldown: true,
+				style: { height: '100%' },
+				align: 'center',
+				valueFormat: calendarFormat.value,
+				type: props.type
+			}
+		})
+		const startCalendarConfig = computed(() => {
+			let startValue = rangeValue.value[0] || ''
+			return {
+				...calendarConfig.value,
+				modelValue: startValue,
+				disabledMethod: ({ date, viewType }) => {
+					let endTime = rangeValue.value[1]
+					let { done, time } = $vUtils.getDateDiff(endTime, date)
+					return done
+				}
+			}
+		})
+		const endCalendarConfig = computed(() => {
+			let endValue = rangeValue.value[1] || ''
+			return {
+				...calendarConfig.value,
+				modelValue: endValue,
+				disabledMethod: ({ date, viewType }) => {
+					let startTime = rangeValue.value[0]
+					let { done, time } = $vUtils.getDateDiff(startTime, date)
+					return startTime ? !done : false
+				}
+			}
+		})
+
+		const onRangeFocus = async e => {
+			pulldownValue.value = !pulldownValue.value
+			if (pulldownValue.value) {
+				dispatch('focus', e)
+			}
+		}
+		const onRangeClear = () => {
+			pulldownValue.value = false
+			rangeValue.value = []
+			onHidePanel()
+		}
+		const onHidePanel = () => {
+			dispatch('value')
+			dispatch('change')
+			dispatch('blur')
+		}
+
+		const onCalendarChange = (date, type) => {
+			let valueList = rangeValue.value.filter(_ => _)
+			if (props.autoBlur && valueList.length === 2) {
+				pulldownValue.value = false
+				onHidePanel()
+			}
+		}
+
+		// 回调事件
+		const dispatch = (code, params) => {
+			if (props.range) {
+				let formarValue = rangeValue.value.map(item => $vUtils.toDateString(item, calendarFormat.value))
+				if (code === 'value') {
+					emit('update:modelValue', formarValue)
+				} else {
+					emit(code, { value: formarValue, params })
+				}
+			} else {
+				if (code === 'change') {
+					emit('update:modelValue', params.value)
+				}
+				emit(code, params)
+			}
+		}
+
+		watch(
+			() => props.modelValue,
+			(value, oldValue) => {
+				if (props.range) {
+					rangeValue.value = value
+				} else {
+					inputValue.value = value
+				}
+			}
+		)
+
+		return {
+			pulldownValue,
+			inputValue,
+			rangeValue,
+			inputConfig,
+			pulldownConfig,
+			startInputConfig,
+			endInputConfig,
+			startCalendarConfig,
+			endCalendarConfig,
+			onRangeFocus,
+			onHidePanel,
+			onRangeClear,
+			onCalendarChange,
+			dispatch
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-date {
+	display: inline-block;
+	position: relative;
+}
+.sh-date-range-input {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: var(--vxe-border-radius);
+	color: var(--vxe-font-color);
+	border: 1px solid var(--vxe-input-border-color);
+	background-color: var(--vxe-input-background-color);
+	box-shadow: none;
+	&:hover {
+		.sh-date-clear {
+			display: flex;
+		}
+	}
+	input {
+		width: 100%;
+		border: none;
+		color: inherit;
+		text-align: center;
+	}
+	.sh-date-range-suffix {
+		color: var(--vxe-table-column-icon-border-color);
+		height: 100%;
+		display: inline-flex;
+		margin-right: 8px;
+	}
+	.sh-date-clear {
+		cursor: pointer;
+		display: none;
+		position: absolute;
+		right: 0;
+		height: 100%;
+		justify-content: center;
+		align-items: center;
+		&:hover {
+			color: inherit;
+		}
+	}
+}
+.sh-date-content {
+	display: flex;
+	justify-content: space-between;
+	padding: 12px;
+	width: 600px;
+	max-width: 100%;
+}
+</style>