fix: 移动端流转树修复进行中任务消失与日志条对齐 Web

- scroll-view 补 scroll-y:多条主线垂直堆叠时底部进行中任务不再被截断
- FlowCard 补 IN_PROGRESS 状态(橙色'待收货'),与 Web 端一致
- 操作日志改为卡片底部全宽蓝色条块,删除时间右侧角标
This commit is contained in:
2026-09-01 14:55:16 +08:00
parent 9c1246e2c9
commit b766e35db6
2 changed files with 27 additions and 7 deletions

View File

@ -14,8 +14,10 @@
</view>
<!-- 时间独占一行 -->
<text class="fc-time">⏰ {{ fmtDate(node.created_at) }}{{ node.completed_at ? '→' + fmtDate(node.completed_at) : '→至今' }}</text>
<!-- 操作日志:时间下方独立一行,靠右对齐 -->
<text v-if="node.records && node.records.length" class="fc-records" @tap.stop="$emit('viewRecords', node)">📋{{ node.records.length }}条 ›</text>
<!-- 卡片底部:全宽蓝色日志条(对齐 Web 端) -->
<view v-if="node.records && node.records.length" class="ft-log-bar" @tap.stop="$emit('viewRecords', node)">
查看操作日志 ({{ node.records.length }}条) ›
</view>
</view>
</template>
@ -45,7 +47,7 @@ export default {
return fmtUserName(userId);
},
statusLabel(s) {
const map = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库", OUTBOUND: "已出库" };
const map = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库", OUTBOUND: "已出库", IN_PROGRESS: "待收货" };
return map[s] || s;
},
statusColorClass(s) {
@ -56,6 +58,7 @@ export default {
case "REJECTED": return "s-red";
case "ARCHIVED": return "s-archived";
case "OUTBOUND": return "s-outbound";
case "IN_PROGRESS": return "s-orange";
default: return "s-gray";
}
},
@ -86,6 +89,7 @@ export default {
.fc-card.s-red { border-left-color: #ef4444; }
.fc-card.s-archived { border-left-color: #8b5cf6; }
.fc-card.s-outbound { border-left-color: #4f46e5; }
.fc-card.s-orange { border-left-color: #f97316; }
.fc-card.s-gray { border-left-color: #9ca3af; }
.fc-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
@ -99,6 +103,7 @@ export default {
.s-red .fc-status { background: #fce4ec; color: #be123c; }
.s-archived .fc-status { background: #ede9fe; color: #7c3aed; }
.s-outbound .fc-status { background: #e0e7ff; color: #4338ca; }
.s-orange .fc-status { background: #ffedd5; color: #ea580c; }
.s-gray .fc-status { background: #f3f4f6; color: #6b7280; }
.fc-rework { font-size: 10px; background: #ef4444; color: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
@ -108,6 +113,21 @@ export default {
.fc-warehouse-in { color: #059669; font-weight: 700; }
/* 时间独占一行 */
.fc-time { display: block; font-size: 10px; color: #9ca3af; margin-top: 6px; }
/* 操作日志:独立一行靠右对齐 */
.fc-records { display: block; text-align: right; margin-top: 4px; font-size: 11px; color: #2563eb; font-weight: 600; }
/* 操作日志:底部全宽蓝色条块(对齐 Web 端) */
.ft-log-bar {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
margin-bottom: -10px;
margin-top: 10px;
background-color: #eff6ff;
color: #2563eb;
text-align: center;
padding: 8px 0;
font-size: 13px;
border-top: 1px solid #dbeafe;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.ft-log-bar:active { background-color: #dbeafe; }
</style>

View File

@ -14,8 +14,8 @@
<text class="zero-icon">📋</text><text class="zero-text">该产品暂无流转记录</text>
</view>
<!-- 横向滚动:左右滑动查看分支 -->
<scroll-view v-else scroll-x class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
<!-- 双向滚动:横向看分支、纵向看全部主线行(否则底部进行中任务会被截断) -->
<scroll-view v-else scroll-x scroll-y class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
<view class="tree-canvas" :style="{ width: canvasWidth + 'px' }">
<!-- 每条主线一个 Row:[左翼] - [中央主线卡片] - [右翼] -->
<view v-for="(mainTask, idx) in allMains" :key="mainTask.id" class="flow-row">