bonus-ui/src/views/material/cost/component/examDetail.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>