pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
王利强
2026-06-21 16:30:12 +08:00
parent 1fe87ec438
commit cc94d3e3e9
256 changed files with 12542 additions and 5956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1169
pages/hiddendanger/Inspection.vue
View File

File diff suppressed because it is too large Load Diff

353
pages/hiddendanger/acceptance.vue
View File

@@ -74,7 +74,14 @@
</view>
<view class="signature-box margin-bottom">
<view v-if="!showCanvas" class="signature-display flex align-center justify-center" style="width: 100%; height: 160px; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center;">
<image :src="signatureUrl" class="signature-img" mode="aspectFit" style="width: 100%; height: 100%;"></image>
<image
v-if="signatureUrl"
:src="signatureUrl"
class="signature-img"
mode="aspectFit"
style="width: 100%; height: 100%;"
></image>
<text v-else class="signature-placeholder">暂无签名，请点击重新签名</text>
</view>
<!-- 改为 v-if 解决小程序原生 canvas 真机渲染与生命周期挂载残留问题 -->
<view v-if="showCanvas" class="signature-pad-wrap" style="border: 1px dashed #dcdfe6; border-radius: 8rpx; overflow: hidden; background-color: #f8f8f8;">
@@ -87,9 +94,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>
@@ -105,14 +113,17 @@
</template>
<script setup>
import { ref, reactive, watch, nextTick, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
import { onLoad, onHide } from '@dcloudio/uni-app';
import { acceptanceRectification, getHiddenDangerDetail } from '@/request/api.js';
import { toImageUrl } from '@/request/request.js';
import { buildDraftKey, buildDraftKeyCompact, DRAFT_NS } from '@/utils/draftCache.js';
import { useDraftCache } from '@/utils/useDraftCache.js';
import {
createUploadListHandlers,
buildAttachmentItem,
uploadToCloud
uploadToCloud,
toSubmitFileUrl
} from '@/utils/upload.js';
// 页面参数
@@ -166,14 +177,133 @@
const signatureRef = ref(null); // 签名组件 ref
const isSignatureEmpty = ref(true); // 签名是否为空
const isSubmitting = ref(false); // 是否正在提交表单
const hasDraft = ref(false);
const showRestoreBanner = ref(false); // 独立控制提示 Banner
const isRestoring = ref(false); // 正在恢复标志
const isInitialized = ref(false); // 初始化标识
const signaturePaths = ref([]); // 缓存手写签名的绘制路径
const getDraftKey = () => `draft_accept_${rectifyId.value || ''}`;
const signatureLocalPath = ref(''); // 未上传云端的本地签名临时图
const isDraftExporting = ref(false); // 是否为草稿导出（非提交上传）
let signatureExportTimer = null;
/** 将已上传的签名地址应用到预览区 */
const applySignatureFromServer = (signPath) => {
const url = signPath ? toSubmitFileUrl(signPath) : '';
if (!url) {
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 acceptDraftHasContent = (data) => {
const form = data.formData || {};
return !!(
form.verifyRemark ||
(data.fileList1 && data.fileList1.length > 0) ||
data.signatureServerPath ||
data.signatureLocalPath ||
(data.signaturePaths && data.signaturePaths.length > 0)
);
};
const {
showRestoreBanner,
clear: clearDraft,
restore: restoreDraft,
save: saveDraft,
bindAutoSave
} = useDraftCache({
getKey: () => buildDraftKey(DRAFT_NS.ACCEPT, rectifyId.value),
getFallbackKeys: () => {
const primary = buildDraftKey(DRAFT_NS.ACCEPT, rectifyId.value);
const compact = buildDraftKeyCompact(DRAFT_NS.ACCEPT, rectifyId.value);
return compact !== primary ? [compact] : [];
},
getPayload: () => ({
formData: {
result: formData.result,
verifyRemark: formData.verifyRemark
},
fileList1: fileList1.value,
signatureServerPath: signatureServerPath.value,
signatureUrl: signatureUrl.value,
signatureLocalPath: signatureLocalPath.value,
showCanvas: showCanvas.value,
signaturePaths: signaturePaths.value
}),
hasContent: acceptDraftHasContent,
applyPayload: (data) => {
const form = data.formData || {};
formData.result = form.result !== undefined ? form.result : 1;
formData.verifyRemark = form.verifyRemark || '';
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 {
showCanvas.value = data.showCanvas !== undefined ? data.showCanvas : true;
signatureServerPath.value = '';
signatureUrl.value = '';
signatureLocalPath.value = '';
isSignatureEmpty.value = true;
}
},
clearForm: () => {
formData.result = 1;
formData.verifyRemark = '';
fileList1.value = [];
signatureServerPath.value = '';
signatureUrl.value = '';
signatureLocalPath.value = '';
showCanvas.value = true;
signaturePaths.value = [];
if (signatureRef.value) {
signatureRef.value.clear();
}
},
canSave: () => !!rectifyId.value,
requireInitialized: true,
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.result,
formData.verifyRemark,
fileList1.value,
signatureServerPath.value,
signatureUrl.value,
signatureLocalPath.value,
showCanvas.value,
signaturePaths.value
]);
// 获取完整图片路径
const getFullPath = (filePath) => {
@@ -279,8 +409,8 @@
// 触发组件导出，导出成功会回调 onSignatureConfirm
signatureRef.value.confirm();
} else {
// 已经有回显的签名
if (!signatureServerPath.value) {
// 已经有回显的签名（云端或本地草稿）
if (!signatureServerPath.value && !signatureLocalPath.value) {
uni.showToast({
title: '请进行电子签名',
icon: 'none'
@@ -289,7 +419,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' });
}
}
};
@@ -350,148 +491,47 @@
}
});
// 电子签名画布手写线条变动回调
const onSignatureChange = () => {
// 电子签名：手写过程中自动导出本地预览图写入草稿
const onSignatureStart = () => {
isSignatureEmpty.value = false;
signaturePaths.value = [];
if (rectifyId.value) {
saveDraft();
}
};
// 保存草稿
const saveDraft = () => {
if (isRestoring.value || !isInitialized.value) return;
const key = getDraftKey();
const hasContent = formData.verifyRemark ||
fileList1.value.length > 0 ||
signatureServerPath.value ||
signaturePaths.value.length > 0;
if (!hasContent) {
uni.removeStorageSync(key);
hasDraft.value = false;
return;
}
const data = {
formData: {
result: formData.result,
verifyRemark: formData.verifyRemark
},
fileList1: fileList1.value,
signatureServerPath: signatureServerPath.value,
signatureUrl: signatureUrl.value,
showCanvas: showCanvas.value,
signaturePaths: signaturePaths.value
};
uni.setStorageSync(key, JSON.stringify(data));
hasDraft.value = true;
const onSignatureSigning = () => {
isSignatureEmpty.value = false;
};
// 清空草稿
const clearDraft = (showToast = true) => {
const key = getDraftKey();
uni.removeStorageSync(key);
hasDraft.value = false;
showRestoreBanner.value = false;
isRestoring.value = true;
formData.result = 1;
formData.verifyRemark = '';
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 onSignatureClear = () => {
isSignatureEmpty.value = true;
signatureLocalPath.value = '';
};
// 恢复草稿
const restoreDraft = () => {
const key = getDraftKey();
const cached = uni.getStorageSync(key);
if (cached) {
try {
const data = JSON.parse(cached);
const hasContent = data.formData.verifyRemark ||
(data.fileList1 && data.fileList1.length > 0) ||
data.signatureServerPath ||
(data.signaturePaths && data.signaturePaths.length > 0);
if (!hasContent) {
isInitialized.value = true;
return;
}
isRestoring.value = true;
formData.result = data.formData.result !== undefined ? data.formData.result : 1;
formData.verifyRemark = data.formData.verifyRemark || '';
fileList1.value = data.fileList1 || [];
signatureServerPath.value = data.signatureServerPath || '';
signatureUrl.value = data.signatureUrl || '';
showCanvas.value = data.showCanvas !== undefined ? data.showCanvas : true;
signaturePaths.value = data.signaturePaths || [];
hasDraft.value = true;
showRestoreBanner.value = true;
// 延迟恢复签名画布线条重绘
if (signaturePaths.value.length > 0) {
setTimeout(() => {
if (signatureRef.value) {
isSignatureEmpty.value = false;
// wot-design-uni auto rendering
}
}, 450);
}
nextTick(() => {
isRestoring.value = false;
isInitialized.value = true;
});
uni.showToast({
title: '已自动恢复您上次未提交的内容',
icon: 'none',
duration: 2500
});
} catch (e) {
console.error('解析草稿失败:', e);
isRestoring.value = false;
isInitialized.value = true;
const scheduleSignatureDraftExport = () => {
clearTimeout(signatureExportTimer);
signatureExportTimer = setTimeout(() => {
if (
!showCanvas.value ||
isSignatureEmpty.value ||
!signatureRef.value ||
isSubmitting.value ||
isDraftExporting.value
) {
return;
}
} else {
isInitialized.value = true;
}
isDraftExporting.value = true;
signatureRef.value.confirm();
}, 600);
};
// 深度监听验收项和签名笔画变化，自动保存草稿
watch(
() => [
formData.result,
formData.verifyRemark,
fileList1.value,
signatureServerPath.value,
signaturePaths.value
],
() => {
if (rectifyId.value) {
saveDraft();
}
},
{ deep: true }
);
const onSignatureEnd = () => {
isSignatureEmpty.value = false;
scheduleSignatureDraftExport();
};
// 清除画布
const clearSignature = () => {
clearTimeout(signatureExportTimer);
isSignatureEmpty.value = true;
signatureLocalPath.value = '';
if (signatureRef.value) {
signatureRef.value.clear();
}
@@ -499,10 +539,12 @@
// 重新签字
const reSign = () => {
clearTimeout(signatureExportTimer);
isSignatureEmpty.value = true;
showCanvas.value = true;
signatureUrl.value = '';
signatureServerPath.value = '';
signatureLocalPath.value = '';
nextTick(() => {
if (signatureRef.value) {
signatureRef.value.clear();
@@ -520,12 +562,17 @@
// 签名导出成功回调
const onSignatureConfirm = async (tempFilePath) => {
if (isDraftExporting.value) {
isDraftExporting.value = false;
applySignatureFromLocal(tempFilePath);
saveDraft();
return;
}
try {
const { url } = await uploadToCloud(tempFilePath);
signatureServerPath.value = url;
signatureUrl.value = url;
showCanvas.value = false;
isSignatureEmpty.value = false;
applySignatureFromServer(url);
saveDraft();
if (isSubmitting.value) {
await executeSubmit();
@@ -538,6 +585,14 @@
}
};
onHide(() => {
if (showCanvas.value && !isSignatureEmpty.value && signatureRef.value && !isDraftExporting.value) {
isDraftExporting.value = true;
signatureRef.value.confirm();
}
saveDraft();
});
onLoad((options) => {
// 计算签名画布宽度
try {

116
pages/hiddendanger/assignment.vue
View File

@@ -91,9 +91,11 @@
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue';
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDepartmentPersonUsers,assignHiddenDanger } from '@/request/api.js';
import { buildDraftKey, DRAFT_NS } from '@/utils/draftCache.js';
import { useDraftCache } from '@/utils/useDraftCache.js';
// 页面参数
const hazardId = ref('');
@@ -162,6 +164,32 @@
const showDatePicker = ref(false);
const dateValue = ref(Date.now());
const selectedDate = ref('');
// 草稿（仅缓存整改期限，不缓存人员选择）
const {
showRestoreBanner,
clear: clearDraft,
restore: restoreDraft,
bindAutoSave
} = useDraftCache({
getKey: () => buildDraftKey(DRAFT_NS.ASSIGN, hazardId.value),
getPayload: () => ({
selectedDate: selectedDate.value,
dateValue: dateValue.value
}),
hasContent: (payload) => !!payload.selectedDate,
applyPayload: (payload) => {
selectedDate.value = payload.selectedDate || '';
dateValue.value = payload.dateValue || Date.now();
},
clearForm: () => {
selectedDate.value = '';
dateValue.value = Date.now();
},
canSave: () => !!hazardId.value
});
bindAutoSave(() => [selectedDate.value]);
// 获取部门人员列表
const fetchDeptUsers = async () => {
@@ -233,92 +261,6 @@
}
};
// 草稿缓存与恢复逻辑 (移至底部以确保 formData 等响应式状态已被正常定义)
const hasDraft = ref(false);
const showRestoreBanner = ref(false); // 独立控制提示 Banner，仅在初次确实从本地恢复了内容时才显示
const isRestoring = ref(false); // 正在恢复标志，避免触发冗余watch
const getDraftKey = () => `draft_assign_${hazardId.value || ''}`;
// 保存草稿 (排除选择器人员缓存，仅缓存整改期限日期值)
const saveDraft = () => {
if (isRestoring.value) return;
const key = getDraftKey();
const hasContent = selectedDate.value;
if (!hasContent) {
uni.removeStorageSync(key);
hasDraft.value = false;
return;
}
const data = {
selectedDate: selectedDate.value,
dateValue: dateValue.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;
selectedDate.value = '';
dateValue.value = Date.now();
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.selectedDate;
if (!hasContent) return;
isRestoring.value = true;
selectedDate.value = data.selectedDate || '';
dateValue.value = data.dateValue || Date.now();
hasDraft.value = true;
showRestoreBanner.value = true; // 确实存在内容并恢复了，才亮起提示 Banner
nextTick(() => {
isRestoring.value = false;
});
uni.showToast({
title: '已自动恢复您上次未提交的内容',
icon: 'none',
duration: 2500
});
} catch (e) {
console.error('解析草稿失败:', e);
isRestoring.value = false;
}
}
};
// 监听变量变化，自动保存草稿
watch(
() => [selectedDate.value],
() => {
if (hazardId.value) {
saveDraft();
}
}
);
onLoad((options) => {
if (options.hazardId) hazardId.value = options.hazardId;
if (options.assignId) assignId.value = options.assignId;

243
pages/hiddendanger/detail2.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<view class="page">
<view class="top-gradient-wrap">
<u-navbar
title="查看隐患"
:placeholder="true"
:safeAreaInsetTop="true"
bgColor="transparent"
titleColor="#ffffff"
leftIconColor="#ffffff"
:autoBack="true"
:border="false"
/>
<view class="summary-card">
<view class="summary-side summary-side--left">
<image class="summary-icon" src="/static/yinhuan_detail/status.png" mode="aspectFit" />
<view class="summary-icon-gap">
<view class="summary-text">
<view class="summary-label">隐患状态</view>
<view class="summary-status">{{ detailData.statusName || '-' }}</view>
</view>
</view>
</view>
<view class="summary-divider"></view>
<view class="summary-side summary-side--right">
<image class="summary-icon" src="/static/yinhuan_detail/date.png" mode="aspectFit" />
<view class="summary-text">
<view class="summary-label">提交日期</view>
<view class="summary-date">{{ detailData.createdAt || '-' }}</view>
</view>
</view>
</view>
</view>
<view class="panel-wrap">
<HazardDetailPanelV2
:detail="detailData"
:loading="loading"
:body-height="panelBodyHeight"
/>
</view>
</view>
</template>
<script setup>
import { ref, watch, nextTick, getCurrentInstance } from 'vue';
import { onLoad, onReady } from '@dcloudio/uni-app';
import HazardDetailPanelV2 from '@/components/hazardDetail/HazardDetailPanelV2.vue';
import { getHazardDetail } from '@/request/api.js';
const instance = getCurrentInstance();
const queryScope = instance?.proxy || instance;
const detailData = ref({});
const loading = ref(false);
const panelBodyHeight = ref(0);
const calcPanelBodyHeight = () => {
nextTick(() => {
const query = uni.createSelectorQuery().in(queryScope);
query.select('.panel-wrap').boundingClientRect();
query.exec((res) => {
const rect = res?.[0];
if (rect?.height > 0) {
panelBodyHeight.value = Math.floor(rect.height);
return;
}
const sys = uni.getSystemInfoSync();
panelBodyHeight.value = Math.floor(sys.windowHeight * 0.55);
});
});
};
const loadDetail = async (hazardId) => {
loading.value = true;
try {
const res = await getHazardDetail(hazardId);
if (res.code === 0 && res.data) {
detailData.value = res.data;
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
}
} catch (error) {
console.error('获取隐患详情失败:', error);
uni.showToast({ title: '获取详情失败', icon: 'none' });
} finally {
loading.value = false;
calcPanelBodyHeight();
setTimeout(calcPanelBodyHeight, 100);
setTimeout(calcPanelBodyHeight, 400);
}
};
onReady(() => {
calcPanelBodyHeight();
setTimeout(calcPanelBodyHeight, 100);
setTimeout(calcPanelBodyHeight, 400);
});
watch(loading, (isLoading) => {
if (!isLoading) {
calcPanelBodyHeight();
setTimeout(calcPanelBodyHeight, 100);
setTimeout(calcPanelBodyHeight, 400);
}
});
onLoad((options) => {
if (options.hazardId) {
loadDetail(options.hazardId);
return;
}
uni.showToast({ title: '缺少隐患ID', icon: 'none' });
setTimeout(() => {
uni.navigateBack();
}, 1500);
});
</script>
<style lang="scss" scoped>
.page {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #f5f7fa;
}
/* 渐变只覆盖导航栏 + 顶部卡片区域，在卡片下沿开始淡出 */
.top-gradient-wrap {
flex-shrink: 0;
background: linear-gradient( 180deg, #046CEA 0%, #2158C8 28.44%, rgba(4,107,234,0) 100%);}
.summary-card {
margin: 32rpx 30rpx 0;
padding: 28rpx 30rpx 32rpx;
background: #fff;
border-radius: 20rpx;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
.summary-side {
display: flex;
align-items: flex-start;
}
.summary-side--left {
flex-shrink: 0;
align-items: center;
}
.summary-side--left .summary-text {
padding-top: 0;
padding-bottom: 0;
}
.summary-side--right {
flex: 1;
min-width: 0;
align-items: center;
}
.summary-side--right .summary-icon {
margin-right: 22rpx;
}
.summary-side--right .summary-text {
flex: 1;
min-width: 0;
padding-top: 0;
padding-bottom: 0;
}
/* 图标右边缘到竖线 = 169rpx，文字靠左，右侧留白 */
.summary-icon-gap {
width: 149rpx;
flex-shrink: 0;
box-sizing: border-box;
}
.summary-icon {
width: 55rpx;
height: 65rpx;
flex-shrink: 0;
}
.summary-side--left .summary-icon {
margin-right: 22rpx;
}
.summary-text {
flex-shrink: 0;
box-sizing: border-box;
}
.summary-label {
font-size: 24rpx;
color: #8f9ca2;
line-height: 34rpx;
}
.summary-status {
margin-top: 8rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 40rpx;
}
.summary-date {
margin-top: 8rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 40rpx;
white-space: nowrap;
}
.summary-divider {
width: 2rpx;
height: 72rpx;
flex-shrink: 0;
background: #eee;
margin-right: 40rpx;
}
.panel-wrap {
flex: 1;
min-height: 0;
height: 0;
margin-top: 12rpx;
padding: 0 30rpx 30rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
}
</style>

343
pages/hiddendanger/rectification.vue
View File

@@ -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) => {
// 计算签名画布宽度

218
pages/hiddendanger/view.vue
View File

@@ -1,196 +1,50 @@
<template>
<view class="padding page">
<view class="padding bg-white radius">
<view class="flex margin-bottom">
<view class="text-gray">检查形式</view>
<view class="text-red">*</view>
</view>
<view class="read-only-box">{{ detailData.source || '暂无' }}</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患图片</view>
<view class="text-red">*</view>
</view>
<view class="margin-bottom">
<view v-if="detailData.attachments && detailData.attachments.length > 0" class="margin-top-xs">
<view class="flex" style="flex-wrap: wrap; gap: 10rpx;">
<image
v-for="(img, idx) in detailData.attachments"
:key="idx"
:src="getFullPath(img.filePath)"
style="width: 136rpx;height: 136rpx;border-radius: 16rpx;"
mode="aspectFill"
@click="previewHazardImage(idx)"
></image>
</view>
</view>
<view v-else class="text-gray text-sm">暂无图片</view>
<view class="text-gray text-sm margin-top-xs">必填：请上传现场照片作为隐患证据</view>
</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患标题</view>
<view class="text-red">*</view>
</view>
<up-input v-model="detailData.title" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无" />
<view class="text-sm text-gray margin-top-xs">请用简洁的语言概括隐患要点</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患等级</view>
<view class="text-red">*</view>
</view>
<view class="flex col-2" style="gap: 10rpx;">
<view :class="detailData.level === 2 ? 'bg-blue light' : 'bg-gray'" class="level-item">一般隐患</view>
<view :class="detailData.level === 3 ? 'bg-blue light' : 'bg-gray'" class="level-item">重大隐患</view>
</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患位置</view>
<view class="text-red">*</view>
</view>
<up-input v-model="detailData.address" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无地址" />
<view class="text-gray text-sm margin-top-xs">如：办公楼3层东侧消防通道、生产车间A区设备旁等，或点击"选择地址"按钮在地图上选择</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">法律依据</view>
</view>
<view class="read-only-select">
<view class="select-value" :class="{ placeholder: !legalBasisText }">
{{ legalBasisText || '暂无' }}
</view>
</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患区域</view>
</view>
<view class="read-only-select">
<view class="flex align-center">
<view
v-if="detailData.areaColor"
class="area-color-dot"
:style="{ backgroundColor: detailData.areaColor }"
></view>
<view class="select-value" :class="{ placeholder: !detailData.areaName }">
{{ detailData.areaName || '暂无' }}
</view>
</view>
</view>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患描述</view>
<view class="text-red">*</view>
</view>
<up-textarea v-model="detailData.description" placeholder="暂无描述" disabled autoHeight></up-textarea>
<view class="text-gray text-sm margin-top-xs">请详细说明隐患现状、潜在风险及影响范围</view>
<view class="text-gray margin-bottom margin-top">隐患标签</view>
<view class="read-only-box">{{ detailData.tagName || '暂无' }}</view>
</view>
<view class="page">
<HazardDetailPanel :detail="detailData" :loading="loading" />
</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHiddenDangerDetail } from '@/request/api.js'
import { toImageUrl } from '@/request/request.js'
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import HazardDetailPanel from '@/components/hazardDetail/HazardDetailPanel.vue';
import { getHazardDetail } from '@/request/api.js';
const detailData = reactive({
hazardId: '',
assignId: '',
title: '',
level: 0,
levelName: '',
source: '',
description: '',
address: '',
areaName: '',
areaColor: '',
tagName: '',
legalBasis: '',
regulationName: '',
attachments: []
})
const detailData = ref({});
const loading = ref(false);
const legalBasisText = computed(() => detailData.legalBasis || detailData.regulationName || '')
const loadDetail = async (hazardId) => {
loading.value = true;
try {
const res = await getHazardDetail(hazardId);
if (res.code === 0 && res.data) {
detailData.value = res.data;
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
}
} catch (error) {
console.error('获取隐患详情失败:', error);
} finally {
loading.value = false;
}
};
const getFullPath = (filePath) => toImageUrl(filePath)
const previewHazardImage = (index) => {
if (!detailData.attachments || detailData.attachments.length === 0) return
uni.previewImage({
current: index,
urls: detailData.attachments.map(item => getFullPath(item.filePath))
})
onLoad((options) => {
if (options.hazardId) {
loadDetail(options.hazardId);
return;
}
const fetchDetail = async (hazardId, assignId) => {
try {
const params = { hazardId }
if (assignId) params.assignId = assignId
const res = await getHiddenDangerDetail(params)
if (res.code === 0 && res.data) {
Object.assign(detailData, res.data)
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
}
} catch (error) {
console.error('获取隐患详情失败:', error)
uni.showToast({ title: '请求失败', icon: 'none' })
}
}
onLoad((options) => {
if (options.hazardId) {
fetchDetail(options.hazardId, options.assignId)
}
})
uni.showToast({ title: '缺少隐患ID', icon: 'none' });
setTimeout(() => {
uni.navigateBack();
}, 1500);
});
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #EBF2FC;
}
.read-only-box {
background: #f5f5f5;
border-radius: 8rpx;
padding: 20rpx 24rpx;
font-size: 28rpx;
color: #333;
}
.read-only-select {
background: #f5f5f5;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
padding: 20rpx 24rpx;
.select-value {
font-size: 28rpx;
color: #333;
line-height: 1.5;
word-break: break-all;
&.placeholder {
color: #999;
}
}
}
.level-item {
padding: 16rpx 40rpx;
border-radius: 8rpx;
text-align: center;
font-size: 28rpx;
}
.area-color-dot {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
margin-right: 16rpx;
flex-shrink: 0;
}
.page {
min-height: 100vh;
background: #ebf2fc;
}
</style>