7 changed files with 505 additions and 128 deletions
-
4src/api/quote/quoteDetail.js
-
10src/views/modules/fanuc/labor.vue
-
482src/views/modules/quote/detail/breakdownCost.vue
-
38src/views/modules/quote/detail/primary/quoteDetailBom.vue
-
53src/views/modules/quote/detail/primary/quoteDetailCost.vue
-
36src/views/modules/quote/detail/quoteDetail.vue
-
10src/views/modules/quote/quoteDetailReport.vue
@ -0,0 +1,482 @@ |
|||||
|
<script> |
||||
|
import {queryQuoteDetailReportOverall, queryQuoteDetailReportRM} from "../../../../api/quote/quoteDetail"; |
||||
|
import {Decimal} from "decimal.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: "breakdownCost", |
||||
|
computed: { |
||||
|
Decimal() { |
||||
|
return Decimal |
||||
|
} |
||||
|
}, |
||||
|
props:{ |
||||
|
quoteDetail:{ |
||||
|
type:Object, |
||||
|
required:true |
||||
|
}, |
||||
|
height:{ |
||||
|
type:[String,Number], |
||||
|
default:300 |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
dataList:[], |
||||
|
dataListRm:[], |
||||
|
queryLoading:false, |
||||
|
dataColumns:[ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2OperationName', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'operationName', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Process', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: 'left', |
||||
|
columnWidth: 130 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2ORmCostStandard', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'rmCostStandard', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'RM_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2ORmCostQuote', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'rmCostQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'RM_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2LaborCost', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'laborCost', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'DL', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2OverheadCost', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'overheadCost', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'VOH', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2MachineCost', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'machineCost', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'FOH', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2SubtotalCostStd', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'subtotalCostStd', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Sub-total(RMB/Kpcs)_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 170 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2SubtotalCostQuote', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'subtotalCostQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Sub-total(RMB/Kpcs)_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 170 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2SubPercentageStd', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'subPercentageStd', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion%_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table2SubPercentageQuote', |
||||
|
tableId: '5013Table2', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'subPercentageQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion%_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
], |
||||
|
subtotalCostStd:0, |
||||
|
subtotalCostQuote:0, |
||||
|
dataRmColumns:[ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3PartGroupName', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'partGroupName', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'RM', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: 'left', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3RmCostStandard', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'rmCostStandard', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Cost(RMB/Kpcs)_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 160 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3RmCostQuote', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'rmCostQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Cost(RMB/Kpcs)_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 160 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3PercentageOfRmStd', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'percentageOfRmStd', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion%_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3PercentageOfRmQuote', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'percentageOfRmQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion%_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3TotalCostStd', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'totalCostStd', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion of Total Cost%_标准', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 200 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 5013, |
||||
|
serialNumber: '5011Table3TotalCostQuote', |
||||
|
tableId: '5013Table3', |
||||
|
tableName: '报价信息表', |
||||
|
columnProp: 'totalCostQuote', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Proportion of Total Cost%_报价', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 200 |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
handleQueryQuoteDetailReportOverall(){ |
||||
|
let params = { |
||||
|
id:this.quoteDetail.id |
||||
|
} |
||||
|
queryQuoteDetailReportOverall(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.dataList = data.rows; |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
this.queryLoading = false; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.queryLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
handleQueryQuoteDetailReportRM(){ |
||||
|
let params = { |
||||
|
id:this.quoteDetail.id |
||||
|
} |
||||
|
queryQuoteDetailReportRM(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.dataListRm = data.rows; |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
this.queryLoading = false; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.queryLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
getSummaries(param) { |
||||
|
const { columns, data } = param; |
||||
|
const sums = []; |
||||
|
columns.forEach((column, index) => { |
||||
|
if (index === 0) { |
||||
|
sums[index] = 'Total cost(RMB/Kpcs)'; |
||||
|
return; |
||||
|
} |
||||
|
const values = data.map(item => Number(item[column.property])); |
||||
|
if (!values.every(value => isNaN(value))) { |
||||
|
sums[index] = values.reduce((prev, curr) => { |
||||
|
const value = Number(curr); |
||||
|
if (!isNaN(value)) { |
||||
|
return prev + curr; |
||||
|
} else { |
||||
|
return prev; |
||||
|
} |
||||
|
}, 0); |
||||
|
sums[index] = new Decimal(sums[index]).toFixed(6) |
||||
|
if (column.property ==='subtotalCostQuote'){ |
||||
|
this.subtotalCostQuote = sums[index] |
||||
|
} |
||||
|
if (column.property ==='subtotalCostStd'){ |
||||
|
this.subtotalCostStd = sums[index] |
||||
|
} |
||||
|
if (column.property === 'subPercentageQuote' || column.property ==='subPercentageStd'){ |
||||
|
sums[index] = new Decimal(sums[index] * 100).toFixed(2) + '%' |
||||
|
} |
||||
|
} else { |
||||
|
sums[index] = 'N/A'; |
||||
|
} |
||||
|
}); |
||||
|
return sums; |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
quoteDetail(newVal,oldVal){ |
||||
|
if (newVal){ |
||||
|
this.queryLoading = true; |
||||
|
this.handleQueryQuoteDetailReportOverall(); |
||||
|
this.handleQueryQuoteDetailReportRM(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row :gutter="10" v-loading="queryLoading"> |
||||
|
<el-col :span="14"> |
||||
|
<el-table :key="dataList.length" :data="dataList" :height="height" border show-summary :summary-method="getSummaries"> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in dataColumns" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed===''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<template v-if="item.columnProp === 'subPercentageQuote' || item.columnProp === 'subPercentageStd'"> |
||||
|
<span>{{new Decimal(scope.row[item.columnProp] * 100).toFixed(2)}}%</span> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-table :data="dataListRm" :height="height" border> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in dataRmColumns" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed===''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<template v-if="item.columnProp === 'percentageOfRmQuote' || item.columnProp === 'percentageOfRmStd'"> |
||||
|
<span>{{new Decimal(scope.row[item.columnProp] * 100).toFixed(2)}}%</span> |
||||
|
</template> |
||||
|
<template v-else-if=" item.columnProp === 'totalCostStd'"> |
||||
|
<span v-if="!item.columnHidden">{{ new Decimal(scope.row['rmCostStandard']/ subtotalCostStd * 100).toFixed(0)}}%</span> |
||||
|
</template> |
||||
|
<template v-else-if=" item.columnProp === 'totalCostQuote'"> |
||||
|
<span v-if="!item.columnHidden">{{ new Decimal(scope.row['rmCostQuote']/ subtotalCostQuote * 100).toFixed(0)}}%</span> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue