aiot-app/pages/home/wt/components/hrLeaveApproval/taskForm.vue

<template>
	<view class="task-form-container">
		<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth="180rpx">
			<u-form-item label="申请人" borderBottom>
				{{ applicantName || '-' }}
			</u-form-item>
			<u-form-item label="所属部门" borderBottom>
				{{ form.deptName || '-' }}
			</u-form-item>
			<u-form-item label="请假类型" borderBottom>
				{{ leaveTypeLabel }}
			</u-form-item>
			<u-form-item label="开始日期" borderBottom>
				{{ datePart(form.startTime) }}
			</u-form-item>
			<u-form-item label="开始时间" borderBottom>
				{{ timePart(form.startTime) }}
			</u-form-item>
			<u-form-item label="结束日期" borderBottom>
				{{ datePart(form.endTime) }}
			</u-form-item>
			<u-form-item label="结束时间" borderBottom>
				{{ timePart(form.endTime) }}
			</u-form-item>
			<u-form-item v-if="durationLabel" label="申请时长" borderBottom>
				{{ durationLabel }}
			</u-form-item>
			<u-form-item label="申请事由" borderBottom>
				{{ form.reason || '-' }}
			</u-form-item>
			<u-form-item label="附件" borderBottom>
				<view v-if="attachmentIds.length" class="attachment-row">
					<fileMain :value="attachmentIds" type="view"></fileMain>
				</view>
				<text v-else>-</text>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	import { getAttendanceApplicationDetail } from '@/api/hr/attendanceApply';
	import fileMain from '@/pages/doc/index.vue';

	// 请假类型枚举（与 /hr/attendance/applications 的 leaveType 口径一致）
	const LEAVE_TYPE_LABELS = {
		ANNUAL: '年假',
		PERSONAL: '事假',
		SICK: '病假',
		COMPENSATORY: '调休假',
		MARRIAGE: '婚假',
		MATERNITY: '产假',
		PATERNITY: '陪产假',
		BEREAVEMENT: '丧假',
		OTHER: '其他',
	};

	export default {
		components: { fileMain },
		props: {
			bizType: {
				type: String,
				default: ''
			},
			businessId: {
				type: String,
				default: ''
			},
			taskId: {
				type: String,
				default: ''
			},
			// 流程实例主键（processTask 透传），详情从流程表单变量取
			id: {
				type: String,
				default: ''
			},
			taskDefinitionKey: {
				type: String,
				default: ''
			},
			isUpload: {
				type: Boolean,
				default: false
			},
			isInterior: {
				type: Boolean,
				default: true
			},
			isIds: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				form: {},
				startUser: {},
			};
		},
		computed: {
			applicantName() {
				return this.form.userName || this.form.applicantName || '';
			},
			leaveTypeLabel() {
				const code = this.form.leaveType;
				if (!code) return '-';
				return LEAVE_TYPE_LABELS[code] || code;
			},
			durationLabel() {
				// durationMinutes 现按小时口径提交/存储（如 2 = 2 小时）
				const hours = Number(this.form.durationMinutes);
				if (!hours || isNaN(hours) || hours <= 0) return '';
				return `${hours} 小时`;
			},
			attachmentIds() {
				const raw = this.form.attachmentFileIds;
				if (!raw) return [];
				return String(raw)
					.split(',')
					.map((item) => item.trim())
					.filter(Boolean);
			},
		},
		watch: {
			businessId(val) {
				if (val) this._getInfo();
			}
		},
		mounted() {
			this._getInfo();
		},
		methods: {
			async _getInfo() {
				// 审批处理看的是完整表单：待办任务上的 businessId 就是考勤申请业务主键
				// （对应 ESS 列表 row.businessId），直接查 /hr/attendance/applications/{businessId}；
				// 不要拿它去调 /hr/ess/admin/applications/{id}（那个要的是 row.id 索引主键）
				if (!this.businessId) return;
				try {
					this.form =
						(await getAttendanceApplicationDetail(this.businessId, false)) || {};
				} catch (e) {
					console.log("[考勤审批] 审批详情加载失败:", (e && e.message) || e);
				}
			},
			datePart(val) {
				const text = String(val || '');
				if (!text) return '-';
				return text.split('T')[0].split(' ')[0];
			},
			timePart(val) {
				const text = String(val || '');
				if (!text) return '-';
				const time = text.split('T')[1] || text.split(' ')[1] || '';
				return time ? time.slice(0, 5) : '-';
			},
			getTableValue() {
				return {};
			}
		}
	};
</script>

<style lang="scss" scoped>
	.task-form-container {

		background-color: #fff;
		padding-bottom: 40rpx;
	}

	.attachment-row {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
</style>