threeonecheck_web/pages/closeout/editor.vue

<template>
	<view class="padding page">
		<view class="padding bg-white radius">
			<view class="text-gray margin-bottom">隐患名称</view>
			<up-input v-model="formData.hazardName" placeholder="暂无" disabled></up-input>

			<view class="text-gray margin-bottom margin-top">整改时限</view>
			<up-input v-model="formData.deadline" placeholder="暂无" disabled></up-input>

			<view class="text-gray margin-bottom margin-top">隐患治理责任单位</view>
			<up-input v-model="formData.responsibilityUnit" placeholder="暂无" disabled></up-input>

			<view class="text-gray margin-bottom margin-top">主要负责人</view>
			<up-input v-model="formData.mainPerson" placeholder="暂无" disabled></up-input>

			<view class="text-gray margin-bottom margin-top">主要治理内容</view>
			<up-textarea v-model="formData.mainGovernanceContent" placeholder="暂无" disabled autoHeight></up-textarea>

			<view class="text-gray margin-bottom margin-top">隐患治理完成内容</view>
			<up-textarea v-model="formData.governanceCompleteContent" placeholder="暂无" disabled autoHeight></up-textarea>

			<view class="text-gray margin-bottom margin-top">状态</view>
			<up-input :modelValue="statusText" placeholder="暂无" disabled></up-input>

			<template v-if="hasRejectReason">
				<view class="text-gray margin-bottom margin-top">驳回理由</view>
				<up-textarea v-model="formData.rejectReason" placeholder="暂无" disabled autoHeight></up-textarea>
			</template>

			<template v-if="hasSignature">
				<view class="text-gray margin-bottom margin-top">电子签名</view>
				<view class="signature-box">
					<image
						:src="signatureUrl"
						class="signature-img"
						mode="aspectFit"
						@click="previewSignature"
						@error="onSignatureImageError"
					></image>
				</view>
			</template>

			<view class="flex justify-center margin-top-xl">
				<button class="round cu-btn lg" @click="handleCancel">返回</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getWriteOffApplyDetail } from '@/request/api.js'
	import { toSubmitFileUrl } from '@/utils/upload.js'

	const applyId = ref('')
	const signatureUrl = ref('')

	const formData = reactive({
		hazardId: '',
		hazardName: '',
		deadline: '',
		responsibilityUnit: '',
		mainPerson: '',
		mainGovernanceContent: '',
		governanceCompleteContent: '',
		status: '',
		rejectReason: ''
	})

	const statusText = computed(() => {
		const val = Number(formData.status);
		if (val === 1) return '通过';
		if (val === 2) return '不通过';
		return '';
	});

	const hasRejectReason = computed(() => Boolean(String(formData.rejectReason || '').trim()));
	const hasSignature = computed(() => Boolean(signatureUrl.value));

	const applySignature = (signPath) => {
		signatureUrl.value = signPath ? toSubmitFileUrl(signPath) : ''
	}

	const previewSignature = () => {
		if (!signatureUrl.value) return
		uni.previewImage({
			urls: [signatureUrl.value],
			current: signatureUrl.value
		})
	}

	const onSignatureImageError = () => {
		console.error('签名图片加载失败:', signatureUrl.value)
	}

	const fetchDetail = async (id) => {
		if (!id) {
			uni.showToast({ title: '缺少申请ID', icon: 'none' })
			return
		}
		try {
			uni.showLoading({ title: '加载中...' })
			const res = await getWriteOffApplyDetail(id)
			if (res.code === 0 && res.data) {
				const data = res.data
				formData.hazardId = data.hazardId || ''
				formData.hazardName = data.hazardName || ''
				formData.deadline = data.deadline || ''
				formData.responsibilityUnit = data.responsibilityUnit || ''
				formData.mainPerson = data.mainPerson || ''
				formData.mainGovernanceContent = data.mainGovernanceContent || ''
				formData.governanceCompleteContent = data.governanceCompleteContent || ''
				formData.status = data.status ?? ''
				formData.rejectReason = data.rejectReason || ''
				applySignature(data.signPath)
			} else {
				uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
			}
		} catch (error) {
			console.error('获取销号申请详情失败:', error)
			uni.showToast({ title: '获取详情失败', icon: 'none' })
		} finally {
			uni.hideLoading()
		}
	}

	const handleCancel = () => {
		uni.navigateBack()
	}

	onLoad((options) => {
		applyId.value = options?.applyId || ''
		fetchDetail(applyId.value)
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}

	.signature-box {
		width: 100%;
		height: 240rpx;
		background: #f8f8f8;
		border: 1rpx dashed #dcdfe6;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.signature-img {
		width: 100%;
		height: 240rpx;
	}
</style>