隐患详情重新设计，检查计划重新设计成做题排查式

pages/hiddendanger/rectification.vue

@@ -235,9 +235,10 @@
 						:lineWidth="3"
 						:enableHistory="false"
 						@confirm="(res) => onSignatureConfirm(res.tempFilePath)"
-						@start="isSignatureEmpty = false"
-						@signing="isSignatureEmpty = false"
-						@clear="isSignatureEmpty = true"
+						@start="onSignatureStart"
+						@signing="onSignatureSigning"
+						@end="onSignatureEnd"
+						@clear="onSignatureClear"
 					>
 						<template #footer></template>
 					</wd-signature>
@@ -250,9 +251,11 @@
 </template>
 
 <script setup>
-	import {ref,reactive,computed,nextTick,watch,getCurrentInstance} from 'vue'
-	import {onLoad} from '@dcloudio/uni-app'
+	import {ref,reactive,computed,nextTick,getCurrentInstance} from 'vue'
+	import {onLoad, onHide} from '@dcloudio/uni-app'
 	import {submitRectification,getDepartmentPersonUsers,getRectifyDetail,getDeptUsersWithSubordinates,getHiddenDangerDetail,generateRectifyPlan} from '@/request/api.js'
+	import { buildDraftKey, buildDraftKeyCompact, DRAFT_NS } from '@/utils/draftCache.js';
+	import { useDraftCache } from '@/utils/useDraftCache.js';
 	import {
 		createUploadListHandlers,
 		buildAttachmentItem,
@@ -279,10 +282,15 @@
 	const signatureRef = ref(null);       // 签名组件 ref
 	const isSignatureEmpty = ref(true);    // 签名是否为空
 	const isSubmitting = ref(false);       // 是否正在提交表单
+	const signatureLocalPath = ref(''); // 未上传云端的本地签名临时图
+	const isDraftExporting = ref(false); // 是否为草稿导出（非提交上传）
+	let signatureExportTimer = null;
 
 	// 清除画布
 	const clearSignature = () => {
+		clearTimeout(signatureExportTimer);
 		isSignatureEmpty.value = true;
+		signatureLocalPath.value = '';
 		if (signatureRef.value) {
 			signatureRef.value.clear();
 		}
@@ -308,15 +316,62 @@
 			showCanvas.value = true;
 			signatureServerPath.value = '';
 			signatureUrl.value = '';
+			signatureLocalPath.value = '';
 			isSignatureEmpty.value = true;
 			return;
 		}
 		signatureServerPath.value = url;
 		signatureUrl.value = url;
+		signatureLocalPath.value = '';
 		showCanvas.value = false;
 		isSignatureEmpty.value = false;
 	};
 
+	/** 将本地临时签名图应用到预览区（草稿回显） */
+	const applySignatureFromLocal = (localPath) => {
+		if (!localPath) return;
+		signatureLocalPath.value = localPath;
+		signatureUrl.value = localPath;
+		signatureServerPath.value = '';
+		showCanvas.value = false;
+		isSignatureEmpty.value = false;
+	};
+
+	const onSignatureStart = () => {
+		isSignatureEmpty.value = false;
+	};
+
+	const onSignatureSigning = () => {
+		isSignatureEmpty.value = false;
+	};
+
+	const onSignatureClear = () => {
+		isSignatureEmpty.value = true;
+		signatureLocalPath.value = '';
+	};
+
+	const scheduleSignatureDraftExport = () => {
+		clearTimeout(signatureExportTimer);
+		signatureExportTimer = setTimeout(() => {
+			if (
+				!showCanvas.value ||
+				isSignatureEmpty.value ||
+				!signatureRef.value ||
+				isSubmitting.value ||
+				isDraftExporting.value
+			) {
+				return;
+			}
+			isDraftExporting.value = true;
+			signatureRef.value.confirm();
+		}, 600);
+	};
+
+	const onSignatureEnd = () => {
+		isSignatureEmpty.value = false;
+		scheduleSignatureDraftExport();
+	};
+
 	const onSignatureImageError = () => {
 		console.error('签名图片加载失败:', signatureUrl.value);
 		uni.showToast({ title: '签名图片加载失败', icon: 'none' });
@@ -324,10 +379,12 @@
 
 	// 重新签字
 	const reSign = () => {
+		clearTimeout(signatureExportTimer);
 		isSignatureEmpty.value = true;
 		showCanvas.value = true;
 		signatureUrl.value = '';
 		signatureServerPath.value = '';
+		signatureLocalPath.value = '';
 		nextTick(() => {
 			if (signatureRef.value) {
 				signatureRef.value.clear();
@@ -730,9 +787,17 @@
 
 	// 签名导出成功回调
 	const onSignatureConfirm = async (tempFilePath) => {
+		if (isDraftExporting.value) {
+			isDraftExporting.value = false;
+			applySignatureFromLocal(tempFilePath);
+			saveDraft();
+			return;
+		}
+
 		try {
 			const { url } = await uploadToCloud(tempFilePath);
 			applySignatureFromServer(url);
+			saveDraft();
 
 			if (isSubmitting.value) {
 				await executeSubmit();
@@ -812,8 +877,8 @@
 			// 触发组件导出，导出成功会回调 onSignatureConfirm
 			signatureRef.value.confirm();
 		} else {
-			// 已经有回显的签名
-			if (!signatureServerPath.value) {
+			// 已经有回显的签名（云端或本地草稿）
+			if (!signatureServerPath.value && !signatureLocalPath.value) {
 				uni.showToast({
 					title: '请进行电子签名',
 					icon: 'none'
@@ -822,7 +887,18 @@
 			}
 			isSubmitting.value = true;
 			uni.showLoading({ title: '正在提交...', mask: true });
-			await executeSubmit();
+			try {
+				if (!signatureServerPath.value && signatureLocalPath.value) {
+					const { url } = await uploadToCloud(signatureLocalPath.value);
+					applySignatureFromServer(url);
+				}
+				await executeSubmit();
+			} catch (err) {
+				isSubmitting.value = false;
+				uni.hideLoading();
+				console.error('签名上传失败:', err);
+				uni.showToast({ title: '签名上传失败，请重试', icon: 'none' });
+			}
 		}
 	};
 
@@ -1001,42 +1077,38 @@
 		}
 	};
 
-	// 草稿缓存与恢复逻辑 (移至底部以确保 formData 等响应式状态已被正常定义)
-	const hasDraft = ref(false);
-	const showRestoreBanner = ref(false); // 独立控制提示 Banner，仅在初次确实从本地恢复了内容时才显示
-	const isRestoring = ref(false); // 正在恢复标志，避免触发冗余watch
-	const signaturePaths = ref([]); // 缓存手写签名的绘制路径
-	const getDraftKey = () => `draft_rectify_${hazardId.value || ''}_${rectifyId.value || ''}`;
+	const signaturePaths = ref([]);
 
-	// 电子签名画布手写线条变动回调
-	const onSignatureChange = () => {
-		isSignatureEmpty.value = false;
-		signaturePaths.value = [];
-		if (hazardId.value || rectifyId.value) {
-			saveDraft();
-		}
+	const rectifyDraftHasContent = (data) => {
+		const form = data.formData || {};
+		return !!(
+			form.rectifyPlan ||
+			form.rectificationMeasures ||
+			form.controlMeasures ||
+			form.rectifyResult ||
+			form.planCost ||
+			form.actualCost ||
+			(data.fileList1 && data.fileList1.length > 0) ||
+			data.signatureServerPath ||
+			data.signatureLocalPath ||
+			(data.signaturePaths && data.signaturePaths.length > 0)
+		);
 	};
 
-	// 保存草稿 (排除选择器人员缓存，仅缓存方案、情况、金额、图片、签名等输入信息)
-	const saveDraft = () => {
-		if (isRestoring.value) return;
-		const key = getDraftKey();
-		const hasContent = formData.rectifyPlan ||
-		                   formData.rectificationMeasures ||
-		                   formData.controlMeasures ||
-		                   formData.rectifyResult || 
-		                   formData.planCost || 
-		                   formData.actualCost || 
-		                   fileList1.value.length > 0 || 
-		                   signatureServerPath.value ||
-		                   signaturePaths.value.length > 0;
-		if (!hasContent) {
-			uni.removeStorageSync(key);
-			hasDraft.value = false;
-			return;
-		}
-
-		const data = {
+	const {
+		showRestoreBanner,
+		clear: clearDraft,
+		restore: restoreDraft,
+		save: saveDraft,
+		bindAutoSave
+	} = useDraftCache({
+		getKey: () => buildDraftKey(DRAFT_NS.RECTIFY, hazardId.value, rectifyId.value),
+		getFallbackKeys: () => {
+			const primary = buildDraftKey(DRAFT_NS.RECTIFY, hazardId.value, rectifyId.value);
+			const compact = buildDraftKeyCompact(DRAFT_NS.RECTIFY, hazardId.value, rectifyId.value);
+			return compact !== primary ? [compact] : [];
+		},
+		getPayload: () => ({
 			formData: {
 				rectifyPlan: formData.rectifyPlan,
 				rectificationMeasures: formData.rectificationMeasures,
@@ -1048,126 +1120,83 @@
 			fileList1: fileList1.value,
 			signatureServerPath: signatureServerPath.value,
 			signatureUrl: signatureUrl.value,
+			signatureLocalPath: signatureLocalPath.value,
 			showCanvas: showCanvas.value,
 			signaturePaths: signaturePaths.value
-		};
-		uni.setStorageSync(key, JSON.stringify(data));
-		hasDraft.value = true;
-	};
-
-	// 清空草稿
-	const clearDraft = (showToast = true) => {
-		const key = getDraftKey();
-		uni.removeStorageSync(key);
-		hasDraft.value = false;
-		showRestoreBanner.value = false;
-		
-		isRestoring.value = true;
-		formData.rectifyPlan = '';
-		formData.rectificationMeasures = '';
-		formData.controlMeasures = '';
-		formData.rectifyResult = '';
-		formData.planCost = '';
-		formData.actualCost = '';
-		fileList1.value = [];
-		signatureServerPath.value = '';
-		signatureUrl.value = '';
-		showCanvas.value = true;
-		signaturePaths.value = [];
-		if (signatureRef.value) {
-			signatureRef.value.clear();
-		}
-		
-		nextTick(() => {
-			isRestoring.value = false;
-		});
-		if (showToast) {
-			uni.showToast({ title: '草稿已清空', icon: 'none' });
-		}
-	};
-
-	// 恢复草稿 (不恢复任何选择器数据)
-	const restoreDraft = () => {
-		const key = getDraftKey();
-		const cached = uni.getStorageSync(key);
-		if (cached) {
-			try {
-				const data = JSON.parse(cached);
-				const hasContent = data.formData.rectifyPlan ||
-				                   data.formData.rectificationMeasures ||
-				                   data.formData.controlMeasures ||
-				                   data.formData.rectifyResult || 
-				                   data.formData.planCost || 
-				                   data.formData.actualCost || 
-				                   (data.fileList1 && data.fileList1.length > 0) || 
-				                   data.signatureServerPath ||
-				                   (data.signaturePaths && data.signaturePaths.length > 0);
-				if (!hasContent) return;
-
-				isRestoring.value = true;
-				formData.rectifyPlan = data.formData.rectifyPlan || '';
-				formData.rectificationMeasures = data.formData.rectificationMeasures || '';
-				formData.controlMeasures = data.formData.controlMeasures || '';
-				formData.rectifyResult = data.formData.rectifyResult || '';
-				formData.planCost = data.formData.planCost || '';
-				formData.actualCost = data.formData.actualCost || '';
-				fileList1.value = data.fileList1 || [];
-				signaturePaths.value = data.signaturePaths || [];
-				// 优先用草稿里已上传的完整 URL；否则保持画板模式
-				if (data.signatureServerPath || data.signatureUrl) {
-					applySignatureFromServer(data.signatureServerPath || data.signatureUrl);
-				} else if (data.showCanvas === false) {
-					showCanvas.value = false;
-				}
-				hasDraft.value = true;
-				showRestoreBanner.value = true; // 确实存在内容并恢复了，才亮起提示 Banner
-
-				// 延迟恢复签名画布线条重绘，等待 Canvas 组件完全加载完毕
-				if (signaturePaths.value.length > 0) {
-					setTimeout(() => {
-						if (signatureRef.value) {
-							isSignatureEmpty.value = false;
-							// wot-design-uni auto rendering
-						}
-					}, 450);
-				}
-
-				nextTick(() => {
-					isRestoring.value = false;
-				});
-
-				uni.showToast({
-					title: '已自动恢复您上次未提交的内容',
-					icon: 'none',
-					duration: 2500
-				});
-			} catch (e) {
-				console.error('解析草稿失败:', e);
-				isRestoring.value = false;
-			}
-		}
-	};
-
-	// 深度监听表单项和签名笔画变化，自动保存草稿
-	watch(
-		() => [
-			formData.rectifyPlan,
-			formData.rectificationMeasures,
-			formData.controlMeasures,
-			formData.rectifyResult, 
-			formData.planCost, 
-			formData.actualCost, 
-			fileList1.value, 
-			signatureServerPath.value,
-			signaturePaths.value
-		],
-		() => {
-			if (hazardId.value || rectifyId.value) {
-				saveDraft();
+		}),
+		hasContent: rectifyDraftHasContent,
+		applyPayload: (data) => {
+			const form = data.formData || {};
+			formData.rectifyPlan = form.rectifyPlan || '';
+			formData.rectificationMeasures = form.rectificationMeasures || '';
+			formData.controlMeasures = form.controlMeasures || '';
+			formData.rectifyResult = form.rectifyResult || '';
+			formData.planCost = form.planCost || '';
+			formData.actualCost = form.actualCost || '';
+			fileList1.value = data.fileList1 || [];
+			signaturePaths.value = data.signaturePaths || [];
+			if (data.signatureServerPath || data.signatureUrl) {
+				applySignatureFromServer(data.signatureServerPath || data.signatureUrl);
+			} else if (data.signatureLocalPath) {
+				applySignatureFromLocal(data.signatureLocalPath);
+			} else if (data.showCanvas === false) {
+				showCanvas.value = false;
 			}
 		},
-		{ deep: true }
-	);
+		clearForm: () => {
+			formData.rectifyPlan = '';
+			formData.rectificationMeasures = '';
+			formData.controlMeasures = '';
+			formData.rectifyResult = '';
+			formData.planCost = '';
+			formData.actualCost = '';
+			fileList1.value = [];
+			signatureServerPath.value = '';
+			signatureUrl.value = '';
+			signatureLocalPath.value = '';
+			showCanvas.value = true;
+			signaturePaths.value = [];
+			if (signatureRef.value) {
+				signatureRef.value.clear();
+			}
+		},
+		canSave: () => !!(hazardId.value || rectifyId.value),
+		onAfterRestore: (data) => {
+			if (data.signatureServerPath || data.signatureUrl || data.signatureLocalPath) {
+				return;
+			}
+			if (data.signaturePaths?.length > 0) {
+				setTimeout(() => {
+					if (signatureRef.value) {
+						isSignatureEmpty.value = false;
+					}
+				}, 450);
+			}
+		}
+	});
+
+	bindAutoSave(() => [
+		formData.rectifyPlan,
+		formData.rectificationMeasures,
+		formData.controlMeasures,
+		formData.rectifyResult,
+		formData.planCost,
+		formData.actualCost,
+		fileList1.value,
+		signatureServerPath.value,
+		signatureUrl.value,
+		signatureLocalPath.value,
+		showCanvas.value,
+		signaturePaths.value
+	]);
+
+	onHide(() => {
+		if (showCanvas.value && !isSignatureEmpty.value && signatureRef.value && !isDraftExporting.value) {
+			isDraftExporting.value = true;
+			signatureRef.value.confirm();
+		}
+		saveDraft();
+	});
 
 	onLoad((options) => {
 		// 计算签名画布宽度