im-uniapp/components/hrm/detailPanels/reimburse.vue

<template>
	<view class="reimburse-detail-container">
		<view class="detail-item">
			<view class="item-label">报销申请：</view>
			<view class="item-value">{{ detail.createBy || '无' }}</view>
		</view>
		<!-- 出行类型 -->
		<view class="detail-item">
			<view class="item-label">报销类型：</view>
			<view class="item-value">{{ detail.reimburseType || '无' }}</view>
		</view>
		<view class="detail-item">
			<view class="item-label">总金额：</view>
			<view class="item-value">{{ detail.totalAmount || '无' }}</view>
		</view>
		<!-- 开始时间 -->
		<view class="detail-item">
			<view class="item-label">报销原因：</view>
			<view class="item-value">{{ detail.reason || '无' }}</view>
		</view>
		<!-- 备注 -->
		<view class="detail-item">
			<view class="item-label">备注：</view>
			<view class="item-value">{{ detail.remark || '无' }}</view>
		</view>
		<!-- 申请人 -->
		<view class="detail-item">
			<view class="item-label">申请人：</view>
			<view class="item-value">{{ detail.createBy || '无' }}</view>
		</view>
		<!-- 申请时间 -->
		<view class="detail-item">
			<view class="item-label">申请时间：</view>
			<view class="item-value">{{ formatTime(detail.createTime) || '无' }}</view>
		</view>
		<!-- 更新人 -->
		<view class="detail-item">
			<view class="item-label">更新人：</view>
			<view class="item-value">{{ detail.updateBy || '无' }}</view>
		</view>
		<!-- 更新时间 -->
		<view class="detail-item">
			<view class="item-label">更新时间：</view>
			<view class="item-value">{{ formatTime(detail.updateTime) || '无' }}</view>
		</view>
	</view>
</template>

<script>
	import { getReimburseReq } from '@/api/hrm/reimburse.js'
	
	export default {
		props: {
			bizId: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				detail: {}
			}
		},
		watch: {
			bizId: {
				handler(newVal) {
					// 空值判断，避免无效请求
					if (!newVal) return;
					// 接口请求增加错误捕获和loading提示
					uni.showLoading({ title: '加载中...' });
					getReimburseReq(newVal)
						.then(res => {
							this.detail = res.data || {};
							console.log('报销详情：', this.detail);
						})
						.catch(err => {
							console.error('获取报销详情失败：', err);
							uni.showToast({
								title: '获取详情失败',
								icon: 'none',
								duration: 2000
							});
						})
						.finally(() => {
							uni.hideLoading();
						});
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 时间格式化方法
			 * 将 "2026-01-08 00:00:00" 格式化为 "2026-01-08"
			 * @param {String} timeStr - 原始时间字符串
			 * @returns {String} 格式化后的日期
			 */
			formatTime(timeStr) {
				if (!timeStr) return '';
				const [datePart] = timeStr.split(' ');
				return datePart;
			},
			/**
			 * 状态文本转换
			 * 将接口返回的英文状态转为中文展示
			 * @param {String} status - 原始状态值
			 * @returns {String} 中文状态文本
			 */
			getStatusText(status) {
				const statusMap = {
					'pending': '待处理',
					'approved': '已批准',
					'rejected': '已驳回',
					'completed': '已完成'
				};
				return statusMap[status] || '未知状态';
			}
		}
	}
</script>

<style scoped>
/* 容器样式 */
.reimburse-detail-container {
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin: 10rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 每一项的样式 */
.detail-item {
	display: flex;
	align-items: flex-start; /* 多行文本对齐 */
	padding: 18rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

/* 最后一项去掉下边框 */
.detail-item:last-child {
	border-bottom: none;
}

/* 标签样式 */
.item-label {
	width: 140rpx;
	font-size: 28rpx;
	color: #666666;
	font-weight: 500;
	padding-top: 2rpx; /* 对齐多行文本 */
}

/* 值的样式 */
.item-value {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx; /* 多行文本行高 */
}
</style>