sh-view 2.8.0 → 2.8.2

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

@@ -1,650 +1,650 @@
-<template>
-	<div class="sh-calendar">
-		<div v-if="header" class="sh-calendar-row sh-calendar-head">
-			<div class="info">
-				<sh-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
-				<sh-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></sh-select>
-			</div>
-			<div class="extra">
-				<template v-for="item in headerHandles" :key="item.code">
-					<span class="sh-calendar-btn" @click="handleBtn(item)"><i :class="item.icon"></i></span>
-				</template>
-			</div>
-		</div>
-		<table class="sh-calendar-table" :class="{ 'sh-calendar-pulldown': pulldown }" v-bind="tableConfig">
-			<thead v-if="showHeader">
-				<tr>
-					<template v-for="(head, headIndex) in headers" :key="headIndex">
-						<th :style="{ textAlign: headerAlign }">{{ head.label }}</th>
-					</template>
-				</tr>
-			</thead>
-			<tbody @mouseleave="dateMouseleaveEvent">
-				<template v-for="(row, rowIndex) in bodyDatas" :key="rowIndex">
-					<tr>
-						<template v-for="(item, itemIndex) in row" :key="itemIndex">
-							<td :class="getCellClass(item)" @mouseenter="dateMouseenterEvent(item)" @click="dateSelectEvent(item)">
-								<slot name="cell" v-bind="item">
-									<div class="sh-calendar-cell" :style="{ textAlign: align }">
-										<div class="sh-calendar-cell-head" :class="{ 'is-month': type === 'month' }">{{ item.label }}</div>
-										<div v-if="note" class="sh-calendar-cell-body" :style="{ height: noteHeight }">{{ noteMethod(item) }}</div>
-										<div v-if="festival" class="sh-calendar-cell-foot">{{ getLunarDate(item.date) }}</div>
-									</div>
-								</slot>
-							</td>
-						</template>
-					</tr>
-				</template>
-			</tbody>
-		</table>
-		<div v-if="footer" class="sh-calendar-foot">
-			<div class="sh-calendar-row">
-				<div class="info">
-					<div>{{ lunarInfo.day }}</div>
-					<div class="sh-calendar-title">{{ lunarInfo.lunarMonth }}月 {{ lunarInfo.lunarDay }}</div>
-					<div class="sh-calendar-title">{{ lunarInfo.jq }}</div>
-				</div>
-				<div class="info right">
-					<div class="sh-calendar-title">{{ lunarInfo.yearGanZhi }}年 {{ lunarInfo.yearShengXiao }}</div>
-					<div>{{ lunarInfo.monthGanZhi }}月 {{ lunarInfo.dayGanZhi }}</div>
-				</div>
-			</div>
-			<div class="sh-calendar-row">
-				<div class="extra"><span class="sh-calendar-tag yi">宜</span></div>
-				<div class="info">
-					<template v-for="(y, yIndex) in lunarInfo.yi" :key="yIndex">
-						<span class="sh-calendar-span">{{ y }}</span>
-					</template>
-				</div>
-			</div>
-			<div class="sh-calendar-row">
-				<div class="extra"><span class="sh-calendar-tag ji">忌</span></div>
-				<div class="info">
-					<template v-for="(j, jIndex) in lunarInfo.ji" :key="jIndex">
-						<span class="sh-calendar-span">{{ j }}</span>
-					</template>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, watch } from 'vue'
-import { Lunar, HolidayUtil } from 'lunar-typescript'
-export default defineComponent({
-	name: 'ShCalendar',
-	props: {
-		modelValue: [String, Number, Date],
-		type: { type: String, default: 'day' }, // day, month, year
-		startDay: { type: [String, Number], default: 1 },
-		headerAlign: { type: String, default: 'center' },
-		align: { type: String, default: 'center' },
-		header: { type: Boolean, default: true },
-		footer: { type: Boolean, default: false },
-		note: { type: Boolean, default: false }, // 是否备注
-		noteHeight: { type: String, default: '22px' }, // 备注高度
-		noteMethod: { type: Function, default() {} },
-		festival: { type: Boolean, default: false }, // 是否显示农历
-		pulldown: { type: Boolean, default: false }, // 是否为下拉显示
-		valueFormat: { type: String, default: '' },
-		weeks: {
-			type: Array,
-			default() {
-				return ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-			}
-		},
-		disabledMethod: { type: Function }
-	},
-	emits: ['update:modelValue', 'change'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const yearSize = 12
-		const monthSize = 12
-		const headerHandles = [
-			{ code: 'prev', icon: 'vxe-icon-caret-left' },
-			{ code: 'current', icon: 'vxe-icon-dot' },
-			{ code: 'next', icon: 'vxe-icon-caret-right' }
-		]
-		const reactData = reactive({
-			inputValue: props.modelValue,
-			panelValue: null,
-			panelLabel: '',
-			selectMonth: null,
-			currentDate: null
-		})
-		const computeFirstDayOfWeek = computed(() => {
-			const { startDay, startWeek } = props
-			return $vUtils.toNumber($vUtils.isNumber(startDay) || $vUtils.isString(startDay) ? startDay : startWeek)
-		})
-		const computeWeekDatas = computed(() => {
-			const weeks = []
-			let sWeek = computeFirstDayOfWeek.value
-			weeks.push(sWeek)
-			for (let index = 0; index < 6; index++) {
-				if (sWeek >= 6) {
-					sWeek = 0
-				} else {
-					sWeek++
-				}
-				weeks.push(sWeek)
-			}
-			return weeks
-		})
-		const computeDateHMSTime = computed(() => {
-			const dateValue = computeDateValue.value
-			return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0
-		})
-
-		const computeYearList = computed(() => {
-			const { selectMonth, currentDate } = reactData
-			const years = []
-			if (selectMonth && currentDate) {
-				const currFullYear = currentDate.getFullYear()
-				const selectFullYear = selectMonth.getFullYear()
-				const startYearDate = new Date(selectFullYear - (selectFullYear % yearSize), 0, 1)
-				for (let index = -4; index < yearSize + 4; index++) {
-					const date = $vUtils.getWhatYear(startYearDate, index, 'first')
-					const itemFullYear = date.getFullYear()
-					years.push({
-						date,
-						isCurrent: true,
-						isPrev: index < 0,
-						isNow: currFullYear === itemFullYear,
-						isNext: index >= yearSize,
-						year: itemFullYear,
-						label: `${itemFullYear}年`
-					})
-				}
-			}
-			return years
-		})
-		const computeMonthList = computed(() => {
-			const { selectMonth, currentDate } = reactData
-			const months = []
-			if (selectMonth && currentDate) {
-				const currFullYear = currentDate.getFullYear()
-				const currMonth = currentDate.getMonth()
-				const selFullYear = $vUtils.getWhatYear(selectMonth, 0, 'first').getFullYear()
-				for (let index = 0; index < monthSize; index++) {
-					const date = $vUtils.getWhatYear(selectMonth, 0, index)
-					const itemFullYear = date.getFullYear()
-					const itemMonth = date.getMonth()
-					const isPrev = itemFullYear < selFullYear
-					months.push({
-						date,
-						isPrev,
-						isCurrent: itemFullYear === selFullYear,
-						isNow: itemFullYear === currFullYear && itemMonth === currMonth,
-						isNext: !isPrev && itemFullYear > selFullYear,
-						month: itemMonth,
-						label: `${itemMonth + 1}月`
-					})
-				}
-			}
-			return months
-		})
-		const computeDayList = computed(() => {
-			const { selectMonth, currentDate } = reactData
-			const days = []
-			if (selectMonth && currentDate) {
-				const dateHMSTime = computeDateHMSTime.value
-				const weekDatas = computeWeekDatas.value
-				const currFullYear = currentDate.getFullYear()
-				const currMonth = currentDate.getMonth()
-				const currDate = currentDate.getDate()
-				const selFullYear = selectMonth.getFullYear()
-				const selMonth = selectMonth.getMonth()
-				const selDay = selectMonth.getDay()
-				const prevOffsetDate = -weekDatas.indexOf(selDay)
-				const startDayDate = new Date($vUtils.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime)
-				for (let index = 0; index < 42; index++) {
-					const date = $vUtils.getWhatDay(startDayDate, index)
-					const itemFullYear = date.getFullYear()
-					const itemMonth = date.getMonth()
-					const itemDate = date.getDate()
-					const isPrev = date < selectMonth
-					days.push({
-						date,
-						isPrev,
-						isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
-						isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
-						isNext: !isPrev && selMonth !== itemMonth,
-						day: itemDate,
-						label: itemDate
-					})
-				}
-			}
-			return days
-		})
-		// 以下为日历需要
-		const tableConfig = computed(() => ({ cellspacing: 0, cellpadding: 0, border: 0 }))
-		const headers = computed(() => {
-			const weekDatas = computeWeekDatas.value
-			return weekDatas.map(day => {
-				return { value: day, label: props.weeks[day] }
-			})
-		})
-		const bodyDatas = computed(() => {
-			if ('month' === props.type) {
-				return $vUtils.chunk(computeMonthList.value, 3)
-			} else if ('year' === props.type) {
-				return $vUtils.chunk(computeYearList.value, 4)
-			}
-			return $vUtils.chunk(computeDayList.value, 7)
-		})
-		const computeDateValue = computed(() => {
-			const { inputValue } = reactData
-			let val = null
-			if (inputValue) {
-				const date = $vUtils.toStringDate(inputValue, props.valueFormat)
-				if ($vUtils.isValidDate(date)) {
-					val = date
-				}
-			}
-			return val
-		})
-		const showHeader = computed(() => !['month', 'year'].includes(props.type))
-		const yearValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy'))
-		const monthValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'MM'))
-		const dayValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'dd'))
-		const yearSelectConfig = computed(() => {
-			const options = []
-			for (let index = 1880; index < 2116; index++) {
-				options.push({
-					value: index + '',
-					label: `${index}年`
-				})
-			}
-			return {
-				modelValue: yearValue.value,
-				options: options,
-				filterable: true,
-				style: { width: '85px' }
-			}
-		})
-		const monthSelectConfig = computed(() => {
-			const options = []
-			for (let index = 1; index < 13; index++) {
-				options.push({
-					value: index + '',
-					label: `${index}月`
-				})
-			}
-			return {
-				modelValue: monthValue.value,
-				options: options,
-				filterable: true,
-				style: { width: '75px' }
-			}
-		})
-		const lunarInfo = computed(() => {
-			let dayDate = reactData.inputValue || reactData.currentDate
-			let lunarDate = Lunar.fromDate(dayDate)
-			return {
-				day: $vUtils.toDateString(dayDate, 'yyyy 年 MM 月 dd 日'),
-				lunarMonth: lunarDate.getMonthInChinese(),
-				lunarDay: lunarDate.getDayInChinese(),
-				yearGanZhi: lunarDate.getYearInGanZhi(),
-				yearShengXiao: lunarDate.getYearShengXiao(),
-				monthGanZhi: lunarDate.getMonthInGanZhi(),
-				dayGanZhi: lunarDate.getDayInGanZhi(),
-				yi: lunarDate.getDayYi(),
-				ji: lunarDate.getDayJi(),
-				jq: lunarDate.getJieQi()
-			}
-		})
-		const isDateDisabled = item => {
-			const { disabledMethod } = props
-			return disabledMethod && disabledMethod({ type: props.type, date: item.date })
-		}
-		const dateChange = date => {
-			emitValue(date)
-			emit('change', date)
-		}
-		const dateSelectItem = date => {
-			dateChange(date)
-		}
-		const dateCheckMonth = date => {
-			const month = $vUtils.getWhatMonth(date, 0, 'first')
-			if (!$vUtils.isEqual(month, reactData.selectMonth)) {
-				reactData.selectMonth = month
-			}
-		}
-		const dateMoveDay = offsetDay => {
-			if (isDateDisabled({ date: offsetDay })) return
-			const dayList = computeDayList.value
-			if (!dayList.some(item => $vUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
-				dateCheckMonth(offsetDay)
-			}
-			dateParseValue(offsetDay)
-		}
-		const dateMoveMonth = offsetMonth => {
-			if (isDateDisabled({ date: offsetMonth })) return
-			const monthList = computeMonthList.value
-			if (!monthList.some(item => $vUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
-				dateCheckMonth(offsetMonth)
-			}
-			dateParseValue(offsetMonth)
-		}
-		const dateMoveYear = offsetYear => {
-			if (isDateDisabled({ date: offsetYear })) return
-			const yearList = computeYearList.value
-			if (!yearList.some(item => $vUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
-				dateCheckMonth(offsetYear)
-			}
-			dateParseValue(offsetYear)
-		}
-		const dateSelectEvent = item => {
-			if (isDateDisabled(item)) return
-			dateSelectItem(item.date)
-		}
-		const dateMouseenterEvent = item => {
-			if (isDateDisabled(item)) return
-			if (props.type === 'month') {
-				dateMoveMonth(item.date)
-			} else if (props.type === 'year') {
-				dateMoveYear(item.date)
-			} else {
-				dateMoveDay(item.date)
-			}
-		}
-		const dateMouseleaveEvent = () => {
-			dateParseValue()
-		}
-		const dateParseValue = value => {
-			let dValue = null
-			if (value) {
-				dValue = $vUtils.toStringDate(value, props.valueFormat)
-			}
-			if (dValue && !$vUtils.isValidDate(dValue)) {
-				dValue = null
-			}
-			reactData.panelValue = dValue
-		}
-		const getLunarDate = day => {
-			let lunarDate = Lunar.fromDate(day)
-			let lunarText = lunarDate.getDayInChinese()
-			const jq = lunarDate.getJieQi()
-			const solarFestivals = lunarDate.getFestivals()
-			if (jq) {
-				lunarText = jq
-			} else if (lunarDate.getDay() === 1) {
-				lunarText = lunarDate.getMonthInChinese() + '月'
-			} else if (solarFestivals.length > 0) {
-				const f = solarFestivals[0]
-				if (f.length < 4) {
-					lunarText = f
-				}
-			}
-			return lunarText
-		}
-		const getCellClass = item => {
-			const { panelValue } = reactData
-			const dateValue = computeDateValue.value
-			let matchFormat = 'yyyyMMdd'
-			if ('month' === props.type) matchFormat = 'yyyyMM'
-			else if ('year' === props.type) matchFormat = 'yyyy'
-			const ymd = $vUtils.toDateString(item.date, 'yyyyMMdd')
-			const lunarDate = Lunar.fromDate(item.date)
-			const holiday = HolidayUtil.getHoliday(ymd)
-			let rest = false
-			if ([0, 6].includes(lunarDate.getWeek())) {
-				rest = true
-			}
-			if (holiday) rest = !holiday.isWork()
-			return {
-				'is--prev': item.isPrev,
-				'is--current': item.isCurrent,
-				'is--now': item.isNow,
-				'is--next': item.isNext,
-				'is--holiday': holiday,
-				'is--rest': rest,
-				'is--disabled': isDateDisabled(item),
-				'is--selected': $vUtils.isDateSame(dateValue, item.date, matchFormat),
-				'is--hover': $vUtils.isDateSame(panelValue, item.date, matchFormat)
-			}
-		}
-		const handleBtn = ({ code }) => {
-			try {
-				const { currentDate, selectMonth } = reactData
-				let getName = 'getWhatMonth'
-				let getSize = 1
-				if (['month', 'year'].includes(props.type)) getName = 'getWhatYear'
-				if (['year'].includes(props.type)) getSize = yearSize
-				switch (code) {
-					case 'prev':
-						reactData.selectMonth = $vUtils[getName](selectMonth, getSize * -1, 'first')
-						break
-					case 'next':
-						reactData.selectMonth = $vUtils[getName](selectMonth, getSize, 'first')
-						break
-					case 'current':
-						reactData.selectMonth = $vUtils.getWhatMonth(currentDate, 0, 'first')
-						break
-					default:
-						break
-				}
-			} catch (e) {
-				proxy.msgwarning(e.message)
-			}
-		}
-		const emitValue = (value, evnt) => {
-			reactData.inputValue = value
-			emit('update:modelValue', value)
-		}
-
-		// 初始化
-		const initValue = () => {
-			reactData.currentDate = $vUtils.getWhatDay(Date.now(), 0, 'first')
-			reactData.selectMonth = $vUtils.getWhatMonth(computeDateValue.value || reactData.currentDate, 0, 'first')
-		}
-		// 年度切换
-		const onYearChange = ({ value }) => {
-			const { selectMonth } = reactData
-			const selMonth = selectMonth.getMonth() + 1
-			const selDate = selectMonth.getDate()
-			const changeDate = `${value}-${selMonth}-${selDate}`
-			reactData.selectMonth = $vUtils.toStringDate(changeDate)
-		}
-		// 月份切换
-		const onMonthChange = ({ value }) => {
-			const { selectMonth } = reactData
-			const selYear = selectMonth.getFullYear()
-			const selDate = selectMonth.getDate()
-			const changeDate = `${selYear}-${value}-${selDate}`
-			reactData.selectMonth = $vUtils.toStringDate(changeDate)
-		}
-
-		onBeforeMount(() => {
-			initValue()
-		})
-
-		watch(
-			() => props.modelValue,
-			val => {
-				reactData.inputValue = val
-			}
-		)
-
-		return {
-			reactData,
-			tableConfig,
-			yearSelectConfig,
-			monthSelectConfig,
-			headers,
-			bodyDatas,
-			lunarInfo,
-			headerHandles,
-			computeYearList,
-			computeMonthList,
-			showHeader,
-			onYearChange,
-			onMonthChange,
-			getLunarDate,
-			getCellClass,
-			handleBtn,
-			dateSelectEvent,
-			dateMouseenterEvent,
-			dateMouseleaveEvent
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-calendar {
-	overflow: auto;
-	.sh-calendar-title {
-		font-size: 18px;
-		font-weight: bold;
-	}
-	.sh-calendar-span {
-		margin-right: 5px;
-	}
-	.sh-calendar-tag {
-		border-radius: 30px;
-		padding: 5px;
-		display: inline-flex;
-		vertical-align: top;
-		line-height: 1;
-		margin-right: 10px;
-		&.yi {
-			background-color: var(--vxe-success-color);
-			color: #fff;
-		}
-		&.ji {
-			background-color: var(--vxe-danger-color);
-			color: #fff;
-		}
-	}
-	.sh-calendar-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		.info {
-			flex: 1;
-			&.right {
-				text-align: right;
-			}
-		}
-		.extra {
-			display: inline-flex;
-			flex-wrap: nowrap;
-		}
-		& + .sh-calendar-row {
-			margin-top: 5px;
-		}
-	}
-	.sh-calendar-head,
-	.sh-calendar-foot {
-		padding: 8px;
-		border: 1px solid var(--vxe-table-border-color);
-	}
-	.sh-calendar-head {
-		border-bottom: none;
-		line-height: 1;
-	}
-	.sh-calendar-foot {
-		border-top: none;
-	}
-	.sh-calendar-btn {
-		padding: 5px;
-		border-radius: var(--vxe-border-radius);
-		border: 1px solid var(--vxe-table-border-color);
-		margin-left: 5px;
-		&:hover {
-			color: var(--vxe-primary-color);
-		}
-	}
-	.sh-calendar-cell {
-		display: block;
-		&-head {
-			padding: 3px 5px;
-			& + .sh-calendar-cell-foot {
-				padding-top: 0;
-			}
-			&.is-month {
-				padding: 20px 5px;
-			}
-		}
-		&-body {
-			overflow: auto;
-		}
-		&-foot {
-			padding: 3px 5px;
-			font-size: 0.8em;
-		}
-	}
-	.sh-calendar-table {
-		&:not(.sh-calendar-pulldown) {
-			td {
-				border: 1px solid var(--vxe-table-border-color);
-			}
-		}
-		&.sh-calendar-pulldown {
-			tbody {
-				border: 1px solid var(--vxe-table-border-color);
-			}
-		}
-	}
-	table {
-		border: 0;
-		width: 100%;
-		border-spacing: 0;
-		border-collapse: collapse;
-		table-layout: fixed;
-		height: 100%;
-	}
-	th,
-	td {
-		font-weight: normal;
-		position: relative;
-		height: 36px;
-	}
-	th {
-		border: 1px solid var(--vxe-table-border-color);
-	}
-	td {
-		&.is--prev,
-		&.is--next {
-			color: var(--vxe-font-disabled-color);
-		}
-		//&.is--rest {
-		//	.sh-calendar-cell-head {
-		//		color: var(--vxe-danger-color);
-		//	}
-		//}
-		&.is--now {
-			&:not(.is--selected) {
-				color: var(--vxe-primary-color);
-				&.is--current {
-					background-color: var(--primary-weak-color);
-				}
-			}
-		}
-		&.is--hover {
-			background-color: var(--vxe-input-date-picker-hover-background-color);
-		}
-		&.is--selected {
-			color: var(--vxe-input-date-picker-selected-color);
-			background-color: var(--vxe-primary-color);
-			&.is--prev,
-			&.is--next {
-				background-color: var(--vxe-primary-lighten-color);
-			}
-		}
-		&:not(.is--disabled) {
-			cursor: pointer;
-		}
-		&.is--disabled {
-			cursor: no-drop;
-			color: var(--vxe-input-disabled-color);
-			background-color: var(--vxe-input-disabled-background-color);
-		}
-	}
-}
-</style>
+<template>
+	<div class="sh-calendar">
+		<div v-if="header" class="sh-calendar-row sh-calendar-head">
+			<div class="info">
+				<sh-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
+				<sh-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></sh-select>
+			</div>
+			<div class="extra">
+				<template v-for="item in headerHandles" :key="item.code">
+					<span class="sh-calendar-btn" @click="handleBtn(item)"><i :class="item.icon"></i></span>
+				</template>
+			</div>
+		</div>
+		<table class="sh-calendar-table" :class="{ 'sh-calendar-pulldown': pulldown }" v-bind="tableConfig">
+			<thead v-if="showHeader">
+				<tr>
+					<template v-for="(head, headIndex) in headers" :key="headIndex">
+						<th :style="{ textAlign: headerAlign }">{{ head.label }}</th>
+					</template>
+				</tr>
+			</thead>
+			<tbody @mouseleave="dateMouseleaveEvent">
+				<template v-for="(row, rowIndex) in bodyDatas" :key="rowIndex">
+					<tr>
+						<template v-for="(item, itemIndex) in row" :key="itemIndex">
+							<td :class="getCellClass(item)" @mouseenter="dateMouseenterEvent(item)" @click="dateSelectEvent(item)">
+								<slot name="cell" v-bind="item">
+									<div class="sh-calendar-cell" :style="{ textAlign: align }">
+										<div class="sh-calendar-cell-head" :class="{ 'is-month': type === 'month' }">{{ item.label }}</div>
+										<div v-if="note" class="sh-calendar-cell-body" :style="{ height: noteHeight }">{{ noteMethod(item) }}</div>
+										<div v-if="festival" class="sh-calendar-cell-foot">{{ getLunarDate(item.date) }}</div>
+									</div>
+								</slot>
+							</td>
+						</template>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+		<div v-if="footer" class="sh-calendar-foot">
+			<div class="sh-calendar-row">
+				<div class="info">
+					<div>{{ lunarInfo.day }}</div>
+					<div class="sh-calendar-title">{{ lunarInfo.lunarMonth }}月 {{ lunarInfo.lunarDay }}</div>
+					<div class="sh-calendar-title">{{ lunarInfo.jq }}</div>
+				</div>
+				<div class="info right">
+					<div class="sh-calendar-title">{{ lunarInfo.yearGanZhi }}年 {{ lunarInfo.yearShengXiao }}</div>
+					<div>{{ lunarInfo.monthGanZhi }}月 {{ lunarInfo.dayGanZhi }}</div>
+				</div>
+			</div>
+			<div class="sh-calendar-row">
+				<div class="extra"><span class="sh-calendar-tag yi">宜</span></div>
+				<div class="info">
+					<template v-for="(y, yIndex) in lunarInfo.yi" :key="yIndex">
+						<span class="sh-calendar-span">{{ y }}</span>
+					</template>
+				</div>
+			</div>
+			<div class="sh-calendar-row">
+				<div class="extra"><span class="sh-calendar-tag ji">忌</span></div>
+				<div class="info">
+					<template v-for="(j, jIndex) in lunarInfo.ji" :key="jIndex">
+						<span class="sh-calendar-span">{{ j }}</span>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, watch } from 'vue'
+import { Lunar, HolidayUtil } from 'lunar-typescript'
+export default defineComponent({
+	name: 'ShCalendar',
+	props: {
+		modelValue: [String, Number, Date],
+		type: { type: String, default: 'day' }, // day, month, year
+		startDay: { type: [String, Number], default: 1 },
+		headerAlign: { type: String, default: 'center' },
+		align: { type: String, default: 'center' },
+		header: { type: Boolean, default: true },
+		footer: { type: Boolean, default: false },
+		note: { type: Boolean, default: false }, // 是否备注
+		noteHeight: { type: String, default: '22px' }, // 备注高度
+		noteMethod: { type: Function, default() {} },
+		festival: { type: Boolean, default: false }, // 是否显示农历
+		pulldown: { type: Boolean, default: false }, // 是否为下拉显示
+		valueFormat: { type: String, default: '' },
+		weeks: {
+			type: Array,
+			default() {
+				return ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+			}
+		},
+		disabledMethod: { type: Function }
+	},
+	emits: ['update:modelValue', 'change'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const yearSize = 12
+		const monthSize = 12
+		const headerHandles = [
+			{ code: 'prev', icon: 'vxe-icon-caret-left' },
+			{ code: 'current', icon: 'vxe-icon-dot' },
+			{ code: 'next', icon: 'vxe-icon-caret-right' }
+		]
+		const reactData = reactive({
+			inputValue: props.modelValue,
+			panelValue: null,
+			panelLabel: '',
+			selectMonth: null,
+			currentDate: null
+		})
+		const computeFirstDayOfWeek = computed(() => {
+			const { startDay, startWeek } = props
+			return $vUtils.toNumber($vUtils.isNumber(startDay) || $vUtils.isString(startDay) ? startDay : startWeek)
+		})
+		const computeWeekDatas = computed(() => {
+			const weeks = []
+			let sWeek = computeFirstDayOfWeek.value
+			weeks.push(sWeek)
+			for (let index = 0; index < 6; index++) {
+				if (sWeek >= 6) {
+					sWeek = 0
+				} else {
+					sWeek++
+				}
+				weeks.push(sWeek)
+			}
+			return weeks
+		})
+		const computeDateHMSTime = computed(() => {
+			const dateValue = computeDateValue.value
+			return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0
+		})
+
+		const computeYearList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const years = []
+			if (selectMonth && currentDate) {
+				const currFullYear = currentDate.getFullYear()
+				const selectFullYear = selectMonth.getFullYear()
+				const startYearDate = new Date(selectFullYear - (selectFullYear % yearSize), 0, 1)
+				for (let index = -4; index < yearSize + 4; index++) {
+					const date = $vUtils.getWhatYear(startYearDate, index, 'first')
+					const itemFullYear = date.getFullYear()
+					years.push({
+						date,
+						isCurrent: true,
+						isPrev: index < 0,
+						isNow: currFullYear === itemFullYear,
+						isNext: index >= yearSize,
+						year: itemFullYear,
+						label: `${itemFullYear}年`
+					})
+				}
+			}
+			return years
+		})
+		const computeMonthList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const months = []
+			if (selectMonth && currentDate) {
+				const currFullYear = currentDate.getFullYear()
+				const currMonth = currentDate.getMonth()
+				const selFullYear = $vUtils.getWhatYear(selectMonth, 0, 'first').getFullYear()
+				for (let index = 0; index < monthSize; index++) {
+					const date = $vUtils.getWhatYear(selectMonth, 0, index)
+					const itemFullYear = date.getFullYear()
+					const itemMonth = date.getMonth()
+					const isPrev = itemFullYear < selFullYear
+					months.push({
+						date,
+						isPrev,
+						isCurrent: itemFullYear === selFullYear,
+						isNow: itemFullYear === currFullYear && itemMonth === currMonth,
+						isNext: !isPrev && itemFullYear > selFullYear,
+						month: itemMonth,
+						label: `${itemMonth + 1}月`
+					})
+				}
+			}
+			return months
+		})
+		const computeDayList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const days = []
+			if (selectMonth && currentDate) {
+				const dateHMSTime = computeDateHMSTime.value
+				const weekDatas = computeWeekDatas.value
+				const currFullYear = currentDate.getFullYear()
+				const currMonth = currentDate.getMonth()
+				const currDate = currentDate.getDate()
+				const selFullYear = selectMonth.getFullYear()
+				const selMonth = selectMonth.getMonth()
+				const selDay = selectMonth.getDay()
+				const prevOffsetDate = -weekDatas.indexOf(selDay)
+				const startDayDate = new Date($vUtils.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime)
+				for (let index = 0; index < 42; index++) {
+					const date = $vUtils.getWhatDay(startDayDate, index)
+					const itemFullYear = date.getFullYear()
+					const itemMonth = date.getMonth()
+					const itemDate = date.getDate()
+					const isPrev = date < selectMonth
+					days.push({
+						date,
+						isPrev,
+						isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
+						isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
+						isNext: !isPrev && selMonth !== itemMonth,
+						day: itemDate,
+						label: itemDate
+					})
+				}
+			}
+			return days
+		})
+		// 以下为日历需要
+		const tableConfig = computed(() => ({ cellspacing: 0, cellpadding: 0, border: 0 }))
+		const headers = computed(() => {
+			const weekDatas = computeWeekDatas.value
+			return weekDatas.map(day => {
+				return { value: day, label: props.weeks[day] }
+			})
+		})
+		const bodyDatas = computed(() => {
+			if ('month' === props.type) {
+				return $vUtils.chunk(computeMonthList.value, 3)
+			} else if ('year' === props.type) {
+				return $vUtils.chunk(computeYearList.value, 4)
+			}
+			return $vUtils.chunk(computeDayList.value, 7)
+		})
+		const computeDateValue = computed(() => {
+			const { inputValue } = reactData
+			let val = null
+			if (inputValue) {
+				const date = $vUtils.toStringDate(inputValue, props.valueFormat)
+				if ($vUtils.isValidDate(date)) {
+					val = date
+				}
+			}
+			return val
+		})
+		const showHeader = computed(() => !['month', 'year'].includes(props.type))
+		const yearValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy'))
+		const monthValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'MM'))
+		const dayValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'dd'))
+		const yearSelectConfig = computed(() => {
+			const options = []
+			for (let index = 1880; index < 2116; index++) {
+				options.push({
+					value: index + '',
+					label: `${index}年`
+				})
+			}
+			return {
+				modelValue: yearValue.value,
+				options: options,
+				filterable: true,
+				style: { width: '85px' }
+			}
+		})
+		const monthSelectConfig = computed(() => {
+			const options = []
+			for (let index = 1; index < 13; index++) {
+				options.push({
+					value: index + '',
+					label: `${index}月`
+				})
+			}
+			return {
+				modelValue: monthValue.value,
+				options: options,
+				filterable: true,
+				style: { width: '75px' }
+			}
+		})
+		const lunarInfo = computed(() => {
+			let dayDate = reactData.inputValue || reactData.currentDate
+			let lunarDate = Lunar.fromDate(dayDate)
+			return {
+				day: $vUtils.toDateString(dayDate, 'yyyy 年 MM 月 dd 日'),
+				lunarMonth: lunarDate.getMonthInChinese(),
+				lunarDay: lunarDate.getDayInChinese(),
+				yearGanZhi: lunarDate.getYearInGanZhi(),
+				yearShengXiao: lunarDate.getYearShengXiao(),
+				monthGanZhi: lunarDate.getMonthInGanZhi(),
+				dayGanZhi: lunarDate.getDayInGanZhi(),
+				yi: lunarDate.getDayYi(),
+				ji: lunarDate.getDayJi(),
+				jq: lunarDate.getJieQi()
+			}
+		})
+		const isDateDisabled = item => {
+			const { disabledMethod } = props
+			return disabledMethod && disabledMethod({ type: props.type, date: item.date })
+		}
+		const dateChange = date => {
+			emitValue(date)
+			emit('change', date)
+		}
+		const dateSelectItem = date => {
+			dateChange(date)
+		}
+		const dateCheckMonth = date => {
+			const month = $vUtils.getWhatMonth(date, 0, 'first')
+			if (!$vUtils.isEqual(month, reactData.selectMonth)) {
+				reactData.selectMonth = month
+			}
+		}
+		const dateMoveDay = offsetDay => {
+			if (isDateDisabled({ date: offsetDay })) return
+			const dayList = computeDayList.value
+			if (!dayList.some(item => $vUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
+				dateCheckMonth(offsetDay)
+			}
+			dateParseValue(offsetDay)
+		}
+		const dateMoveMonth = offsetMonth => {
+			if (isDateDisabled({ date: offsetMonth })) return
+			const monthList = computeMonthList.value
+			if (!monthList.some(item => $vUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
+				dateCheckMonth(offsetMonth)
+			}
+			dateParseValue(offsetMonth)
+		}
+		const dateMoveYear = offsetYear => {
+			if (isDateDisabled({ date: offsetYear })) return
+			const yearList = computeYearList.value
+			if (!yearList.some(item => $vUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
+				dateCheckMonth(offsetYear)
+			}
+			dateParseValue(offsetYear)
+		}
+		const dateSelectEvent = item => {
+			if (isDateDisabled(item)) return
+			dateSelectItem(item.date)
+		}
+		const dateMouseenterEvent = item => {
+			if (isDateDisabled(item)) return
+			if (props.type === 'month') {
+				dateMoveMonth(item.date)
+			} else if (props.type === 'year') {
+				dateMoveYear(item.date)
+			} else {
+				dateMoveDay(item.date)
+			}
+		}
+		const dateMouseleaveEvent = () => {
+			dateParseValue()
+		}
+		const dateParseValue = value => {
+			let dValue = null
+			if (value) {
+				dValue = $vUtils.toStringDate(value, props.valueFormat)
+			}
+			if (dValue && !$vUtils.isValidDate(dValue)) {
+				dValue = null
+			}
+			reactData.panelValue = dValue
+		}
+		const getLunarDate = day => {
+			let lunarDate = Lunar.fromDate(day)
+			let lunarText = lunarDate.getDayInChinese()
+			const jq = lunarDate.getJieQi()
+			const solarFestivals = lunarDate.getFestivals()
+			if (jq) {
+				lunarText = jq
+			} else if (lunarDate.getDay() === 1) {
+				lunarText = lunarDate.getMonthInChinese() + '月'
+			} else if (solarFestivals.length > 0) {
+				const f = solarFestivals[0]
+				if (f.length < 4) {
+					lunarText = f
+				}
+			}
+			return lunarText
+		}
+		const getCellClass = item => {
+			const { panelValue } = reactData
+			const dateValue = computeDateValue.value
+			let matchFormat = 'yyyyMMdd'
+			if ('month' === props.type) matchFormat = 'yyyyMM'
+			else if ('year' === props.type) matchFormat = 'yyyy'
+			const ymd = $vUtils.toDateString(item.date, 'yyyyMMdd')
+			const lunarDate = Lunar.fromDate(item.date)
+			const holiday = HolidayUtil.getHoliday(ymd)
+			let rest = false
+			if ([0, 6].includes(lunarDate.getWeek())) {
+				rest = true
+			}
+			if (holiday) rest = !holiday.isWork()
+			return {
+				'is--prev': item.isPrev,
+				'is--current': item.isCurrent,
+				'is--now': item.isNow,
+				'is--next': item.isNext,
+				'is--holiday': holiday,
+				'is--rest': rest,
+				'is--disabled': isDateDisabled(item),
+				'is--selected': $vUtils.isDateSame(dateValue, item.date, matchFormat),
+				'is--hover': $vUtils.isDateSame(panelValue, item.date, matchFormat)
+			}
+		}
+		const handleBtn = ({ code }) => {
+			try {
+				const { currentDate, selectMonth } = reactData
+				let getName = 'getWhatMonth'
+				let getSize = 1
+				if (['month', 'year'].includes(props.type)) getName = 'getWhatYear'
+				if (['year'].includes(props.type)) getSize = yearSize
+				switch (code) {
+					case 'prev':
+						reactData.selectMonth = $vUtils[getName](selectMonth, getSize * -1, 'first')
+						break
+					case 'next':
+						reactData.selectMonth = $vUtils[getName](selectMonth, getSize, 'first')
+						break
+					case 'current':
+						reactData.selectMonth = $vUtils.getWhatMonth(currentDate, 0, 'first')
+						break
+					default:
+						break
+				}
+			} catch (e) {
+				proxy.msgwarning(e.message)
+			}
+		}
+		const emitValue = (value, evnt) => {
+			reactData.inputValue = value
+			emit('update:modelValue', value)
+		}
+
+		// 初始化
+		const initValue = () => {
+			reactData.currentDate = $vUtils.getWhatDay(Date.now(), 0, 'first')
+			reactData.selectMonth = $vUtils.getWhatMonth(computeDateValue.value || reactData.currentDate, 0, 'first')
+		}
+		// 年度切换
+		const onYearChange = ({ value }) => {
+			const { selectMonth } = reactData
+			const selMonth = selectMonth.getMonth() + 1
+			const selDate = selectMonth.getDate()
+			const changeDate = `${value}-${selMonth}-${selDate}`
+			reactData.selectMonth = $vUtils.toStringDate(changeDate)
+		}
+		// 月份切换
+		const onMonthChange = ({ value }) => {
+			const { selectMonth } = reactData
+			const selYear = selectMonth.getFullYear()
+			const selDate = selectMonth.getDate()
+			const changeDate = `${selYear}-${value}-${selDate}`
+			reactData.selectMonth = $vUtils.toStringDate(changeDate)
+		}
+
+		onBeforeMount(() => {
+			initValue()
+		})
+
+		watch(
+			() => props.modelValue,
+			val => {
+				reactData.inputValue = val
+			}
+		)
+
+		return {
+			reactData,
+			tableConfig,
+			yearSelectConfig,
+			monthSelectConfig,
+			headers,
+			bodyDatas,
+			lunarInfo,
+			headerHandles,
+			computeYearList,
+			computeMonthList,
+			showHeader,
+			onYearChange,
+			onMonthChange,
+			getLunarDate,
+			getCellClass,
+			handleBtn,
+			dateSelectEvent,
+			dateMouseenterEvent,
+			dateMouseleaveEvent
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-calendar {
+	overflow: auto;
+	.sh-calendar-title {
+		font-size: 18px;
+		font-weight: bold;
+	}
+	.sh-calendar-span {
+		margin-right: 5px;
+	}
+	.sh-calendar-tag {
+		border-radius: 30px;
+		padding: 5px;
+		display: inline-flex;
+		vertical-align: top;
+		line-height: 1;
+		margin-right: 10px;
+		&.yi {
+			background-color: var(--vxe-success-color);
+			color: #fff;
+		}
+		&.ji {
+			background-color: var(--vxe-danger-color);
+			color: #fff;
+		}
+	}
+	.sh-calendar-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.info {
+			flex: 1;
+			&.right {
+				text-align: right;
+			}
+		}
+		.extra {
+			display: inline-flex;
+			flex-wrap: nowrap;
+		}
+		& + .sh-calendar-row {
+			margin-top: 5px;
+		}
+	}
+	.sh-calendar-head,
+	.sh-calendar-foot {
+		padding: 8px;
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	.sh-calendar-head {
+		border-bottom: none;
+		line-height: 1;
+	}
+	.sh-calendar-foot {
+		border-top: none;
+	}
+	.sh-calendar-btn {
+		padding: 5px;
+		border-radius: var(--vxe-border-radius);
+		border: 1px solid var(--vxe-table-border-color);
+		margin-left: 5px;
+		&:hover {
+			color: var(--vxe-primary-color);
+		}
+	}
+	.sh-calendar-cell {
+		display: block;
+		&-head {
+			padding: 3px 5px;
+			& + .sh-calendar-cell-foot {
+				padding-top: 0;
+			}
+			&.is-month {
+				padding: 20px 5px;
+			}
+		}
+		&-body {
+			overflow: auto;
+		}
+		&-foot {
+			padding: 3px 5px;
+			font-size: 0.8em;
+		}
+	}
+	.sh-calendar-table {
+		&:not(.sh-calendar-pulldown) {
+			td {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+		}
+		&.sh-calendar-pulldown {
+			tbody {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+		}
+	}
+	table {
+		border: 0;
+		width: 100%;
+		border-spacing: 0;
+		border-collapse: collapse;
+		table-layout: fixed;
+		height: 100%;
+	}
+	th,
+	td {
+		font-weight: normal;
+		position: relative;
+		height: 36px;
+	}
+	th {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	td {
+		&.is--prev,
+		&.is--next {
+			color: var(--vxe-font-disabled-color);
+		}
+		//&.is--rest {
+		//	.sh-calendar-cell-head {
+		//		color: var(--vxe-danger-color);
+		//	}
+		//}
+		&.is--now {
+			&:not(.is--selected) {
+				color: var(--vxe-primary-color);
+				&.is--current {
+					background-color: var(--primary-weak-color);
+				}
+			}
+		}
+		&.is--hover {
+			background-color: var(--vxe-input-date-picker-hover-background-color);
+		}
+		&.is--selected {
+			color: var(--vxe-input-date-picker-selected-color);
+			background-color: var(--vxe-primary-color);
+			&.is--prev,
+			&.is--next {
+				background-color: var(--vxe-primary-lighten-color);
+			}
+		}
+		&:not(.is--disabled) {
+			cursor: pointer;
+		}
+		&.is--disabled {
+			cursor: no-drop;
+			color: var(--vxe-input-disabled-color);
+			background-color: var(--vxe-input-disabled-background-color);
+		}
+	}
+}
+</style>