52 lines
4.3 KiB
Vue
52 lines
4.3 KiB
Vue
<template>
|
||
<div class="produce-work-page tasks-page">
|
||
<div class="page-shell">
|
||
<section class="page-hero">
|
||
<div><span class="eyebrow">维修工作台</span><h1>待维修订单</h1><p>选择订单查看异常详情，并进入维修处理。</p></div>
|
||
<div class="task-count">{{ tasks.length }} 条</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-heading"><div><h2>待维修任务</h2><p>按异常提报时间展示尚未处理的维修任务</p></div><el-button :loading="loading" @click="loadTasks">刷新</el-button></div>
|
||
<el-skeleton v-if="loading" :rows="5" animated />
|
||
<el-empty v-else-if="!tasks.length" description="暂无待维修订单" :image-size="90" />
|
||
<div v-else class="task-grid">
|
||
<article v-for="task in tasks" :key="task.id" class="task-card">
|
||
<div class="task-card-header"><div><span class="task-label">设备 / 订单号</span><strong>{{ task.device_no }}</strong></div><el-tag type="warning">{{ task.status_name || '待维修' }}</el-tag></div>
|
||
<div class="task-detail"><span>异常类型</span><strong>{{ task.type_name || '-' }}</strong></div>
|
||
<div class="task-detail"><span>异常原因</span><strong>{{ reasonText(task) }}</strong></div>
|
||
<div class="task-footer"><span>{{ task.reported_date || '-' }}</span><span>{{ task.reporter || task.user_code || '-' }}</span></div>
|
||
<el-button type="primary" class="task-action" @click="startRepair(task.device_no)">开始维修</el-button>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { getRepairTasks, type ProduceRepairTask } from '~/apps/produce/api/exception'
|
||
|
||
const loading = ref(false)
|
||
const tasks = ref<ProduceRepairTask[]>([])
|
||
const reasonText = (task: ProduceRepairTask) => [task.reason_name, task.issue_name].filter(Boolean).join(' · ') || '-'
|
||
const loadTasks = async () => {
|
||
loading.value = true
|
||
try {
|
||
const result = await getRepairTasks({ limit: 100 })
|
||
tasks.value = Array.isArray(result) ? result : []
|
||
} catch {
|
||
tasks.value = []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
const startRepair = (deviceNo: string) => navigateTo({ path: '/produce/repair', query: { device_no: deviceNo } })
|
||
onMounted(() => { void loadTasks() })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.produce-work-page{min-height:calc(100vh - 60px);padding:28px;background:#f5f7fb;color:#17233d}.page-shell{max-width:1440px;margin:0 auto}.page-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 36px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#2f6cf6,#35bfa3);box-shadow:0 14px 32px rgba(37,99,235,.12)}.eyebrow{font-size:13px;opacity:.85}.page-hero h1{margin:8px 0 0;font-size:30px}.page-hero p{margin:8px 0 0;opacity:.86}.task-count{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.16);font-size:14px}.panel{margin-top:20px;padding:26px;border:1px solid #e7edf5;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(36,59,92,.04)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-heading h2{margin:0;font-size:18px}.panel-heading p{margin:6px 0 0;color:#9aa4b4;font-size:13px}.task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.task-card{padding:20px;border:1px solid #e7edf5;border-radius:16px;background:#fbfcfe}.task-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.task-label,.task-detail span{display:block;color:#9aa4b4;font-size:12px}.task-card-header strong{display:block;margin-top:7px;color:#2563eb;font-size:16px;word-break:break-all}.task-detail{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #eef2f7}.task-detail strong{max-width:68%;text-align:right;font-size:13px;word-break:break-all}.task-footer{display:flex;justify-content:space-between;gap:12px;padding:14px 0;color:#8a94a6;font-size:12px}.task-action{width:100%;margin-top:4px}@media(max-width:1000px){.task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.produce-work-page{padding:16px}.page-hero{padding:24px;align-items:flex-start;flex-direction:column}.task-grid{grid-template-columns:1fr}.panel{padding:18px}}
|
||
</style>
|