aiot-app/pages/home/wt/components/hrCardRepairApproval/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>
				{{ repairTypeLabel }}
			</u-form-item>
			<u-form-item label="补卡日期" borderBottom>
				{{ datePart(punchTime) }}
			</u-form-item>
			<u-form-item label="补卡时间" borderBottom>
				{{ timePart(punchTime) }}
			</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 的 repairType 口径一致）
	const REPAIR_TYPE_LABELS = {
		MISSING_IN: '上班漏打卡',
		MISSING_OUT: '下班漏打卡',
		LATE: '迟到补卡',
		EARLY: '早退补卡',
		ABSENT: '缺勤补卡',
		NORMAL: '正常补卡',
		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 || '';
			},
			repairTypeLabel() {
				const code = this.form.repairType;
				if (!code) return '-';
				return REPAIR_TYPE_LABELS[code] || code;
			},
			// 补卡以补卡打卡时间为主，缺失时退回开始时间
			punchTime() {
				return this.form.repairPunchTime || this.form.startTime || '';
			},
			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>