wilson
/
krd-srm-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(inspection): 添加检验申请详情和质量检查相关组件 

- 新增 inspectionRequestDetail.vue 组件实现检验申请详情的查看和编辑功能
- 新增 com_inspectionRequestPoDetailTab.vue 组件用于展示检验申请的 PO 明细表格
- 新增 npcIqcDetail.vue 组件用于展示 IQC 检验详情信息
- 新增 qualityIssueDetail.vue 组件实现质量问题详情的查看和编辑功能
- 实现了编辑模式与查看模式的切换功能
- 集成了数据保存、取消编辑和表单验证功能
- 添加了表格行样式高亮以标识修改过的记录
master
qiankanghui 2 days ago
parent
532752ccc9
commit
f1501c47fb
5 changed files with 867 additions and 835 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 381
      src/views/modules/inspection/com_inspectionRequestDetail.vue
  2. 11
      src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
  3. 18
      src/views/modules/inspection/inspectionRequestList.vue
  4. 460
      src/views/modules/npcIqc/com_npcIqcDetail.vue
  5. 814
      src/views/modules/quality/com_qualityIssueDetail.vue

381
src/views/modules/inspection/com_inspectionRequestDetail.vue
View File

@ -1,264 +1,152 @@
<template>
<div class="detail-container">
<!-- 修改模式下的编辑表单 -->
<div class="inspection-request-detail">
<!-- 编辑模式 -->
<div v-if="isEditMode" class="edit-form">
<!-- 第一行 - 4列布局 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">申请单号：</span>
<span class="value disabled">{{ detailData.requestNo }}</span>
<div class="form-item">
<div class="label">申请单号：</div>
<div class="value disabled">{{ detailData.requestNo }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">申请日期：</span>
<span class="value disabled">{{ formatDate(detailData.requestDate) }}</span>
<div class="form-item">
<div class="label">申请日期：</div>
<div class="value disabled">{{ formatDate(detailData.requestDate) }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商编码：</span>
<span class="value disabled">{{ detailData.supplierNo }}</span>
<div class="form-item">
<div class="label">供应商编码：</div>
<div class="value disabled">{{ detailData.supplierNo }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商名称：</span>
<span class="value disabled">{{ detailData.supplierName }}</span>
<div class="form-item">
<div class="label">供应商名称：</div>
<div class="value disabled">{{ detailData.supplierName }}</div>
</div>
</el-col>
</el-row>
<!-- 第二行 - 2列布局 -->
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-item">
<span class="label">验货地址：</span>
<el-input
v-model="editData.inspectAddress"
placeholder="请输入验货地址"
size="small"
class="edit-input">
</el-input>
<div class="form-item">
<div class="label">验货地址：</div>
<el-input v-model="editData.inspectAddress" size="small" />
</div>
</el-col>
<el-col :span="12">
<div class="grid-item">
<span class="label">联系人：</span>
<el-input
v-model="editData.inspectContract"
placeholder="请输入联系人"
size="small"
class="edit-input">
</el-input>
<div class="form-item">
<div class="label">联系人：</div>
<el-input v-model="editData.inspectContract" size="small" />
</div>
</el-col>
</el-row>
<!-- 第三行 - 3列布局 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-item">
<span class="label">申请录入人：</span>
<span class="value disabled">{{ detailData.createBy }}</span>
<div class="form-item">
<div class="label">申请录入人：</div>
<div class="value disabled">{{ detailData.createBy }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">申请录入时间：</span>
<span class="value disabled">{{ detailData.createDate }}</span>
<div class="form-item">
<div class="label">申请录入时间：</div>
<div class="value disabled">{{ detailData.createDate }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">建议验货日期：</span>
<div class="form-item">
<div class="label">建议验货日期：</div>
<el-date-picker
v-model="editData.needInspectDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
size="small"
class="edit-input"
style="width: 100%">
</el-date-picker>
style="width: 100%"
/>
</div>
</el-col>
</el-row>
<!-- 第四行 - 4列布局 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">排程人：</span>
<span class="value disabled">{{ detailData.scheduledBy || ' ' }}</span>
<div class="form-item">
<div class="label">排程人：</div>
<div class="value disabled">{{ detailData.scheduledBy || ' ' }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">排程时间：</span>
<span class="value disabled">{{ detailData.scheduledDate || ' ' }}</span>
<div class="form-item">
<div class="label">排程时间：</div>
<div class="value disabled">{{ detailData.scheduledDate || ' ' }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">状态：</span>
<span class="value disabled">{{ detailData.status }}</span>
<div class="form-item">
<div class="label">状态：</div>
<div class="value disabled">{{ detailData.status }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">计划验货日期：</span>
<span class="value disabled">{{ detailData.planStartDate || ' ' }}</span>
<div class="form-item">
<div class="label">计划验货日期：</div>
<div class="value disabled">{{ detailData.planStartDate || ' ' }}</div>
</div>
</el-col>
</el-row>
<!-- 第五行 - QC和修改按钮 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">QC：</span>
<span class="value disabled">{{ detailData.qcOperator || ' ' }}</span>
<div class="form-item">
<div class="label">QC：</div>
<div class="value disabled">{{ detailData.qcOperator || ' ' }}</div>
</div>
</el-col>
<el-col :span="18" style="text-align: right;">
<div class="grid-item" style="margin-bottom: 0;">
<el-button
type="primary"
size="default"
@click="handleEdit"
v-if="isDraftStatus"
:disabled="isEditMode">
修改
<el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">
保存
</el-button>
</div>
<el-button size="small" @click="handleCancelEdit">取消</el-button>
</el-col>
</el-row>
<!-- 编辑模式底部按钮 -->
<div class="edit-actions">
<el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">保存</el-button>
<el-button size="small" @click="handleCancelEdit">取消</el-button>
</div>
</div>
<!-- 查看模式 -->
<div v-else>
<!-- 第一行 - 4列布局 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">申请单号：</span>
<span class="value">{{ detailData.requestNo }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">申请日期：</span>
<span class="value">{{ formatDate(detailData.requestDate) }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商编码：</span>
<span class="value">{{ detailData.supplierNo }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商名称：</span>
<span class="value">{{ detailData.supplierName }}</span>
</div>
</el-col>
<el-col :span="6"><div class="form-item"><div class="label">申请单号：</div><div class="value">{{ detailData.requestNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">申请日期：</div><div class="value">{{ formatDate(detailData.requestDate) }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
</el-row>
<!-- 第二行 - 2列布局 -->
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-item">
<span class="label">验货地址：</span>
<span class="value">{{ detailData.inspectAddress || ' ' }}</span>
</div>
</el-col>
<el-col :span="12">
<div class="grid-item">
<span class="label">联系人：</span>
<span class="value">{{ detailData.inspectContract || ' ' }}</span>
</div>
</el-col>
<el-col :span="12"><div class="form-item"><div class="label">验货地址：</div><div class="value">{{ detailData.inspectAddress || ' ' }}</div></div></el-col>
<el-col :span="12"><div class="form-item"><div class="label">联系人：</div><div class="value">{{ detailData.inspectContract || ' ' }}</div></div></el-col>
</el-row>
<!-- 第三行 - 3列布局 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-item">
<span class="label">申请录入人：</span>
<span class="value">{{ detailData.createBy }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">申请录入时间：</span>
<span class="value">{{ detailData.createDate }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">建议验货日期：</span>
<span class="value">{{ formatDate(detailData.needInspectDate) || ' ' }}</span>
</div>
</el-col>
<el-col :span="8"><div class="form-item"><div class="label">申请录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
<el-col :span="8"><div class="form-item"><div class="label">申请录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
<el-col :span="8"><div class="form-item"><div class="label">建议验货日期：</div><div class="value">{{ formatDate(detailData.needInspectDate) }}</div></div></el-col>
</el-row>
<!-- 第四行 - 4列布局 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">排程人：</span>
<span class="value">{{ detailData.scheduledBy || ' ' }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">排程时间：</span>
<span class="value">{{ detailData.scheduledDate || ' ' }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">状态：</span>
<span class="value">{{ detailData.status }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">计划验货日期：</span>
<span class="value">{{ detailData.planStartDate || ' ' }}</span>
</div>
</el-col>
<el-col :span="6"><div class="form-item"><div class="label">排程人：</div><div class="value">{{ detailData.scheduledBy || ' ' }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">排程时间：</div><div class="value">{{ detailData.scheduledDate || ' ' }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">计划验货日期：</div><div class="value">{{ detailData.planStartDate || ' ' }}</div></div></el-col>
</el-row>
<!-- 第五行 - QC和修改按钮 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-item">
<span class="label">QC：</span>
<span class="value">{{ detailData.qcOperator || ' ' }}</span>
</div>
</el-col>
<el-col :span="6"><div class="form-item"><div class="label">QC：</div><div class="value">{{ detailData.qcOperator || ' ' }}</div></div></el-col>
<el-col :span="18" style="text-align: right;">
<div class="grid-item" style="margin-bottom: 0;">
<el-button
type="primary"
size="default"
@click="handleEdit"
v-if="isDraftStatus"
:disabled="isEditMode">
<el-button type="primary" size="default" @click="handleEdit" v-if="isDraftStatus">
修改
</el-button>
</div>
</el-col>
</el-row>
</div>
@ -270,59 +158,30 @@ import { updateInspectionRequest } from '@/api/inspection/inspectionRequestHeade
export default {
name: 'InspectionRequestDetail',
props: {
detailData: {
type: Object,
default: () => ({})
}
},
data() {
return {
isEditMode: false,
saveLoading: false,
editData: {
requestNo: '',
needInspectDate: '',
inspectAddress: '',
inspectContract: ''
}
editData: {},
originalData: {}
}
},
computed: {
// 判断是否为草稿状态
isDraftStatus() {
const status = this.detailData.status || this.detailData.statusDb || ''
return status === 'Draft' || status === 'draft' || status === '草稿'
}
},
watch: {
detailData: {
handler(newVal) {
if (newVal) {
this.editData = {
requestNo: newVal.requestNo,
needInspectDate: newVal.needInspectDate,
inspectAddress: newVal.inspectAddress,
inspectContract: newVal.inspectContract
}
return ['Draft', 'draft', '草稿'].includes(status)
}
},
immediate: true,
deep: true
}
},
methods: {
formatDate(dateStr) {
if (!dateStr) return ''
if (dateStr.length > 10) {
return dateStr.substring(0, 10)
}
return dateStr
return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
},
handleEdit() {
@ -332,47 +191,37 @@ export default {
inspectAddress: this.detailData.inspectAddress,
inspectContract: this.detailData.inspectContract
}
this.originalData = JSON.parse(JSON.stringify(this.editData))
this.isEditMode = true
},
handleCancelEdit() {
this.editData = JSON.parse(JSON.stringify(this.originalData))
this.isEditMode = false
this.editData = {
requestNo: this.detailData.requestNo,
needInspectDate: this.detailData.needInspectDate,
inspectAddress: this.detailData.inspectAddress,
inspectContract: this.detailData.inspectContract
}
},
// 保存修改
async handleSave() {
if (!this.editData.needInspectDate) {
this.$message.warning('请选择建议验货日期')
return
}
const isChanged =
JSON.stringify(this.editData) !== JSON.stringify(this.originalData)
this.saveLoading = true
try {
const submitData = {
requestNo: this.editData.requestNo,
needInspectDate: this.editData.needInspectDate,
inspectAddress: this.editData.inspectAddress,
inspectContract: this.editData.inspectContract
}
await updateInspectionRequest({
...this.editData,
isChanged: isChanged ? 'Y' : 'N'
})
await updateInspectionRequest(submitData)
this.$message.success('修改成功')
// 触发父组件刷新主表数据
this.$emit('update-success') // ← 已经有了，确保这行存在
// 退出编辑模式
this.$emit('update-success')
this.isEditMode = false
} catch (error) {
console.error('保存失败:', error)
this.$message.error(error.message || '修改失败，请稍后重试')
} catch (e) {
this.$message.error(e.message || '修改失败')
} finally {
this.saveLoading = false
}
@ -380,71 +229,35 @@ export default {
}
}
</script>
<style scoped lang="scss">
.detail-container {
padding: 15px 20px;
border: 1px solid #dcdfe6;
<style scoped lang="scss">
.inspection-request-detail {
padding: 10px 15px;
background: #fff;
position: relative;
border: 1px solid #dcdfe6;
}
// 栅格布局样式
.grid-item {
.form-item {
margin-bottom: 15px;
}
.label {
display: block;
color: #606266;
.form-item .label {
font-size: 13px;
padding-bottom: 5px;
line-height: 1;
height: auto;
white-space: nowrap;
color: #606266;
margin-bottom: 6px;
}
.value {
display: block;
min-height: 28px;
line-height: 28px;
.form-item .value {
min-height: 32px;
line-height: 32px;
padding: 0 10px;
border: 1px solid #dcdfe6;
background: #fff;
color: #303133;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value.disabled {
background: #f5f7fa;
color: #c0c4cc;
cursor: not-allowed;
}
.edit-input {
width: 100%;
/deep/ .el-input__inner {
height: 28px;
line-height: 28px;
font-size: 14px;
}
/deep/ .el-date-editor .el-input__inner {
padding-left: 10px;
}
}
border: 1px solid #e4e7ed;
border-radius: 4px;
font-size: 13px;
}
.edit-actions {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #ebeef5;
.form-item .value.disabled {
color: #909399;
}
</style>

11
src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
View File

@ -58,15 +58,9 @@ export default {
},
methods: {
// 根据 isChanged 字段判断是否需要红色背景
tableRowClassName ({ row }) {
return (
row.hasModifiedQty === true ||
row.hasModifiedQty === 'true' ||
row.hasModifiedQty === 'Y' ||
row.hasModifiedQty === 'y' ||
row.hasModifiedQty === 1 ||
row.hasModifiedQty === '1'
) ? 'modified-row' : ''
return row.isChanged === 'Y' ? 'modified-row' : ''
},
// 加载明细列表
loadDetailList () {
@ -97,6 +91,7 @@ export default {
padding: 0;
background: #fff;
}
.el-table .modified-row td {
background-color: #ffe6e6 !important;
color: #f56c6c !important;

18
src/views/modules/inspection/inspectionRequestList.vue
View File

@ -286,8 +286,7 @@
:max="scope.row.waitInspectQty || 999999"
size="mini"
:controls="false"
style="width: 100%; box-sizing: border-box;"
@input="handleInspectQtyChange(scope.row, $event)">
style="width: 100%; box-sizing: border-box;">
</el-input-number>
</template>
</el-table-column>
@ -870,7 +869,6 @@ export default {
this.poList = data.page.list.map(item => ({
...item,
inspectQty: item.waitInspectQty || 0, // 默认值为未验货数量
originalWaitInspectQty: item.waitInspectQty || 0, // 保存原始未验货数量用于比较
shipMethod: item.shipMethod || '',// 运输方式
crd: item.crd ? item.crd.split(' ')[0] : ''
}))
@ -898,10 +896,12 @@ export default {
// 表格行样式（验货数量与原始值不同时标红）
tableRowClassName ({ row }) {
if (row.inspectQty !== row.originalWaitInspectQty) {
return 'modified-row'
}
return ''
const inspectQty = Number(row.inspectQty || 0)
const waitInspectQty = Number(row.waitInspectQty || 0)
return inspectQty !== waitInspectQty
? 'modified-row'
: ''
},
// 保存
handleSaveAdd () {
@ -1432,10 +1432,6 @@ export default {
&:hover > td {
background-color: #fde2e2 !important;
}
td {
color: #f56c6c;
}
}
.po-section {

460
src/views/modules/npcIqc/com_npcIqcDetail.vue
View File

@ -1,179 +1,211 @@
<template>
<div class="detail-container">
<div class="npc-iqc-detail">
<div v-if="Object.keys(detailData).length === 0" class="empty-tip">
请选择一条记录查看详情
</div>
<div v-else>
<!-- 第一行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">IQC检验单号：</span>
<span class="value">{{ detailData.iqcNo }}</span>
</div>
<div class="detail-item">
<span class="label">采购订单号：</span>
<span class="value">{{ detailData.purOrder }}</span>
</div>
<div class="detail-item">
<span class="label">收货日期：</span>
<span class="value">{{ formatDate(detailData.dateReceived) }}</span>
</div>
<div class="detail-item">
<span class="label">物料编码：</span>
<span class="value">{{ detailData.itemCode }}</span>
</div>
</div>
<!-- 第二行 -->
<div class="detail-row">
<div class="detail-item long">
<span class="label">供应商名称：</span>
<span class="value">{{ detailData.supplierName }}</span>
</div>
<div class="detail-item">
<span class="label">供应商编码：</span>
<span class="value">{{ detailData.supplierNo }}</span>
</div>
</div>
<!-- 第三行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">物料名称：</span>
<span class="value">{{ detailData.itemName }}</span>
</div>
<div class="detail-item">
<span class="label">数量：</span>
<span class="value">{{ detailData.quantity }}</span>
</div>
<div class="detail-item">
<span class="label">抽样数量：</span>
<span class="value">{{ detailData.sampleSize }}</span>
</div>
</div>
<!-- 第四行 - 尺寸信息 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">尺寸A：</span>
<span class="value">{{ detailData.dimA }}</span>
</div>
<div class="detail-item">
<span class="label">尺寸B：</span>
<span class="value">{{ detailData.dimB }}</span>
</div>
<div class="detail-item">
<span class="label">尺寸C：</span>
<span class="value">{{ detailData.dimC }}</span>
</div>
<div class="detail-item">
<span class="label">尺寸D：</span>
<span class="value">{{ detailData.dimD }}</span>
</div>
<div class="detail-item">
<span class="label">尺寸E：</span>
<span class="value">{{ detailData.dimE }}</span>
</div>
</div>
<!-- 第五行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">检验结果总计：</span>
<span class="value">{{ detailData.inspectionTotal }}</span>
</div>
<div class="detail-item">
<span class="label">检验员姓名：</span>
<span class="value">{{ detailData.inspectorName }}</span>
</div>
<div class="detail-item">
<span class="label">录入日期：</span>
<span class="value">{{ formatDate(detailData.entryDate) }}</span>
</div>
</div>
<!-- 第六行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">供应商邮箱：</span>
<span class="value">{{ detailData.supplierEmail }}</span>
</div>
<div class="detail-item">
<span class="label">纠正措施请求：</span>
<span class="value">{{ formatCaRequest(detailData.caRequest) }}</span>
</div>
<div class="detail-item">
<span class="label">收集/批次号：</span>
<span class="value">{{ detailData.collectionBatch }}</span>
</div>
</div>
<!-- 第七行 - 问题描述 -->
<div class="detail-row full-width">
<span class="label">问题描述：</span>
<div class="value textarea">{{ detailData.problem }}</div>
</div>
<!-- 第八行 - 备注 -->
<div class="detail-row full-width">
<span class="label">备注：</span>
<div class="value textarea">{{ detailData.comments }}</div>
</div>
<!-- 第九行 - 返工信息 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">返工工时：</span>
<span class="value">{{ detailData.reworkHours }}</span>
</div>
<div class="detail-item">
<span class="label">返工费率：</span>
<span class="value">{{ detailData.reworkRate }}</span>
</div>
<div class="detail-item">
<span class="label">返工总成本：</span>
<span class="value">{{ detailData.reworkTotal }}</span>
</div>
<div class="detail-item">
<span class="label">物料成本：</span>
<span class="value">{{ detailData.materialCost }}</span>
</div>
</div>
<!-- 第十行 - 其他信息 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">Created By：</span>
<span class="value">{{ detailData.createdBy }}</span>
</div>
<!-- <div class="detail-item">-->
<!-- <span class="label">Update By：</span>-->
<!-- <span class="value">{{ detailData.updateBy }}</span>-->
<!-- </div>-->
<!-- <div class="detail-item">-->
<!-- <span class="label">Update Date：</span>-->
<!-- <span class="value">{{ formatDate(detailData.updateDate) }}</span>-->
<!-- </div>-->
</div>
<!-- 第一行：IQC检验单号、采购订单号、收货日期、物料编码 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">IQC检验单号：</div>
<div class="value">{{ detailData.iqcNo }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">采购订单号：</div>
<div class="value">{{ detailData.purOrder }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">收货日期：</div>
<div class="value">{{ formatDate(detailData.dateReceived) }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">物料编码：</div>
<div class="value">{{ detailData.itemCode }}</div>
</div>
</el-col>
</el-row>
<!-- 第二行：供应商名称、供应商编码 -->
<el-row :gutter="20">
<el-col :span="12">
<div class="form-item">
<div class="label">供应商名称：</div>
<div class="value">{{ detailData.supplierName }}</div>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<div class="label">供应商编码：</div>
<div class="value">{{ detailData.supplierNo }}</div>
</div>
</el-col>
</el-row>
<!-- 第三行：物料名称、数量、抽样数量 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="form-item">
<div class="label">物料名称：</div>
<div class="value">{{ detailData.itemName }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">数量：</div>
<div class="value">{{ detailData.quantity }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">抽样数量：</div>
<div class="value">{{ detailData.sampleSize }}</div>
</div>
</el-col>
</el-row>
<!-- 第四行：尺寸A-E -->
<el-row :gutter="20">
<el-col :span="4">
<div class="form-item">
<div class="label">尺寸A：</div>
<div class="value">{{ detailData.dimA }}</div>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">尺寸B：</div>
<div class="value">{{ detailData.dimB }}</div>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">尺寸C：</div>
<div class="value">{{ detailData.dimC }}</div>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">尺寸D：</div>
<div class="value">{{ detailData.dimD }}</div>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">尺寸E：</div>
<div class="value">{{ detailData.dimE }}</div>
</div>
</el-col>
</el-row>
<!-- 第五行：检验结果总计、检验员姓名、录入日期 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="form-item">
<div class="label">检验结果总计：</div>
<div class="value">{{ detailData.inspectionTotal }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">检验员姓名：</div>
<div class="value">{{ detailData.inspectorName }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">录入日期：</div>
<div class="value">{{ formatDate(detailData.entryDate) }}</div>
</div>
</el-col>
</el-row>
<!-- 第六行：供应商邮箱、纠正措施请求、收集/批次号 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="form-item">
<div class="label">供应商邮箱：</div>
<div class="value">{{ detailData.supplierEmail }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">纠正措施请求：</div>
<div class="value">{{ formatCaRequest(detailData.caRequest) }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">收集/批次号：</div>
<div class="value">{{ detailData.collectionBatch }}</div>
</div>
</el-col>
</el-row>
<!-- 第七行：问题描述（全宽） -->
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">问题描述：</div>
<div class="value textarea-content">{{ detailData.problem }}</div>
</div>
</el-col>
</el-row>
<!-- 第八行：备注（全宽） -->
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">备注：</div>
<div class="value textarea-content">{{ detailData.comments }}</div>
</div>
</el-col>
</el-row>
<!-- 第九行：返工信息 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">返工工时：</div>
<div class="value">{{ detailData.reworkHours }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">返工费率：</div>
<div class="value">{{ detailData.reworkRate }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">返工总成本：</div>
<div class="value">{{ detailData.reworkTotal }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">物料成本：</div>
<div class="value">{{ detailData.materialCost }}</div>
</div>
</el-col>
</el-row>
<!-- 第十行：Created By、Update By、Update Date（可选） -->
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">Created By：</div>
<div class="value">{{ detailData.createdBy }}</div>
</div>
</el-col>
<!-- 如需显示 Update By / Update Date，取消注释并调整列宽 -->
</el-row>
</div>
</div>
</template>
@ -195,15 +227,6 @@ export default {
}
return dateStr
},
getStatusText (status) {
const statusMap = {
'Confirmed': '已确认',
'Analyzed': '已分析',
'Closed': '已关闭',
'Cancelled': '已取消'
}
return statusMap[status] || status
},
formatCaRequest (caRequest) {
if (caRequest === true || caRequest === 'true' || caRequest === 1 || caRequest === '1') {
return '是'
@ -215,13 +238,10 @@ export default {
</script>
<style scoped lang="scss">
.detail-container {
padding: 10px;
border: 1px solid #e4e7ed;
.npc-iqc-detail {
padding: 10px 15px;
background: #fff;
min-height: 300px;
max-height: 100%;
overflow-y: auto;
border: 1px solid #dcdfe6;
}
.empty-tip {
@ -231,62 +251,34 @@ export default {
padding: 80px 0;
}
.detail-row {
display: flex;
align-items: center;
margin-bottom: 8px;
flex-wrap: wrap;
.form-item {
margin-bottom: 15px;
}
.detail-row.full-width {
flex-direction: column;
align-items: flex-start;
.label {
margin-bottom: 3px;
}
}
.detail-item {
display: flex;
align-items: center;
min-width: 260px;
margin-right: 15px;
margin-bottom: 3px;
}
.detail-item.long {
min-width: 380px;
flex: 1;
}
.label {
color: #606266;
font-size: 12px;
.form-item .label {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
color: #606266;
margin-bottom: 6px;
line-height: 1.2;
}
.value {
flex: 1;
min-height: 24px;
line-height: 24px;
padding: 0 6px;
border: 1px solid #dcdfe6;
background: #fff;
.form-item .value {
min-height: 32px;
line-height: 32px;
padding: 0 10px;
background-color: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 4px;
color: #303133;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
word-break: break-all;
white-space: pre-wrap;
}
.value.textarea {
width: 100%;
min-height: 40px;
.form-item.textarea-item .value.textarea-content {
min-height: 60px;
line-height: 1.5;
padding: 6px;
white-space: pre-wrap;
word-break: break-all;
padding: 8px 10px;
}
</style>

814
src/views/modules/quality/com_qualityIssueDetail.vue
View File

@ -1,231 +1,425 @@
<template>
<div class="detail-container">
<!-- 第一行：反馈单号、问题日期、供应商编码、供应商名称、供应商负责人 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">反馈单号：</span>
<span class="value">{{ detailData.issueNo }}</span>
</div>
<div class="detail-item">
<span class="label">问题日期：</span>
<span class="value">{{ formatDate(detailData.issueDate) }}</span>
</div>
<div class="detail-item">
<span class="label">供应商编码：</span>
<span class="value">{{ detailData.supplierNo }}</span>
</div>
<div class="detail-item long">
<span class="label">供应商名称：</span>
<span class="value">{{ detailData.supplierName }}</span>
</div>
<div class="detail-item">
<span class="label">供应商负责人：</span>
<span class="value">{{ detailData.supplierResponsible }}</span>
</div>
</div>
<!-- 第二行：Plant、Claim No、Product Category、Part No -->
<div class="detail-row">
<div class="detail-item">
<span class="label">Plant：</span>
<span class="value">{{ detailData.plant }}</span>
</div>
<div class="detail-item">
<span class="label">Claim No：</span>
<span class="value">{{ detailData.claimNo }}</span>
</div>
<div class="detail-item">
<span class="label">Product Category：</span>
<span class="value">{{ detailData.productCategory }}</span>
</div>
<div class="detail-item">
<span class="label">Part No：</span>
<span class="value">{{ detailData.partNo }}</span>
</div>
</div>
<!-- 新增行：PO No、批次数量、拒收批次数量、投诉接收日期、样品接收日期 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">批次数量：</span>
<span class="value">{{ detailData.batchQty }}</span>
</div>
<div class="detail-item">
<span class="label">拒收批次数量：</span>
<span class="value">{{ detailData.rejectBatchQty }}</span>
</div>
<div class="detail-item">
<span class="label">投诉接收日期：</span>
<span class="value">{{ formatDate(detailData.receiveComplaintDate) }}</span>
</div>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="label">样品接收日期：</span>
<span class="value">{{ formatDate(detailData.receiveSampleDate) }}</span>
</div>
<div class="detail-item long">
<span class="label">问题简述：</span>
<span class="value">{{ detailData.issueSummary }}</span>
</div>
</div>
<!-- 第四行：问题详细描述 -->
<div class="detail-row full-width">
<span class="label">问题详细描述：</span>
<div class="value textarea">{{ detailData.issueDescription }}</div>
</div>
<!-- 第五行：Level、Mode 1、Mode 2、Mode 3、Inspector -->
<div class="detail-row">
<div class="detail-item">
<span class="label">Level：</span>
<span class="value">{{ detailData.levelNo }}</span>
</div>
<div class="detail-item">
<span class="label">Mode 1：</span>
<span class="value">{{ detailData.mode1 }}</span>
</div>
<div class="detail-item">
<span class="label">Mode 2：</span>
<span class="value">{{ detailData.mode2 }}</span>
</div>
<div class="detail-item">
<span class="label">Mode 3：</span>
<span class="value">{{ detailData.mode3 }}</span>
</div>
<div class="detail-item">
<span class="label">Inspector：</span>
<span class="value">{{ detailData.inspector }}</span>
</div>
</div>
<!-- 第六行：录入人（回复）、录入时间（回复）、要求回复日期、状态 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">录入人：</span>
<span class="value">{{ detailData.createBy }}</span>
</div>
<div class="detail-item">
<span class="label">录入时间：</span>
<span class="value">{{ detailData.createBy }}</span>
</div>
<div class="detail-item">
<span class="label">要求回复日期：</span>
<span class="value">{{ formatDate(detailData.requireReplyDate) }}</span>
</div>
<div class="detail-item">
<span class="label">状态：</span>
<span class="value">{{ detailData.status }}</span>
</div>
</div>
<!-- 第七行：Why Escape -->
<div class="detail-row">
<div class="detail-item">
<span class="label">Why Escape：</span>
<span class="value">{{ detailData.whyEscape }}</span>
</div>
</div>
<!-- 第八行：原因分析 -->
<div class="detail-row full-width">
<span class="label">原因分析：</span>
<div class="value textarea">{{ detailData.analysis }}</div>
</div>
<!-- 第九行：后续措施 -->
<div class="detail-row full-width">
<span class="label">后续措施：</span>
<div class="value textarea">{{ detailData.correctiveAction }}</div>
</div>
<!-- 第十行：回复人、回复时间、录入人（回复）、录入时间（回复） -->
<div class="detail-row">
<div class="detail-item">
<span class="label">回复人：</span>
<span class="value">{{ detailData.replyBy }}</span>
</div>
<div class="detail-item">
<span class="label">回复时间：</span>
<span class="value">{{ detailData.replyTime }}</span>
</div>
<div class="detail-item">
<span class="label">录入人：</span>
<span class="value">{{ detailData.entryBy }}</span>
</div>
<div class="detail-item">
<span class="label">录入时间：</span>
<span class="value">{{ detailData.entryDate }}</span>
</div>
</div>
<!-- 第十一行：索赔信息 -->
<div class="quality-issue-detail">
<!-- 编辑模式 -->
<div v-if="isEditMode" class="edit-form">
<!-- 基础信息区 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">反馈单号：</div>
<div class="value disabled">{{ detailData.issueNo }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">问题日期：</div>
<el-date-picker
v-model="editData.issueDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
size="small"
class="edit-input"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">供应商编码：</div>
<div class="value disabled">{{ detailData.supplierNo }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">供应商名称：</div>
<div class="value disabled">{{ detailData.supplierName }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">供应商负责人：</div>
<el-input v-model="editData.supplierResponsible" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">Plant：</div>
<el-input v-model="editData.plant" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">Claim No：</div>
<el-input v-model="editData.claimNo" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">Product Category：</div>
<el-input v-model="editData.productCategory" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">Part No：</div>
<el-input v-model="editData.partNo" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">批次数量：</div>
<el-input-number v-model="editData.batchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">拒收批次数量：</div>
<el-input-number v-model="editData.rejectBatchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">投诉接收日期：</div>
<el-date-picker
v-model="editData.receiveComplaintDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">样品接收日期：</div>
<el-date-picker
v-model="editData.receiveSampleDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
<el-col :span="18">
<div class="form-item">
<div class="label">问题简述：</div>
<el-input v-model="editData.issueSummary" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">问题详细描述：</div>
<el-input type="textarea" v-model="editData.issueDescription" :rows="3" placeholder="请输入"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="form-item">
<div class="label">Level：</div>
<el-input v-model="editData.levelNo" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">Mode 1：</div>
<el-input v-model="editData.mode1" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">Mode 2：</div>
<el-input v-model="editData.mode2" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">Mode 3：</div>
<el-input v-model="editData.mode3" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="5">
<div class="form-item">
<div class="label">Inspector：</div>
<el-input v-model="editData.inspector" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">录入人：</div>
<div class="value disabled">{{ detailData.createBy }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">录入时间：</div>
<div class="value disabled">{{ detailData.createDate }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">要求回复日期：</div>
<el-date-picker
v-model="editData.requireReplyDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">状态：</div>
<div class="value disabled">{{ detailData.status }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">Why Escape：</div>
<el-input type="textarea" v-model="editData.whyEscape" :rows="2" placeholder="请输入"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">原因分析：</div>
<el-input type="textarea" v-model="editData.analysis" :rows="3" placeholder="请输入"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item textarea-item">
<div class="label">后续措施：</div>
<el-input type="textarea" v-model="editData.correctiveAction" :rows="3" placeholder="请输入"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">回复人：</div>
<el-input v-model="editData.replyBy" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">回复时间：</div>
<el-date-picker
v-model="editData.replyTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">录入人(回复)：</div>
<el-input v-model="editData.entryBy" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">录入时间(回复)：</div>
<el-date-picker
v-model="editData.entryDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
</el-row>
<!-- 索赔信息区块 -->
<div class="claim-section">
<div class="claim-title">索赔信息</div>
<div class="detail-row">
<div class="detail-item">
<span class="label">是否被索赔：</span>
<span class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</span>
</div>
<div class="detail-item">
<span class="label">被索赔金额：</span>
<span class="value">{{ detailData.claimAmount }}</span>
</div>
<div class="detail-item long">
<span class="label">处置备注：</span>
<span class="value">{{ detailData.disposalRemark }}</span>
</div>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="label">录入人：</span>
<span class="value">{{ detailData.entryBy }}</span>
</div>
<div class="detail-item">
<span class="label">录入时间：</span>
<span class="value">{{ detailData.entryDate }}</span>
</div>
</div>
</div>
<!-- 第十二行：关闭人、关闭时间 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">关闭人：</span>
<span class="value">{{ detailData.closeBy }}</span>
</div>
<div class="detail-item">
<span class="label">关闭时间：</span>
<span class="value">{{ detailData.closeTime }}</span>
</div>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">是否被索赔：</div>
<el-select v-model="editData.claimFlag" placeholder="请选择" size="small" style="width: 100%">
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">被索赔金额：</div>
<el-input-number v-model="editData.claimAmount" :min="0" :precision="2" size="small" controls-position="right" style="width: 100%"></el-input-number>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<div class="label">处置备注：</div>
<el-input v-model="editData.disposalRemark" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">录入人(索赔)：</div>
<el-input v-model="editData.entryByClaim" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">录入时间(索赔)：</div>
<el-date-picker
v-model="editData.entryDateClaim"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
</el-row>
</div>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">关闭人：</div>
<el-input v-model="editData.closeBy" placeholder="请输入" size="small"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">关闭时间：</div>
<el-date-picker
v-model="editData.closeTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
size="small"
style="width: 100%">
</el-date-picker>
</div>
</el-col>
<el-col :span="12" style="text-align: right;">
<div class="form-item" style="margin-bottom: 0;">
<el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">保存</el-button>
<el-button size="small" @click="handleCancelEdit">取消</el-button>
</div>
</el-col>
</el-row>
</div>
<!-- 查看模式 -->
<div v-else>
<!-- 保持原有的只读展示布局，但使用相同的栅格结构更整洁 -->
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">反馈单号：</div><div class="value">{{ detailData.issueNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">问题日期：</div><div class="value">{{ formatDate(detailData.issueDate) }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">供应商负责人：</div><div class="value">{{ detailData.supplierResponsible }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">Plant：</div><div class="value">{{ detailData.plant }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">Claim No：</div><div class="value">{{ detailData.claimNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">Product Category：</div><div class="value">{{ detailData.productCategory }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">Part No：</div><div class="value">{{ detailData.partNo }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">批次数量：</div><div class="value">{{ detailData.batchQty }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">拒收批次数量：</div><div class="value">{{ detailData.rejectBatchQty }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">投诉接收日期：</div><div class="value">{{ formatDate(detailData.receiveComplaintDate) }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">样品接收日期：</div><div class="value">{{ formatDate(detailData.receiveSampleDate) }}</div></div></el-col>
<el-col :span="18"><div class="form-item"><div class="label">问题简述：</div><div class="value">{{ detailData.issueSummary }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24"><div class="form-item textarea-item"><div class="label">问题详细描述：</div><div class="value textarea-content">{{ detailData.issueDescription }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="form-item"><div class="label">Level：</div><div class="value">{{ detailData.levelNo }}</div></div></el-col>
<el-col :span="5"><div class="form-item"><div class="label">Mode 1：</div><div class="value">{{ detailData.mode1 }}</div></div></el-col>
<el-col :span="5"><div class="form-item"><div class="label">Mode 2：</div><div class="value">{{ detailData.mode2 }}</div></div></el-col>
<el-col :span="5"><div class="form-item"><div class="label">Mode 3：</div><div class="value">{{ detailData.mode3 }}</div></div></el-col>
<el-col :span="5"><div class="form-item"><div class="label">Inspector：</div><div class="value">{{ detailData.inspector }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">要求回复日期：</div><div class="value">{{ formatDate(detailData.requireReplyDate) }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24"><div class="form-item textarea-item"><div class="label">Why Escape：</div><div class="value textarea-content">{{ detailData.whyEscape }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24"><div class="form-item textarea-item"><div class="label">原因分析：</div><div class="value textarea-content">{{ detailData.analysis }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24"><div class="form-item textarea-item"><div class="label">后续措施：</div><div class="value textarea-content">{{ detailData.correctiveAction }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">回复人：</div><div class="value">{{ detailData.replyBy }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">回复时间：</div><div class="value">{{ detailData.replyTime }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">录入人(回复)：</div><div class="value">{{ detailData.entryBy }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">录入时间(回复)：</div><div class="value">{{ detailData.entryDate }}</div></div></el-col>
</el-row>
<div class="claim-section">
<div class="claim-title">索赔信息</div>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">是否被索赔：</div><div class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">被索赔金额：</div><div class="value">{{ detailData.claimAmount }}</div></div></el-col>
<el-col :span="12"><div class="form-item"><div class="label">处置备注：</div><div class="value">{{ detailData.disposalRemark }}</div></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">录入人(索赔)：</div><div class="value">{{ detailData.entryByClaim }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">录入时间(索赔)：</div><div class="value">{{ detailData.entryDateClaim }}</div></div></el-col>
</el-row>
</div>
<el-row :gutter="20">
<el-col :span="6"><div class="form-item"><div class="label">关闭人：</div><div class="value">{{ detailData.closeBy }}</div></div></el-col>
<el-col :span="6"><div class="form-item"><div class="label">关闭时间：</div><div class="value">{{ detailData.closeTime }}</div></div></el-col>
<el-col :span="12" style="text-align: right;">
<div class="form-item" style="margin-bottom: 0;">
<el-button type="primary" size="default" @click="handleEdit" v-if="canEdit" :disabled="isEditMode">修改</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
@ -233,118 +427,160 @@
<script>
export default {
name: 'QualityIssueDetail',
props: {
detailData: {
type: Object,
default: () => ({})
},
canEdit: {
type: Boolean,
default: true
}
},
data() {
return {
isEditMode: false,
editData: {},
saveLoading: false
}
},
watch: {
detailData: {
handler(newVal) {
if (newVal && Object.keys(newVal).length) {
this.initEditData()
}
},
immediate: true,
deep: true
}
},
methods: {
// 格式化日期，只显示年月日
formatDate(dateStr) {
if (!dateStr) return ''
// 如果包含时分秒，截取前10位
if (dateStr.length > 10) {
return dateStr.substring(0, 10)
return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
},
initEditData() {
this.editData = {
issueDate: this.detailData.issueDate,
supplierResponsible: this.detailData.supplierResponsible,
plant: this.detailData.plant,
claimNo: this.detailData.claimNo,
productCategory: this.detailData.productCategory,
partNo: this.detailData.partNo,
batchQty: this.detailData.batchQty,
rejectBatchQty: this.detailData.rejectBatchQty,
receiveComplaintDate: this.detailData.receiveComplaintDate,
receiveSampleDate: this.detailData.receiveSampleDate,
issueSummary: this.detailData.issueSummary,
issueDescription: this.detailData.issueDescription,
levelNo: this.detailData.levelNo,
mode1: this.detailData.mode1,
mode2: this.detailData.mode2,
mode3: this.detailData.mode3,
inspector: this.detailData.inspector,
requireReplyDate: this.detailData.requireReplyDate,
whyEscape: this.detailData.whyEscape,
analysis: this.detailData.analysis,
correctiveAction: this.detailData.correctiveAction,
replyBy: this.detailData.replyBy,
replyTime: this.detailData.replyTime,
entryBy: this.detailData.entryBy,
entryDate: this.detailData.entryDate,
claimFlag: this.detailData.claimFlag,
claimAmount: this.detailData.claimAmount,
disposalRemark: this.detailData.disposalRemark,
entryByClaim: this.detailData.entryByClaim,
entryDateClaim: this.detailData.entryDateClaim,
closeBy: this.detailData.closeBy,
closeTime: this.detailData.closeTime
}
},
handleEdit() {
this.isEditMode = true
this.initEditData()
},
handleCancelEdit() {
this.isEditMode = false
this.initEditData()
},
handleSave() {
this.saveLoading = true
// 触发父组件的保存事件，传递修改后的数据
this.$emit('save', this.editData, (success) => {
this.saveLoading = false
if (success !== false) {
this.isEditMode = false
}
return dateStr
})
}
}
}
</script>
<style scoped lang="scss">
.detail-container {
.quality-issue-detail {
padding: 10px 15px;
border: 1px solid #dcdfe6;
background: #fff;
border: 1px solid #dcdfe6;
}
.detail-row {
.form-item {
margin-bottom: 15px;
display: flex;
align-items: center;
margin-bottom: 12px;
}
.detail-row.full-width {
flex-direction: column;
align-items: flex-start;
.label {
margin-bottom: 8px;
}
}
.detail-item {
display: flex;
align-items: center;
width: 280px;
margin-right: 20px;
}
.detail-item.long {
width: 400px;
}
.label {
color: #606266;
.form-item .label {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
color: #606266;
margin-bottom: 6px;
line-height: 1.2;
}
.value {
flex: 1;
min-height: 26px;
line-height: 26px;
padding: 0 8px;
border: 1px solid #dcdfe6;
background: #fff;
.form-item .value {
min-height: 32px;
line-height: 32px;
padding: 0 10px;
background-color: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 4px;
color: #303133;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
white-space: pre-wrap;
}
.value.textarea {
width: 100%;
min-height: 50px;
line-height: 1.5;
padding: 8px;
white-space: pre-wrap;
word-break: break-all;
.form-item .value.disabled {
background-color: #f5f7fa;
color: #909399;
}
.detail-item.note {
flex: 1;
margin-right: 0;
.form-item.textarea-item .value.textarea-content {
min-height: 60px;
line-height: 1.5;
padding: 8px 10px;
}
.detail-item.note .label {
color: #909399;
font-weight: normal;
font-size: 12px;
.edit-input {
width: 100%;
}
/* 索赔信息区域样式 */
.claim-section {
border: 1px solid #dcdfe6;
padding: 10px 12px;
margin-bottom: 12px;
background: #fff;
margin: 10px 0;
background: #fafafa;
}
.claim-title {
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: #303133;
margin-bottom: 10px;
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #409eff;
}
</style>
Write Preview
Loading…
Cancel
Save