1048 lines
43 KiB
Vue
1048 lines
43 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="primary" size="mini" @click="handleExport5">减免明细导出</el-button>
|
||
<el-button type="warning" size="mini" @click="handleExportAll">全部明细导出</el-button>
|
||
<!-- <el-button type="warning" size="mini" @click="handleExportEach">各结算明细导出</el-button> -->
|
||
<el-button type="primary" size="mini" @click="handlePrint">打印</el-button>
|
||
<el-button type="success" size="mini" @click="handleAdd">提交</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>
|
||
|
||
<vue-easy-print tableShow ref="remarksPrintRef" class="print">
|
||
<div style="margin: 20px 0">
|
||
<!-- 基本信息表格 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 20px"
|
||
>
|
||
<!-- 表头 -->
|
||
<tr>
|
||
<th colspan="11">结算费用</th>
|
||
</tr>
|
||
<!-- 单位 & 工程 -->
|
||
<tr>
|
||
<td style="width: 100px; text-align: center">结算单位</td>
|
||
<td colspan="10" style="text-align: center">{{ unitName }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: center">结算工程</td>
|
||
<td colspan="10" style="text-align: center">{{ projectName }}</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- 租赁费用明细表格 -->
|
||
<div class="table-container lease-table">
|
||
<!-- 固定表头 -->
|
||
<div class="table-header">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||
<colgroup>
|
||
<col style="width: 60px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 60px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 100px" />
|
||
</colgroup>
|
||
<tr>
|
||
<th colspan="11">租赁费用明细</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>设备名称</th>
|
||
<th>规格型号</th>
|
||
<th>计量单位</th>
|
||
<th>租赁单价</th>
|
||
<th>租赁数量</th>
|
||
<th>租赁日期</th>
|
||
<th>归还日期</th>
|
||
<th>租赁天数</th>
|
||
<th>租赁费用（元）</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 滚动数据区域 -->
|
||
<div class="table-body">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||
<colgroup>
|
||
<col style="width: 60px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 60px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 100px" />
|
||
</colgroup>
|
||
<tr v-for="(item, index) in leaseList" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.typeName }}</td>
|
||
<td>{{ item.modelName }}</td>
|
||
<td>{{ item.mtUnitName }}</td>
|
||
<td>{{ item.leasePrice ? item.leasePrice.toFixed(3) : '0' }}</td>
|
||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.startTime }}</td>
|
||
<td>{{ item.endTime }}</td>
|
||
<td v-if="item.leaseDays">{{ Number(item.leaseDays).toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.costs ? item.costs.toFixed(2) : '0' }}</td>
|
||
<td>{{ item.unitName }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小计 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
|
||
>
|
||
<tr>
|
||
<td style="text-align: center">费用小计： {{ leaseCost }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px">
|
||
<!-- 维修费用明细表格 -->
|
||
<div class="table-container repair-table">
|
||
<!-- 固定表头 -->
|
||
<div class="table-header">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr>
|
||
<th colspan="8">维修费用明细</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>设备名称</th>
|
||
<th>规格型号</th>
|
||
<th>计量单位</th>
|
||
<th>维修数量</th>
|
||
<th>是否收费</th>
|
||
<th>维修费用（元）</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 滚动数据区域 -->
|
||
<div class="table-body">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr v-for="(item, index) in repairList" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.typeName }}</td>
|
||
<td>{{ item.modelName }}</td>
|
||
<td>{{ item.mtUnitName }}</td>
|
||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.partType }}</td>
|
||
<td v-if="item.costs">{{ item.costs.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.unitName }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小计 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
|
||
>
|
||
<tr>
|
||
<td style="text-align: center">费用小计： {{ repairCost }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px">
|
||
<!-- 丢失费用明细表格 -->
|
||
<div class="table-container lose-table">
|
||
<!-- 固定表头 -->
|
||
<div class="table-header">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 180px" />
|
||
<col style="width: 180px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr>
|
||
<th colspan="8">丢失费用明细</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>设备名称</th>
|
||
<th>规格型号</th>
|
||
<th>计量单位</th>
|
||
<th>扣款单价</th>
|
||
<th>丢失数量</th>
|
||
<th>丢失费用（元）</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 滚动数据区域 -->
|
||
<div class="table-body">
|
||
<table border="1" cellspacing="0" cellpadding="7" class="data-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 180px" />
|
||
<col style="width: 180px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr v-for="(item, index) in loseList" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.typeName }}</td>
|
||
<td>{{ item.modelName }}</td>
|
||
<td>{{ item.mtUnitName }}</td>
|
||
<td v-if="item.buyPrice">{{ item.buyPrice.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td v-if="item.costs">{{ item.costs.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.unitName }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小计 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
|
||
>
|
||
<tr>
|
||
<td style="text-align: center">费用小计： {{ loseCost }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px">
|
||
<!-- 报废费用明细表格 -->
|
||
<div class="table-container scrap-table">
|
||
<!-- 固定表头 -->
|
||
<div class="table-header">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr>
|
||
<th colspan="9">报废费用明细</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>设备名称</th>
|
||
<th>规格型号</th>
|
||
<th>计量单位</th>
|
||
<th>报废数量</th>
|
||
<th>扣款单价</th>
|
||
<th>是否收费</th>
|
||
<th>报废费用（元）</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 滚动数据区域 -->
|
||
<div class="table-body">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||
<colgroup>
|
||
<col style="width: 80px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 150px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 140px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr v-for="(item, index) in scrapList" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.typeName }}</td>
|
||
<td>{{ item.modelName }}</td>
|
||
<td>{{ item.mtUnitName }}</td>
|
||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td v-if="item.buyPrice">{{ item.buyPrice.toFixed(2) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.partType }}</td>
|
||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.unitName }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小计 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
|
||
>
|
||
<tr>
|
||
<td style="text-align: center">费用小计： {{ scrapCost }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px">
|
||
<!-- 减免费用明细表格 -->
|
||
<div class="table-container reduce-table">
|
||
<!-- 固定表头 -->
|
||
<div class="table-header">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||
<colgroup>
|
||
<col style="width: 60px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr>
|
||
<th colspan="12">减免费用明细</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>设备名称</th>
|
||
<th>规格型号</th>
|
||
<th>计量单位</th>
|
||
<th>租赁单价</th>
|
||
<th>减免数量</th>
|
||
<th>减免开始日期</th>
|
||
<th>减免结束日期</th>
|
||
<th>减免天数</th>
|
||
<th>减免原因</th>
|
||
<th>减免费用（元）</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 滚动数据区域 -->
|
||
<div class="table-body">
|
||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||
<colgroup>
|
||
<col style="width: 60px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 100px" />
|
||
<col style="width: 80px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
<col style="width: 120px" />
|
||
</colgroup>
|
||
<tr v-for="(item, index) in reducList" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.typeName }}</td>
|
||
<td>{{ item.modeName }}</td>
|
||
<td>{{ item.unitName }}</td>
|
||
<td v-if="item.leasePrice">{{ item.leasePrice }}</td>
|
||
<td v-else></td>
|
||
<td v-if="item.reduceNum">{{ item.reduceNum }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.startTime }}</td>
|
||
<td>{{ item.endTime }}</td>
|
||
<td>{{ item.days }}</td>
|
||
<td>{{ item.remark }}</td>
|
||
<td v-if="item.leaseMoney">{{ item.leaseMoney.toFixed(3) }}</td>
|
||
<td v-else></td>
|
||
<td>{{ item.unitName }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小计和合计 -->
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
cellpadding="6"
|
||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
|
||
>
|
||
<tr>
|
||
<td style="text-align: center">费用小计： {{ reducCost }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: center">合计： {{ costAll.toFixed(2) }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between">
|
||
<div class="item" style="width: 33%">
|
||
<div>
|
||
<span>部门负责人：</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item" style="width: 33%">
|
||
<div>
|
||
<span>承租负责人：</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item" style="width: 33%">
|
||
<div>
|
||
<span>核算员：</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-easy-print>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSltInfo, submitFee, submitCosts } from '@/api/cost/cost'
|
||
import vueEasyPrint from 'vue-easy-print'
|
||
|
||
export default {
|
||
components: { vueEasyPrint },
|
||
name: 'ApplyDetail',
|
||
dicts: [],
|
||
props: {
|
||
row: {
|
||
type: [String]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
// 往来单位数据
|
||
unitList: [],
|
||
// 工程数据
|
||
projectList: [],
|
||
leaseList: [], //租赁费用列表
|
||
leaseCost: 0,
|
||
repairList: [], //维修费用列表
|
||
repairCost: 0,
|
||
scrapList: [], //报废费用列表
|
||
scrapCost: 0,
|
||
loseList: [], //丢失费用列表
|
||
loseCost: 0,
|
||
reducList: [], //减免费用列表
|
||
reducCost: 0,
|
||
costAll: 0,
|
||
deptName: undefined,
|
||
applyList: [],
|
||
projectName: undefined, //结算工程
|
||
unitName: undefined, //结算单位
|
||
exportName: '', //导出文件名
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('📋 ApplyDetail 组件挂载，接收到的 row 数据:', this.row)
|
||
this.initData()
|
||
// this.getUnitList();
|
||
// this.getProjectList();
|
||
},
|
||
activated() {
|
||
// 当组件被 keep-alive 缓存后重新激活时调用
|
||
console.log('📋 ApplyDetail 组件激活 (keep-alive)，row 数据:', this.row)
|
||
this.initData()
|
||
},
|
||
watch: {
|
||
// 监听 row 数据变化
|
||
row: {
|
||
handler(newVal, oldVal) {
|
||
console.log('📋 监听到 row 数据变化:', { newVal, oldVal })
|
||
if (newVal && newVal !== oldVal) {
|
||
this.initData()
|
||
}
|
||
},
|
||
immediate: false
|
||
}
|
||
},
|
||
methods: {
|
||
handlePrint(orientation = 'portrait') {
|
||
// 设置打印方向（通过动态样式注入）
|
||
const printStyle = document.createElement('style')
|
||
printStyle.setAttribute('type', 'text/css')
|
||
printStyle.innerHTML = `
|
||
@page { size: A4 ${orientation}; margin: 10mm; }
|
||
`
|
||
document.head.appendChild(printStyle)
|
||
|
||
// 临时取消滚动限制
|
||
const tableBodies = document.querySelectorAll('.table-body')
|
||
tableBodies.forEach(body => {
|
||
body.dataset.originalMaxHeight = body.style.maxHeight
|
||
body.style.maxHeight = 'none'
|
||
body.style.overflow = 'visible'
|
||
})
|
||
|
||
this.$nextTick(() => {
|
||
// 调用 vue-easy-print 组件打印
|
||
this.$refs.remarksPrintRef.print()
|
||
|
||
// 打印后恢复样式
|
||
setTimeout(() => {
|
||
tableBodies.forEach(body => {
|
||
body.style.maxHeight = body.dataset.originalMaxHeight || '300px'
|
||
body.style.overflowY = 'auto'
|
||
})
|
||
|
||
// 移除临时 @page 样式
|
||
document.head.removeChild(printStyle)
|
||
}, 300)
|
||
})
|
||
},
|
||
// 初始化数据 - 统一处理数据解析和API调用
|
||
initData() {
|
||
if (!this.row) {
|
||
console.log('📋 row 数据为空，跳过初始化')
|
||
return
|
||
}
|
||
|
||
console.log('📋 开始初始化数据，row:', this.row)
|
||
let arr = JSON.parse(this.row)
|
||
console.log('📋 解析后的数据:', arr)
|
||
this.rowData = arr
|
||
console.log('📋 准备调用 getDataAll() 获取详情数据')
|
||
this.exportName = arr.map(item => {
|
||
const projectName = item.projectName || ''
|
||
const unitName = item.unitName || ''
|
||
const agreementCode = item.agreementCode || ''
|
||
return `${projectName}_${unitName}_${agreementCode}`
|
||
}).join(', ') // 用逗号和空格连接所有项
|
||
|
||
this.getDataAll()
|
||
},
|
||
//获取单位类型 ,getUnitList, getProjectList
|
||
getUnitList() {
|
||
getUnitList().then(response => {
|
||
this.unitList = response.data
|
||
})
|
||
},
|
||
getProjectList() {
|
||
getProjectList().then(response => {
|
||
this.projectList = response.data
|
||
})
|
||
},
|
||
/** 查询列表 */
|
||
getDataAll() {
|
||
console.log('🔥 开始调用 getSltInfo API，传入参数:', this.rowData)
|
||
getSltInfo(this.rowData)
|
||
.then(response => {
|
||
console.log('🔥 API 调用成功，返回数据:', response)
|
||
console.log('🔥 返回的详情数据:', response.data)
|
||
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.reducList = response.data.reductionList //减免费用列表
|
||
if (this.reducList != null) {
|
||
this.reducList.forEach(item => {
|
||
this.reducCost = Number(this.reducCost) + Number(item.leaseMoney)
|
||
})
|
||
}
|
||
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.reductionCost) +
|
||
Number(item.addCost) -
|
||
Number(item.subCost)
|
||
})
|
||
|
||
let costSum =
|
||
Number(this.leaseCost) +
|
||
Number(this.repairCost) +
|
||
Number(this.scrapCost) +
|
||
Number(this.loseCost) -
|
||
Number(this.reducCost)
|
||
this.costAll = costSum
|
||
|
||
this.subCostFlag = costSum
|
||
})
|
||
.catch(error => {
|
||
console.error('❌ API 调用失败:', error)
|
||
this.$message.error('获取结算详情失败: ' + (error.message || error))
|
||
})
|
||
},
|
||
//计算金额1
|
||
countCost(list) {
|
||
let arrCost = 0
|
||
list.forEach(item => {
|
||
// arrCost += parseInt(item.costs)
|
||
if (item.partType != 0 && item.scrapType != 0) {
|
||
arrCost = arrCost + Number(item.costs)
|
||
}
|
||
})
|
||
|
||
return arrCost.toFixed(2)
|
||
},
|
||
//提交按钮
|
||
handleAdd() {
|
||
this.$modal
|
||
.confirm('是否确认提交？')
|
||
.then(() => {
|
||
const loading = this.$loading()
|
||
let params = {
|
||
agreementIds: Array.isArray(this.rowData) ? this.rowData.map(item => item.agreementId) : [],
|
||
totalCostAll: this.costAll,
|
||
// leaseList: this.leaseList,
|
||
// repairList: this.repairList,
|
||
// scrapList: this.scrapList,
|
||
// loseList: this.loseList,
|
||
// reductionList: this.reducList,
|
||
settlementType: this.rowData[0].settlementType || ''
|
||
}
|
||
console.log('2222222222222', params)
|
||
|
||
submitCosts(params).then(response => {
|
||
loading.close()
|
||
this.$message({
|
||
type: 'success',
|
||
message: '提交成功'
|
||
})
|
||
|
||
this.$emit('isReset')
|
||
})
|
||
})
|
||
.catch(() => {
|
||
loading.close()
|
||
})
|
||
},
|
||
//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 formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportLease',
|
||
{ ...params },
|
||
`${this.exportName}_租赁费用明细_${currentTime}.xlsx`
|
||
)
|
||
},
|
||
//丢失
|
||
handleExport2() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportLose',
|
||
{ ...params },
|
||
`${this.exportName}_丢失费用明细_${currentTime}.xlsx`
|
||
)
|
||
},
|
||
// 维修
|
||
handleExport3() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportRepair',
|
||
{ ...params },
|
||
`${this.exportName}_维修费用明细_${currentTime}.xlsx`
|
||
)
|
||
},
|
||
//报废
|
||
handleExport4() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportScrap',
|
||
{ ...params },
|
||
`${this.exportName}_报废费用明细_${currentTime}.xlsx`
|
||
)
|
||
// this.downloadJson(
|
||
// 'material/slt_agreement_info/exportScrap',
|
||
// JSON.stringify(this.rowData),
|
||
// `报废费用明细_${new Date().getTime()}.xlsx`,
|
||
// )
|
||
},
|
||
handleExport5() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportReduction',
|
||
{ ...params },
|
||
`${this.exportName}_减免费用明细_${currentTime}.xlsx`
|
||
)
|
||
},
|
||
|
||
handleExportAll() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportAll',
|
||
{ ...params },
|
||
`${this.exportName}_全部费用明细_${currentTime}.xlsx`
|
||
)
|
||
},
|
||
handleExportEach() {
|
||
const formatTime = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||
}
|
||
|
||
const currentTime = formatTime(new Date())
|
||
let data = _.cloneDeep(this.rowData)
|
||
const params = { params: JSON.stringify(data) }
|
||
this.download(
|
||
'material/slt_agreement_info/exportEach',
|
||
{ ...params },
|
||
`${this.exportName}_各费用明细_${currentTime}.xlsx`
|
||
)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.table-container {
|
||
position: relative;
|
||
border: 1px solid #dfe6ec;
|
||
border-radius: 4px;
|
||
overflow: visible; /* 取消滚动条 */
|
||
margin-bottom: 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 表头 */
|
||
.table-header {
|
||
position: relative;
|
||
z-index: 10;
|
||
background-color: #f8f8f9;
|
||
|
||
.header-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: center;
|
||
table-layout: fixed;
|
||
|
||
th {
|
||
background-color: #f8f8f9;
|
||
color: #303133;
|
||
font-weight: bold;
|
||
padding: 8px 6px;
|
||
border: 1px solid #dfe6ec;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-body {
|
||
max-height: 300px;
|
||
overflow: visible;
|
||
overflow-y: auto;
|
||
/* 隐藏滚动条 - Webkit 浏览器 */
|
||
&::-webkit-scrollbar {
|
||
width: 0px;
|
||
background: transparent;
|
||
}
|
||
|
||
/* Firefox */
|
||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||
-ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: center;
|
||
table-layout: fixed;
|
||
|
||
td {
|
||
padding: 8px 6px;
|
||
border: 1px solid #dfe6ec;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
tr:hover td {
|
||
background-color: #f5f7fa;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 表头和表体宽度统一 */
|
||
.header-table,
|
||
.data-table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
/* 文字换行、边框一致 */
|
||
th,
|
||
td {
|
||
box-sizing: border-box;
|
||
word-break: break-word;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
/* 打印优化 */
|
||
@media print {
|
||
@page {
|
||
size: A4 landscape; /* 默认横向打印 */
|
||
margin: 10mm;
|
||
}
|
||
|
||
body {
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
.table-container {
|
||
border: none !important;
|
||
overflow: visible !important;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.table-body {
|
||
overflow: visible !important;
|
||
max-height: none !important;
|
||
}
|
||
|
||
.table-header {
|
||
width: 100% !important;
|
||
margin-right: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
font-size: 12px !important;
|
||
padding: 6px 4px !important;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
::-webkit-scrollbar {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* 响应式（可选） */
|
||
@media (max-width: 1200px) {
|
||
.table-container {
|
||
overflow-x: auto;
|
||
}
|
||
.header-table,
|
||
.data-table {
|
||
min-width: 800px;
|
||
}
|
||
}
|
||
</style>
|