171 lines
7.2 KiB
Vue
171 lines
7.2 KiB
Vue
<template>
|
||
<view class="repair-tasks-page" :class="`theme-${themeMode}`">
|
||
<view class="page-header">
|
||
<view>
|
||
<text class="page-title">待维修订单</text>
|
||
<text class="page-subtitle">选择订单查看异常详情并进入维修操作</text>
|
||
</view>
|
||
<view class="task-count">{{ tasks.length }} 条</view>
|
||
</view>
|
||
|
||
<view v-if="loading" class="loading-card">
|
||
<u-loading mode="circle" color="#1677ff" />
|
||
<text>正在加载待维修订单</text>
|
||
</view>
|
||
|
||
<view v-else-if="tasks.length" class="task-list">
|
||
<view v-for="task in tasks" :key="task.id" class="task-card" @tap="openTaskDetail(task)">
|
||
<view class="task-card-header">
|
||
<view class="task-no-wrap">
|
||
<u-icon name="file-text" color="#1677ff" size="28" />
|
||
<text class="task-no">{{ task.deviceNo }}</text>
|
||
</view>
|
||
<text class="task-status">待维修</text>
|
||
</view>
|
||
<view class="task-main-row"><text>异常类型</text><text>{{ task.typeName || '-' }}</text></view>
|
||
<view class="task-main-row"><text>异常原因</text><text>{{ task.reasonText || '-' }}</text></view>
|
||
<view class="task-footer">
|
||
<text>{{ task.reportedDate || '-' }}</text>
|
||
<text>{{ task.reporterText || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-else mode="data" text="暂无待维修订单" />
|
||
|
||
<view v-if="selectedTask" class="detail-mask" @tap="closeTaskDetail">
|
||
<view class="detail-sheet" @tap.stop>
|
||
<view class="sheet-handle"></view>
|
||
<view class="detail-header">
|
||
<text>待维修订单详情</text>
|
||
<u-icon name="close" color="#7d8798" size="30" @tap="closeTaskDetail" />
|
||
</view>
|
||
<text class="detail-device-no">{{ selectedTask.deviceNo }}</text>
|
||
<view class="detail-list">
|
||
<view class="detail-item"><text>异常类型</text><text>{{ selectedTask.typeName || '-' }}</text></view>
|
||
<view class="detail-item"><text>异常原因</text><text>{{ selectedTask.reasonText || '-' }}</text></view>
|
||
<view class="detail-item"><text>提报人员</text><text>{{ selectedTask.reporterText || '-' }}</text></view>
|
||
<view class="detail-item"><text>提报时间</text><text>{{ selectedTask.reportedDate || '-' }}</text></view>
|
||
</view>
|
||
<view class="repair-button" @tap="startRepair">开始维修</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getRepairTasks } from '@/api/produce/exception.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
tasks: [],
|
||
selectedTask: null
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadTasks()
|
||
},
|
||
onPullDownRefresh() {
|
||
this.loadTasks().finally(() => uni.stopPullDownRefresh())
|
||
},
|
||
methods: {
|
||
async loadTasks() {
|
||
this.loading = true
|
||
try {
|
||
const result = await getRepairTasks({ limit: 100 })
|
||
const items = Array.isArray(result) ? result : (Array.isArray(result?.data) ? result.data : [])
|
||
this.tasks = items.map((item) => ({
|
||
id: String(item.id || ''),
|
||
deviceNo: String(item.device_no || ''),
|
||
typeName: String(item.type_name || ''),
|
||
reasonText: [item.reason_name, item.issue_name].filter(Boolean).join(' · '),
|
||
reporterText: item.reporter ? `${item.reporter}${item.user_code ? `（${item.user_code}）` : ''}` : String(item.user_code || ''),
|
||
reportedDate: String(item.reported_date || '')
|
||
})).filter((item) => item.id && item.deviceNo)
|
||
} catch (error) {
|
||
this.tasks = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
openTaskDetail(task) {
|
||
this.selectedTask = task
|
||
},
|
||
closeTaskDetail() {
|
||
this.selectedTask = null
|
||
},
|
||
startRepair() {
|
||
if (!this.selectedTask?.deviceNo) return
|
||
uni.navigateTo({
|
||
url: `/pages/repair/index?device_no=${encodeURIComponent(this.selectedTask.deviceNo)}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.repair-tasks-page { min-height: 100vh; padding: 24rpx; box-sizing: border-box; background: #f4f6fb; }
|
||
.page-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 8rpx 8rpx 26rpx; }
|
||
.page-title, .page-subtitle { display: block; }
|
||
.page-title { color: #17233d; font-size: 38rpx; font-weight: 800; line-height: 1.35; }
|
||
.page-subtitle { margin-top: 8rpx; color: #7d899d; font-size: 20rpx; line-height: 1.4; }
|
||
.task-count { padding: 8rpx 14rpx; border-radius: 999rpx; color: #1677ff; background: #eaf2ff; font-size: 20rpx; line-height: 1.35; }
|
||
.loading-card { display: flex; flex-direction: column; align-items: center; padding: 80rpx 0; color: #7d899d; font-size: 20rpx; }
|
||
.loading-card text { margin-top: 18rpx; }
|
||
.task-card { margin-bottom: 16rpx; padding: 22rpx; border-radius: 22rpx; background: #ffffff; box-shadow: 0 8rpx 24rpx rgba(36, 59, 92, 0.05); }
|
||
.task-card-header, .task-no-wrap, .task-footer, .detail-header, .detail-item { display: flex; align-items: center; }
|
||
.task-card-header, .detail-header, .detail-item { justify-content: space-between; }
|
||
.task-no-wrap { min-width: 0; }
|
||
.task-no { margin-left: 10rpx; color: #17233d; font-size: 26rpx; font-weight: 700; word-break: break-all; }
|
||
.task-status { padding: 6rpx 12rpx; border-radius: 999rpx; color: #e58b12; background: #fff5e8; font-size: 18rpx; line-height: 1.35; flex-shrink: 0; }
|
||
.task-main-row { display: flex; justify-content: space-between; margin-top: 18rpx; color: #7d899d; font-size: 20rpx; line-height: 1.45; }
|
||
.task-main-row text:last-child { max-width: 68%; color: #2b3853; text-align: right; word-break: break-all; }
|
||
.task-footer { justify-content: space-between; margin-top: 20rpx; padding-top: 16rpx; border-top: 1rpx solid #edf0f5; color: #9aa4b4; font-size: 18rpx; }
|
||
.detail-mask { position: fixed; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; background: rgba(22, 35, 61, 0.45); }
|
||
.detail-sheet { width: 100%; padding: 18rpx 24rpx calc(30rpx + env(safe-area-inset-bottom)); box-sizing: border-box; border-radius: 28rpx 28rpx 0 0; background: #ffffff; }
|
||
.sheet-handle { width: 72rpx; height: 8rpx; margin: 0 auto 22rpx; border-radius: 999rpx; background: #dce3ee; }
|
||
.detail-header { color: #17233d; font-size: 28rpx; font-weight: 700; }
|
||
.detail-device-no { display: block; margin-top: 22rpx; color: #1677ff; font-size: 32rpx; font-weight: 800; word-break: break-all; }
|
||
.detail-list { margin-top: 18rpx; padding: 2rpx 18rpx; border-radius: 18rpx; background: #f8fafc; }
|
||
.detail-item { padding: 18rpx 0; border-bottom: 1rpx solid #e8edf4; color: #7d899d; font-size: 20rpx; line-height: 1.4; }
|
||
.detail-item:last-child { border-bottom: 0; }
|
||
.detail-item text:last-child { max-width: 64%; color: #2b3853; text-align: right; word-break: break-all; }
|
||
.repair-button { display: flex; align-items: center; justify-content: center; height: 84rpx; margin-top: 24rpx; border-radius: 18rpx; color: #ffffff; background: #1677ff; font-size: 24rpx; font-weight: 700; }
|
||
.theme-dark.repair-tasks-page {
|
||
background: #151923;
|
||
}
|
||
|
||
.theme-dark .task-card,
|
||
.theme-dark .detail-sheet {
|
||
border-color: #364152;
|
||
background: #222936;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.theme-dark .task-no,
|
||
.theme-dark .task-main-row text:last-child,
|
||
.theme-dark .detail-header,
|
||
.theme-dark .detail-item text:last-child {
|
||
color: #f2f5fa;
|
||
}
|
||
|
||
.theme-dark .page-subtitle,
|
||
.theme-dark .loading-card,
|
||
.theme-dark .task-main-row,
|
||
.theme-dark .task-footer,
|
||
.theme-dark .detail-item {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .task-footer,
|
||
.theme-dark .detail-item {
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark .detail-list {
|
||
background: #1c2431;
|
||
}
|
||
</style>
|