jeecgBootUniapp/src/pages-humanResource/absence/detail.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '请假详情',
	},
	}
</route>
<template>
	<PageLayout navTitle="请假详情">
		<wd-cell-group border>
			<wd-cell title="职工姓名" :value="info.username_dictText" />
			<wd-cell title="所属单位" :value="info.sysOrgCode_dictText" />
			<wd-cell title="联系方式" :value="info.phone" />
			<wd-cell title="请假类型" :value="info.type" />
			<wd-cell title="请假开始时间" :value="info.begintime" />
			<wd-cell title="请假结束时间" :value="info.endtime" />
			<wd-cell title="请假天数" :value="info.days + '天'" />
			<wd-cell title="出发地" :value="info.departure" />
			<wd-cell title="目的地" :value="info.destination" />
			<wd-cell title="请假原因" :value="info.reason" />
			<wd-cell title="附件" v-if="info.path">
				<template v-for="(img, index) in image" :key="index">
					<wd-img :width="100" :height="100" :src="img" :enable-preview="true" />
				</template>
			</wd-cell>
			<wd-cell title="流程状态" :value="info.bpmStatus_dictText" />
			<wd-cell title="销假时间" :value="info.resumptiontime" v-if="info.resumptiontime && info.bpmStatus == '3'" />
			<view v-if="!info.resumptiontime && info.bpmStatus == '3'">
				<wd-calendar label="销假时间" prop="resumptiontime" v-model="resumptiontime" :min-date="minDate"/>
				<view class="footer">
					<wd-button type="primary" size="large" @click="handleSubmit" block>销假</wd-button>
				</view>
			</view>

		</wd-cell-group>
	</PageLayout>
</template>

<script setup>
	import {
		useMessage,
		useToast
	} from 'wot-design-uni'
	import {
		queryByIdApi,
		editApi
	} from '@/api/humanResource/absence'
	import {
		imgUrl
	} from '@/utils/index'
	import {
		useUserStore
	} from '@/store/user'

	const message = useMessage()
	const toast = useToast()
	const userStore = useUserStore();
	const info = ref({})
	const path = ref([])
	const image = ref([])
	const resumptiontime = ref(0)
	const minDate = ref(0)
	const queryById = (e) => {
		queryByIdApi(e).then((res) => {
			if (res.success) {
				info.value = res.result.records[0]
				minDate.value = dateStringToTimestamp(info.value.begintime)
				if(image.value.path){
					image.value = info.value.path.split(',').map(path => imgUrl(path))
				}
			}
		})
	}

	const handleSubmit = () => {
		if (!resumptiontime.value) return toast.warning('请选择销假时间!')
		editApi({
			id: info.value.id,
			begintime: formatDate(info.value.begintime),
			endtime: formatDate(info.value.endtime),
			resumptiontime: formatDate(resumptiontime.value),
			type: info.value.type
		}).then((res) => {
			if (res.success) {
				toast.success(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} else {
				toast.warning(res.message)
			}
		})
	}
	
	function formatDate(date) {
		date = new Date(date)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	}

	/**
	 * 将日期字符串转换为13位时间戳（支持yyyymmdd和yyyy-mm-dd格式）
	 * @param {string} dateStr 
	 * @returns {number} 13位时间戳（毫秒）
	 */
	function dateStringToTimestamp(dateStr) {
		const date = new Date();
		const normalized = dateStr.replace(/-/g, '');
		date.setFullYear(
			parseInt(normalized.substring(0, 4)),
			parseInt(normalized.substring(4, 6)) - 1,
			parseInt(normalized.substring(6, 8))
		);
		date.setHours(0, 0, 0, 0);
		return date.getTime();
	}

	onLoad((options) => {
		queryById(options.id)
	})
</script>

<style lang="scss" scoped>
	.footer {
		padding: 12px;
	}
</style>