<template>
|
<div>
|
<el-dialog v-model="dialogVisible"
|
title="标准投入产出比例"
|
width="1000px"
|
@close="closeDialog">
|
<!-- <el-card class="detail-card">
|
<template #header>
|
<div class="card-header">
|
<span>生产订单信息</span>
|
</div>
|
</template>
|
<div class="detail-info">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="info-label">生产订单号：</span>
|
<span class="info-value">{{ orderInfo.npsNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">产品名称：</span>
|
<span class="info-value">{{ orderInfo.productName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">规格：</span>
|
<span class="info-value">{{ orderInfo.model }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">产品类型：</span>
|
<span class="info-value">{{ orderInfo.strength }}</span>
|
</div>
|
</div>
|
</div>
|
</el-card> -->
|
<el-card class="detail-card"
|
style="margin-top: 20px;">
|
<template #header>
|
<div class="card-header">
|
<span>投入产出比例明细</span>
|
</div>
|
</template>
|
<el-table :data="ratioData"
|
style="width: 100%">
|
<el-table-column prop="materialCode"
|
label="产品编码"
|
width="120" />
|
<el-table-column prop="productName"
|
label="产品名称"
|
width="150" />
|
<el-table-column prop="model"
|
label="规格"
|
width="100" />
|
<!-- <el-table-column prop="unit"
|
label="单位"
|
width="80" /> -->
|
<el-table-column prop="actualInputQuantity"
|
label="实际投入量"
|
width="120">
|
<template #default="scope">
|
<span style="color: #409eff;">{{ scope.row.actualInputQuantity }}</span> {{ scope.row.unit }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="actualOutputQuantity"
|
label="实际产出量"
|
width="120">
|
<template #default="scope">
|
<span style="color: #409eff;">{{ scope.row.actualOutputQuantity }}</span> {{ scope.row.unit }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="standardInputOutputRatio"
|
label="标准投入产出比例"
|
width="150">
|
<template #default="scope">
|
<span style="color: #f68f00;">{{ scope.row.standardInputOutputRatio }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="deviationRate"
|
label="偏差率"
|
width="120">
|
<template #default="scope">
|
<span :style="{ color: scope.row.deviationRate >= 0 ? '#67c23a' : '#f56c6c' }">
|
{{ scope.row.deviationRate >= 0 ? '+' : '' }}{{ scope.row.deviationRate.toFixed(2) }}%
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="closeDialog">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { qualityInspectFinishedRatio } from "@/api/qualityManagement/rawMaterialInspection.js";
|
|
const emit = defineEmits(["close"]);
|
const dialogVisible = ref(false);
|
const ratioData = ref([]);
|
const orderInfo = ref({});
|
const loading = ref(false);
|
|
const openDialog = row => {
|
dialogVisible.value = true;
|
orderInfo.value = row;
|
getRatioDetails(row);
|
};
|
|
const getRatioDetails = row => {
|
loading.value = true;
|
// 构建请求参数
|
const params = {
|
productOrderId: row.productOrderId,
|
};
|
|
qualityInspectFinishedRatio(params)
|
.then(res => {
|
ratioData.value = res.data || [];
|
loading.value = false;
|
})
|
.catch(err => {
|
loading.value = false;
|
console.error("获取标准投入产出比例失败:", err);
|
});
|
};
|
|
const closeDialog = () => {
|
dialogVisible.value = false;
|
emit("close");
|
};
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.detail-card {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.detail-info {
|
padding: 10px 0;
|
}
|
|
.info-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 10px;
|
}
|
|
.info-item {
|
width: 25%;
|
margin-bottom: 10px;
|
}
|
|
.info-label {
|
display: inline-block;
|
width: 120px;
|
font-weight: bold;
|
color: #666;
|
}
|
|
.info-value {
|
color: #333;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
</style>
|
