<template>
|
<div class="app-container">
|
<el-card style="height:82vh;overflow:auto;">
|
<template #header>
|
<div class="card-header">
|
<el-form :inline="true"
|
:model="searchForm"
|
class="search-form">
|
<el-form-item label="生产订单号">
|
<el-select v-model="selectedNpsNo"
|
filterable
|
remote
|
reserve-keyword
|
placeholder="请输入生产订单号"
|
:loading="npsNoLoading"
|
:remote-method="handleNpsNoSearch"
|
@change="handleSearch"
|
style="width: 400px;">
|
<el-option v-for="option in npsNoOptions"
|
:key="option.id"
|
:label="option.npsNo + '-' + option.productName + '-' + option.model"
|
:value="option.id" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
<!-- 基础信息 -->
|
<div v-if="rowData.productionOrderDto"
|
class="detail-section">
|
<h3 class="section-title">基础信息</h3>
|
<el-descriptions :column="3"
|
border>
|
<el-descriptions-item label="生产订单号">{{ rowData.productionOrderDto?.npsNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="产品名称">{{ rowData.productionOrderDto?.productName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="产品规格">{{ rowData.productionOrderDto?.model || '-' }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="物料编码">{{ rowData.productionOrderDto?.materialCode || '-' }}</el-descriptions-item> -->
|
<el-descriptions-item label="计划数量">{{ rowData.productionOrderDto?.quantity || 0 }} <span class="unit">{{ rowData.productionOrderDto?.unit || '-' }}</span></el-descriptions-item>
|
<el-descriptions-item label="当前状态">
|
<el-tag :type="getStatusType(rowData.productionOrderDto?.status)">
|
{{ getStatusText(rowData.productionOrderDto?.status) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{ rowData.productionOrderDto?.customerName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开始日期">{{ parseTime(rowData.productionOrderDto?.startTime) || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="完成进度">
|
<el-progress :percentage="rowData.productionOrderDto?.completionStatus>=100?100:rowData.productionOrderDto?.completionStatus"
|
:color="customColors(rowData.productionOrderDto?.completionStatus)"
|
:status="rowData.productionOrderDto?.completionStatus >= 100 ? 'success' : ''"
|
style="width: 80%;" />
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<el-empty v-else
|
description="请搜索生产订单号" />
|
<!-- 生产报工记录 -->
|
<div v-if="rowData.productionRecords && rowData.productionRecords.length > 0"
|
class="progress-container">
|
<div class="progress-section">
|
<h3 class="section-title">工单信息</h3>
|
<div class="order-item">
|
<el-table :data="rowData.productionRecords"
|
border
|
style="width: 100%">
|
<el-table-column prop="workOrder.workOrderNo"
|
label="工单编号"
|
align="center">
|
</el-table-column>
|
<el-table-column label="产品名称"
|
align="center">
|
<template #default="{ row }">
|
{{ row.workOrder.productName || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="规格"
|
align="center">
|
<template #default="{ row }">
|
{{ row.workOrder.model || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="workOrder.planQuantity"
|
label="需求数量"
|
align="center" />
|
<el-table-column prop="workOrder.completeQuantity"
|
label="完成数量"
|
align="center" />
|
<el-table-column prop="workOrder.completionStatus"
|
label="完成进度"
|
align="center">
|
<template #default="{ row }">
|
<span :style="{ color: customColors(row.workOrder.completionStatus) }">{{ row.workOrder.completionStatus || 0 }}%</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="详情"
|
align="center"
|
width="200">
|
<template #default="{ row }">
|
<el-link @click="handleClickStep(row)"
|
type="primary">报工记录</el-link>
|
<el-link @click="handleClickQuality(row)"
|
style="margin-left:20px"
|
type="primary">质检信息</el-link>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<el-empty v-else-if="rowData.productionOrderDto"
|
description="暂无报工记录" />
|
</el-card>
|
<!-- 生产报工详情弹窗 -->
|
<el-dialog v-model="detailDialogVisible"
|
title="生产报工详情"
|
width="1000px"
|
:close-on-click-modal="false"
|
custom-class="custom-dialog">
|
<div class="detail-container">
|
<!-- 基础信息 -->
|
<div class="detail-section">
|
<h3 class="section-title">工单基础信息</h3>
|
<el-descriptions :column="3"
|
border>
|
<el-descriptions-item label="生产工单号">{{ detailData.workOrder.workOrderNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="计划数量">{{ detailData.workOrder.planQuantity || 0 }}</el-descriptions-item>
|
<el-descriptions-item label="完成数量">{{ detailData.workOrder.completeQuantity || 0 }}</el-descriptions-item>
|
<el-descriptions-item label="实际开始时间">{{ parseTime(detailData.workOrder.actualStartTime) || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="实际结束时间">{{ parseTime(detailData.workOrder.actualEndTime) || '-' }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="完成进度">
|
<el-progress :percentage="detailData.workOrder.completionStatus >= 100 ? 100 : (detailData.workOrder.completionStatus || 0)"
|
:color="customColors(detailData.workOrder.completionStatus)"
|
:status="detailData.workOrder.completionStatus >= 100 ? 'success' : ''"
|
style="width:500px;" />
|
</el-descriptions-item> -->
|
<el-descriptions-item label="完成进度"><span :style="{ color: customColors(detailData.workOrder.completionStatus) }">{{ detailData.workOrder.completionStatus || 0 }}%</span></el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div class="detail-section">
|
<h3 class="section-title">报工明细</h3>
|
<el-table :data="detailData.reports"
|
border
|
style="width: 100%">
|
<el-table-column label="报工单号"
|
prop="productNo"
|
align="center" />
|
<el-table-column label="创建人"
|
prop="userName"
|
align="center" />
|
<el-table-column label="创建时间"
|
align="center">
|
<template #default="{ row }">
|
{{ parseTime(row.createTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作"
|
align="center"
|
width="200">
|
<template #default="{ row }">
|
<el-button type="primary"
|
link
|
@click="showInput(row.id)">查看投入</el-button>
|
<el-button type="primary"
|
link
|
@click="showParamDetail(row.productionOperationParamList)">参数详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 投入模态框 -->
|
<input-modal v-if="isShowInput"
|
v-model:visible="isShowInput"
|
:production-product-main-id="isShowingId" />
|
<!-- 参数详情弹窗 -->
|
<el-dialog v-model="paramDetailVisible"
|
title="参数详情"
|
width="600px">
|
<div v-if="currentParams && currentParams.length > 0"
|
class="param-detail-list">
|
<el-descriptions :column="1"
|
border>
|
<el-descriptions-item v-for="param in currentParams"
|
:key="param.id"
|
:label="param.paramName">
|
{{ param.inputValue }}
|
<span v-if="param.unit && param.unit !== '/'"
|
class="unit-text">({{ param.unit }})</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<el-empty v-else
|
description="暂无参数数据" />
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="paramDetailVisible = false">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 质检信息弹窗 -->
|
<el-dialog v-model="qualityDialogVisible"
|
title="质检详情"
|
width="1000px"
|
:close-on-click-modal="false"
|
custom-class="custom-dialog">
|
<div class="detail-container">
|
<div v-for="(record, index) in qualityRecords"
|
:key="record.id"
|
class="quality-record-block">
|
<div class="detail-section">
|
<h3 class="section-title">检测记录 {{ index + 1 }} - {{ parseTime(record.createTime) }}</h3>
|
<el-descriptions :column="3"
|
border>
|
<el-descriptions-item label="检测日期">{{ parseTime(record.createTime) || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="报工单号">{{ record.reportNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="检验员">{{ record.userName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="产品名称">{{ record.productName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="规格型号">{{ record.model || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="数量">{{ record.quantity || 0 }} {{ record.unit || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="检测单位">{{ record.checkCompany || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="检测结果">
|
<el-tag :type="record.checkResult === '合格' ? 'success' : 'danger'">
|
{{ record.checkResult || '待检测' }}
|
</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
<h4 class="sub-section-title">检验指标列表</h4>
|
<el-table :data="record.inspectParamList"
|
border
|
style="width: 100%">
|
<el-table-column label="序号"
|
type="index"
|
width="60"
|
align="center" />
|
<el-table-column label="指标"
|
prop="parameterItem"
|
align="center" />
|
<el-table-column label="单位"
|
prop="unit"
|
align="center" />
|
<el-table-column label="标准值"
|
prop="standardValue"
|
align="center" />
|
<el-table-column label="内控值"
|
prop="controlValue"
|
align="center" />
|
<el-table-column label="实际值"
|
prop="testValue"
|
align="center" />
|
</el-table>
|
</div>
|
<el-divider v-if="index < qualityRecords.length - 1" />
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="qualityDialogVisible = false">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import { parseTime } from "@/utils/ruoyi";
|
import InputModal from "@/views/productionManagement/productionReporting/Input.vue";
|
import {
|
getOrderDetail,
|
productOrderListPage,
|
} from "@/api/productionManagement/productionOrder";
|
|
const route = useRoute();
|
const router = useRouter();
|
|
// 搜索相关
|
const searchForm = reactive({
|
npsNo: "",
|
});
|
const selectedNpsNo = ref(null);
|
const npsNoLoading = ref(false);
|
const npsNoOptions = ref([]);
|
|
// 详情数据
|
const rowData = reactive({
|
productionOrderDto: null,
|
productionRecords: [],
|
});
|
|
// 报工详情弹窗
|
const detailDialogVisible = ref(false);
|
const detailData = ref({
|
workOrder: {},
|
reports: [],
|
});
|
|
// 投入模态框
|
const isShowInput = ref(false);
|
const isShowingId = ref(0);
|
const showInput = id => {
|
isShowInput.value = true;
|
isShowingId.value = id;
|
};
|
|
// 参数详情弹窗
|
const paramDetailVisible = ref(false);
|
const currentParams = ref([]);
|
const showParamDetail = params => {
|
currentParams.value = params || [];
|
paramDetailVisible.value = true;
|
};
|
|
// 质检信息弹窗
|
const qualityDialogVisible = ref(false);
|
const qualityRecords = ref([]);
|
|
// 状态处理
|
const getStatusType = status => {
|
const typeMap = { 1: "primary", 2: "warning", 3: "success", 5: "danger" };
|
return typeMap[status] || "info";
|
};
|
const getStatusText = status => {
|
const statusMap = { 1: "待开始", 2: "进行中", 3: "已完成", 5: "已结束" };
|
return statusMap[status] || "已取消";
|
};
|
const customColors = percentage => {
|
if (percentage < 30) return "#f56c6c";
|
if (percentage < 70) return "#e6a23c";
|
return "#67c23a";
|
};
|
|
// 模拟搜索方法
|
const handleNpsNoSearch = async query => {
|
npsNoLoading.value = true;
|
try {
|
const res = await productOrderListPage({
|
npsNo: query || "",
|
pageNum: 1,
|
pageSize: 50,
|
});
|
// 参照 productionOrder/index.vue 的数据结构 res.data.records
|
npsNoOptions.value = res.data?.records || res.rows || [];
|
} catch (error) {
|
console.error(error);
|
} finally {
|
npsNoLoading.value = false;
|
}
|
};
|
|
const handleSearch = async id => {
|
const selected = npsNoOptions.value.find(item => item.id === id);
|
if (selected) {
|
try {
|
const res = await getOrderDetail(selected.npsNo);
|
if (res.code === 200) {
|
const { productionOrder, workOrderList } = res.data;
|
rowData.productionOrderDto = productionOrder || selected;
|
rowData.productionRecords = workOrderList || [];
|
} else {
|
rowData.productionOrderDto = selected;
|
rowData.productionRecords = [];
|
}
|
} catch (error) {
|
console.error(error);
|
ElMessage.error("获取订单详情失败");
|
rowData.productionOrderDto = selected;
|
}
|
}
|
};
|
|
const handleBack = () => {
|
router.back();
|
};
|
|
const handleClickStep = row => {
|
// row 是 workOrderList 中的一项，包含 workOrder, reportList, inspectList
|
detailData.value = {
|
workOrder: row.workOrder || {},
|
reports: (row.reportList || []).map(r => ({
|
...r.reportMain,
|
productionOperationParamList: r.reportParamList || [],
|
})),
|
};
|
detailDialogVisible.value = true;
|
};
|
|
const handleClickQuality = row => {
|
// row 是 workOrderList 中的一项
|
const inspects = row.inspectList || [];
|
qualityRecords.value = inspects.map(i => ({
|
...i.inspect,
|
reportNo: i.reportNo,
|
userName: i.reportMain?.userName || "-",
|
inspectParamList: i.inspectParamList || [],
|
inspectFileList: i.inspectFileList || [],
|
}));
|
qualityDialogVisible.value = true;
|
};
|
|
onMounted(async () => {
|
// 初始加载列表
|
await handleNpsNoSearch();
|
|
if (route.query.npsNo) {
|
const npsNo = route.query.npsNo;
|
const found = npsNoOptions.value.find(item => item.npsNo === npsNo);
|
if (found) {
|
selectedNpsNo.value = found.id;
|
handleSearch(found.id);
|
} else {
|
// 如果列表中没有（可能是分页原因），则根据 npsNo 再次精准搜索
|
try {
|
const res = await productOrderListPage({
|
npsNo,
|
pageNum: -1,
|
pageSize: -1,
|
});
|
const records = res.data?.records || res.rows || [];
|
if (records.length > 0) {
|
const item = records[0];
|
npsNoOptions.value.unshift(item);
|
selectedNpsNo.value = item.id;
|
handleSearch(item.id);
|
}
|
} catch (error) {
|
console.error("获取路由参数对应的订单失败", error);
|
}
|
}
|
}
|
});
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
}
|
|
.search-form {
|
width: 100%;
|
}
|
|
.search-form .el-form-item {
|
margin-right: 10px;
|
}
|
|
.detail-section {
|
margin-bottom: 24px;
|
background-color: #ffffff;
|
border-radius: 10px;
|
padding: 24px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
transition: all 0.3s ease;
|
}
|
|
.detail-section:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 20px;
|
color: #1a1a1a;
|
border-bottom: 2px solid #409eff;
|
padding-bottom: 10px;
|
display: flex;
|
align-items: center;
|
}
|
|
.section-title::before {
|
content: "";
|
display: inline-block;
|
width: 4px;
|
height: 16px;
|
background-color: #409eff;
|
margin-right: 8px;
|
border-radius: 2px;
|
}
|
|
.sub-section-title {
|
font-size: 14px;
|
font-weight: 600;
|
margin-bottom: 16px;
|
color: #303133;
|
display: flex;
|
align-items: center;
|
}
|
|
.sub-section-title::before {
|
content: "";
|
display: inline-block;
|
width: 3px;
|
height: 12px;
|
background-color: #67c23a;
|
margin-right: 8px;
|
border-radius: 2px;
|
}
|
|
.unit {
|
font-size: 12px;
|
color: #909399;
|
margin-left: 4px;
|
}
|
|
:deep(.el-descriptions) {
|
border-radius: 8px;
|
overflow: hidden;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
}
|
|
:deep(.el-descriptions__row:nth-child(odd)) {
|
background-color: #f9f9f9;
|
}
|
|
:deep(.el-descriptions__label) {
|
font-weight: 500;
|
color: #606266;
|
background-color: #f5f7fa;
|
}
|
|
:deep(.el-descriptions__content) {
|
color: #303133;
|
font-weight: 500;
|
}
|
|
.progress-container {
|
display: flex;
|
gap: 24px;
|
}
|
|
.progress-section {
|
margin-bottom: 24px;
|
background-color: #ffffff;
|
border-radius: 10px;
|
padding: 24px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
flex: 1;
|
transition: all 0.3s ease;
|
width: 100%;
|
}
|
|
.progress-section:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
|
}
|
|
.order-item {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
overflow: hidden;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
}
|
|
:deep(.el-table) {
|
border-radius: 8px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
}
|
|
:deep(.el-table th) {
|
background-color: #f5f7fa !important;
|
font-weight: 600;
|
color: #606266;
|
}
|
|
:deep(.el-progress-bar__inner) {
|
border-radius: 10px;
|
}
|
|
:deep(.el-tag) {
|
border-radius: 12px;
|
padding: 2px 10px;
|
}
|
|
/* 弹窗样式 */
|
.detail-container {
|
max-height: 600px;
|
overflow-y: auto;
|
padding: 0 16px;
|
}
|
|
.process-item {
|
margin-bottom: 24px;
|
padding: 20px;
|
background-color: #ffffff;
|
border-radius: 8px;
|
border: 1px solid #ebeef5;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
}
|
|
.process-header {
|
margin-bottom: 20px;
|
padding-bottom: 12px;
|
border-bottom: 1px solid #f0f2f5;
|
}
|
|
.process-title {
|
font-size: 15px;
|
font-weight: 600;
|
margin-bottom: 12px;
|
color: #1a1a1a;
|
display: flex;
|
align-items: center;
|
}
|
|
.process-title::before {
|
content: "";
|
display: inline-block;
|
width: 4px;
|
height: 16px;
|
background-color: #409eff;
|
margin-right: 8px;
|
border-radius: 2px;
|
}
|
|
.process-info {
|
display: flex;
|
gap: 20px;
|
font-size: 13px;
|
color: #606266;
|
}
|
|
.process-label {
|
padding: 4px 12px;
|
background-color: #ecf5ff;
|
border-radius: 4px;
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
.process-details {
|
margin-bottom: 20px;
|
}
|
|
.num1 {
|
color: #1107cc;
|
font-weight: 600;
|
}
|
|
.num2 {
|
color: #0fcf25;
|
font-weight: 600;
|
}
|
|
.num3 {
|
color: #d31818;
|
font-weight: 600;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
padding: 20px;
|
border-top: 1px solid #ebeef5;
|
}
|
|
.dialog-footer .el-button {
|
min-width: 100px;
|
padding: 8px 20px;
|
}
|
|
/* 自定义对话框样式 */
|
:deep(.custom-dialog) {
|
border-radius: 12px;
|
overflow: hidden;
|
}
|
|
:deep(.custom-dialog .el-dialog__header) {
|
background-color: #f5f7fa;
|
padding: 20px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
:deep(.custom-dialog .el-dialog__title) {
|
font-size: 18px;
|
font-weight: 600;
|
color: #1a1a1a;
|
}
|
|
:deep(.custom-dialog .el-dialog__body) {
|
padding: 20px;
|
}
|
|
.unit-text {
|
margin-left: 5px;
|
color: #909399;
|
font-size: 12px;
|
}
|
|
.param-detail-list {
|
padding: 10px;
|
}
|
</style>
|
