271 lines
11 KiB
Vue
271 lines
11 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<div slot="header" class="header">
|
|
<span>外协到货单号:</span>
|
|
<el-input v-model="orderNumber" clearable style="width: 200px" size="small"/>
|
|
<span>外协厂家:</span>
|
|
<el-input v-model="outsourcingSupplier" clearable style="width: 200px" size="small"/>
|
|
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px;" @click="pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
|
|
</div>
|
|
<el-table v-loading="" :data="tableData1" border style="width: 100%;max-height: 600px;" height="400px" size="mini" @row-click="searchTable2">
|
|
<el-table-column label="序号" align="center" width="80" type="index"/>
|
|
<el-table-column label="外协到货单号" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.外协到货单编号 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="外协厂家" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.外协厂家名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建日期" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.操作日期 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="block" style="margin: 10px 0;">
|
|
<el-pagination
|
|
:current-page="pageCurrent1"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="pageSize1"
|
|
:total="total1"
|
|
style="display:inline-block;width:50%"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange1"
|
|
@current-change="handleCurrentChange1"/>
|
|
</div>
|
|
<el-table v-loading="" :data="tableData2" :summary-method="getSummaries" show-summary border style="width: 100%;min-height: 400px" height="400px" size="mini">
|
|
<el-table-column label="序号" align="center" width="80" type="index"/>
|
|
<el-table-column label="零件名称" align="center" min-width="120">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.零件名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="零件图号" align="center" min-width="120">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.零件图号 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="零件数量" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.批次数量 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="检验数量" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.检验数量 || 0 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="不合格数量" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.不合格数量 || 0 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="检验时间" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.检验时间 || '—' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="形位" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
<el-popover placement="right" width="500" trigger="click">
|
|
<el-table :data="gridData" highlight-current-row size="mini">
|
|
<el-table-column width="50" align="center" type="index" label="序号"/>
|
|
<el-table-column min-width="150" align="center" label="类别">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.类别 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="数值">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.数值 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="零件数量">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.零件数量 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button slot="reference" type="success" plain size="mini" icon="el-icon-search" @click="searchTableDetail(1, scope.row.外协到货单明细流水号)">形位</el-button>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="尺寸" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
<el-popover placement="right" width="500" trigger="click">
|
|
<el-table :data="gridData" highlight-current-row size="mini">
|
|
<el-table-column width="50" align="center" type="index" label="序号"/>
|
|
<el-table-column min-width="150" align="center" label="类别">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.类别 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="数值">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.数值 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="零件数量">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.零件数量 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button slot="reference" type="success" plain size="mini" icon="el-icon-search" @click="searchTableDetail(2, scope.row.外协到货单明细流水号)">尺寸</el-button>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="外观" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
<el-popover placement="right" width="500" trigger="click">
|
|
<el-table :data="gridData" highlight-current-row size="mini">
|
|
<el-table-column width="50" align="center" type="index" label="序号"/>
|
|
<el-table-column min-width="150" align="center" label="类别">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.类别 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="数值">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.数值 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="100" align="center" label="零件数量">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.零件数量 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button slot="reference" type="success" plain size="mini" icon="el-icon-search" @click="searchTableDetail(3, scope.row.外协到货单明细流水号)">外观</el-button>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { searchTable1, searchTable2, searchTableDetail } from '@/api/Outsourcing/OutsourcingQCSearch'
|
|
export default {
|
|
name: 'OutsourcingQCSearch',
|
|
data() {
|
|
return {
|
|
orderNumber: '',
|
|
outsourcingSupplier: '',
|
|
tableData1: [],
|
|
pageCurrent1: 1,
|
|
pageSize1: 10,
|
|
total1: 0,
|
|
tableData2: [],
|
|
pageCurrent2: 1,
|
|
pageSize2: 10,
|
|
total2: 0,
|
|
gridData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.searchTable1()
|
|
},
|
|
methods: {
|
|
// 合计
|
|
getSummaries(param) {
|
|
const { columns, data } = param
|
|
const sums = []
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = '总价'
|
|
} else if (index === 3) {
|
|
const values = data.map(item => Number(item['批次数量']) || 0)
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!isNaN(value)) {
|
|
return Number((prev + curr).toFixed(2))
|
|
} else {
|
|
return Number((prev).toFixed(2))
|
|
}
|
|
}, 0)
|
|
sums[index] += ''
|
|
} else {
|
|
sums[index] = 'N/A'
|
|
}
|
|
} else if (index === 4) {
|
|
const values = data.map(item => Number(item['检验数量']) || 0)
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!isNaN(value)) {
|
|
return Number((prev + curr).toFixed(2))
|
|
} else {
|
|
return Number((prev).toFixed(2))
|
|
}
|
|
}, 0)
|
|
sums[index] += ''
|
|
} else {
|
|
sums[index] = 'N/A'
|
|
}
|
|
} else if (index === 5) {
|
|
const values = data.map(item => Number(item['不合格数量']) || 0)
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!isNaN(value)) {
|
|
return Number((prev + curr).toFixed(2))
|
|
} else {
|
|
return Number((prev).toFixed(2))
|
|
}
|
|
}, 0)
|
|
sums[index] += ''
|
|
} else {
|
|
sums[index] = 'N/A'
|
|
}
|
|
} else if (index === 6) {
|
|
sums[index] = '检验比例：' + ((sums[4] / sums[3]) * 100).toFixed(2) + '%'
|
|
}
|
|
})
|
|
return sums
|
|
},
|
|
// 查询到货单列表
|
|
searchTable1() {
|
|
let check1, check2
|
|
this.orderNumber ? check1 = 1 : check1 = 0
|
|
this.outsourcingSupplier ? check2 = 1 : check2 = 0
|
|
searchTable1(this.pageCurrent1, this.pageSize1, check1, this.orderNumber, check2, this.outsourcingSupplier).then(response => {
|
|
this.tableData1 = response.data.rows
|
|
this.total1 = response.data.total
|
|
})
|
|
},
|
|
handleSizeChange1(val) {
|
|
this.pageSize1 = val
|
|
this.pageCurrent1 = 1
|
|
this.searchTable1()
|
|
},
|
|
handleCurrentChange1(val) {
|
|
this.pageCurrent1 = val
|
|
this.searchTable1()
|
|
},
|
|
searchTable2(row) {
|
|
searchTable2(row.外协到货单流水号).then(response => {
|
|
this.tableData2 = response.data
|
|
})
|
|
},
|
|
searchTableDetail(type, num) {
|
|
searchTableDetail(type, num).then(response => {
|
|
this.gridData = response.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header span{
|
|
margin: 0 0 0 20px;
|
|
}
|
|
</style>
|