Browse Source
feat(inspection): 添加验货申请管理功能
feat(inspection): 添加验货申请管理功能
- 新增验货申请列表页面，支持查询、新增、删除等操作 - 实现验货申请详情展示组件，显示基本信息如申请单号、供应商、验货地址等 - 开发验货明细表格组件，展示验货数量、状态、验货结果等信息 - 添加验货关联PO明细组件，显示PO号、产品信息、运输方式等 - 创建验货结果表格组件，展示任务单号、验货结果等数据 - 集成API接口，包括验货申请列表查询、明细获取、结果查询等功能 - 实现新增验货申请弹窗，支持供应商选择、PO批量选择等功能 - 添加日期范围筛选、状态筛选等多种查询条件 - 实现表格分页、排序、多选等交互功能master
qiankanghui
6 days ago
6 changed files with 1693 additions and 0 deletions
-
15src/api/inspection/inspectionRequestHeader.js
-
185src/views/modules/inspection/com_inspectionRequestDetail.vue
-
110src/views/modules/inspection/com_inspectionRequestDetailTab.vue
-
90src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
-
90src/views/modules/inspection/com_inspectionResultTab.vue
-
1203src/views/modules/inspection/inspectionRequestList.vue
@ -0,0 +1,15 @@ |
|||||
|
import { createAPI } from '@/utils/httpRequest.js' |
||||
|
|
||||
|
export const searchInspectionRequestHeaderList = (data) => createAPI(`/inspection/searchInspectionRequestHeaderList`, 'post', data) |
||||
|
|
||||
|
export const getInspectionRequestDetailList = (data) => createAPI(`/inspection/getInspectionRequestDetailList`, 'post', data) |
||||
|
|
||||
|
export const getInspectionRequestDetailSubList = (data) => createAPI(`/inspection/getInspectionRequestDetailSubList`, 'post', data) |
||||
|
|
||||
|
export const getInspectionResultList = (data) => createAPI(`/inspection/getInspectionResultList`, 'post', data) |
||||
|
|
||||
|
// 查询可申请验货PO
|
||||
|
export const queryPoPage = (data) => createAPI(`/inspection/queryPoPage`, 'post', data) |
||||
|
|
||||
|
// 保存验货申请
|
||||
|
export const saveInspectionRequest = (data) => createAPI(`/inspection/save`, 'post', data) |
||||
@ -0,0 +1,185 @@ |
|||||
|
<template> |
||||
|
<div class="detail-container"> |
||||
|
|
||||
|
<!-- 第一行 --> |
||||
|
<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> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'InspectionRequestDetail', |
||||
|
|
||||
|
props: { |
||||
|
detailData: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 格式化日期，只显示年月日 |
||||
|
formatDate (dateStr) { |
||||
|
if (!dateStr) return '-' |
||||
|
// 如果包含时分秒，截取前10位 |
||||
|
if (dateStr.length > 10) { |
||||
|
return dateStr.substring(0, 10) |
||||
|
} |
||||
|
return dateStr |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
.detail-container { |
||||
|
padding: 15px 20px; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.detail-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 18px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 300px; |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
|
||||
|
.detail-item.long { |
||||
|
width: 450px; |
||||
|
} |
||||
|
|
||||
|
.detail-item.address { |
||||
|
width: 600px; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
color: #606266; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<div class="detail-container"> |
||||
|
<!-- 明细表格 --> |
||||
|
<el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight"> |
||||
|
<el-table-column label="序号" header-align="center" align="center" width="80"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.$index + 1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="orderRef1" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/> |
||||
|
<el-table-column prop="status" label="状态" header-align="center" align="center" width="100"/> |
||||
|
<el-table-column prop="inspectNo" label="验货单号" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="inspectResult" label="验货结果" header-align="center" align="center" width="120"/> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getInspectionRequestDetailList } from '@/api/inspection/inspectionRequestHeader.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'InspectionRequestDetailTab', |
||||
|
|
||||
|
props: { |
||||
|
detailData: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
tableHeight: { |
||||
|
type: Number, |
||||
|
default: 400 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data () { |
||||
|
return { |
||||
|
detailList: [], |
||||
|
loading: false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
// 监听 detailData 变化，触发查询 |
||||
|
detailData: { |
||||
|
handler (newVal) { |
||||
|
if (newVal && newVal.requestNo && newVal.site) { |
||||
|
this.loadDetailList() |
||||
|
} else { |
||||
|
this.detailList = [] |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 加载明细列表 |
||||
|
loadDetailList () { |
||||
|
if (!this.detailData.requestNo || !this.detailData.site) { |
||||
|
this.detailList = [] |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.loading = true |
||||
|
getInspectionRequestDetailList({ |
||||
|
requestNo: this.detailData.requestNo, |
||||
|
site: this.detailData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
const list = data.list || [] |
||||
|
// 转换状态显示 |
||||
|
this.detailList = list.map(item => { |
||||
|
return { |
||||
|
...item, |
||||
|
status: item.status || this.getStatusText(item.statusDb) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
this.loading = false |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 状态转换 |
||||
|
getStatusText (statusDb) { |
||||
|
const statusMap = { |
||||
|
'DRAFT': '草稿', |
||||
|
'PENDING': '待检验', |
||||
|
'INSPECTING': '检验中', |
||||
|
'INSPECTED': '已检验', |
||||
|
'COMPLETED': '已完成', |
||||
|
'CANCELLED': '已取消' |
||||
|
} |
||||
|
return statusMap[statusDb] || statusDb || '-' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.detail-container { |
||||
|
padding: 0; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<div class="detail-container"> |
||||
|
<!-- 明细表格 --> |
||||
|
<el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight"> |
||||
|
<el-table-column label="序号" header-align="center" align="center" width="80"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.$index + 1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="poNo" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="poItemNo" label="PO行号" header-align="center" align="center" width="100"/> |
||||
|
<el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/> |
||||
|
<el-table-column prop="shipMothod" label="运输方式" header-align="center" align="center" width="120"/> |
||||
|
<el-table-column prop="crd" label="CRD日期" header-align="center" align="center" width="120"/> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getInspectionRequestDetailSubList } from '@/api/inspection/inspectionRequestHeader.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'InspectionRequestPoDetailTab', |
||||
|
|
||||
|
props: { |
||||
|
detailData: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
tableHeight: { |
||||
|
type: Number, |
||||
|
default: 400 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data () { |
||||
|
return { |
||||
|
detailList: [], |
||||
|
loading: false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
// 监听 detailData 变化，触发查询 |
||||
|
detailData: { |
||||
|
handler (newVal) { |
||||
|
if (newVal && newVal.requestNo && newVal.site) { |
||||
|
this.loadDetailList() |
||||
|
} else { |
||||
|
this.detailList = [] |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 加载明细列表 |
||||
|
loadDetailList () { |
||||
|
if (!this.detailData.requestNo || !this.detailData.site) { |
||||
|
this.detailList = [] |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.loading = true |
||||
|
getInspectionRequestDetailSubList({ |
||||
|
requestNo: this.detailData.requestNo, |
||||
|
site: this.detailData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.detailList = data.list || [] |
||||
|
} |
||||
|
this.loading = false |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.detail-container { |
||||
|
padding: 0; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<div class="detail-container"> |
||||
|
<!-- 明细表格 --> |
||||
|
<el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight"> |
||||
|
<el-table-column label="序号" header-align="center" align="center" width="80"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.$index + 1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="requestNo" label="任务单号" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="poNo" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="poItemNo" label="PO行号" header-align="center" align="center" width="100"/> |
||||
|
<el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/> |
||||
|
<el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/> |
||||
|
<el-table-column prop="inspectResult" label="验货结果" header-align="center" align="center" width="120"/> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getInspectionResultList } from '@/api/inspection/inspectionRequestHeader.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'InspectionResultTab', |
||||
|
|
||||
|
props: { |
||||
|
detailData: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
tableHeight: { |
||||
|
type: Number, |
||||
|
default: 400 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data () { |
||||
|
return { |
||||
|
detailList: [], |
||||
|
loading: false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
// 监听 detailData 变化，触发查询 |
||||
|
detailData: { |
||||
|
handler (newVal) { |
||||
|
if (newVal && newVal.requestNo && newVal.site) { |
||||
|
this.loadDetailList() |
||||
|
} else { |
||||
|
this.detailList = [] |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 加载明细列表 |
||||
|
loadDetailList () { |
||||
|
if (!this.detailData.requestNo || !this.detailData.site) { |
||||
|
this.detailList = [] |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.loading = true |
||||
|
getInspectionResultList({ |
||||
|
requestNo: this.detailData.requestNo, |
||||
|
site: this.detailData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.detailList = data.list || [] |
||||
|
} |
||||
|
this.loading = false |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.detail-container { |
||||
|
padding: 0; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
1203
src/views/modules/inspection/inspectionRequestList.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue