im-uniapp/pages/workbench/hrm/detail/detail.vue

<template>
	<view class="approval-detail-page">
		<!-- 动态渲染不同类型的审批详情组件 -->
		<component 
			:is="currentDetailComponent" 
			:bizId="bizId" 
			v-if="bizId && bizType"
		></component>
		
		<!-- 底部固定的审批操作按钮栏 -->
		<view class="approval-btn-bar" v-if="canApprove">
			<button class="btn reject-btn" @click="handleReject">驳回</button>
			<button class="btn approve-btn" @click="handleApprove">通过</button>
		</view>
	</view>
</template>

<script>
	import HRMLeaveDetail from '@/components/hrm/detailPanels/leave.vue'
	import HRMReimburseDetail from '@/components/hrm/detailPanels/reimburse.vue'
	import HRMSealDetail from '@/components/hrm/detailPanels/seal.vue'
	import HRMTravelDetail from '@/components/hrm/detailPanels/travel.vue'
	
	import {
		approveFlowTask,
		listTodoFlowTask,
		rejectFlowTask,
		getTodoTaskByBiz,
	} from '@/api/hrm/flow';
	
	export default {
		components: {
			// 注册所有详情组件，供动态组件使用
			HRMLeaveDetail,
			HRMReimburseDetail,
			HRMSealDetail,
			HRMTravelDetail
		},
		data() {
			return {
				bizId: undefined,
				bizType: undefined,
				currentTask: undefined,
				// 映射bizType到对应的组件名（需和你的bizType实际值匹配，可自行调整）
				bizTypeComponentMap: {
					leave: 'HRMLeaveDetail',       // 请假
					reimburse: 'HRMReimburseDetail', // 报销
					seal: 'HRMSealDetail',         // 用章
					travel: 'HRMTravelDetail'      // 差旅
				}
			}
		},
		computed: {
			// 计算属性：根据bizType获取当前要渲染的组件名
			currentDetailComponent() {
				return this.bizTypeComponentMap[this.bizType] || '';
			},
			canApprove() {
			  return this.currentTask && this.currentTask.status === 'pending' && (this.currentTask?.assigneeUserName === this.$store.getters.storeOaName || this.currentTask?.assigneeUserId === this.$store.getters.storeOaId)
			},
		},
		watch: {
			bizId: {
				immediate: true, // 页面加载时立即执行（原代码缺失，导致首次赋值不触发）
				handler(newVal) {
					if (!newVal || !this.bizType) return;
					// 获取当前审批任务信息
					getTodoTaskByBiz(this.bizType, newVal)
						.then(res => {
							this.currentTask = res.data;
						})
						.catch(err => {
							uni.showToast({
								title: '获取审批信息失败',
								icon: 'none'
							});
							console.error('获取审批任务失败：', err);
						});
				}
			}
		},
		methods: {
			/**
			 * 审批通过
			 */
			handleApprove() {
				if (!this.currentTask?.taskId) {
					uni.showToast({ title: '暂无审批任务', icon: 'none' });
					return;
				}
				
				// 二次确认
				uni.showModal({
					title: '确认通过',
					content: '是否确定通过该审批？',
					// 箭头函数保留this指向
					success: (res) => {
						if (res.confirm) {
							approveFlowTask(this.currentTask.taskId)
								.then(() => {
									uni.showToast({ title: '审批通过成功' });
									// 成功后返回上一页（可根据需求调整）
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								})
								.catch(err => {
									uni.showToast({ title: '审批通过失败', icon: 'none' });
									console.error('审批通过失败：', err);
								});
						}
					}
				});
			},
			
			/**
			 * 审批驳回
			 */
			handleReject() {
				if (!this.currentTask?.taskId) {
					uni.showToast({ title: '暂无审批任务', icon: 'none' });
					return;
				}
				
				// 二次确认（可扩展：添加驳回理由输入框）
				uni.showModal({
					title: '确认驳回',
					content: '是否确定驳回该审批？',
					success: (res) => {
						if (res.confirm) {
							rejectFlowTask(this.currentTask.taskId)
								.then(() => {
									uni.showToast({ title: '审批驳回成功' });
									// 成功后返回上一页（可根据需求调整）
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								})
								.catch(err => {
									uni.showToast({ title: '审批驳回失败', icon: 'none' });
									console.error('审批驳回失败：', err);
								});
						}
					}
				});
			}
		},
		
		onLoad(options) {
			console.log('页面入参：', options);
			// 校验入参，避免undefined
			this.bizId = options.bizId || '';
			this.bizType = options.bizType || '';
			
			// 入参缺失提示
			if (!this.bizId || !this.bizType) {
				uni.showToast({ title: '参数缺失，无法加载详情', icon: 'none' });
			}
		}
	}
</script>

<style scoped>
/* 页面容器 */
.approval-detail-page {
	min-height: 100vh;
	padding-bottom: 120rpx; /* 给底部按钮栏留空间 */
}

/* 底部审批按钮栏 */
.approval-btn-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	border-top: 1px solid #eee;
	z-index: 99;
}

/* 按钮通用样式 */
.btn {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	border: none;
	margin: 0 10rpx;
}

/* 驳回按钮样式 */
.reject-btn {
	background-color: #fff;
	color: #ff4757;
	border: 1px solid #ff4757;
}

/* 通过按钮样式 */
.approve-btn {
	background-color: #007aff;
	color: #fff;
}
</style>