duxingchen
0a1c2f4dcf
根因: card-header 一行塞入 4 个元素(标题+3按钮)，
card-header-right 无 flex-wrap/无 flex-shrink，
窄屏上打印标签按钮溢出视口不可见。
修复:
- card-header-right: gap 8→4, 加 flex-wrap, flex-shrink:0
- 所有子元素: flex-shrink:0 + white-space:nowrap
- mode-toggle/print-label-btn: 缩小字号+padding节省空间
468 lines
43 KiB
Vue
468 lines
43 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<view v-if="loading" class="loading">加载中...</view>
|
||
<view v-if="error" class="error-box">{{ error }}</view>
|
||
|
||
<template v-if="product && !loading">
|
||
<!-- 工作区模式：显示产品信息栏 -->
|
||
<template v-if="currentMode === 'workspace'">
|
||
<view :key="'prod-card-' + dictVersion">
|
||
<view class="overall-bar" @tap="handleOverallBarClick">
|
||
<text class="overall-label">宏观状态</text>
|
||
<text :class="['overall-val', product.overall_status ? '' : 'overall-empty']">{{ product.overall_status || '未激活 — 点击发起首道工序' }}</text>
|
||
<text v-if="product.task_tree && product.task_tree.length" class="overall-arrow">▾</text>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-header">
|
||
<text class="card-title">📦 产品信息</text>
|
||
<view class="card-header-right">
|
||
<text class="mode-toggle" @tap="toggleMode">{{ modeToggleLabel }}</text>
|
||
<text class="edit-btn" @tap="openEditProduct">✏️</text>
|
||
<text class="print-label-btn" @tap="printLabel">🖨️ 打印标签</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-grid">
|
||
<view class="info-item"><text class="label">身份证</text><text class="value sn">{{ product.serial_number }}</text></view>
|
||
<view class="info-item" v-if="product.external_serial"><text class="label">产品序列号</text><text class="value sn">{{ product.external_serial }}</text></view>
|
||
<view class="info-item"><text class="label">物料名称</text><text class="value">{{ product.material_name || product.material_id || '—' }}</text></view>
|
||
<view class="info-item"><text class="label">规格型号</text><text class="value">{{ product.spec_model || '—' }}</text></view>
|
||
<view class="info-item"><text class="label">订单编号</text><text class="value">{{ product.order_no || '—' }}</text></view>
|
||
<view class="info-item" v-if="product.current_location_id">
|
||
<text class="label">当前位置</text>
|
||
<text :class="['value', product.current_location_id === 'virtual_warehouse' ? 'warehouse' : '']">{{ formatUserName(product.current_location_id) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="product && product.current_location_id === 'virtual_warehouse' && !hasMyActiveTask"
|
||
class="warehouse-transfer-banner" @tap="openWarehouseTransfer">
|
||
<text class="wt-icon">📤</text>
|
||
<text class="wt-text">该产品在仓库中 — 点击此处转出并派发给指定人员</text>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 工作区视图 -->
|
||
<WorkspaceArea v-if="currentMode === 'workspace'" :product="product"
|
||
:currentUserId="currentUserId" :currentUsername="currentUsername"
|
||
:initialLockTaskId="autoLockTaskId"
|
||
:key="'wa-' + dictVersion"
|
||
@action="handleTaskAction" @viewRecords="handleViewRecords" />
|
||
|
||
<!-- 📇 流转卡片：探探式单张滑动 -->
|
||
<TaskSwipeCards v-if="currentMode === 'swipe'" :product="product"
|
||
:key="'sw-' + dictVersion"
|
||
@back="currentMode = 'workspace'" @overview="currentMode = 'tree'"
|
||
@viewRecords="handleViewRecords" />
|
||
|
||
<!-- 🌳 流转树：全屏独立视图 -->
|
||
<TreeCanvas v-if="currentMode === 'tree'" :product="product" :key="'tc-' + dictVersion" @viewRecords="handleViewRecords" @back="currentMode = 'workspace'" @swipe="currentMode = 'swipe'" />
|
||
|
||
</template>
|
||
|
||
<!-- 状态定调 -->
|
||
<view v-if="showStatusPicker" class="overlay" @tap="() => {}">
|
||
<view class="sheet">
|
||
<text class="sheet-title">{{ product && product.overall_status ? '修改宏观状态' : '🔔 请设定产品宏观状态' }}</text>
|
||
<text class="sheet-hint">首次扫码，请选择一个状态以开启流转</text>
|
||
<view class="sheet-options">
|
||
<view v-for="opt in OVERALL_OPTIONS" :key="opt" :class="['sheet-opt', product && product.overall_status === opt ? 'sheet-opt-active' : '']" @tap="handleSetOverallStatus(opt)"><text>{{ opt }}</text></view>
|
||
</view>
|
||
<button v-if="product && product.overall_status" class="sheet-close" @tap="showStatusPicker = false">关闭</button>
|
||
</view>
|
||
</view>
|
||
<!-- 编辑产品 -->
|
||
<view v-if="editProductVisible" class="overlay" @tap="editProductVisible = false">
|
||
<view class="popup" @tap.stop>
|
||
<text class="popup-title">编辑产品</text>
|
||
<view class="field-label">订单编号</view>
|
||
<input v-model="editForm.order_no" class="popup-input" placeholder="请输入订单编号" />
|
||
<view class="field-label" style="margin-top:10px;">产品序列号</view>
|
||
<input v-model="editForm.external_serial" class="popup-input" placeholder="请输入产品序列号" />
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="editProductVisible = false">取消</button><button class="btn-primary" :disabled="editSaving" @tap="doEditProduct">{{ editSaving ? '保存中...' : '保存' }}</button></view>
|
||
</view>
|
||
</view>
|
||
<!-- 发起首道工序 (只选人+填备注) -->
|
||
<view v-if="createFirstVisible" class="overlay" @tap="createFirstVisible = false">
|
||
<view class="popup" @tap.stop>
|
||
<text class="popup-title">{{ isWarehouseTransfer ? '📤 仓库转出派发' : '🚀 发起首道工序' }}</text>
|
||
<view class="field-label">接收人 <text class="required">*</text></view>
|
||
<view class="user-grid">
|
||
<view v-for="u in userGridOptions" :key="u.id"
|
||
:class="['user-grid-item', firstForm.assignee_id === u.id ? 'user-grid-active' : '']"
|
||
@tap="firstForm.assignee_id = u.id; firstForm.assigneeLabel = u.name">{{ formatName(u.name) }}</view>
|
||
</view>
|
||
<view class="field-label" style="margin-top:12px;">备注 <text class="required">*</text></view>
|
||
<textarea v-model="firstForm.note" class="popup-textarea" placeholder="请填写备注说明（必填）" :maxlength="500" />
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="createFirstVisible = false">取消</button><button class="btn-primary" :disabled="firstSaving || !firstForm.assignee_id || !firstForm.note.trim()" @tap="doCreateFirstTask">{{ firstSaving ? '创建中...' : '确认创建' }}</button></view>
|
||
</view>
|
||
</view>
|
||
<!-- 记录/拍照 -->
|
||
<view v-if="recordPopup.visible" class="overlay" @tap="closeRecordPopup">
|
||
<view class="popup" @tap.stop>
|
||
<text class="popup-title">{{ recordForm.recordId ? '✏️ 编辑记录' : '📝 记录/拍照' }}</text>
|
||
<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="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="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>
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="closeRecordPopup">取消</button><button class="btn-primary" :disabled="recordSaving || isUploading" @tap="doSaveRecord">{{ isUploading ? '上传中' : (recordSaving ? '保存中...' : (recordForm.recordId ? '更新记录' : '保存记录')) }}</button></view>
|
||
</view>
|
||
</view>
|
||
<!-- 任务操作 -->
|
||
<view v-if="actionPopup.visible" class="overlay" @tap="closeActionPopup">
|
||
<view class="popup" @tap.stop>
|
||
<template v-if="actionPopup.type === 'receive'">
|
||
<text class="popup-title">确认接收任务</text>
|
||
<view class="popup-task">{{ actionPopup.task && actionPopup.task.task_name }}</view>
|
||
<text class="popup-hint">状态: {{ statusLabel(actionPopup.task && actionPopup.task.status) }} → 进行中</text>
|
||
<view class="field-label">选择工序 <text class="required">*</text></view>
|
||
<view class="user-grid">
|
||
<view v-for="opt in TASK_NAME_OPTIONS" :key="opt"
|
||
:class="['user-grid-item', receiveTaskName === opt ? 'user-grid-active' : '']"
|
||
@tap="receiveTaskName = opt">{{ opt }}</view>
|
||
</view>
|
||
<textarea v-model="receiveRemark" class="popup-textarea" placeholder="接收备注（选填）" :maxlength="500" style="margin-top:12px;" />
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-primary" :disabled="actionLoading || !receiveTaskName" @tap="doReceive">确认接收</button></view>
|
||
</template>
|
||
<template v-if="actionPopup.type === 'reject'">
|
||
<text class="popup-title">品质驳回</text>
|
||
<textarea v-model="rejectReason" class="popup-textarea" placeholder="请填写驳回原因（必填）" :maxlength="500" />
|
||
<text class="popup-hint">⚠ 驳回后将自动创建返工任务</text>
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-danger" :disabled="actionLoading || !rejectReason.trim()" @tap="doReject">确认驳回</button></view>
|
||
</template>
|
||
<template v-if="actionPopup.type === 'transfer'">
|
||
<text class="popup-title">完工转交</text>
|
||
<view class="field-label">接收人 <text class="required">*</text></view>
|
||
<view class="user-grid">
|
||
<view v-for="u in userGridOptions" :key="u.id"
|
||
:class="['user-grid-item', transferForm.selectedUserId === u.id ? 'user-grid-active' : '']"
|
||
@tap="selectTransferUser(u.id)">{{ formatName(u.name) }}</view>
|
||
</view>
|
||
<view class="field-label" style="margin-top:12px;">或</view>
|
||
<view :class="['user-grid-item', transferForm.isWarehouse ? 'user-grid-active' : '']" style="width:100%;" @tap="toggleWarehouse">📦 入库 (virtual_warehouse)</view>
|
||
<view class="field-label" style="margin-top:12px;">交接备注 <text class="required">*</text></view>
|
||
<textarea v-model="transferForm.note" class="popup-textarea" placeholder="请填写交接备注（必填）" :maxlength="500" />
|
||
<view v-if="transferForm.isWarehouse || transferForm.selectedUserId" class="preview-hint">{{ transferForm.isWarehouse ? '产品将入库并从个人待办中移除' : '将创建新任务指派给 ' + (transferUserName || '—') }}</view>
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-primary" :disabled="actionLoading || (!transferForm.isWarehouse && !transferForm.selectedUserId) || !transferForm.note.trim()" @tap="doTransfer">{{ actionLoading ? '提交中...' : (transferForm.isWarehouse ? '📦 确认入库' : '确认转交') }}</button></view>
|
||
</template>
|
||
<template v-if="actionPopup.type === 'spawn'">
|
||
<text class="popup-title">➕ 派发协助分支</text>
|
||
<text class="popup-hint">为当前任务创建并行协助，当前任务保持进行中</text>
|
||
<view class="field-label">接收人 <text class="required">*</text></view>
|
||
<view class="user-grid">
|
||
<view v-for="u in userGridOptions" :key="u.id"
|
||
:class="['user-grid-item', spawnForm.assignee_id === u.id ? 'user-grid-active' : '']"
|
||
@tap="spawnForm.assignee_id = u.id">{{ formatName(u.name) }}</view>
|
||
</view>
|
||
<view class="field-label" style="margin-top:12px;">派发备注 <text class="required">*</text></view>
|
||
<textarea v-model="spawnForm.remark" class="popup-textarea" placeholder="请填写派发备注说明（必填）" :maxlength="500" />
|
||
<view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-primary btn-spawn" :disabled="actionLoading || !spawnForm.assignee_id || !spawnForm.remark.trim()" @tap="doSpawn">{{ actionLoading ? '提交中...' : '确认派发' }}</button></view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 💬 留言悬浮按钮 -->
|
||
<view class="msg-fab" @tap="openMsgDrawer">
|
||
<text class="msg-fab-icon">💬</text>
|
||
<text v-if="msgUnreadCount" class="msg-fab-badge">{{ msgUnreadCount }}</text>
|
||
</view>
|
||
|
||
<!-- 💬 留言板底部抽屉 -->
|
||
<view v-if="showMsgDrawer" class="msg-drawer-overlay" @tap="closeMsgDrawer">
|
||
<view class="message-board-drawer" @tap.stop>
|
||
<view class="mb-drawer-handle"></view>
|
||
<view class="mb-title">💬 协同留言板</view>
|
||
<scroll-view scroll-y class="mb-scroll-area" :scroll-into-view="bottomMsgId" scroll-with-animation>
|
||
<view v-for="msg in messages" :key="msg.id" class="mb-item" :id="'msg-' + msg.id">
|
||
<view class="mb-avatar">{{ formatUserAvatar(msg.operator_id) }}</view>
|
||
<view class="mb-content-wrapper">
|
||
<view class="mb-header-info">
|
||
<text class="mb-name">{{ formatUserName(msg.operator_id) }}</text>
|
||
<text class="mb-time">{{ fmtMsgTime(msg.created_at) }}</text>
|
||
</view>
|
||
<view class="mb-bubble">{{ msg.content }}</view>
|
||
</view>
|
||
</view>
|
||
<view id="msg-bottom" class="mb-bottom-anchor"></view>
|
||
</scroll-view>
|
||
<view class="mb-input-bar">
|
||
<input v-model="newMsgText" class="mb-input" placeholder="输入交接注意事项..." confirm-type="send" @confirm="submitMessage" />
|
||
<view :class="['mb-send-btn', !newMsgText.trim() ? 'btn-disabled' : '']" @tap="submitMessage">发送</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request, { get, post, patch, put } from "../../utils/request";
|
||
import { setUserNameMap, formatUserName, formatUserAvatar } from "../../utils/format";
|
||
import WorkspaceArea from "./components/WorkspaceArea.vue";
|
||
import TreeCanvas from "./components/TreeCanvas.vue";
|
||
import TaskSwipeCards from "./components/TaskSwipeCards.vue";
|
||
|
||
const OVERALL_OPTIONS = ["备货", "生产", "测试", "维修", "在库"];
|
||
const TASK_NAME_OPTIONS = ["备货", "生产", "测试", "维修", "在库"];
|
||
const STATUS_MAP = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库", CANCELED: "已撤回" };
|
||
|
||
export default {
|
||
components: { WorkspaceArea, TreeCanvas, TaskSwipeCards },
|
||
data() {
|
||
return {
|
||
OVERALL_OPTIONS, loading: true, error: "", product: null,
|
||
showStatusPicker: false, editProductVisible: false, editForm: { order_no: "", external_serial: "" }, editSaving: false,
|
||
users: [], TASK_NAME_OPTIONS,
|
||
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,
|
||
currentUser: null, currentUserId: "", currentUsername: "", currentMode: "workspace", autoLockTaskId: "",
|
||
processOptions: [], userOptions: [],
|
||
actionPopup: { visible: false, type: "", task: null }, actionLoading: false, rejectReason: "", receiveRemark: "", receiveTaskName: "",
|
||
transferForm: { selectedUserId: "", isWarehouse: false, note: "" },
|
||
spawnForm: { assignee_id: "", remark: "" },
|
||
// 💬 留言板
|
||
messages: [],
|
||
// 🚀 字典版本号：驱动子组件强制重建，解决 userNameMap 非响应式问题
|
||
dictVersion: 0,
|
||
showMsgDrawer: false,
|
||
newMsgText: '',
|
||
bottomMsgId: '',
|
||
lastMsgSeenAt: '',
|
||
};
|
||
},
|
||
computed: {
|
||
userLabels() { return this.users.map(u => `${u.full_name} (${u.username})`); },
|
||
canDeleteImage() { if (!this.recordPopup.task) return true; if (!this.currentUser) return true; const frozen = ["COMPLETED","REJECTED","ARCHIVED","CANCELED"]; if (frozen.includes(this.recordPopup.task.status)) return false; return this.currentUser.username === this.recordPopup.task.assignee_id; },
|
||
transferUserName() { const u = this.userOptions.find(u => u.id === this.transferForm.selectedUserId); return u ? u.name : ""; },
|
||
spawnUserName() { const u = this.userOptions.find(u => u.id === this.spawnForm.assignee_id); return u ? u.name : ""; },
|
||
userGridOptions() { return (this.userOptions || []).map(u => ({ id: u.id, name: u.name })); },
|
||
modeToggleLabel() { if (this.currentMode === 'workspace') return '📇 流转卡片'; if (this.currentMode === 'swipe') return '🌳 流转树'; return '🛠️ 工作区'; },
|
||
hasMyActiveTask() {
|
||
const find = (tasks) => { if (!tasks) return false; for (const t of tasks) { if ((t.status === 'WIP' || t.status === 'PENDING') && (t.assignee_id == this.currentUserId || t.assignee_id == this.currentUsername)) return true; if (find(t.child_tasks)) return true; } return false; };
|
||
return this.product ? find(this.product.task_tree) : false;
|
||
},
|
||
msgUnreadCount() { if (!this.lastMsgSeenAt) return this.messages.length; return this.messages.filter(m => m.created_at > this.lastMsgSeenAt).length; },
|
||
},
|
||
onLoad(options) { this.loadUsers(); this.loadCurrentUser(); const sn = options.serial || ""; if (sn) { this.doQuery(sn); return; } /* 🚀 兜底: 从 taskId 反查 product */ const tid = options.taskId || ""; if (tid) this.doQueryByTask(tid); },
|
||
// 🚀 onShow 生命周期：每次页面显示时刷新留言板（解决从聊天室退回不更新问题）
|
||
onShow() { if (this.product?.id) { this.fetchMessages(); } },
|
||
methods: {
|
||
formatUserName, formatUserAvatar,
|
||
formatName(name) { if (!name) return ""; return name.length === 2 ? name[0] + " " + name[1] : name; },
|
||
statusLabel(s) { return STATUS_MAP[s] || s; },
|
||
statusColor(s) { switch (s) { case "PENDING": return "s-yellow"; case "WIP": return "s-blue"; case "COMPLETED": return "s-green"; case "REJECTED": return "s-red"; default: return "s-gray"; } },
|
||
|
||
async doQuery(sn) { this.loading = true; this.error = ""; try { this.product = await get(`/products/scan/${sn}`); this.$nextTick(() => { this.currentMode = 'workspace'; this.autoLockTaskId = this.findMyImmersiveTask() || ''; if (!this.product.task_tree || !this.product.task_tree.length) { this.openCreateFirstTask(); } }); this.fetchMessages(); } catch (e) { this.error = e?.data?.detail || "查询失败"; } finally { this.loading = false; } },
|
||
// 🚀 从 taskId 反查 product_serial → 再 doQuery
|
||
async doQueryByTask(tid) { try { const task = await get(`/tasks/${tid}`); const sn = task?.product_sn || ""; if (sn) { this.doQuery(sn); } else { this.error = "未找到关联产品"; this.loading = false; } } catch { this.error = "任务查询失败"; this.loading = false; } },
|
||
findMyImmersiveTask() {
|
||
// 🚀 扫描用户的 WIP/PENDING 任务，自动沉浸锁定
|
||
if (!this.product || !this.product.task_tree) return null;
|
||
let wipTask = null, pendingTask = null;
|
||
const walk = (tasks) => {
|
||
if (!tasks) return;
|
||
for (const t of tasks) {
|
||
const isMine = t.assignee_id == this.currentUserId || t.assignee_id == this.currentUsername;
|
||
if (isMine && t.status === 'WIP') wipTask = t;
|
||
if (isMine && t.status === 'PENDING' && !pendingTask) pendingTask = t;
|
||
walk(t.child_tasks);
|
||
}
|
||
};
|
||
walk(this.product.task_tree);
|
||
return (wipTask || pendingTask) ? (wipTask || pendingTask).id : null;
|
||
},
|
||
toggleMode() { if (this.currentMode === 'workspace') this.currentMode = 'swipe'; else if (this.currentMode === 'swipe') this.currentMode = 'tree'; else this.currentMode = 'workspace'; },
|
||
|
||
async handleSetOverallStatus(status) { try { this.product = await patch(`/products/scan/${this.product.serial_number}/status`, { status }); uni.showToast({ title: `状态已更新: ${status}`, icon: "success" }); this.showStatusPicker = false; } catch {} },
|
||
openEditProduct() { this.editForm = { order_no: this.product.order_no || "", external_serial: this.product.external_serial || "" }; this.editProductVisible = true; },
|
||
async doEditProduct() { this.editSaving = true; try { this.product = await patch(`/products/${this.product.id}`, { order_no: this.editForm.order_no.trim(), external_serial: this.editForm.external_serial.trim() }); uni.showToast({ title: "已保存", icon: "success" }); this.editProductVisible = false; } catch {} finally { this.editSaving = false; } },
|
||
|
||
async loadUsers() { try { const res = await get("/users/", { limit: 200, dept: "IRIS" }); this.users = (res || []).filter(u => u.department === "IRIS"); this.userOptions = this.users.map(u => ({ id: u.username || u.id, name: u.full_name || u.username })); setUserNameMap(this.users); this.dictVersion += 1; } catch (e) { console.error('[loadUsers] 获取用户列表失败:', e); } },
|
||
loadCurrentUser() { try { let user = uni.getStorageSync("user"); if (typeof user === "string" && user) { try { user = JSON.parse(user); } catch (e) { user = null; } } if (user && typeof user === "object") { this.currentUser = user; this.currentUserId = String(user.id || ""); this.currentUsername = user.username || ""; } } catch {} },
|
||
|
||
onTaskNameChange(e) { const idx = e.detail.value; this.firstForm.taskNameIdx = idx; this.firstForm.task_name = TASK_NAME_OPTIONS[idx]; },
|
||
onAssigneeChange(e) { const idx = e.detail.value; const u = this.users[idx]; if (u) { this.firstForm.assigneeIdx = idx; this.firstForm.assignee_id = u.username; this.firstForm.assigneeLabel = `${u.full_name} (${u.username})`; } },
|
||
openCreateFirstTask() { this.isWarehouseTransfer = false; if (this.currentMode === 'tree') this.currentMode = 'workspace'; this.firstForm = { assignee_id: "", assigneeLabel: "", note: "" }; this.createFirstVisible = true; },
|
||
handleOverallBarClick() { if (!this.product.task_tree || !this.product.task_tree.length) { this.openCreateFirstTask(); } else { this.showStatusPicker = true; } },
|
||
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; },
|
||
closeRecordPopup() { this.recordPopup = { visible: false, task: null }; },
|
||
async handleChooseImage() { const maxSlots = 9 - (this.recordForm.images.length + this.recordForm.pendingCount); if (maxSlots <= 0) return; const chooseRes = await new Promise((resolve, reject) => { uni.chooseImage({ count: maxSlots, sizeType: ["compressed"], sourceType: ["camera", "album"], success: resolve, fail: reject }); }).catch(() => null); if (!chooseRes || !chooseRes.tempFilePaths || !chooseRes.tempFilePaths.length) return; let compressSkipCount = 0; const compressedPaths = []; 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 { compressSkipCount++; } } if (!compressedPaths.length) return; this.isUploading = true; this.recordForm.pendingCount += compressedPaths.length; for (const path of compressedPaths) { const url = await this.uploadFile(path); if (url) this.recordForm.images.push(url); this.recordForm.pendingCount--; } this.isUploading = false; },
|
||
uploadFile(filePath) { return new Promise((resolve) => { uni.uploadFile({ url: "http://192.168.9.80:8011/api/v1/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.recordForm.images.splice(i, 1); },
|
||
previewRecordImage(i) { uni.previewImage({ urls: this.recordForm.images, 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; } },
|
||
|
||
async handleTaskAction({ task, type, record }) {
|
||
if (type === "record") { this.openRecordPopup(task); return; }
|
||
if (type === "deleteRecord") { this.doDeleteRecord(record); return; }
|
||
if (type === "end") { this.confirmEndBranch(task); return; }
|
||
if (type === "recall") { this.confirmRecall(task); return; }
|
||
if (type === "transfer" || type === "spawn") { uni.showLoading({ title: "加载数据..." }); try { if (!this.userOptions.length) await this.loadUsers(); if (!this.processOptions.length) this.processOptions = ["🏭 入库 (virtual_warehouse)", ...TASK_NAME_OPTIONS]; } finally { uni.hideLoading(); } }
|
||
this.actionPopup = { visible: true, type, task }; this.rejectReason = ""; this.receiveRemark = ""; this.receiveTaskName = "";
|
||
this.transferForm = { selectedUserId: "", isWarehouse: false, note: "" };
|
||
this.spawnForm = { assignee_id: "", remark: "" };
|
||
},
|
||
handleViewRecords(task) { uni.navigateTo({ url: `/pages/scan/records?taskId=${task.id}` }); },
|
||
async doDeleteRecord(record) { try { await request({ url: `/records/${record.id}`, method: "DELETE" }); uni.showToast({ title: "记录已删除", icon: "success" }); this.doQuery(this.product.serial_number); } catch {} },
|
||
confirmEndBranch(task) { uni.showModal({ title: "结束分支", content: `确定结束「${task.task_name}」吗？`, success: (res) => { if (res.confirm) this.doEndBranch(task); } }); },
|
||
confirmRecall(task) { uni.showModal({ title: "撤回转交", content: `确定撤回「${task.task_name}」吗？撤回后任务将回到您的手中。`, success: (res) => { if (res.confirm) 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 {} },
|
||
closeActionPopup() { this.actionPopup = { visible: false, type: "", task: 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 doReject() { 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() }); uni.showToast({ title: "已驳回", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} 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 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 fetchMessages() { if (!this.product?.id) return; try { const res = await get(`/products/${this.product.id}/messages`); this.messages = res || []; 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); } },
|
||
openMsgDrawer() { this.showMsgDrawer = true; this.$nextTick(() => { this.scrollToBottom(); }); },
|
||
closeMsgDrawer() { const last = this.messages[this.messages.length - 1]; this.lastMsgSeenAt = last ? last.created_at : new Date().toISOString(); this.showMsgDrawer = false; },
|
||
scrollToBottom() { this.$nextTick(() => { this.bottomMsgId = 'msg-bottom'; }); },
|
||
fmtMsgTime(d) { if (!d) return ''; const dt = new Date(d); const pad = (n) => String(n).padStart(2, '0'); return `${pad(dt.getMonth()+1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`; },
|
||
// 🖨️ 打印标签：调用后端 API 发送打印指令
|
||
async printLabel() {
|
||
if (!this.product?.serial_number) return;
|
||
uni.showActionSheet({
|
||
itemList: ['网络打印机（后端API）', '蓝牙打印机（ESC/POS）'],
|
||
success: async (res) => {
|
||
if (res.tapIndex === 0) {
|
||
// 方案A：网络打印机 → 调用后端 /print/execute API
|
||
try {
|
||
uni.showLoading({ title: '发送打印指令...' });
|
||
await post(`/print/execute`, {
|
||
serial_number: this.product.serial_number,
|
||
material_name: this.product.material_name || '',
|
||
spec_model: this.product.spec_model || '',
|
||
order_no: this.product.order_no || '',
|
||
copies: 1,
|
||
});
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '打印指令已发送', icon: 'success' });
|
||
} catch (e) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: e?.data?.detail || '打印失败', icon: 'none' });
|
||
}
|
||
} else if (res.tapIndex === 1) {
|
||
// 方案B：蓝牙打印机 → 前端直连 ESC/POS 指令
|
||
// ⚠️ 需要引入蓝牙打印 SDK，当前为占位架构
|
||
uni.showToast({ title: '蓝牙打印功能开发中', icon: 'none' });
|
||
}
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</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; }
|
||
.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); }
|
||
.overall-label { font-size: 13px; color: #6b7280; }
|
||
.overall-val { font-size: 15px; font-weight: 700; color: #2563eb; flex: 1; }
|
||
.overall-empty { color: #ef4444; }
|
||
.overall-arrow { font-size: 12px; color: #9ca3af; }
|
||
.card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); flex-shrink: 0; min-height: 120px; }
|
||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 6px; }
|
||
.card-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
|
||
.card-title { font-size: 15px; font-weight: 700; flex-shrink: 0; }
|
||
.edit-btn { font-size: 18px; padding: 2px 6px; flex-shrink: 0; }
|
||
.mode-toggle { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: #eff6ff; color: #2563eb; white-space: nowrap; flex-shrink: 0; }
|
||
.print-label-btn { font-size: 11px; font-weight: 700; padding: 4px 6px; border-radius: 8px; background: #fef3c7; color: #b45309; white-space: nowrap; flex-shrink: 0; }
|
||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.label { font-size: 12px; color: #9ca3af; }
|
||
.value { font-size: 14px; color: #1f2937; font-weight: 600; word-break: break-all; }
|
||
.sn { font-family: monospace; }
|
||
.warehouse { color: #7c3aed; }
|
||
.badge { font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 600; }
|
||
.s-yellow .badge, .s-yellow { color: #b45309; }
|
||
.s-blue .badge, .s-blue { color: #1d4ed8; }
|
||
.s-green .badge, .s-green { color: #15803d; }
|
||
.s-red .badge, .s-red { color: #be123c; }
|
||
.s-gray .badge, .s-gray { color: #6b7280; }
|
||
.overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; }
|
||
.sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 16px 32px; }
|
||
.sheet-title { font-size: 17px; font-weight: 700; display: block; text-align: center; }
|
||
.sheet-hint { font-size: 13px; color: #9ca3af; display: block; text-align: center; margin: 6px 0 16px; }
|
||
.sheet-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||
.sheet-opt { padding: 14px 8px; border-radius: 12px; text-align: center; font-size: 15px; font-weight: 600; background: #f3f4f6; color: #374151; border: 2px solid transparent; }
|
||
.sheet-opt-active { background: #dbeafe; color: #2563eb; border-color: #2563eb; }
|
||
.sheet-close { margin-top: 14px; height: 40px; background: #f3f4f6; border: none; border-radius: 10px; font-size: 14px; color: #6b7280; line-height: 40px; }
|
||
.popup { width: 100%; max-width: 480px; background: #fff; border-radius: 16px 16px 0 0; padding: 20px 16px 32px; max-height: 80vh; overflow-y: auto; }
|
||
.popup-title { font-size: 16px; font-weight: 700; display: block; text-align: center; margin-bottom: 12px; }
|
||
.popup-task { font-size: 14px; font-weight: 600; color: #2563eb; text-align: center; margin-bottom: 4px; }
|
||
.popup-hint { font-size: 12px; color: #9ca3af; display: block; text-align: center; }
|
||
.popup-textarea { width: 100%; height: 80px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; font-size: 14px; margin: 10px 0; box-sizing: border-box; }
|
||
.popup-input { width: 100%; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 10px; font-size: 14px; margin: 8px 0; box-sizing: border-box; }
|
||
.popup-btns { display: flex; gap: 10px; margin-top: 16px; }
|
||
.btn-cancel { flex: 1; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #6b7280; font-size: 14px; line-height: 42px; }
|
||
.btn-primary { flex: 1; height: 42px; border: none; border-radius: 10px; background: #2563eb; color: #fff; font-size: 14px; font-weight: 600; line-height: 42px; }
|
||
.btn-primary[disabled] { opacity: 0.5; }
|
||
.btn-danger { flex: 1; height: 42px; border: none; border-radius: 10px; background: #dc2626; color: #fff; font-size: 14px; font-weight: 600; line-height: 42px; }
|
||
.btn-danger[disabled] { opacity: 0.5; }
|
||
.branch-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
|
||
.branch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
||
.branch-label { font-size: 13px; font-weight: 700; color: #374151; }
|
||
.branch-del { font-size: 12px; color: #ef4444; font-weight: 600; padding: 2px 8px; }
|
||
.btn-add-branch { width: 100%; height: 40px; border: 2px dashed #93c5fd; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 14px; font-weight: 700; line-height: 40px; margin: 4px 0; }
|
||
.btn-add-branch::after { border: none; }
|
||
.field-label { font-size: 14px; font-weight: 600; color: #374151; margin-top: 10px; margin-bottom: 4px; }
|
||
|
||
/* 💬 留言悬浮按钮 */
|
||
.msg-fab { position: fixed; right: 20px; bottom: 100px; z-index: 99; width: 50px; height: 50px; border-radius: 25px; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
|
||
.msg-fab-icon { font-size: 22px; }
|
||
.msg-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
|
||
|
||
/* 💬 留言板底部抽屉 */
|
||
.msg-drawer-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; }
|
||
.message-board-drawer { height: 65vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; }
|
||
.mb-drawer-handle { width: 40px; height: 4px; border-radius: 2px; background: #d1d5db; margin: 8px auto; flex-shrink: 0; }
|
||
.mb-title { font-size: 14px; font-weight: bold; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; color: #374151; flex-shrink: 0; }
|
||
.mb-scroll-area { flex: 1; padding: 12px; overflow-y: auto; }
|
||
.mb-item { display: flex; margin-bottom: 16px; }
|
||
.mb-avatar { width: 36px; height: 36px; border-radius: 18px; background: #3b82f6; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; font-size: 14px; }
|
||
.mb-content-wrapper { flex: 1; min-width: 0; }
|
||
.mb-header-info { margin-bottom: 4px; display: flex; align-items: baseline; }
|
||
.mb-name { font-size: 12px; color: #6b7280; margin-right: 8px; font-weight: 600; }
|
||
.mb-time { font-size: 10px; color: #9ca3af; }
|
||
.mb-bubble { background: #f3f4f6; padding: 8px 12px; border-radius: 0 12px 12px 12px; font-size: 14px; color: #1f2937; word-break: break-all; line-height: 1.5; }
|
||
.mb-input-bar { display: flex; padding: 10px 16px; border-top: 1px solid #e5e7eb; align-items: center; background: #f9fafb; border-radius: 0 0 12px 12px; flex-shrink: 0; }
|
||
.mb-input { flex: 1; background: #ffffff; border: 1px solid #d1d5db; padding: 6px 12px; border-radius: 16px; font-size: 14px; height: 36px; }
|
||
.mb-send-btn { margin-left: 12px; background: #3b82f6; color: #fff; padding: 6px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; transition: all 0.2s; }
|
||
.btn-disabled { background: #9ca3af; opacity: 0.5; }
|
||
.mb-bottom-anchor { height: 1px; }
|
||
.required { color: #ef4444; }
|
||
.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; }
|
||
.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; }
|
||
.btn-upload { width: 100%; height: 42px; border: 1px dashed #d1d5db; border-radius: 10px; background: #f9fafb; color: #6b7280; font-size: 14px; line-height: 42px; margin: 8px 0; }
|
||
.form-item { margin: 10px 0; }
|
||
.form-label { font-size: 14px; font-weight: 600; color: #374151; display: block; margin-bottom: 4px; }
|
||
.picker-value { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; font-size: 14px; box-sizing: border-box; }
|
||
.user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||
.user-grid-item { padding: 12px 8px; border-radius: 10px; background: #f3f4f6; text-align: center; font-size: 14px; font-weight: 600; color: #374151; border: 2px solid transparent; }
|
||
.user-grid-active { background: #dbeafe; color: #2563eb; border-color: #2563eb; }
|
||
.warehouse-hint { font-size: 13px; background: #ede9fe; color: #7c3aed; padding: 10px 14px; border-radius: 10px; margin: 8px 0; text-align: center; }
|
||
.warehouse-transfer-banner { display: flex; align-items: center; gap: 12px; font-weight: 700; background: linear-gradient(135deg, #ede9fe, #dbeafe); color: #5b21b6; padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; border: 2px dashed #a78bfa; }
|
||
.wt-icon { font-size: 24px; }
|
||
.wt-text { font-size: 14px; flex: 1; }
|
||
.preview-hint { font-size: 12px; background: #f0fdf4; color: #16a34a; padding: 8px 10px; border-radius: 8px; margin: 6px 0; }
|
||
</style>
|