106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
Vue
<template>
|
|
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
|
|
<el-table ref="table" :data="tableData" style="width: 100%;height: 479px" :show-summary="true" border
|
|
:summary-method="getSummaries" v-loading="loading" :header-cell-style="{background:'#f5f7fa'}">
|
|
<el-table-column type="index" label="序号" align="center" width="60"/>
|
|
<el-table-column prop="projectName" label="项目名称" align="center"/>
|
|
<el-table-column prop="projectCost" label="费用性质" align="center">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.projectCost !== null">
|
|
<Tag dictType="project_cost" :value="scope.row.projectCost"/>
|
|
</div>
|
|
<div v-else>--</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="researchStage" label="项目阶段" align="center">
|
|
<template #default="scope">
|
|
<div
|
|
v-if="scope.row.researchStage !== null && scope.row.researchStage !== null && scope.row.researchStage !== undefined">
|
|
<Tag dictType="research_stage" :value="scope.row.researchStage"/>
|
|
</div>
|
|
<div v-else>--</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="afterTax" label="分摊金额" align="center">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.afterTax !== null">
|
|
<!-- {{ toThousands(scope.row.afterTax) }}-->
|
|
{{ scope.row.afterTax }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {toThousands} from '@/utils/changePrice.js'
|
|
import {exportExcel} from "@/utils/export-excel";
|
|
import {getAllocationSummaryDetails} from "@/api/expense-manage";
|
|
|
|
const tableData = ref([{
|
|
id: '12987122',
|
|
name: 'Tom',
|
|
amount1: '234',
|
|
amount2: '3.2',
|
|
amount3: 10,
|
|
},
|
|
{
|
|
id: '12987123',
|
|
name: 'Tom',
|
|
amount1: '165',
|
|
amount2: '4.43',
|
|
amount3: 12,
|
|
}])
|
|
const loading = ref(false)
|
|
const table = ref()
|
|
const route = useRoute()
|
|
const getSummaries = (param) => {
|
|
const {columns, data} = param
|
|
const sums = []
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = '小计'
|
|
} else if (index === 4) {
|
|
const values = data.map((item) => Number(item[column.property]))
|
|
if (!values.every((value) => Number.isNaN(value))) {
|
|
sums[index] = `${values.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!Number.isNaN(value)) {
|
|
return prev + curr
|
|
} else {
|
|
return prev
|
|
}
|
|
}, 0)}`
|
|
// sums[index] = toThousands(sums[index])
|
|
} else {
|
|
sums[index] = '-'
|
|
}
|
|
}
|
|
})
|
|
return sums
|
|
}
|
|
const exportTable = () => {
|
|
const $e = table.value.$el
|
|
let $table = $e.querySelector('.el-table__fixed')
|
|
if (!$table) {
|
|
$table = $e
|
|
}
|
|
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目费用分摊表",2)
|
|
}
|
|
const init = () => {
|
|
loading.value = true
|
|
let params = {
|
|
allocationId: route.query.id
|
|
}
|
|
getAllocationSummaryDetails(params).then(res => {
|
|
tableData.value = res.data
|
|
loading.value = false
|
|
})
|
|
}
|
|
init()
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|