Files
bj_power/bj_power_mes/frontend/src/pages/Trace.vue
T
SunYF e31b85e87a refactor: 全链路统一将物料编码改称图号,优化入库流程
1.  统一全系统UI与文档中的"物料编码"为客户口径"图号",覆盖前端页面、后端导出表头与帮助文档
2.  优化入库模块:
    - 新增归属类型"其他"并完善注释
    - 入库时自动回写入库单批次号
    - 优化库位选择为三级联动下拉选择,替换原手动输入
    - 新增入库归属编号录入功能
3. 更新需求文档,同步完成图号全链路改造的验收标记
2026-09-17 18:27:07 +08:00

142 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<el-card>
<el-form inline>
<el-form-item label="工件SN">
<el-input v-model="sn" style="width:220px" placeholder="输入SN查询追溯" @keyup.enter="search" />
</el-form-item>
<el-form-item><el-button type="primary" @click="search">追溯查询</el-button></el-form-item>
<el-form-item>
<el-button type="warning" :disabled="!sn" @click="printCard">打印流程卡</el-button>
</el-form-item>
</el-form>
<el-alert v-if="error" :title="error" type="error" show-icon closable style="margin-bottom:10px" />
<template v-if="data">
<el-descriptions :column="4" border style="margin-bottom:12px" title="工件信息">
<el-descriptions-item label="工件SN">{{ data.workpiece?.sn }}</el-descriptions-item>
<el-descriptions-item label="所属工单">{{ data.workpiece?.orderNo }}</el-descriptions-item>
<el-descriptions-item v-if="data.workpiece?.productCode || data.order?.productCode" label="产品型号">
{{ data.workpiece?.productCode || data.order?.productCode }}{{ (data.workpiece?.productName || data.order?.productName) ? '' + (data.workpiece?.productName || data.order?.productName) + '' : '' }}
</el-descriptions-item>
<el-descriptions-item label="状态">{{ statusText(data.workpiece?.status) }}</el-descriptions-item>
<el-descriptions-item v-if="data.workpiece?.currentProcess" label="当前工位">{{ data.workpiece?.currentProcess }}</el-descriptions-item>
<el-descriptions-item v-if="data.workpiece?.onlineAt" label="进线时间">{{ fmt(data.workpiece?.onlineAt) }}</el-descriptions-item>
<el-descriptions-item v-if="data.workpiece?.doneAt" label="完工时间">{{ fmt(data.workpiece?.doneAt) }}</el-descriptions-item>
</el-descriptions>
<el-alert type="info" :closable="false" style="margin-bottom:12px"
title="追溯链路:产品型号(物)→ 工单(批次任务)→ 工件(实例SN)。本页展示单个工件的完整生命周期。" />
<el-tabs>
<el-tab-pane label="工位时间线">
<el-timeline>
<el-timeline-item v-for="p in (data.processTimeline||[])" :key="p.id"
:timestamp="p.operator ? (p.operator+' · '+fmt(p.endedAt)) : fmt(p.endedAt)"
:type="p.result==='NG'?'danger':'success'">
{{ p.processName }}工位 {{ p.stationNo || p.processCode }})— {{ p.result }}
</el-timeline-item>
</el-timeline>
</el-tab-pane>
<el-tab-pane label="步骤考核数据">
<el-table :data="data.stepData||[]" border size="small">
<el-table-column prop="stepName" label="步骤" min-width="110" />
<el-table-column prop="criterionName" label="考核项" min-width="110" />
<el-table-column prop="value" label="数值" width="100" />
<el-table-column prop="isOK" label="合格" width="80">
<template #default="{row}"><el-tag :type="row.isOK?'success':'danger'">{{ row.isOK?'合格':'不合格' }}</el-tag></template>
</el-table-column>
<el-table-column prop="operator" label="操作人" width="90" />
</el-table>
</el-tab-pane>
<el-tab-pane label="拧紧数据">
<el-table :data="data.torqueRecords||[]" border size="small">
<el-table-column prop="stationNo" label="工位" width="80" />
<el-table-column prop="torque" label="扭矩" width="100" />
<el-table-column prop="angle" label="角度" width="90" />
<el-table-column prop="result" label="结果" width="80" />
<el-table-column prop="operator" label="操作人" width="90" />
<el-table-column prop="time" label="时间" min-width="160" />
</el-table>
</el-tab-pane>
<el-tab-pane label="成品关联">
<p>批次号{{ (data.associationTrace?.batchItems||[]).join(', ') || '无' }}</p>
<p>电气件SN{{ (data.associationTrace?.serialItems||[]).join(', ') || '无' }}</p>
</el-tab-pane>
<el-tab-pane label="装机绑定">
<el-alert :type="data.bindTrace?.complete ? 'success' : 'warning'" :closable="false" style="margin-bottom:10px"
:title="data.bindTrace?.complete ? '装配物料已全部绑齐 ✓' : ('装配物料未绑齐:' + (data.bindTrace?.missing || ''))" show-icon />
<el-table :data="data.bindTrace?.binds||[]" border size="small">
<el-table-column prop="processCode" label="工序" width="70" />
<el-table-column prop="materialCode" label="图号" min-width="110" />
<el-table-column prop="materialName" label="物料名称" min-width="110" />
<el-table-column prop="spec" label="规格" min-width="90" />
<el-table-column prop="bindType" label="类型" width="70">
<template #default="{row}">{{ row.bindType === 'SN' ? '电气件SN' : '批次' }}</template>
</el-table-column>
<el-table-column prop="bindValue" label="绑定值(SN/批次)" min-width="140" />
<el-table-column prop="operator" label="绑定人" width="90" />
<el-table-column prop="createdAt" label="绑定时间" min-width="165">
<template #default="{row}">{{ fmt(row.createdAt) }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</template>
</el-card>
<PageHelp :data="helpTrace" page="Trace" />
</template>
<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import request from '../utils/request'
import { openPrintableHtml } from '../utils/print'
import PageHelp from '../components/PageHelp.vue'
import { helpTrace } from '../help'
const sn = ref('')
const data = ref(null)
const error = ref('')
async function search() {
if (!sn.value) return
error.value = ''
data.value = null
try {
data.value = await request.get('/trace', { params: { sn: sn.value } })
} catch (e) {
error.value = e.message || '查询失败'
}
}
async function printCard() {
if (!sn.value) return
// 打印前数据完整性预检
let missing = []
try {
const check = await request.get('/process-card', { params: { sn: sn.value, check: 1 } })
missing = check?.missing || []
} catch {
/* 预检失败不阻塞打印 */
}
if (missing.length) {
try {
await ElMessageBox.confirm(
`以下数据不完整,是否继续打印?\n\n${missing.map((m) => '· ' + m).join('\n')}`,
'打印流程卡', {
type: 'warning',
confirmButtonText: '继续打印',
cancelButtonText: '取消'
})
} catch {
return // 用户取消
}
}
// 直接 window.open 带不上 Bearer 头会被 401,改由 axios 取回 HTML 后写入新窗口
await openPrintableHtml('/process-card', { sn: sn.value })
}
function statusText(st) {
const map = { CREATED: '已创建', ONLINE: '生产中', DONE: '已完工', SCRAPPED: '已报废' }
return map[st] || st || '-'
}
function fmt(v) { return v ? String(v).replace('T', ' ').slice(0, 19) : '-' }
</script>