duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 移动端流转树主干道对齐与连线箭头

Browse Source 
- 主线(含 TRANSFER 子任务)左边缘对齐,消除缩进形成笔直主干道
- 主线卡片之间加向下连线箭头(↓)
- 分支(SPAWN 协助)保留缩进 + 左边线
This commit is contained in:
duxingchen
2026-09-01 14:10:40 +08:00
parent 9d1e6c8466
commit 25ad5156f8
2 changed files with 75 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
track-uniapp/src/pages/scan/components/FlowTree.vue
View File

@ -19,17 +19,32 @@
</view>
</view>
<!-- 子任务（递归缩进） -->
<view v-if="node.child_tasks && node.child_tasks.length" class="ft-children">
<FlowTree
v-for="child in node.child_tasks"
:key="child.id"
:node="child"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
<!-- 子任务：主线继续主干道(左对齐 + ↓连线)，分支(SPAWN 协助)缩进 -->
<view v-if="node.child_tasks && node.child_tasks.length">
<!-- 主线子任务：左边缘对齐，形成笔直主干道，之间用 ↓ 连线 -->
<template v-for="(child, i) in mainChildren">
<view :key="'arrow-' + child.id" v-if="i > 0" class="ft-flow-arrow">↓</view>
<FlowTree
:key="child.id"
:node="child"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
</template>
<!-- 分支子任务：缩进 + 左边线 -->
<view v-if="branchChildren.length" class="ft-branch-children">
<FlowTree
v-for="child in branchChildren"
:key="child.id"
:node="child"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
</view>
</view>
</view>
</template>
@ -52,6 +67,18 @@ export default {
|| this.node.task_type === "TRANSFER"
|| this.node.task_type === "RECOVERY";
},
// 主线子任务：TRANSFER/RECOVERY，继续主干道（左对齐）
mainChildren() {
return (this.node.child_tasks || []).filter((c) =>
!c.parent_task_id || c.task_type === "TRANSFER" || c.task_type === "RECOVERY"
);
},
// 分支子任务：其余(SPAWN 协助等)，缩进显示
branchChildren() {
return (this.node.child_tasks || []).filter((c) =>
c.parent_task_id && c.task_type !== "TRANSFER" && c.task_type !== "RECOVERY"
);
},
isWarehouseTask() {
const name = String(this.node.task_name || "");
return (name.includes("在库") || name.includes("入库")) || this.node.assignee_id === "virtual_warehouse";
@ -128,5 +155,20 @@ export default {
.ft-time { font-size: 11px; color: #9ca3af; }
.ft-records { font-size: 11px; color: #2563eb; font-weight: 600; }
.ft-children { margin-left: 16px; padding-left: 10px; border-left: 2px solid #e5e7eb; margin-top: 8px; }
/* 主线子任务：无缩进（左边缘对齐成笔直主干道），之间用 ↓ 连线 */
.ft-flow-arrow {
text-align: center;
color: #9ca3af;
font-size: 16px;
font-weight: 700;
line-height: 1;
margin: 2px 0;
}
/* 分支子任务：缩进 + 左边线 */
.ft-branch-children {
margin-left: 16px;
padding-left: 12px;
border-left: 2px solid #e5e7eb;
margin-top: 8px;
}
</style>

31
track-uniapp/src/pages/scan/components/TreeCanvas.vue
View File

@ -16,16 +16,18 @@
<scroll-view v-else scroll-y class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
<view class="tree-root">
<!-- 递归纵向流转树：主线 + 分支缩进 -->
<FlowTree
v-for="t in product.task_tree"
:key="t.id"
:node="t"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
<!-- 递归纵向流转树：根级主线之间用 ↓ 连线，分支由 FlowTree 内部缩进 -->
<template v-for="(t, i) in product.task_tree">
<view :key="'arrow-' + i" v-if="i > 0" class="ft-flow-arrow">↓</view>
<FlowTree
:key="t.id"
:node="t"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
</template>
</view>
<!-- 图例 -->
@ -96,6 +98,15 @@ export default {
.tree-scroll { flex-shrink: 0; }
.tree-root { padding: 16px 12px 20px; }
/* 根级主线之间的向下连线箭头 */
.ft-flow-arrow {
text-align: center;
color: #9ca3af;
font-size: 16px;
font-weight: 700;
line-height: 1;
margin: 2px 0;
}
.tree-legend {
display: flex;
flex-wrap: wrap;