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

feat(inspection): 添加验货申请详情页面和相关组件 

- 创建了验货申请详情组件，支持查看和编辑模式切换
- 实现了基本信息、验货明细、PO明细等多标签页展示功能
- 添加了新增验货申请弹窗，包含供应商选择和PO批量选择功能
- 集成了Excel导入导出功能和文件上传预览表格
- 实现了验货申请的状态管理和操作按钮权限控制
- 创建了配套的子组件包括PO明细标签页和相关表格展示组件
master
qiankanghui 6 days ago
parent
6b946dd7e1
commit
532752ccc9
4 changed files with 333 additions and 326 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 558
      src/views/modules/inspection/com_inspectionRequestDetail.vue
  2. 22
      src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
  3. 71
      src/views/modules/inspection/inspectionRequestList.vue
  4. 4
      src/views/modules/order/poOrder.vue

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

@ -1,121 +1,141 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 左上角按钮区域 -->
<div class="header-buttons">
<el-button
type="primary"
size="default"
@click="handleEdit"
v-if="isDraftStatus"
:disabled="isEditMode">
修改
</el-button>
</div>
<!-- 修改模式下的编辑表单 --> <!-- 修改模式下的编辑表单 -->
<div v-if="isEditMode" class="edit-form"> <div v-if="isEditMode" class="edit-form">
<!-- 第一行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">申请单号：</span>
<span class="value disabled">{{ detailData.requestNo }}</span>
</div>
<div class="detail-item">
<span class="label">申请日期：</span>
<span class="value disabled">{{ formatDate(detailData.requestDate) }}</span>
</div>
<div class="detail-item">
<span class="label">供应商编码：</span>
<span class="value disabled">{{ detailData.supplierNo }}</span>
</div>
<div class="detail-item long">
<span class="label">供应商名称：</span>
<span class="value disabled">{{ detailData.supplierName }}</span>
</div>
</div>
<!-- 第二行 -->
<div class="detail-row">
<div class="detail-item address">
<span class="label">验货地址：</span>
<el-input
v-model="editData.inspectAddress"
placeholder="请输入验货地址"
size="small"
class="edit-input">
</el-input>
</div>
<div class="detail-item long">
<span class="label">联系人：</span>
<el-input
v-model="editData.inspectContract"
placeholder="请输入联系人"
size="small"
class="edit-input">
</el-input>
</div>
</div>
<!-- 第三行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">申请录入人：</span>
<span class="value disabled">{{ detailData.createBy }}</span>
</div>
<div class="detail-item">
<span class="label">申请录入时间：</span>
<span class="value disabled">{{ detailData.createDate }}</span>
</div>
<div class="detail-item">
<span class="label">建议验货日期：</span>
<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>
</div>
</div>
<!-- 第四行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">排程人：</span>
<span class="value disabled">{{ detailData.scheduledBy || ' ' }}</span>
</div>
<div class="detail-item">
<span class="label">排程时间：</span>
<span class="value disabled">{{ detailData.scheduledDate || ' ' }}</span>
</div>
<div class="detail-item">
<span class="label">状态：</span>
<span class="value disabled">{{ detailData.status }}</span>
</div>
<div class="detail-item">
<span class="label">计划验货日期：</span>
<span class="value disabled">{{ detailData.planStartDate || ' ' }}</span>
</div>
</div>
<!-- 第五行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">QC：</span>
<span class="value disabled">{{ detailData.qcOperator || ' ' }}</span>
</div>
</div>
<!-- 第一行 - 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>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">申请日期：</span>
<span class="value disabled">{{ formatDate(detailData.requestDate) }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商编码：</span>
<span class="value disabled">{{ detailData.supplierNo }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">供应商名称：</span>
<span class="value disabled">{{ detailData.supplierName }}</span>
</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>
</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>
</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>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">申请录入时间：</span>
<span class="value disabled">{{ detailData.createDate }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="grid-item">
<span class="label">建议验货日期：</span>
<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>
</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>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">排程时间：</span>
<span class="value disabled">{{ detailData.scheduledDate || ' ' }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">状态：</span>
<span class="value disabled">{{ detailData.status }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-item">
<span class="label">计划验货日期：</span>
<span class="value disabled">{{ detailData.planStartDate || ' ' }}</span>
</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>
</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>
</div>
</el-col>
</el-row>
<!-- 编辑模式底部按钮 --> <!-- 编辑模式底部按钮 -->
<div class="edit-actions"> <div class="edit-actions">
@ -126,90 +146,121 @@
<!-- 查看模式 --> <!-- 查看模式 -->
<div v-else> <div v-else>
<!-- 第一行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">申请单号：</span>
<span class="value">{{ detailData.requestNo }}</span>
</div>
<div class="detail-item">
<span class="label">申请日期：</span>
<span class="value">{{ formatDate(detailData.requestDate) }}</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>
<!-- 第二行 -->
<div class="detail-row">
<div class="detail-item address">
<span class="label">验货地址：</span>
<span class="value">{{ detailData.inspectAddress || ' ' }}</span>
</div>
<div class="detail-item long">
<span class="label">联系人：</span>
<span class="value">{{ detailData.inspectContract || ' ' }}</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.createDate }}</span>
</div>
<div class="detail-item">
<span class="label">建议验货日期：</span>
<span class="value">{{ formatDate(detailData.needInspectDate) || ' ' }}</span>
</div>
</div>
<!-- 第四行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">排程人：</span>
<span class="value">{{ detailData.scheduledBy || ' ' }}</span>
</div>
<div class="detail-item">
<span class="label">排程时间：</span>
<span class="value">{{ detailData.scheduledDate || ' ' }}</span>
</div>
<div class="detail-item">
<span class="label">状态：</span>
<span class="value">{{ detailData.status }}</span>
</div>
<div class="detail-item">
<span class="label">计划验货日期：</span>
<span class="value">{{ detailData.planStartDate || ' ' }}</span>
</div>
</div>
<!-- 第五行 -->
<div class="detail-row">
<div class="detail-item">
<span class="label">QC：</span>
<span class="value">{{ detailData.qcOperator || ' ' }}</span>
</div>
</div>
<!-- 第一行 - 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-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-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-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-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="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>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>
@ -332,83 +383,58 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.detail-container { .detail-container {
padding: 10px 20px; // 从15px改为10px
padding: 15px 20px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
background: #fff; background: #fff;
position: relative; position: relative;
} }
// 左上角按钮区域
.header-buttons {
position: absolute;
top: 10px; // 从15px改为10px，与padding保持一致
right: 20px;
display: flex;
gap: 10px;
}
.detail-row {
display: flex;
align-items: center;
margin-bottom: 8px; // 从18px改为8px
flex-wrap: wrap;
}
.detail-item {
display: flex;
align-items: center;
width: 300px;
margin-right: 30px;
margin-bottom: 6px; // 从10px改为6px
}
.detail-item.long {
width: 450px;
}
.detail-item.address {
width: 600px;
}
.label {
color: #606266;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
min-width: 85px;
}
.value {
flex: 1;
min-height: 28px;
line-height: 28px;
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 {
flex: 1;
// 栅格布局样式
.grid-item {
margin-bottom: 15px;
.label {
display: block;
color: #606266;
font-size: 13px;
padding-bottom: 5px;
line-height: 1;
height: auto;
white-space: nowrap;
}
/deep/ .el-input__inner {
height: 28px;
.value {
display: block;
min-height: 28px;
line-height: 28px; line-height: 28px;
padding: 0 10px;
border: 1px solid #dcdfe6;
background: #fff;
color: #303133;
font-size: 14px; font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/deep/ .el-date-editor .el-input__inner {
padding-left: 10px;
.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;
}
} }
} }
@ -416,8 +442,8 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 15px; gap: 15px;
margin-top: 15px; // 从20px改为15px
padding-top: 12px; // 从15px改为12px
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #ebeef5; border-top: 1px solid #ebeef5;
} }

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

@ -1,7 +1,7 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 明细表格 --> <!-- 明细表格 -->
<el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight">
<el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight" :row-class-name="tableRowClassName">
<el-table-column label="序号" header-align="center" align="center" width="80"> <el-table-column label="序号" header-align="center" align="center" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
@ -58,6 +58,16 @@ export default {
}, },
methods: { methods: {
tableRowClassName ({ row }) {
return (
row.hasModifiedQty === true ||
row.hasModifiedQty === 'true' ||
row.hasModifiedQty === 'Y' ||
row.hasModifiedQty === 'y' ||
row.hasModifiedQty === 1 ||
row.hasModifiedQty === '1'
) ? 'modified-row' : ''
},
// 加载明细列表 // 加载明细列表
loadDetailList () { loadDetailList () {
if (!this.detailData.requestNo || !this.detailData.site) { if (!this.detailData.requestNo || !this.detailData.site) {
@ -82,9 +92,17 @@ export default {
} }
</script> </script>
<style scoped lang="scss">
<style lang="scss">
.detail-container { .detail-container {
padding: 0; padding: 0;
background: #fff; background: #fff;
} }
.el-table .modified-row td {
background-color: #ffe6e6 !important;
color: #f56c6c !important;
}
.el-table .modified-row:hover td {
background-color: #ffd6d6 !important;
}
</style> </style>

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

@ -76,7 +76,6 @@
highlight-current-row highlight-current-row
@row-click="changeData" @row-click="changeData"
v-loading="dataListLoading" v-loading="dataListLoading"
:row-class-name="mainTableRowClassName"
style="margin-top: 0px; width: 100%;"> style="margin-top: 0px; width: 100%;">
<el-table-column <el-table-column
v-for="(item,index) in columnArray1" :key="index" v-for="(item,index) in columnArray1" :key="index"
@ -240,6 +239,7 @@
border border
size="small" size="small"
table-layout="fixed" table-layout="fixed"
height="400px"
style="width: 100%; margin-top: 10px;" style="width: 100%; margin-top: 10px;"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
:row-class-name="tableRowClassName"> :row-class-name="tableRowClassName">
@ -344,6 +344,7 @@
<script> <script>
import { searchInspectionRequestHeaderList, queryPoPage, saveInspectionRequest, deleteInspectionRequest, confirmInspectionRequest, downloadTemplate, previewUpload, batchSave } from '@/api/inspection/inspectionRequestHeader.js' import { searchInspectionRequestHeaderList, queryPoPage, saveInspectionRequest, deleteInspectionRequest, confirmInspectionRequest, downloadTemplate, previewUpload, batchSave } from '@/api/inspection/inspectionRequestHeader.js'
import { searchSrmSupplierList } from '@/api/srm/srmSupplier.js'
import Chooselist from '@/views/modules/common/Chooselist_eam' import Chooselist from '@/views/modules/common/Chooselist_eam'
import ComInspectionRequestDetail from './com_inspectionRequestDetail.vue' import ComInspectionRequestDetail from './com_inspectionRequestDetail.vue'
import ComInspectionRequestDetailTab from './com_inspectionRequestDetailTab.vue' import ComInspectionRequestDetailTab from './com_inspectionRequestDetailTab.vue'
@ -674,6 +675,21 @@ export default {
this.$set(this.addFormData, 'supplierNo', val.supplier_no || '') this.$set(this.addFormData, 'supplierNo', val.supplier_no || '')
this.$set(this.addFormData, 'supplierName', val.supplier_name || '') this.$set(this.addFormData, 'supplierName', val.supplier_name || '')
this.loadPoList() this.loadPoList()
// 查询供应商详情获取联系人和地址
if (val.supplier_no) {
// 使用 searchSrmSupplierList 接口查询供应商（精确匹配）
searchSrmSupplierList({
page: 1,
limit: 1,
supplierNo: val.supplier_no // 根据实际后端字段名调整
}).then(({ data }) => {
if (data.code === 0 && data.page && data.page.list && data.page.list.length > 0) {
const supplier = data.page.list[0];
this.$set(this.addFormData, 'inspectAddress', supplier.Address || supplier.address || '');
this.$set(this.addFormData, 'contact', supplier.Contact || supplier.contact || '');
}
}).catch(() => {});
}
} else { } else {
// 搜索条件：使用下划线命名的字段 // 搜索条件：使用下划线命名的字段
this.searchData.supplierNo = val.supplier_no || '' this.searchData.supplierNo = val.supplier_no || ''
@ -887,32 +903,6 @@ export default {
} }
return '' return ''
}, },
// 主表格行样式（验货申请中有数量修改时标红）
mainTableRowClassName ({ row }) {
// 调试信息：打印每行的 hasModifiedQty 值
console.log('Row:', row.requestNo, 'hasModifiedQty:', row.hasModifiedQty, 'type:', typeof row.hasModifiedQty)
// 如果后端返回 hasModifiedQty 字段，直接使用
// 支持多种类型：布尔值、字符串、数字
if (row.hasModifiedQty === true ||
row.hasModifiedQty === 'true' ||
row.hasModifiedQty === 'Y' ||
row.hasModifiedQty === 'y' ||
row.hasModifiedQty === 1 ||
row.hasModifiedQty === '1') {
console.log('✅ 应用红色背景到:', row.requestNo)
return 'modified-request-row'
}
// 如果字段不存在，输出提示
if (row.hasModifiedQty === undefined || row.hasModifiedQty === null) {
console.warn('⚠️ 警告: 行', row.requestNo, '缺少 hasModifiedQty 字段，后端可能未返回该字段')
}
return ''
},
// 保存 // 保存
handleSaveAdd () { handleSaveAdd () {
console.log('开始保存，当前选择的PO列表：', this.selectedPoList) console.log('开始保存，当前选择的PO列表：', this.selectedPoList)
@ -1448,24 +1438,6 @@ export default {
} }
} }
/* 强制主表红色背景 */
::v-deep .el-table__body tr.modified-request-row td {
background-color: #ff4d4f !important;
color: #ffffff !important;
}
/* 当前选中行也强制红色 */
::v-deep .el-table__body tr.modified-request-row.current-row td {
background-color: #ff4d4f !important;
color: #ffffff !important;
}
/* hover状态 */
::v-deep .el-table__body tr.modified-request-row:hover td {
background-color: #ff7875 !important;
color: #ffffff !important;
}
.po-section { .po-section {
/deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input,
@ -1489,13 +1461,4 @@ export default {
right: 5px; right: 5px;
} }
} }
</style>
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 -->
<style lang="scss">
.el-table__body tr.modified-request-row > td {
background-color: #ffe6e6 !important;
color: #333333 !important;
}
</style> </style>

4
src/views/modules/order/poOrder.vue
View File

@ -187,7 +187,7 @@
</el-pagination> </el-pagination>
<!-- 导入弹窗 --> <!-- 导入弹窗 -->
<el-dialog title="PO订单数据导入" :visible.sync="uploadDialogVisible" width="800px">
<el-dialog title="PO订单数据导入" :visible.sync="uploadDialogVisible" :height="height" width="800px">
<!-- 选择文件 --> <!-- 选择文件 -->
<div style="margin-bottom:15px;display:flex;align-items:center"> <div style="margin-bottom:15px;display:flex;align-items:center">
<span style="margin-right:10px">请选择文件</span> <span style="margin-right:10px">请选择文件</span>
@ -323,7 +323,7 @@ export default {
sku: '', sku: '',
status: '' status: ''
}, },
height: 200,
height: 400,
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
totalPage: 0, totalPage: 0,

Write Preview
Loading…
Cancel
Save