feat: 图片上传抽离公共模块，统一成功角标并修复记录拍照无法删除
上传模块 utils/upload.js（新增）
此前 detail.vue 与 records.vue 各写一份 uni.uploadFile 封装，超时与并发策略
容易漂移，且都是串行上传 —— 9 张图排队一张张传完，弱网下工人要干等半分钟。
- uploadImage：单张上传，UPLOAD_TIMEOUT 防弱网永久挂起；非 2xx 时后端返回的
是 {detail:...} 而非 {url}，必须当失败处理，否则图片被静默丢弃
- uploadImages：有界并发池（并发 3），onEachDone 对每张图恰好回调一次，
成功与失败都精确回收一个 ⏳ 占位符
- isUploadedUrl：判定「是否已真正上传成功」。成功 resolve 的是后端 URL
（/api/v1/upload/files/… 或 http(s)://），未完成的拿到的是本地临时地址
（blob: / file:// / _doc/ / wxfile://）
上传成功绿勾角标
- 应用到 detail.vue（记录表单 + 驳回表单）与 records.vue（编辑记录弹窗）
- 角标仅在 isUploadedUrl 判定为真时渲染；⏳ 占位与失败项结构上不可能出现
角标，因为角标只存在于「已上传」的那个循环里
- 圆角与裁剪改由 .success-badge-wrapper 负责，图片只负责填满
修复：记录/拍照里已选图片无法删除
删除按钮原为 v-if="canDeleteImage"，而该项在「任务已定稿
（COMPLETED/REJECTED/ARCHIVED/CANCELED）」或「非本人任务」时返回 false。
但 handleTaskAction 里 type === "record" 是无条件打开弹窗的，工人完全可能
在已完成任务上打开「记录/拍照」，于是刚选、尚未提交的图也被一并锁死 ——
那些图只存在于内存里，删掉不产生任何服务端影响。
- 新增 recordForm.savedCount（打开弹窗时已落库的张数），
新增 canDeleteRecordImage(i) = canDeleteImage || i >= savedCount：
本次新选的图永远可删，已落库的才受「任务已定稿」约束
- 未落库的图免去 5 秒倒计时 —— 该机制本是为不可逆的服务器删除设计的，
刚选错的图重拍一张即可，没必要卡 5 秒
- openEditRecord 由 images: record.images || [] 改为 saved.slice()：
原先按引用赋值，删图会直接改动底层记录对象，此时点「取消」被删的图
在本地列表里也已经没了
This commit is contained in:
@ -110,7 +110,7 @@
|
||||
<text class="popup-task">{{ recordPopup.task && recordPopup.task.task_name }}</text>
|
||||
<textarea v-model="recordForm.remark" class="popup-textarea" placeholder="填写备注说明" :maxlength="2000" />
|
||||
<view class="img-grid">
|
||||
<view v-for="(img, i) in recordForm.images" :key="i" class="img-cell"><image :src="imageUrl(img)" mode="aspectFill" class="img-thumb" @tap="previewRecordImage(i)" /><text v-if="canDeleteImage" class="img-del" @tap.stop="removeRecordImage(i)">✕</text></view>
|
||||
<view v-for="(img, i) in recordForm.images" :key="i" class="img-cell"><view class="success-badge-wrapper img-frame"><image :src="imageUrl(img)" mode="aspectFill" class="img-thumb" @tap="previewRecordImage(i)" /><view v-if="isUploaded(img)" class="success-badge" /></view><text v-if="canDeleteRecordImage(i)" class="img-del" @tap.stop="removeRecordImage(i)">✕</text></view>
|
||||
<view v-for="n in recordForm.pendingCount" :key="'p'+n" class="img-cell img-cell-loading"><text class="img-loading-text">⏳</text></view>
|
||||
</view>
|
||||
<button v-if="recordForm.images.length + recordForm.pendingCount < 9" class="btn-upload" @tap="handleChooseImage" :disabled="isUploading">{{ isUploading ? '上传中...' : `📷 拍照/选图 (${recordForm.images.length + recordForm.pendingCount}/9)` }}</button>
|
||||
@ -139,7 +139,7 @@
|
||||
<!-- 📷 异常图片为选填：编号错误、选错工序等场景可不拍照 -->
|
||||
<view class="field-label">异常图片 <text class="optional">（选填，最多 9 张）</text></view>
|
||||
<view class="img-grid">
|
||||
<view v-for="(img, i) in rejectForm.images" :key="i" class="img-cell"><image :src="imageUrl(img)" mode="aspectFill" class="img-thumb" @tap="previewRejectImage(i)" /><text class="img-del" @tap.stop="removeRejectImage(i)">✕</text></view>
|
||||
<view v-for="(img, i) in rejectForm.images" :key="i" class="img-cell"><view class="success-badge-wrapper img-frame"><image :src="imageUrl(img)" mode="aspectFill" class="img-thumb" @tap="previewRejectImage(i)" /><view v-if="isUploaded(img)" class="success-badge" /></view><text class="img-del" @tap.stop="removeRejectImage(i)">✕</text></view>
|
||||
<view v-for="n in rejectForm.pendingCount" :key="'rp'+n" class="img-cell img-cell-loading"><text class="img-loading-text">⏳</text></view>
|
||||
</view>
|
||||
<button v-if="rejectForm.images.length + rejectForm.pendingCount < 9" class="btn-upload" @tap="handleChooseRejectImage" :disabled="isUploading">{{ isUploading ? '上传中...' : `📷 拍照/选图 (${rejectForm.images.length + rejectForm.pendingCount}/9)` }}</button>
|
||||
@ -225,6 +225,7 @@
|
||||
|
||||
<script>
|
||||
import request, { get, post, patch, put, getBaseUrl } from "../../utils/request";
|
||||
import { uploadImages, isUploadedUrl } from "../../utils/upload";
|
||||
import { setUserNameMap, formatUserName, formatUserAvatar } from "../../utils/format";
|
||||
import { taskOptionsFor, overallOptionsFor, lifecycleBadge } from "../../utils/lifecycle";
|
||||
import WorkspaceArea from "./components/WorkspaceArea.vue";
|
||||
@ -243,7 +244,7 @@ export default {
|
||||
showStatusPicker: false, editProductVisible: false, editForm: { order_no: "", external_serial: "" }, editSaving: false,
|
||||
users: [],
|
||||
createFirstVisible: false, isWarehouseTransfer: false, firstForm: { task_name: "", taskNameIdx: 0, assignee_id: "", assigneeLabel: "", assigneeIdx: 0, note: "" }, firstSaving: false,
|
||||
recordPopup: { visible: false, task: null }, recordForm: { recordId: null, remark: "", images: [], pendingCount: 0 }, recordSaving: false, isUploading: false,
|
||||
recordPopup: { visible: false, task: null }, recordForm: { recordId: null, remark: "", images: [], pendingCount: 0, savedCount: 0 }, recordSaving: false, isUploading: false,
|
||||
currentUser: null, currentUserId: "", currentUsername: "", currentUserRole: "", currentMode: "workspace", autoLockTaskId: "",
|
||||
processOptions: [], userOptions: [],
|
||||
actionPopup: { visible: false, type: "", task: null }, actionLoading: false, rejectReason: "", receiveRemark: "", receiveTaskName: "",
|
||||
@ -341,6 +342,12 @@ export default {
|
||||
onShow() { if (this.product?.id) { this.fetchMessages(); } },
|
||||
// 🚀 页面卸载：清理确认倒计时定时器，避免泄漏
|
||||
onUnload() { this.clearConfirm(); },
|
||||
// ⚠️ 本页【刻意不开启】下拉刷新（pages.json 中已移除 enablePullDownRefresh）。
|
||||
// 原因：本页有三种沉浸式模式 —— 锁定的工作区卡片、全屏流转卡片(swiper)、
|
||||
// 全屏流转树(scroll-view)，它们各自持有滚动/滑动手势，且都是 position:fixed
|
||||
// 或原生 scroll-view，无法改由页面滚动接管。一旦开启页面下拉刷新，这些区域
|
||||
// 滑到顶后再下拉就会误触发刷新，工人没法正常往上翻内容。
|
||||
// 状态纠偏不依赖下拉刷新：handleNetworkFailure 会自动静默拉取真实状态。
|
||||
methods: {
|
||||
formatUserName, formatUserAvatar,
|
||||
formatName(name) { if (!name) return ""; return name.length === 2 ? name[0] + " " + name[1] : name; },
|
||||
@ -390,8 +397,10 @@ export default {
|
||||
openWarehouseTransfer() { this.isWarehouseTransfer = true; this.openCreateFirstTask(); },
|
||||
async doCreateFirstTask() { this.firstSaving = true; try { await post("/tasks/", { product_id: this.product.id, task_name: "待确认", assignee_id: this.firstForm.assignee_id, notify_parent_on_complete: false, remark: this.firstForm.note.trim() || undefined }); if (this.product.current_location_id === 'virtual_warehouse') { try { await patch(`/products/${this.product.id}`, { current_location_id: this.firstForm.assignee_id }); } catch {} } uni.showToast({ title: "任务已派发，待接收", icon: "success" }); this.createFirstVisible = false; this.doQuery(this.product.serial_number); } catch {} finally { this.firstSaving = false; } },
|
||||
|
||||
openRecordPopup(task) { this.recordPopup = { visible: true, task }; this.recordForm = { recordId: null, remark: "", images: [], pendingCount: 0 }; this.isUploading = false; },
|
||||
openEditRecord({ task, record }) { this.recordPopup = { visible: true, task }; this.recordForm = { recordId: record.id, remark: record.remark || "", images: record.images || [], pendingCount: 0 }; this.isUploading = false; },
|
||||
// savedCount = 打开弹窗时已落库的图片张数。列表里 [0, savedCount) 是服务端已有的，
|
||||
// 之后的都是本次会话新选的（尚未提交），删除判定据此区分，见 canDeleteRecordImage。
|
||||
openRecordPopup(task) { this.recordPopup = { visible: true, task }; this.recordForm = { recordId: null, remark: "", images: [], pendingCount: 0, savedCount: 0 }; this.isUploading = false; },
|
||||
openEditRecord({ task, record }) { const saved = record.images || []; this.recordPopup = { visible: true, task }; this.recordForm = { recordId: record.id, remark: record.remark || "", images: saved.slice(), pendingCount: 0, savedCount: saved.length }; this.isUploading = false; },
|
||||
closeRecordPopup() { this.recordPopup = { visible: false, task: null }; },
|
||||
// 🖼️ 后端返回的是相对路径（如 /api/v1/upload/files/xxx.jpg），直接丢给 <image> 会破图，
|
||||
// 这里补全域名 → 完整可访问 URL。逻辑与 records.vue / TaskTreeNode.vue 保持一致。
|
||||
@ -402,7 +411,9 @@ export default {
|
||||
return domain + (url.startsWith("/") ? url : "/" + url);
|
||||
},
|
||||
// 📷 通用选图上传：压缩后逐个上传，URL 累积进 target.images，
|
||||
// 过程中用 target.pendingCount 显示 ⏳ 占位（追加记录 / 驳回共用）
|
||||
// 过程中用 target.pendingCount 显示 ⏳ 占位（追加记录 / 驳回共用）。
|
||||
// ⚠️ 失败必须显式提示 + 确保图片不进 images 数组，绝不静默吞掉：
|
||||
// 工人会以为图传好了，提交上去才发现缺图，而任务已流转出去。
|
||||
async pickAndUploadImages(target) {
|
||||
const maxSlots = 9 - (target.images.length + target.pendingCount);
|
||||
if (maxSlots <= 0) return;
|
||||
@ -412,24 +423,62 @@ export default {
|
||||
for (const p of chooseRes.tempFilePaths) {
|
||||
try { const compressed = await new Promise((resolve, reject) => { uni.compressImage({ src: p, quality: 60, success: resolve, fail: reject }); }); compressedPaths.push(compressed.tempFilePath); } catch {}
|
||||
}
|
||||
if (!compressedPaths.length) return;
|
||||
if (!compressedPaths.length) {
|
||||
// 压缩全军覆没（内存不足/格式异常）也必须说一声，不能悄悄什么都没发生
|
||||
uni.showToast({ title: "图片处理失败，请重试", icon: "none", duration: 3000 });
|
||||
return;
|
||||
}
|
||||
this.isUploading = true;
|
||||
target.pendingCount += compressedPaths.length;
|
||||
for (const path of compressedPaths) {
|
||||
const url = await this.uploadFile(path);
|
||||
// 🚀 有界并发上传（utils/upload.js）：9 张图并行补位，不再串行干等。
|
||||
// onEachDone 对每张图恰好回调一次 —— 成功的推入 images 供预览，
|
||||
// 失败的保持不推入（不给"图片已传好"的错觉），两者都回收一个 ⏳ 占位。
|
||||
const { failed, total } = await uploadImages(compressedPaths, (url) => {
|
||||
if (url) target.images.push(url);
|
||||
target.pendingCount--;
|
||||
}
|
||||
});
|
||||
this.isUploading = false;
|
||||
if (failed > 0) {
|
||||
uni.showToast({
|
||||
title: failed === total ? "图片上传失败，请重试" : "部分图片上传失败，请重试",
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
});
|
||||
}
|
||||
},
|
||||
handleChooseImage() { return this.pickAndUploadImages(this.recordForm); },
|
||||
handleChooseRejectImage() { return this.pickAndUploadImages(this.rejectForm); },
|
||||
uploadFile(filePath) { return new Promise((resolve) => { uni.uploadFile({ url: getBaseUrl() + "/upload/", filePath, name: "file", success(res) { try { const data = JSON.parse(res.data); resolve(data.url || null); } catch { resolve(null); } }, fail: () => resolve(null) }); }); },
|
||||
removeRecordImage(i) { this.openConfirmDlg({ title: "删除图片", content: "确定删除这张图片吗？", countdown: true, action: () => { this.recordForm.images.splice(i, 1); } }); },
|
||||
/**
|
||||
* 删除一张记录图。
|
||||
*
|
||||
* 已落库的图（编辑历史记录）删掉是不可逆的，保留 5 秒倒计时防误触；
|
||||
* 本次刚选、尚未提交的图只存在内存里，删错了重新拍一张即可，没必要卡 5 秒。
|
||||
*/
|
||||
removeRecordImage(i) {
|
||||
const isUnsaved = i >= (this.recordForm.savedCount || 0);
|
||||
this.openConfirmDlg({
|
||||
title: "删除图片",
|
||||
content: "确定删除这张图片吗？",
|
||||
countdown: !isUnsaved,
|
||||
action: () => { this.recordForm.images.splice(i, 1); },
|
||||
});
|
||||
},
|
||||
previewRecordImage(i) { uni.previewImage({ urls: this.recordForm.images.map((u) => this.imageUrl(u)), current: i }); },
|
||||
removeRejectImage(i) { this.rejectForm.images.splice(i, 1); },
|
||||
previewRejectImage(i) { uni.previewImage({ urls: this.rejectForm.images.map((u) => this.imageUrl(u)), current: i }); },
|
||||
async doSaveRecord() { if (this.isUploading) return; this.recordSaving = true; try { const payload = { remark: this.recordForm.remark.trim(), images: this.recordForm.images }; if (this.recordForm.recordId) await put(`/records/${this.recordForm.recordId}`, payload); else await patch(`/tasks/${this.recordPopup.task.id}/records`, payload); uni.showToast({ title: "已保存", icon: "success" }); this.closeRecordPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.recordSaving = false; } },
|
||||
/** 绿勾角标只认「已上传成功」的项（判定逻辑统一收口在 utils/upload.js） */
|
||||
isUploaded(url) { return isUploadedUrl(url); },
|
||||
/**
|
||||
* 某张记录图能否删除。
|
||||
*
|
||||
* 本次会话新选、尚未提交的图（下标 >= savedCount）**永远可删** —— 它只存在于
|
||||
* 内存里，删掉不产生任何服务端影响。canDeleteImage 那道「任务已定稿 / 不是我的活」
|
||||
* 的闸门本意是保护已落库的历史记录，不该连带把工人刚选错、想撤掉的候选图一起锁死。
|
||||
* （此前这里直接写 v-if="canDeleteImage"，导致在已完成任务上打开「记录/拍照」，
|
||||
* 选完图后根本没有删除入口。）
|
||||
*/
|
||||
canDeleteRecordImage(i) { return this.canDeleteImage || i >= (this.recordForm.savedCount || 0); },
|
||||
async doSaveRecord() { if (this.isUploading) return; this.recordSaving = true; try { const payload = { remark: this.recordForm.remark.trim(), images: this.recordForm.images }; if (this.recordForm.recordId) await put(`/records/${this.recordForm.recordId}`, payload); else await patch(`/tasks/${this.recordPopup.task.id}/records`, payload); uni.showToast({ title: "已保存", icon: "success" }); this.closeRecordPopup(); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, this.recordForm.recordId ? "更新记录" : "保存记录"); } finally { this.recordSaving = false; } },
|
||||
|
||||
async handleTaskAction({ task, type, record }) {
|
||||
if (type === "record") { this.openRecordPopup(task); return; }
|
||||
@ -446,10 +495,46 @@ export default {
|
||||
async doDeleteRecord(record) { this.openConfirmDlg({ title: "删除记录", content: "确定删除这条记录吗？删除后不可恢复。", countdown: true, action: async () => { try { await request({ url: `/records/${record.id}`, method: "DELETE" }); uni.showToast({ title: "记录已删除", icon: "success" }); this.doQuery(this.product.serial_number); } catch (e) { uni.showToast({ title: (e && e.data && e.data.detail) || "删除失败", icon: "none" }); } } }); },
|
||||
confirmEndBranch(task) { this.openConfirmDlg({ title: "结束分支", content: `确定结束「${task.task_name}」吗？`, countdown: true, action: () => this.doEndBranch(task) }); },
|
||||
confirmRecall(task) { this.openConfirmDlg({ title: "撤回转交", content: `确定撤回「${task.task_name}」吗？撤回后任务将回到您的手中。`, countdown: true, action: () => this.doRecall(task) }); },
|
||||
async doRecall(task) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/recall?operator_id=${encodeURIComponent(opId)}`); uni.showToast({ title: "已撤回", icon: "success" }); this.doQuery(this.product.serial_number); } catch {} },
|
||||
async doEndBranch(task) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/end?operator_id=${encodeURIComponent(opId)}`); uni.showToast({ title: "分支已结束", icon: "success" }); this.doQuery(this.product.serial_number); } catch {} },
|
||||
async doRecall(task) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/recall?operator_id=${encodeURIComponent(opId)}`); uni.showToast({ title: "已撤回", icon: "success" }); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, "撤回转交"); } },
|
||||
async doEndBranch(task) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/end?operator_id=${encodeURIComponent(opId)}`); uni.showToast({ title: "分支已结束", icon: "success" }); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, "结束分支"); } },
|
||||
closeActionPopup() { this.actionPopup = { visible: false, type: "", task: null }; },
|
||||
|
||||
// ═══ 网络级失败的识别与统一处置（防"超时后连点"造成重复流转） ═══
|
||||
// 🌐 判定「网络级失败」：uni.request 的 fail 回调 = 压根没拿到后端响应
|
||||
// （超时 / 断网 / DNS 失败），与 4xx/5xx 有本质区别 —— 后者后端明确应答过，
|
||||
// 而前者后端很可能已经把动作执行成功了，只是响应没回来。
|
||||
isNetworkFailure(e) {
|
||||
if (!e) return false;
|
||||
if (e.isNetworkError === true) return true;
|
||||
if (e.statusCode) return false; // 有 HTTP 状态码 = 后端应答过，不是网络级
|
||||
const msg = String(e.errMsg || e.message || "");
|
||||
return /timeout|network|request:fail/i.test(msg);
|
||||
},
|
||||
// 🛡️ 网络级失败的统一处置：
|
||||
// 1) 关闭弹窗 —— 强行打断工人的连点，否则第二次点下去就是重复驳回/重复转交；
|
||||
// 2) 强提示（模态，必须手动确认）—— 告诉他"可能已生效"，别再点；
|
||||
// 3) 静默拉取真实状态 —— 防止继续基于过期数据产生脏操作。
|
||||
// 返回 true 表示已按网络级失败处理，调用方无需再兜底。
|
||||
handleNetworkFailure(e, actionLabel) {
|
||||
if (!this.isNetworkFailure(e)) return false;
|
||||
this.closeActionPopup();
|
||||
this.closeRecordPopup();
|
||||
uni.showModal({
|
||||
title: "网络超时",
|
||||
content: `未收到服务器响应，「${actionLabel}」可能已生效。已为你刷新最新状态，请确认后再操作。`,
|
||||
showCancel: false,
|
||||
confirmText: "知道了",
|
||||
});
|
||||
this.refreshProductSilently();
|
||||
return true;
|
||||
},
|
||||
// 静默刷新产品详情：不置 loading，避免打断视线（网络故障后自动纠偏用）
|
||||
async refreshProductSilently() {
|
||||
const sn = this.product && this.product.serial_number;
|
||||
if (!sn) return;
|
||||
try { this.product = await get(`/products/scan/${sn}`); } catch (e) { console.error("[refresh] 静默刷新失败:", e); }
|
||||
},
|
||||
|
||||
// ═══ 双重确认倒计时（防误触） ═══
|
||||
// 首次点击进入 5 秒倒计时：期间确认按钮虚化禁用（点不了），只有「取消」可用；
|
||||
// 5 秒结束后确认按钮解锁，点击才真正执行。
|
||||
@ -509,15 +594,15 @@ export default {
|
||||
this.confirmDlg.visible = false;
|
||||
this.confirmDlg.action = null;
|
||||
},
|
||||
async doReceive() { this.actionLoading = true; try { const remark = this.receiveRemark.trim() || undefined; const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/receive?operator_id=${encodeURIComponent(opId)}`, { remark, task_name: this.receiveTaskName }); uni.showToast({ title: "已接收", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
|
||||
async doReceive() { this.actionLoading = true; try { const remark = this.receiveRemark.trim() || undefined; const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/receive?operator_id=${encodeURIComponent(opId)}`, { remark, task_name: this.receiveTaskName }); uni.showToast({ title: "已接收", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, "接收任务"); } finally { this.actionLoading = false; } },
|
||||
// 驳回：reason 必填，images 选填（编号错误等场景允许空数组）
|
||||
async doReject() { if (this.isUploading) return; this.actionLoading = true; try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/reject?operator_id=${encodeURIComponent(opId)}`, { reason: this.rejectReason.trim(), images: this.rejectForm.images }); uni.showToast({ title: "已驳回", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
|
||||
async doReject() { if (this.isUploading) return; this.actionLoading = true; try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/reject?operator_id=${encodeURIComponent(opId)}`, { reason: this.rejectReason.trim(), images: this.rejectForm.images }); uni.showToast({ title: "已驳回", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, "驳回任务"); } finally { this.actionLoading = false; } },
|
||||
// 转交 — 互斥选择
|
||||
selectTransferUser(userId) { this.transferForm.selectedUserId = userId; this.transferForm.isWarehouse = false; },
|
||||
toggleWarehouse() { this.transferForm.isWarehouse = !this.transferForm.isWarehouse; if (this.transferForm.isWarehouse) this.transferForm.selectedUserId = ""; },
|
||||
async doTransfer() { this.actionLoading = true; try { const assignees = this.transferForm.isWarehouse ? ["virtual_warehouse"] : [this.transferForm.selectedUserId]; const taskName = this.transferForm.isWarehouse ? "🏭 入库 (virtual_warehouse)" : "待确认"; await post(`/tasks/${this.actionPopup.task.id}/transfer`, { next_tasks: [{ task_name: taskName, assignees }], note: this.transferForm.note.trim() || undefined }); uni.showToast({ title: this.transferForm.isWarehouse ? "已入库" : "转交成功", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
|
||||
async doTransfer() { this.actionLoading = true; try { const assignees = this.transferForm.isWarehouse ? ["virtual_warehouse"] : [this.transferForm.selectedUserId]; const taskName = this.transferForm.isWarehouse ? "🏭 入库 (virtual_warehouse)" : "待确认"; await post(`/tasks/${this.actionPopup.task.id}/transfer`, { next_tasks: [{ task_name: taskName, assignees }], note: this.transferForm.note.trim() || undefined }); uni.showToast({ title: this.transferForm.isWarehouse ? "已入库" : "转交成功", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, this.transferForm.isWarehouse ? "入库" : "转交"); } finally { this.actionLoading = false; } },
|
||||
// 派发协助分支
|
||||
async doSpawn() { this.actionLoading = true; try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/spawn?operator_id=${encodeURIComponent(opId)}`, { task_name: "待确认", assignee_id: this.spawnForm.assignee_id, remark: this.spawnForm.remark.trim() || undefined }); uni.showToast({ title: "协助分支已派发", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
|
||||
async doSpawn() { this.actionLoading = true; try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/spawn?operator_id=${encodeURIComponent(opId)}`, { task_name: "待确认", assignee_id: this.spawnForm.assignee_id, remark: this.spawnForm.remark.trim() || undefined }); uni.showToast({ title: "协助分支已派发", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch (e) { this.handleNetworkFailure(e, "派发协助分支"); } finally { this.actionLoading = false; } },
|
||||
// 💬 留言板
|
||||
async fetchMessages() { if (!this.product?.id) return; try { const res = await get(`/products/${this.product.id}/messages`); this.messages = res || []; const key = `msg_seen_${this.product.id}`; this.lastMsgSeenAt = uni.getStorageSync(key) || ''; this.scrollToBottom(); } catch (e) { console.error('获取留言失败', e); } },
|
||||
async submitMessage() { const content = this.newMsgText.trim(); if (!content) return; this.newMsgText = ''; const tempId = 'temp_' + Date.now(); const tempMsg = { id: tempId, operator_id: this.currentUsername || this.currentUserId || '?', content, created_at: new Date().toISOString() }; this.messages.push(tempMsg); this.scrollToBottom(); try { await post(`/products/${this.product.id}/messages`, { operator_id: this.currentUsername || this.currentUserId, content }); this.fetchMessages(); } catch (e) { uni.showToast({ title: '发送失败', icon: 'none' }); this.messages = this.messages.filter(m => m.id !== tempId); } },
|
||||
@ -561,7 +646,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container { min-height: 100vh; display: block; background-color: #f3f4f6; box-sizing: border-box; padding: 16px; padding-bottom: 24px; overflow-y: auto; }
|
||||
/* 根容器只负责背景与内边距，不设固定高度、不做内部滚动 —— 内容自然撑开，
|
||||
整页滚动完全交给原生 Page 层，避免与页面下拉刷新手势打架。 */
|
||||
.page-container { min-height: 100vh; display: block; background-color: #f3f4f6; box-sizing: border-box; padding: 16px; padding-bottom: 24px; }
|
||||
.loading { text-align: center; padding: 48px 0; color: #6b7280; }
|
||||
.error-box { padding: 12px; border-radius: 10px; background: #fef2f2; color: #dc2626; font-size: 13px; border: 1px solid #fecaca; }
|
||||
.overall-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
@ -652,7 +739,9 @@ export default {
|
||||
.picker-box { width: 100%; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 12px; font-size: 14px; color: #1f2937; line-height: 42px; box-sizing: border-box; background: #fff; }
|
||||
.img-grid { display: flex; flex-wrap: wrap; margin: 8px -5px; }
|
||||
.img-cell { position: relative; width: 160rpx; height: 160rpx; margin: 10rpx; }
|
||||
.img-thumb { width: 160rpx; height: 160rpx; border-radius: 12rpx; border: 1px solid #e5e7eb; }
|
||||
/* 圆角与裁剪交给 .success-badge-wrapper，图片只负责填满 */
|
||||
.img-frame { width: 160rpx; height: 160rpx; }
|
||||
.img-thumb { width: 100%; height: 100%; display: block; border: 1px solid #e5e7eb; box-sizing: border-box; }
|
||||
.img-cell-loading { display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 12rpx; border: 1px dashed #d1d5db; }
|
||||
.img-loading-text { font-size: 36rpx; }
|
||||
.img-del { position: absolute; top: -12rpx; right: -12rpx; width: 40rpx; height: 40rpx; background: #ef4444; color: #fff; border-radius: 20rpx; font-size: 24rpx; text-align: center; line-height: 40rpx; z-index: 2; }
|
||||
|
||||
@ -69,7 +69,10 @@
|
||||
<textarea v-model="editForm.remark" class="edit-textarea" placeholder="填写备注说明" :maxlength="2000" />
|
||||
<view class="edit-imgs">
|
||||
<view v-for="(img, i) in editForm.images" :key="i" class="edit-img-cell">
|
||||
<image :src="imageUrl(img)" mode="aspectFill" class="edit-img" @tap="previewEditImage(i)" />
|
||||
<view class="success-badge-wrapper edit-img-frame">
|
||||
<image :src="imageUrl(img)" mode="aspectFill" class="edit-img" @tap="previewEditImage(i)" />
|
||||
<view v-if="isUploaded(img)" class="success-badge" />
|
||||
</view>
|
||||
<text class="edit-img-del" @tap.stop="removeEditImage(i)">✕</text>
|
||||
</view>
|
||||
<view v-for="n in editForm.pendingCount" :key="'p'+n" class="edit-img-cell edit-img-loading"><text class="edit-img-loading-text">⏳</text></view>
|
||||
@ -86,6 +89,7 @@
|
||||
|
||||
<script>
|
||||
import request, { get, put, getBaseUrl } from "../../utils/request";
|
||||
import { uploadImages, isUploadedUrl } from "../../utils/upload";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -170,6 +174,11 @@ export default {
|
||||
uni.previewImage({ urls: fullUrls, current: index });
|
||||
},
|
||||
|
||||
/** 绿勾角标只认「已上传成功」的项（判定逻辑统一收口在 utils/upload.js） */
|
||||
isUploaded(url) {
|
||||
return isUploadedUrl(url);
|
||||
},
|
||||
|
||||
formatTime(t) {
|
||||
if (!t) return "";
|
||||
const d = new Date(t);
|
||||
@ -212,24 +221,28 @@ export default {
|
||||
compressedPaths.push(compressed.tempFilePath);
|
||||
} catch {}
|
||||
}
|
||||
if (!compressedPaths.length) return;
|
||||
if (!compressedPaths.length) {
|
||||
// 压缩全军覆没（内存不足/格式异常）也必须说一声，不能悄悄什么都没发生
|
||||
uni.showToast({ title: "图片处理失败，请重试", icon: "none", duration: 3000 });
|
||||
return;
|
||||
}
|
||||
this.isUploading = true;
|
||||
this.editForm.pendingCount += compressedPaths.length;
|
||||
for (const path of compressedPaths) {
|
||||
const url = await this.uploadFile(path);
|
||||
// 🚀 有界并发上传（utils/upload.js）：9 张图并行补位，不再串行干等。
|
||||
// onEachDone 对每张图恰好回调一次 —— 成功的推入 images 供预览，
|
||||
// 失败的保持不推入（不给"图片已传好"的错觉），两者都回收一个 ⏳ 占位。
|
||||
const { failed, total } = await uploadImages(compressedPaths, (url) => {
|
||||
if (url) this.editForm.images.push(url);
|
||||
this.editForm.pendingCount--;
|
||||
}
|
||||
this.isUploading = false;
|
||||
},
|
||||
uploadFile(filePath) {
|
||||
return new Promise((resolve) => {
|
||||
uni.uploadFile({
|
||||
url: getBaseUrl() + "/upload/", filePath, name: "file",
|
||||
success(res) { try { const data = JSON.parse(res.data); resolve(data.url || null); } catch { resolve(null); } },
|
||||
fail: () => resolve(null),
|
||||
});
|
||||
});
|
||||
this.isUploading = false;
|
||||
if (failed > 0) {
|
||||
uni.showToast({
|
||||
title: failed === total ? "图片上传失败，请重试" : "部分图片上传失败，请重试",
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
});
|
||||
}
|
||||
},
|
||||
async doSaveEdit() {
|
||||
if (this.isUploading) return;
|
||||
@ -348,7 +361,9 @@ export default {
|
||||
.edit-textarea { width: 100%; height: 80px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; font-size: 14px; box-sizing: border-box; }
|
||||
.edit-imgs { display: flex; flex-wrap: wrap; margin-top: 10px; }
|
||||
.edit-img-cell { position: relative; width: 160rpx; height: 160rpx; margin: 10rpx; }
|
||||
.edit-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; border: 1px solid #e5e7eb; }
|
||||
/* 圆角与裁剪交给 .success-badge-wrapper，图片只负责填满 */
|
||||
.edit-img-frame { width: 160rpx; height: 160rpx; }
|
||||
.edit-img { width: 100%; height: 100%; display: block; border: 1px solid #e5e7eb; box-sizing: border-box; }
|
||||
.edit-img-loading { display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 12rpx; border: 1px dashed #d1d5db; }
|
||||
.edit-img-loading-text { font-size: 36rpx; }
|
||||
.edit-img-del { position: absolute; top: -12rpx; right: -12rpx; width: 40rpx; height: 40rpx; background: #ef4444; color: #fff; border-radius: 20rpx; font-size: 24rpx; text-align: center; line-height: 40rpx; z-index: 2; }
|
||||
|
||||
101
track-uniapp/src/utils/upload.js
Normal file
101
track-uniapp/src/utils/upload.js
Normal file
@ -0,0 +1,101 @@
|
||||
/**
|
||||
* 图片上传工具 — 超时与并发策略的唯一来源（追加记录 / 驳回弹窗共用）。
|
||||
*
|
||||
* 此前两个页面各写一份 uni.uploadFile 封装，行为容易漂移；且都是串行上传，
|
||||
* 9 张图要排队一张张传完，弱网下工人要干等半分钟以上。
|
||||
*/
|
||||
import { getBaseUrl, extractErrorDetail } from "./request";
|
||||
|
||||
/** 单张上传超时（毫秒）—— 弱网下防止请求永久挂起，卡住整个上传流程 */
|
||||
export const UPLOAD_TIMEOUT = 15000;
|
||||
|
||||
/**
|
||||
* 上传并发数。
|
||||
* 不用「9 张一起上」的无限并发：弱网带宽本就紧张，同时打满会互相挤占、
|
||||
* 整体反而更慢，还容易触发服务端限流。3 是等待时间与成功率的折中点。
|
||||
*/
|
||||
export const UPLOAD_CONCURRENCY = 3;
|
||||
|
||||
/**
|
||||
* 上传单个文件。
|
||||
* @param {string} filePath 本地临时文件路径
|
||||
* @returns {Promise<string>} 成功时 resolve 后端返回的可访问 URL
|
||||
* @throws 失败时 reject —— 不 resolve(null) 静默丢弃，调用方必须显式处理
|
||||
*/
|
||||
export function uploadImage(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: getBaseUrl() + "/upload/",
|
||||
filePath,
|
||||
name: "file",
|
||||
timeout: UPLOAD_TIMEOUT,
|
||||
success(res) {
|
||||
let data = null;
|
||||
try { data = JSON.parse(res.data); } catch { data = null; }
|
||||
const url = data && data.url;
|
||||
// HTTP 非 2xx 时（类型不支持 400 / 超过 50MB 413 等）后端返回的是
|
||||
// {detail: ...} 而非 {url}，必须当失败处理，否则图片会被静默丢弃
|
||||
if (res.statusCode >= 200 && res.statusCode < 300 && url) resolve(url);
|
||||
else reject(new Error(extractErrorDetail(data, `图片上传失败 (${res.statusCode || "无响应"})`)));
|
||||
},
|
||||
fail(err) {
|
||||
const errMsg = (err && err.errMsg) || "";
|
||||
reject(new Error(/timeout/i.test(errMsg) ? "图片上传超时" : errMsg || "图片上传失败"));
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断一个图片项是否「已真正上传成功」。
|
||||
*
|
||||
* 依据来自本模块的契约：uploadImage() 成功时 resolve 的是后端返回的 URL
|
||||
* （相对路径 /api/v1/upload/files/xxx，或带域名的 http(s)://…）；
|
||||
* 而未上传完 / 上传失败的项，拿到的是本地临时地址（blob:、file://、
|
||||
* _doc/、wxfile:// 等）。
|
||||
*
|
||||
* 各页面的「成功绿勾」角标只应依据本函数显示 —— 绝不能因为「它出现在
|
||||
* images 数组里」就当作成功，否则将来若有人把失败项也塞进数组（比如为了
|
||||
* 支持重试而保留占位），角标就会撒谎。
|
||||
*
|
||||
* @param {*} url 图片项
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isUploadedUrl(url) {
|
||||
if (typeof url !== "string" || !url) return false;
|
||||
return url.startsWith("/") || /^https?:\/\//i.test(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 并发上传一组图片（有界并发池，逐个补位，不会一次性打满）。
|
||||
*
|
||||
* @param {string[]} filePaths 本地临时文件路径列表
|
||||
* @param {(url: string|null, index: number) => void} [onEachDone]
|
||||
* 每张图片「有结果」时回调一次（成功传 url，失败传 null）——
|
||||
* 调用方据此回收 ⏳ 占位符，保证成功与失败都恰好回收一次。
|
||||
* @returns {Promise<{failed: number, total: number}>}
|
||||
*/
|
||||
export async function uploadImages(filePaths, onEachDone) {
|
||||
const queue = filePaths.map((filePath, index) => ({ filePath, index }));
|
||||
let cursor = 0;
|
||||
let failed = 0;
|
||||
|
||||
const worker = async () => {
|
||||
while (cursor < queue.length) {
|
||||
// 单线程 JS 里 cursor++ 在两次 await 之间是原子的，不会重复取到同一项
|
||||
const { filePath, index } = queue[cursor++];
|
||||
let url = null;
|
||||
try {
|
||||
url = await uploadImage(filePath);
|
||||
} catch (e) {
|
||||
failed++;
|
||||
console.error("[upload] 图片上传失败:", e);
|
||||
}
|
||||
if (onEachDone) onEachDone(url, index);
|
||||
}
|
||||
};
|
||||
|
||||
const workerCount = Math.min(UPLOAD_CONCURRENCY, queue.length);
|
||||
await Promise.all(Array.from({ length: workerCount }, worker));
|
||||
return { failed, total: filePaths.length };
|
||||
}
|
||||
Reference in New Issue
Block a user