You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
9.0 KiB
312 lines
9.0 KiB
<template>
|
|
<div class="npc-iqc-detail">
|
|
<div v-if="Object.keys(detailData).length === 0" class="empty-tip">
|
|
请选择一条记录查看详情
|
|
</div>
|
|
<div v-else>
|
|
<el-form label-position="top" class="detail-form">
|
|
<!-- 第一行：IQC检验单号、采购订单号、收货日期、产品编码 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="IQC检验单号">
|
|
<el-input v-model="detailData.iqcNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="采购订单号">
|
|
<el-input v-model="detailData.purOrder" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="收货日期">
|
|
<el-input :value="formatDate(detailData.dateReceived)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="产品编码">
|
|
<el-input v-model="detailData.itemCode" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第二行：供应商名称、供应商编码、Item、SKU -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="供应商名称">
|
|
<el-input v-model="detailData.supplierName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="供应商编码">
|
|
<el-input v-model="detailData.supplierNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="Item">
|
|
<el-input v-model="detailData.item" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="SKU">
|
|
<el-input v-model="detailData.sku" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第三行：物料名称、数量、抽样数量、检验结果总计 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="物料名称">
|
|
<el-input v-model="detailData.itemName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="数量">
|
|
<el-input v-model="detailData.quantity" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="抽样数量">
|
|
<el-input v-model="detailData.sampleSize" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="检验结果总计">
|
|
<el-input v-model="detailData.inspectionTotal" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第四行：检验员姓名、录入日期 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="检验员姓名">
|
|
<el-input v-model="detailData.inspectorName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="录入日期">
|
|
<el-input :value="formatDate(detailData.entryDate)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6"></el-col>
|
|
<el-col :span="6"></el-col>
|
|
</el-row>
|
|
|
|
<!-- 第五行：尺寸A-E -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<el-form-item label="尺寸A">
|
|
<el-input v-model="detailData.dimA" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="尺寸B">
|
|
<el-input v-model="detailData.dimB" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="尺寸C">
|
|
<el-input v-model="detailData.dimC" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="尺寸D">
|
|
<el-input v-model="detailData.dimD" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="尺寸E">
|
|
<el-input v-model="detailData.dimE" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第六行：供应商邮箱、纠正措施请求、收集/批次号、Created By -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="供应商邮箱">
|
|
<el-input v-model="detailData.supplierEmail" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="纠正措施请求">
|
|
<el-input :value="formatCaRequest(detailData.caRequest)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="收集/批次号">
|
|
<el-input v-model="detailData.collectionBatch" disabled placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="Created By">
|
|
<el-input v-model="detailData.createdBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第七行：问题描述（全宽） -->
|
|
<el-row :gutter="20" class="textarea-row">
|
|
<el-col :span="24">
|
|
<el-form-item label="问题描述">
|
|
<el-input type="textarea" v-model="detailData.problem" disabled :rows="3" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第八行：备注（全宽） -->
|
|
<el-row :gutter="20" class="textarea-row">
|
|
<el-col :span="24">
|
|
<el-form-item label="备注">
|
|
<el-input type="textarea" v-model="detailData.comments" disabled :rows="2" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第九行：返工信息 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="返工工时">
|
|
<el-input v-model="detailData.reworkHours" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="返工费率">
|
|
<el-input v-model="detailData.reworkRate" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="返工总成本">
|
|
<el-input v-model="detailData.reworkTotal" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="物料成本">
|
|
<el-input v-model="detailData.materialCost" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NpcIqcDetail',
|
|
props: {
|
|
detailData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate (dateStr) {
|
|
if (!dateStr) return ''
|
|
if (typeof dateStr === 'string' && dateStr.length > 10) {
|
|
return dateStr.substring(0, 10)
|
|
}
|
|
return dateStr
|
|
},
|
|
formatCaRequest (caRequest) {
|
|
if (caRequest === true || caRequest === 'true' || caRequest === 1 || caRequest === '1') {
|
|
return '是'
|
|
}
|
|
return '否'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.npc-iqc-detail {
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
color: #909399;
|
|
font-size: 14px;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.detail-form {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 普通表单间距 */
|
|
.el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* 每一行之间间距 */
|
|
.el-row {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.el-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 标签 */
|
|
::v-deep .el-form-item__label {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
line-height: 20px;
|
|
padding-bottom: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 输入框 */
|
|
::v-deep .el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* textarea */
|
|
::v-deep .el-textarea__inner {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* disabled */
|
|
::v-deep .el-input.is-disabled .el-input__inner,
|
|
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
|
background-color: #f5f7fa;
|
|
border-color: #e4e7ed;
|
|
color: #606266;
|
|
}
|
|
|
|
/* ===== 问题描述区域 ===== */
|
|
.el-row:nth-last-child(3) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.el-row:nth-last-child(3) .el-form-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* ===== 备注区域 ===== */
|
|
.el-row:nth-last-child(2) .el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ===== 成本区域 ===== */
|
|
.el-row:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* textarea高度统一 */
|
|
::v-deep textarea {
|
|
min-height: 70px !important;
|
|
}
|
|
.textarea-row {
|
|
margin-bottom: 25px;
|
|
}
|
|
</style>
|