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

重构: flex布局撑满全屏 + 记录区下沉到子树底部 + 底部Footer钉死

Browse Source
This commit is contained in:
duxingchen
2026-08-05 15:16:03 +08:00
parent 430c0d2342
commit 3b02c87067
2 changed files with 88 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
track-uniapp/src/pages/scan/components/TaskTreeNode.vue
View File

@ -4,7 +4,7 @@
<!-- 卡片 -->
<view :class="['tnode-card', statusColor(task.status), { 'is-rework': task.is_rework }]">
<!-- 信息区 -->
<!-- 第一层：任务名称、标签、状态 Badge、负责人 -->
<view class="tnode-body">
<view class="tnode-name-row">
<text v-if="task.is_rework" class="tag tag-rework">⚠返工</text>
@ -15,39 +15,7 @@
<text v-if="task.assignee_id">负责人: {{ task.assignee_id }}</text>
<text v-if="task.reject_reason" class="reject-reason">驳回: {{ task.reject_reason }}</text>
</view>
<!-- 进度记录 — 只展示最新一条 + 查看全部入口 -->
<view v-if="task.records && task.records.length" class="records-area">
<!-- 查看全部记录按钮 -->
<view class="records-bar" @tap.stop="$emit('viewRecords', task)">
<text class="records-bar-icon">📋</text>
<text class="records-bar-text">查看全部记录 ({{ task.records.length }})</text>
<text class="records-bar-arrow">›</text>
</view>
<!-- 最新一条预览 -->
<view class="record-item">
<view class="record-top">
<text class="record-time">{{ formatTime(task.records[0].created_at) }}</text>
<view v-if="canEditRecord" class="record-actions">
<text class="rec-act" @tap.stop="$emit('editRecord', { task, record: task.records[0] })">✏️</text>
<text class="rec-act" @tap.stop="confirmDelete(task.records[0])">🗑️</text>
</view>
</view>
<text v-if="task.records[0].remark" class="record-remark">{{ task.records[0].remark }}</text>
<view v-if="task.records[0].images && task.records[0].images.length" class="record-images">
<image
v-for="(img, i) in task.records[0].images"
:key="i"
:src="imageUrl(img)"
class="record-thumb"
mode="aspectFill"
@tap.stop="previewImage(task.records[0].images, i)"
/>
</view>
</view>
</view>
</view>
<!-- 状态标签 -->
<text :class="['badge', statusColor(task.status)]">{{ statusLabel(task.status) }}</text>
</view>
@ -64,7 +32,7 @@
@tap.stop="$emit('action', { task, type: 'record' })">📝 记录/拍照</button>
</view>
<!-- 递归子树 -->
<!-- 第二层：递归子任务树 -->
<view v-if="task.child_tasks && task.child_tasks.length" class="tnode-children">
<TaskTreeNode
v-for="(child, idx) in task.child_tasks"
@ -79,6 +47,37 @@
@viewRecords="(t) => $emit('viewRecords', t)"
/>
</view>
<!-- 第三层（最底部）：进度记录 — 最新一条 + 查看全部入口 -->
<view v-if="task.records && task.records.length" class="records-area">
<!-- 查看全部记录按钮 -->
<view class="records-bar" @tap.stop="$emit('viewRecords', task)">
<text class="records-bar-icon">📋</text>
<text class="records-bar-text">查看全部记录 ({{ task.records.length }})</text>
<text class="records-bar-arrow">›</text>
</view>
<!-- 最新一条预览 -->
<view class="record-item">
<view class="record-top">
<text class="record-time">{{ formatTime(task.records[0].created_at) }}</text>
<view v-if="canEditRecord" class="record-actions">
<text class="rec-act" @tap.stop="$emit('editRecord', { task, record: task.records[0] })">✏️</text>
<text class="rec-act" @tap.stop="confirmDelete(task.records[0])">🗑️</text>
</view>
</view>
<text v-if="task.records[0].remark" class="record-remark">{{ task.records[0].remark }}</text>
<view v-if="task.records[0].images && task.records[0].images.length" class="record-images">
<image
v-for="(img, i) in task.records[0].images"
:key="i"
:src="imageUrl(img)"
class="record-thumb"
mode="aspectFill"
@tap.stop="previewImage(task.records[0].images, i)"
/>
</view>
</view>
</view>
</view>
</template>