布局升级: 流转树撑满空间+独立历史记录页+查看全部记录入口

This commit is contained in:
2026-08-05 15:09:09 +08:00
parent 5e53cd7f79
commit 430c0d2342
4 changed files with 274 additions and 39 deletions

View File

@ -16,26 +16,32 @@
<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 v-for="rec in task.records" :key="rec.id" class="record-item">
<!-- 顶部:时间 + 编辑/删除 -->
<!-- 查看全部记录按钮 -->
<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(rec.created_at) }}</text>
<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: rec })">✏️</text>
<text class="rec-act" @tap.stop="confirmDelete(rec)">🗑️</text>
<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="rec.remark" class="record-remark">{{ rec.remark }}</text>
<view v-if="rec.images && rec.images.length" class="record-images">
<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 rec.images"
v-for="(img, i) in task.records[0].images"
:key="i"
:src="imageUrl(img)"
class="record-thumb"
mode="aspectFill"
@tap.stop="previewImage(rec.images, i)"
@tap.stop="previewImage(task.records[0].images, i)"
/>
</view>
</view>
@ -70,6 +76,7 @@
:isLast="idx === task.child_tasks.length - 1"
@action="(e) => $emit('action', e)"
@editRecord="(e) => $emit('editRecord', e)"
@viewRecords="(t) => $emit('viewRecords', t)"
/>
</view>
</view>
@ -86,7 +93,7 @@ export default {
currentUserId: { type: [String, Number], default: "" },
currentUsername: { type: String, default: "" },
},
emits: ["action", "editRecord"],
emits: ["action", "editRecord", "viewRecords"],
computed: {
canEditRecord() {
// 双重宽松匹配:assignee_id 可能是数字ID或用户名字符串
@ -167,7 +174,17 @@ export default {
.reject-reason { color: #ef4444; }
/* 进度记录 */
.records-area { background-color: #f9f9f9; padding: 12rpx 16rpx; border-radius: 10rpx; margin-top: 16rpx; margin-bottom: 6rpx; }
.records-area { background-color: #f9f9f9; padding: 0; border-radius: 10rpx; margin-top: 16rpx; margin-bottom: 6rpx; overflow: hidden; }
.records-bar {
display: flex; align-items: center; gap: 8rpx;
padding: 16rpx 20rpx;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-bottom: 1px solid #bfdbfe;
}
.records-bar-icon { font-size: 28rpx; }
.records-bar-text { flex: 1; font-size: 26rpx; font-weight: 700; color: #2563eb; }
.records-bar-arrow { font-size: 32rpx; color: #93c5fd; font-weight: 700; }
.record-item { padding: 12rpx 16rpx; }
.record-item { padding: 8rpx 0; border-bottom: 1px dashed #e5e7eb; }
.record-item:last-child { border-bottom: none; }
.record-top { display: flex; align-items: center; justify-content: space-between; }