477 lines
18 KiB
Vue
477 lines
18 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row style="width: 100%">
|
||
<el-col :span="18">
|
||
<el-button type="primary" size="mini" @click="handleExport1"
|
||
>租赁明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport3"
|
||
>维修明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport4"
|
||
>报废明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport2"
|
||
>丢失明细导出</el-button>
|
||
<el-button type="warning" size="mini" @click="handleExportAll"
|
||
>全部明细导出</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="4">
|
||
<el-button type="danger" size="mini" style="float: right" @click="handleBack"
|
||
>返回</el-button>
|
||
</el-col> -->
|
||
</el-row>
|
||
|
||
<!-- <div style="color: rgb(217, 0, 27); font-weight: 700; padding: 20px 0">
|
||
结算费用合计：¥{{ costAll }}，租赁费用¥{{ leaseCost }}，维修费用¥{{
|
||
repairCost
|
||
}}，报废费用¥{{ scrapCost }}，丢失费用{{ loseCost }}
|
||
</div> -->
|
||
|
||
<div style="margin-top:20px">
|
||
<div class="tabelAllTop">
|
||
<div class="costTop">结算费用</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">结算单位</div>
|
||
<div class="costRightUnit">
|
||
{{ unitName }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">结算工程</div>
|
||
<div class="costRightUnit">
|
||
{{ projectName }}
|
||
</div>
|
||
</div>
|
||
<el-table :data="leaseList">
|
||
<el-table-column label="租赁费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<!-- <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/> -->
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.leasePrice.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
|
||
<!-- <el-table-column label="归还数量" align="center" prop="" :show-overflow-tooltip="true" /> -->
|
||
<el-table-column label="归还日期 " align="center" prop="endTime" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ Number(scope.row.leaseDays).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ leaseCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="repairList">
|
||
<el-table-column label="维修费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="维修数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="维修费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ repairCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="scrapList">
|
||
<el-table-column label="报废费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="报废数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="报废费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ scrapCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="loseList">
|
||
<el-table-column label="丢失费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="丢失数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="丢失费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAllBottom">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ loseCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllBottom">
|
||
<div class="columnAllNum">合计：</div>
|
||
<div class="columnAll">
|
||
{{ costAll.toFixed(2) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSltInfo, submitFee,submitCosts } from '@/api/cost/cost'
|
||
|
||
export default {
|
||
name: '',
|
||
dicts: [],
|
||
props: {
|
||
row: {
|
||
type: [String],
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 往来单位数据
|
||
unitList: [],
|
||
// 工程数据
|
||
projectList: [],
|
||
leaseList: [], //租赁费用列表
|
||
leaseCost: 0,
|
||
repairList: [], //维修费用列表
|
||
repairCost: 0,
|
||
scrapList: [], //报废费用列表
|
||
scrapCost: 0,
|
||
loseList: [], //丢失费用列表
|
||
loseCost: 0,
|
||
costAll: 0,
|
||
deptName: undefined,
|
||
applyList: [],
|
||
projectName: undefined, //结算工程
|
||
unitName: undefined, //结算单位
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('33333333333',this.row)
|
||
let arr = JSON.parse(this.row)
|
||
this.rowData = arr
|
||
this.getDataAll()
|
||
// this.getUnitList();
|
||
// this.getProjectList();
|
||
},
|
||
methods: {
|
||
//获取单位类型 ,getUnitList, getProjectList
|
||
getUnitList() {
|
||
getUnitList().then((response) => {
|
||
this.unitList = response.data
|
||
})
|
||
},
|
||
getProjectList() {
|
||
getProjectList().then((response) => {
|
||
this.projectList = response.data
|
||
})
|
||
},
|
||
/** 查询列表 */
|
||
getDataAll() {
|
||
getSltInfo(this.rowData).then((response) => {
|
||
this.leaseList = response.data.leaseList //租赁费用列表
|
||
this.projectName = response.data.projectName
|
||
this.unitName = response.data.unitName
|
||
this.leaseCost = this.countCost(this.leaseList)
|
||
|
||
this.repairList = response.data.repairList //维修费用列表
|
||
this.repairCost = response.data.repairCost.toFixed(2)
|
||
// this.repairCost = this.countCost(this.repairList)
|
||
|
||
this.scrapList = response.data.scrapList //报废费用列表
|
||
this.scrapCost = response.data.scrapCost.toFixed(2)
|
||
// this.scrapCost = this.countCost(this.scrapList)
|
||
|
||
this.loseList = response.data.loseList //丢失费用列表
|
||
this.loseCost = this.countCost(this.loseList)
|
||
|
||
this.applyList = response.data.relations
|
||
this.applyList.forEach((item) => {
|
||
item.leaseCost = Number(item.leaseCost)
|
||
item.repairCost = Number(item.repairCost)
|
||
item.scrapCost = Number(item.scrapCost)
|
||
item.loseCost = Number(item.loseCost)
|
||
item.cost =
|
||
Number(item.leaseCost) +
|
||
Number(item.repairCost) +
|
||
Number(item.scrapCost) +
|
||
Number(item.loseCost) +
|
||
Number(item.addCost) -
|
||
Number(item.subCost)
|
||
})
|
||
|
||
let costSum =
|
||
Number(this.leaseCost) +
|
||
Number(this.repairCost) +
|
||
Number(this.scrapCost) +
|
||
Number(this.loseCost)
|
||
this.costAll = costSum
|
||
this.subCostFlag = costSum
|
||
})
|
||
},
|
||
//计算金额1
|
||
countCost(list) {
|
||
let arrCost = 0
|
||
list.forEach((item) => {
|
||
// arrCost += parseInt(item.costs)
|
||
|
||
console.log(item)
|
||
if (item.partType != 0 && item.scrapType != 0) {
|
||
arrCost = arrCost + Number(item.costs)
|
||
}
|
||
})
|
||
|
||
return arrCost.toFixed(2)
|
||
},
|
||
//el-table-合计总费用
|
||
getSummaries(param) {
|
||
const { columns, data } = param
|
||
const sums = []
|
||
columns.forEach((column, index) => {
|
||
if (index === 9) {
|
||
sums[index] = '最终费用'
|
||
return
|
||
}
|
||
const values = data.map((item) => Number(item[column.property]))
|
||
// 只对amount这一列进行总计核算。
|
||
if (column.property === 'cost') {
|
||
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] += ' 元';
|
||
} else {
|
||
sums[index] = '---'
|
||
}
|
||
}
|
||
})
|
||
return sums
|
||
},
|
||
countNum(row) {
|
||
row.cost =
|
||
Number(row.leaseCost) +
|
||
Number(row.repairCost) +
|
||
Number(row.scrapCost) +
|
||
Number(row.loseCost) +
|
||
Number(row.addCost || 0) -
|
||
Number(row.subCost || 0)
|
||
},
|
||
|
||
//返回
|
||
handleBack() {
|
||
this.$emit('goBackPage')
|
||
// this.$tab.closeOpenPage({
|
||
// path: '/cost/costApplyList',
|
||
// query: {
|
||
// isEdit: true,
|
||
// },
|
||
// })
|
||
},
|
||
/** 导出按钮操作 */
|
||
//租赁
|
||
handleExport1() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportLease',
|
||
{...params,},
|
||
`租赁费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
//丢失
|
||
handleExport2() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportLose',
|
||
{...params,},
|
||
`丢失费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
// 维修
|
||
handleExport3() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportRepair',
|
||
{...params,},
|
||
`维修费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
//报废
|
||
handleExport4() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportScrap',
|
||
{...params,},
|
||
`报废费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
// this.downloadJson(
|
||
// 'material/slt_agreement_info/exportScrap',
|
||
// JSON.stringify(this.rowData),
|
||
// `报废费用明细_${new Date().getTime()}.xlsx`,
|
||
// )
|
||
},
|
||
|
||
handleExportAll() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportAll',
|
||
{...params,},
|
||
`全部费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep.el-table .fixed-width .el-button--mini {
|
||
width: 80px !important;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tabelAllTop {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-left: none;
|
||
border-bottom: none;
|
||
.costTop {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
width:100%;
|
||
font-weight: bold; /* 添加字体加粗样式 */
|
||
}
|
||
}
|
||
.tabelAllTopUnit {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-bottom: none;
|
||
.costTopUnit {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:21.4%;
|
||
border-left: none;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
}
|
||
.costRightUnit {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: center;
|
||
align-items: center;
|
||
width:100%;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
// padding-left: 20px; /* 添加左内边距 */
|
||
}
|
||
}
|
||
.tabelAll {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
border-bottom: 1px solid #dfe6ec;
|
||
border-top: none;
|
||
margin-bottom: 15px;
|
||
}
|
||
.tabelAllBottom {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
border-bottom: 1px solid #dfe6ec;
|
||
border-top: none;
|
||
}
|
||
.columnAll {
|
||
flex: 1;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: right;
|
||
width:100%;
|
||
justify-content: flex-end; /* 将内容对齐到右侧 */
|
||
margin-right: 60px; /* 添加右边距 */
|
||
}
|
||
.columnAllNum {
|
||
padding: 5px;
|
||
text-align: center;
|
||
width:21.4%;
|
||
border-left: none;
|
||
}
|
||
/* 最后一列无右边框 */
|
||
.tabelAll .column:last-child {
|
||
border-right: none;
|
||
}
|
||
</style>
|