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.
107 lines
3.4 KiB
107 lines
3.4 KiB
<template>
|
|
<div class="detail-container">
|
|
<!-- 明细表格 -->
|
|
<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">
|
|
<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="orderRef2" 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="sku" label="SKU" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="categoryLevel2" label="一级物料分类" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="categoryLevel3" 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="approveQty" 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: {
|
|
handler (newVal) {
|
|
if (newVal && newVal.requestNo && newVal.site) {
|
|
this.loadDetailList()
|
|
} else {
|
|
this.detailList = []
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 根据 isChanged 字段判断是否需要红色背景
|
|
tableRowClassName ({ row }) {
|
|
return row.isChanged === 'Y' ? 'modified-row' : ''
|
|
},
|
|
|
|
// 加载明细列表
|
|
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.page && data.page.list) || []
|
|
}
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.detail-container {
|
|
padding: 0;
|
|
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>
|