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