263 lines
8.2 KiB
Vue
263 lines
8.2 KiB
Vue
<template>
|
|
<el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
|
|
<el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px"
|
|
:span-method="objectSpanMethod" v-loading="loading">
|
|
<!-- <el-table-column label="四川省国有资产经营投资管理有限责任公司-->
|
|
<!-- 科技创新项目人工成本分摊明细表" align="center">-->
|
|
<el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
|
|
:fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
|
|
:width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
|
|
<template #default="scope">
|
|
<template v-if="column.children">
|
|
<el-table-column v-for="childColumn in column.children"
|
|
:prop="column.prop + '.'+ childColumn.prop"
|
|
:label="childColumn.label"
|
|
:width="childColumn.prop === 'subtotal' ? 160 : 130">
|
|
<template #default="columnScope">
|
|
{{ columnScope.row[column.prop][childColumn.prop] }}
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<template v-else>
|
|
<template
|
|
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length- 1) !== scope.$index">
|
|
{{ getTotalSeparation(scope.row, column.prop) }}
|
|
</template>
|
|
<template v-else>
|
|
{{ scope.row[column.prop] }}
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- </el-table-column>-->
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import {getResearchUser, getAllocationDetailList, getAllocationDetails} from "@/api/expense-manage";
|
|
import {ElNotification} from "element-plus";
|
|
import {exportExcel} from "@/utils/export-excel";
|
|
|
|
import {toThousands} from '@/utils/changePrice.js'
|
|
|
|
const route = useRoute()
|
|
const tableIns = ref()
|
|
const reportTable = ref({});
|
|
const columnInfo = ref([])
|
|
const monthConcat = new Map()
|
|
const tableData = ref([])
|
|
const loading = ref(false)
|
|
const researchOptions = ref([])
|
|
|
|
// const getSummaries = (param) => {
|
|
// const {columns, data} = param
|
|
// const sums = []
|
|
// columns.forEach((column, index) => {
|
|
// if (index === 1) {
|
|
// sums[index] = '合计'
|
|
// }
|
|
// // else if (index == (columns.length - 1)) {//分摊金额总计
|
|
// // const values = data.map((item) => {
|
|
// // // Number()
|
|
// // console.log('column.property',column.property)
|
|
// // console.log('item]',item)
|
|
// // })
|
|
// // 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] = '-'
|
|
// // }
|
|
// // }
|
|
// // else if (index == (columns.length - 2)) {//分摊金额合计
|
|
// // const values = data.map((item) => Number(item[column.property]))
|
|
// // console.log('values',values)
|
|
// // 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] = '-'
|
|
// // }
|
|
// // }
|
|
// const parts = column.property.split('.');
|
|
// if (column.property.startsWith('personInfo') && parts[1] === 'separationAmount') {
|
|
// console.log('column',column,index)
|
|
// const values = data.map((item) => {
|
|
// // console.log('parts[0]',parts)
|
|
// // console.log(item[parts[0]])
|
|
// })
|
|
// // console.log('values',values)
|
|
// 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] = '-'
|
|
// }
|
|
// } else {
|
|
// if (column.property.startsWith('personInfo') && parts[1] === 'subtotal') {
|
|
// const values = data.map((item) => Number(item[parts[0]].subtotal))
|
|
// 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 objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
|
|
if (columnIndex === 0) {
|
|
if (monthConcat.has(rowIndex)) {
|
|
return {
|
|
rowspan: monthConcat.get(rowIndex),
|
|
colspan: 1,
|
|
}
|
|
} else {
|
|
return {
|
|
rowspan: 0,
|
|
colspan: 0,
|
|
}
|
|
}
|
|
} else {
|
|
let length = Object.keys(row).length
|
|
if (length > 5) {
|
|
if (concatColumn(columnIndex, length)) {
|
|
if (rowIndex % 5 === 0) {
|
|
return {
|
|
rowspan: 5,
|
|
colspan: 1,
|
|
}
|
|
} else {
|
|
return {
|
|
rowspan: 0,
|
|
colspan: 0,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
const getTotalSeparation = (row, prop) => {
|
|
let totalSeparation = 0.00
|
|
for (let key of Object.keys(row)) {
|
|
if (key.startsWith('personInfo')) {
|
|
let value = prop === 'totalSeparation' ? row[key].separationAmount : row[key].subtotal
|
|
if ("/" !== value) {
|
|
try {
|
|
totalSeparation += parseFloat(value)
|
|
} catch (e) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (totalSeparation !== 0) {
|
|
return totalSeparation.toFixed(2);
|
|
} else {
|
|
return "/"
|
|
}
|
|
}
|
|
|
|
const concatColumn = (columnIndex, length) => {
|
|
let columnLength = 5 + (length - 5) * 5
|
|
if (columnIndex === 1
|
|
|| columnIndex === columnLength - 1) {
|
|
return true;
|
|
}
|
|
for (let i = 0; i < length - 5; i++) {
|
|
if (columnIndex === 4 + (i * 5)
|
|
|| columnIndex === 5 + (i * 5)
|
|
|| columnIndex === 7 + (i * 5)) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
const init = () => {
|
|
loading.value = true
|
|
getAllocationDetails().then(res => {
|
|
columnInfo.value = res.data.columns
|
|
let tableDataLet = res.data.tableData;
|
|
tableData.value = []
|
|
let rowIndex = 0;
|
|
tableDataLet.forEach((tableDatum, index) => {
|
|
let rowspan = tableDatum.rows.length * 5
|
|
monthConcat.set(rowIndex, rowspan)
|
|
rowIndex += rowspan
|
|
for (const tableDatumElement of tableDatum.rows) {
|
|
tableData.value = tableData.value.concat(tableDatumElement)
|
|
|
|
}
|
|
})
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
const getResearchOptions = async () => {
|
|
const res = await getResearchUser()
|
|
researchOptions.value = res.data
|
|
}
|
|
const getResearchName = (id) => {
|
|
let label = ''
|
|
if (id !== undefined) {
|
|
researchOptions.value.forEach(item => {
|
|
if (item.value == id) {
|
|
label = item.label
|
|
}
|
|
})
|
|
}
|
|
return label
|
|
}
|
|
const search = (val) => {
|
|
tableConfig.params = {
|
|
allocationId: route.query.id,
|
|
...val
|
|
}
|
|
tableIns.value.refresh()
|
|
}
|
|
getResearchOptions()
|
|
init()
|
|
|
|
|
|
const exportTable = () => {
|
|
const $e = reportTable.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)
|
|
}
|
|
</script>
|