fix: 移动端流转树修复进行中任务消失与日志条对齐 Web
- scroll-view 补 scroll-y:多条主线垂直堆叠时底部进行中任务不再被截断 - FlowCard 补 IN_PROGRESS 状态(橙色'待收货'),与 Web 端一致 - 操作日志改为卡片底部全宽蓝色条块,删除时间右侧角标
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user