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.
433 lines
12 KiB
433 lines
12 KiB
<template>
|
|
<div class="quality-issue-detail">
|
|
<!-- 查看模式 -->
|
|
<div>
|
|
<el-form label-position="top" class="detail-form">
|
|
<!-- 基础信息区 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="反馈单号">
|
|
<el-input v-model="detailData.issueNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="问题日期">
|
|
<el-input :value="formatDate(detailData.issueDate)" 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="供应商名称">
|
|
<el-input v-model="detailData.supplierName" 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.supplierResponsible" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="Plant">
|
|
<el-input v-model="detailData.plant" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="Claim No">
|
|
<el-input v-model="detailData.claimNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="Product Category">
|
|
<el-input v-model="detailData.productCategory" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="Part No">
|
|
<el-input v-model="detailData.partNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="批次数量">
|
|
<el-input v-model="detailData.batchQty" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="拒收批次数量">
|
|
<el-input v-model="detailData.rejectBatchQty" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="投诉接收日期">
|
|
<el-input :value="formatDate(detailData.receiveComplaintDate)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="样品接收日期">
|
|
<el-input :value="formatDate(detailData.receiveSampleDate)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-form-item label="问题简述">
|
|
<el-input v-model="detailData.issueSummary" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="问题详细描述">
|
|
<el-input
|
|
v-model="detailData.issueDescription"
|
|
type="textarea"
|
|
:rows="2"
|
|
resize="none"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<el-form-item label="Level">
|
|
<el-input v-model="detailData.levelNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="Mode 1">
|
|
<el-input v-model="detailData.mode1" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="Mode 2">
|
|
<el-input v-model="detailData.mode2" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="Mode 3">
|
|
<el-input v-model="detailData.mode3" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="Inspector">
|
|
<el-input v-model="detailData.inspector" 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.createBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="录入时间">
|
|
<el-input v-model="detailData.createDate" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="要求回复日期">
|
|
<el-input :value="formatDate(detailData.requireReplyDate)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="状态">
|
|
<el-input v-model="detailData.status" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="Why Escape">
|
|
<el-input
|
|
v-model="detailData.whyEscape"
|
|
type="textarea"
|
|
:rows="2"
|
|
resize="none"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="原因分析">
|
|
<el-input
|
|
v-model="detailData.analysis"
|
|
type="textarea"
|
|
:rows="3"
|
|
resize="none"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="后续措施">
|
|
<el-input
|
|
v-model="detailData.correctiveAction"
|
|
type="textarea"
|
|
:rows="3"
|
|
resize="none"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" style="margin-top: 20px;">
|
|
<el-col :span="6">
|
|
<el-form-item label="回复人">
|
|
<el-input v-model="detailData.replyBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="回复时间">
|
|
<el-input v-model="detailData.replyTime" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="录入人(回复)">
|
|
<el-input v-model="detailData.entryBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="录入时间(回复)">
|
|
<el-input v-model="detailData.entryDate" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 索赔信息区块 -->
|
|
<div class="claim-section">
|
|
<div class="claim-title">索赔信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="是否被索赔">
|
|
<el-input :value="detailData.claimFlag === 'Y' ? '是' : (detailData.claimFlag === 'N' ? '否' : '')" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="被索赔金额">
|
|
<el-input v-model="detailData.claimAmount" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="处置备注">
|
|
<el-input v-model="detailData.disposalRemark" 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.entryBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="录入时间(索赔)">
|
|
<el-input v-model="detailData.entryDate" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-row :gutter="20" class="reduce-margin-top">
|
|
<el-col :span="6">
|
|
<el-form-item label="关闭人">
|
|
<el-input v-model="detailData.closeBy" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="关闭时间">
|
|
<el-input v-model="detailData.closeTime" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'QualityIssueDetail',
|
|
props: {
|
|
detailData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.quality-issue-detail {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.detail-form {
|
|
width: 100%;
|
|
}
|
|
|
|
/* =======================
|
|
表单整体间距
|
|
======================= */
|
|
.el-form-item {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/deep/ .el-form-item__label {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-row {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.el-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* =======================
|
|
Input
|
|
======================= */
|
|
::v-deep .el-input__inner {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* =======================
|
|
Textarea
|
|
======================= */
|
|
::v-deep .el-textarea__inner {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
padding: 10px 14px;
|
|
min-height: 70px;
|
|
}
|
|
|
|
/* textarea表单项额外间距 */
|
|
.el-form-item:has(.el-textarea) {
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
/* =======================
|
|
Disabled
|
|
======================= */
|
|
::v-deep .el-input.is-disabled .el-input__inner {
|
|
background-color: #f5f7fa;
|
|
color: #909399;
|
|
border-color: #e4e7ed;
|
|
}
|
|
|
|
/* =======================
|
|
DatePicker
|
|
======================= */
|
|
::v-deep .el-date-editor.el-input {
|
|
width: 100%;
|
|
}
|
|
|
|
/* =======================
|
|
Number
|
|
======================= */
|
|
::v-deep .el-input-number {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .el-input-number .el-input__inner {
|
|
text-align: left;
|
|
}
|
|
|
|
/* =======================
|
|
索赔信息区块
|
|
======================= */
|
|
.claim-section {
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
background: #fafafa;
|
|
padding: 20px;
|
|
margin: 16px 0 28px;
|
|
}
|
|
|
|
.claim-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
padding-left: 10px;
|
|
margin-bottom: 20px;
|
|
border-left: 3px solid #409eff;
|
|
}
|
|
|
|
.claim-section .el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claim-section .el-row:last-child .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
|
background-color: #f5f7fa;
|
|
color: #606266;
|
|
}
|
|
/deep/ .el-textarea {
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media screen and (max-width: 1600px) {
|
|
.el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.claim-section {
|
|
margin: 10px 0 20px;
|
|
}
|
|
}
|
|
.reduce-margin-top {
|
|
margin-top: -16px;
|
|
}
|
|
|
|
|
|
.reduce-margin-top .el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|