fix : 分摊详情小计与导出
This commit is contained in:
@@ -14,15 +14,27 @@
|
|||||||
:label="childColumn.label"
|
:label="childColumn.label"
|
||||||
:width="childColumn.prop === 'subtotal' ? 160 : 130">
|
:width="childColumn.prop === 'subtotal' ? 160 : 130">
|
||||||
<template #default="columnScope">
|
<template #default="columnScope">
|
||||||
{{ columnScope.row[column.prop][childColumn.prop] }}
|
<template v-if="(tableData.length -1) !== columnScope.$index">
|
||||||
|
{{
|
||||||
|
columnScope.row[column.prop][childColumn.prop] ? columnScope.row[column.prop][childColumn.prop] : '/'
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ columnScope.row[column.prop][childColumn.prop] }}
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
<!--分摊金额合计与分摊金额总计计算-->
|
||||||
<template
|
<template
|
||||||
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length- 1) !== scope.$index">
|
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length -1) !== scope.$index">
|
||||||
{{ getTotalSeparation(scope.row, column.prop) }}
|
{{ getTotalSeparation(scope.row, column.prop) }}
|
||||||
</template>
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="(tableData.length -1) === scope.$index && (column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost')">
|
||||||
|
{{ getTotalSummary(scope.row, column.prop) }}
|
||||||
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
{{ scope.row[column.prop] }}
|
{{ scope.row[column.prop] }}
|
||||||
</template>
|
</template>
|
||||||
@@ -33,12 +45,10 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
</template>
|
</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'
|
<script setup lang="jsx">
|
||||||
|
import {getResearchUser, getAllocationDetails} from "@/api/expense-manage";
|
||||||
|
import {exportExcel} from "@/utils/export-excel";
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const tableIns = ref()
|
const tableIns = ref()
|
||||||
@@ -49,93 +59,6 @@ const tableData = ref([])
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const researchOptions = ref([])
|
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}) => {
|
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
|
||||||
if (columnIndex === 0) {
|
if (columnIndex === 0) {
|
||||||
if (monthConcat.has(rowIndex)) {
|
if (monthConcat.has(rowIndex)) {
|
||||||
@@ -151,8 +74,9 @@ const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let length = Object.keys(row).length
|
let length = Object.keys(row).length
|
||||||
|
console.log(length)
|
||||||
if (length > 5) {
|
if (length > 5) {
|
||||||
if (concatColumn(columnIndex, length)) {
|
if (concatColumn(columnIndex, length, rowIndex)) {
|
||||||
if (rowIndex % 5 === 0) {
|
if (rowIndex % 5 === 0) {
|
||||||
return {
|
return {
|
||||||
rowspan: 5,
|
rowspan: 5,
|
||||||
@@ -174,7 +98,7 @@ const getTotalSeparation = (row, prop) => {
|
|||||||
let totalSeparation = 0.00
|
let totalSeparation = 0.00
|
||||||
for (let key of Object.keys(row)) {
|
for (let key of Object.keys(row)) {
|
||||||
if (key.startsWith('personInfo')) {
|
if (key.startsWith('personInfo')) {
|
||||||
let value = prop === 'totalSeparation' ? row[key].separationAmount : row[key].subtotal
|
let value = prop === 'totalSeparation' ? (row[key].separationAmount ? row[key].separationAmount : 0) : row[key].subtotal
|
||||||
if ("/" !== value) {
|
if ("/" !== value) {
|
||||||
try {
|
try {
|
||||||
totalSeparation += parseFloat(value)
|
totalSeparation += parseFloat(value)
|
||||||
@@ -190,7 +114,33 @@ const getTotalSeparation = (row, prop) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const concatColumn = (columnIndex, length) => {
|
|
||||||
|
const getTotalSummary = (row, prop) => {
|
||||||
|
let key;
|
||||||
|
if (prop === 'totalSeparation') {
|
||||||
|
key = 'separationAmount'
|
||||||
|
} else {
|
||||||
|
key = 'subtotal'
|
||||||
|
}
|
||||||
|
let result = 0
|
||||||
|
for (const rowKey of Object.keys(row)) {
|
||||||
|
if (rowKey.startsWith('personInfo')) {
|
||||||
|
let value = row[rowKey][key]
|
||||||
|
if (value && "/" !== value) {
|
||||||
|
try {
|
||||||
|
result += parseFloat(value)
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result.toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
const concatColumn = (columnIndex, length, rowIndex) => {
|
||||||
|
if (rowIndex === tableData.value.length - 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
let columnLength = 5 + (length - 5) * 5
|
let columnLength = 5 + (length - 5) * 5
|
||||||
if (columnIndex === 1
|
if (columnIndex === 1
|
||||||
|| columnIndex === columnLength - 1) {
|
|| columnIndex === columnLength - 1) {
|
||||||
@@ -205,22 +155,69 @@ const concatColumn = (columnIndex, length) => {
|
|||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
getAllocationDetails().then(res => {
|
getAllocationDetails(route.query.id).then(res => {
|
||||||
columnInfo.value = res.data.columns
|
columnInfo.value = res.data.columns
|
||||||
let tableDataLet = res.data.tableData;
|
let tableDataLet = res.data.tableData;
|
||||||
|
let personInfoKey = []
|
||||||
|
columnInfo.value.forEach(item => {
|
||||||
|
if (item.prop.startsWith('personInfo')) {
|
||||||
|
personInfoKey.push(item.prop)
|
||||||
|
}
|
||||||
|
})
|
||||||
tableData.value = []
|
tableData.value = []
|
||||||
let rowIndex = 0;
|
let rowIndex = 0;
|
||||||
tableDataLet.forEach((tableDatum, index) => {
|
let summary = {
|
||||||
|
month: "",
|
||||||
|
salaryType: '',
|
||||||
|
projectName: "合计",
|
||||||
|
totalSeparation: 10,
|
||||||
|
totalSeparationCost: 10
|
||||||
|
}
|
||||||
|
for (const key of personInfoKey) {
|
||||||
|
summary[key] = {
|
||||||
|
researchDuration: "",
|
||||||
|
separationAmount: 20,
|
||||||
|
subtotal: 20,
|
||||||
|
wagesPayable: "",
|
||||||
|
workday: "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tableDataLet.forEach((tableDatum) => {
|
||||||
let rowspan = tableDatum.rows.length * 5
|
let rowspan = tableDatum.rows.length * 5
|
||||||
monthConcat.set(rowIndex, rowspan)
|
monthConcat.set(rowIndex, rowspan)
|
||||||
rowIndex += rowspan
|
rowIndex += rowspan
|
||||||
for (const tableDatumElement of tableDatum.rows) {
|
for (const tableDatumElement of tableDatum.rows) {
|
||||||
tableData.value = tableData.value.concat(tableDatumElement)
|
tableData.value = tableData.value.concat(tableDatumElement)
|
||||||
|
let row = tableDatumElement[0]
|
||||||
|
for (const key of personInfoKey) {
|
||||||
|
try {
|
||||||
|
if (row[key].subtotal && '/' !== row[key].subtotal) {
|
||||||
|
summary[key].subtotal += parseFloat(row[key].subtotal)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
for (const row of tableData.value) {
|
||||||
|
for (const key of personInfoKey) {
|
||||||
|
try {
|
||||||
|
if (row[key].separationAmount && '/' !== row[key].separationAmount) {
|
||||||
|
summary[key].separationAmount += parseFloat(row[key].separationAmount)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const key of personInfoKey) {
|
||||||
|
summary[key].subtotal = summary[key].subtotal.toFixed(2)
|
||||||
|
summary[key].separationAmount = summary[key].separationAmount.toFixed(2)
|
||||||
|
}
|
||||||
|
monthConcat.set(rowIndex, 1)
|
||||||
|
tableData.value.push(summary)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -229,17 +226,6 @@ const getResearchOptions = async () => {
|
|||||||
const res = await getResearchUser()
|
const res = await getResearchUser()
|
||||||
researchOptions.value = res.data
|
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) => {
|
const search = (val) => {
|
||||||
tableConfig.params = {
|
tableConfig.params = {
|
||||||
allocationId: route.query.id,
|
allocationId: route.query.id,
|
||||||
@@ -257,6 +243,6 @@ const exportTable = () => {
|
|||||||
if (!$table) {
|
if (!$table) {
|
||||||
$table = $e
|
$table = $e
|
||||||
}
|
}
|
||||||
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表",2)
|
exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -7,8 +7,9 @@ import XLSX from "xlsx-style-vite";
|
|||||||
* @param $table 表格html dom元素
|
* @param $table 表格html dom元素
|
||||||
* @param columnLength 列长度
|
* @param columnLength 列长度
|
||||||
* @param excelName 导出文件名称
|
* @param excelName 导出文件名称
|
||||||
|
* @param bigWidthIndex 更宽列的索引
|
||||||
*/
|
*/
|
||||||
export function exportExcel($table, columnLength, excelName,bigWidth) {
|
export function exportExcel($table, columnLength, excelName, bigWidthIndex) {
|
||||||
//从el-table表生成工作簿对象
|
//从el-table表生成工作簿对象
|
||||||
//使用原始的格式,保留表格中的格式如%、小数末尾的0等
|
//使用原始的格式,保留表格中的格式如%、小数末尾的0等
|
||||||
let workbook = utils.table_to_book($table, {
|
let workbook = utils.table_to_book($table, {
|
||||||
@@ -16,7 +17,7 @@ export function exportExcel($table, columnLength, excelName,bigWidth) {
|
|||||||
});
|
});
|
||||||
//列宽,需要导出的表格有多少列这里的i就小于多少
|
//列宽,需要导出的表格有多少列这里的i就小于多少
|
||||||
for (let i = 1; i < columnLength; i++) {
|
for (let i = 1; i < columnLength; i++) {
|
||||||
if(i==bigWidth){
|
if (i === bigWidthIndex) {
|
||||||
workbook.Sheets.Sheet1["!cols"].push({wpx: 300});
|
workbook.Sheets.Sheet1["!cols"].push({wpx: 300});
|
||||||
}
|
}
|
||||||
workbook.Sheets.Sheet1["!cols"].push({wpx: 100});
|
workbook.Sheets.Sheet1["!cols"].push({wpx: 100});
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="researchPersonnel" label="研发人员" width="230">
|
<el-table-column prop="researchPersonnel" label="研发人员" width="230">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-form-item prop="time" :rules="scope.row.researchPersonnel?'1':rules.researchPersonnel">
|
<el-form-item prop="researchPersonnel">
|
||||||
{{ chooseUserInfo() }}
|
{{ chooseUserInfo() }}
|
||||||
<el-button @click="showPersonnelPicker">
|
<el-button @click="showPersonnelPicker">
|
||||||
{{ chooseUserInfo() == null ? '请选择研发人员' : '更改' }}
|
{{ chooseUserInfo() == null ? '请选择研发人员' : '更改' }}
|
||||||
@@ -183,7 +183,7 @@ const rules = reactive({
|
|||||||
shareName: [{required: true, message: '请输入分摊名称', trigger: 'blur'}],
|
shareName: [{required: true, message: '请输入分摊名称', trigger: 'blur'}],
|
||||||
apportionmentMonth: [{required: true, message: '请选择月份', trigger: 'blur'}],
|
apportionmentMonth: [{required: true, message: '请选择月份', trigger: 'blur'}],
|
||||||
projectId: [{required: true, message: '请选择项目名称', trigger: 'blur'}],
|
projectId: [{required: true, message: '请选择项目名称', trigger: 'blur'}],
|
||||||
researchPersonnel: [{required: true, message: '请选择研发人员', trigger: 'blur'}],
|
// researchPersonnel: [{required: true, message: '请选择研发人员', trigger: 'blur'}],
|
||||||
wagesPayable: [{required: true, message: '请输入应发工资', trigger: 'blur'}],
|
wagesPayable: [{required: true, message: '请输入应发工资', trigger: 'blur'}],
|
||||||
performance: [{required: true, message: '请输入绩效', trigger: 'blur'}],
|
performance: [{required: true, message: '请输入绩效', trigger: 'blur'}],
|
||||||
reserveFund: [{required: true, message: '请输入公积金', trigger: 'blur'}],
|
reserveFund: [{required: true, message: '请输入公积金', trigger: 'blur'}],
|
||||||
@@ -299,7 +299,6 @@ const handleSubmit = (instance) => {
|
|||||||
// }
|
// }
|
||||||
formData.value.tableData.forEach(item => {
|
formData.value.tableData.forEach(item => {
|
||||||
item.projectName = getProjectName(item.projectId)
|
item.projectName = getProjectName(item.projectId)
|
||||||
// item.researchPersonnel
|
|
||||||
})
|
})
|
||||||
let params = {
|
let params = {
|
||||||
shareName: formData.value.shareName,
|
shareName: formData.value.shareName,
|
||||||
|
|||||||
Reference in New Issue
Block a user