Merge pull request 'master' (#395) from master into prod
Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/395
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
<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'}" :scrollbar-always-on="true">
|
||||
<el-table-column type="index" label="序号" align="center" width="60"/>
|
||||
<el-table-column prop="projectName" label="项目名称" align="center" min-width="170"/>
|
||||
<el-table-column prop="projectCost" label="费用性质" align="center" min-width="100">
|
||||
<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" min-width="100">
|
||||
<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>
|
||||
247
src/views/project-management/mobledetail/ExpenseDetailMobile.vue
Normal file
247
src/views/project-management/mobledetail/ExpenseDetailMobile.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<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"
|
||||
: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">
|
||||
<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>
|
||||
</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-if="(tableData.length -1) === scope.$index && (column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost')">
|
||||
{{ getTotalSummary(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, getAllocationDetails} from "@/api/expense-manage";
|
||||
import {exportExcel} from "@/utils/export-excel";
|
||||
|
||||
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 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
|
||||
console.log(length)
|
||||
if (length > 5) {
|
||||
if (concatColumn(columnIndex, length, rowIndex)) {
|
||||
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].separationAmount : 0) : row[key].subtotal
|
||||
if ("/" !== value) {
|
||||
try {
|
||||
totalSeparation += parseFloat(value)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (totalSeparation !== 0) {
|
||||
return totalSeparation.toFixed(2);
|
||||
} else {
|
||||
return "/"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
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(route.query.id).then(res => {
|
||||
columnInfo.value = res.data.columns
|
||||
let tableDataLet = res.data.tableData;
|
||||
let personInfoKey = []
|
||||
columnInfo.value.forEach(item => {
|
||||
if (item.prop.startsWith('personInfo')) {
|
||||
personInfoKey.push(item.prop)
|
||||
}
|
||||
})
|
||||
tableData.value = []
|
||||
let rowIndex = 0;
|
||||
let summary = {
|
||||
month: "",
|
||||
salaryType: '',
|
||||
projectName: "合计",
|
||||
totalSeparation: 10,
|
||||
totalSeparationCost: 10
|
||||
}
|
||||
for (const key of personInfoKey) {
|
||||
summary[key] = {
|
||||
researchDuration: "",
|
||||
separationAmount: 0,
|
||||
subtotal: 0,
|
||||
wagesPayable: "",
|
||||
workday: "",
|
||||
}
|
||||
}
|
||||
tableDataLet.forEach((tableDatum) => {
|
||||
let rowspan = tableDatum.rows.length * 5
|
||||
monthConcat.set(rowIndex, rowspan)
|
||||
rowIndex += rowspan
|
||||
for (const tableDatumElement of tableDatum.rows) {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
const getResearchOptions = async () => {
|
||||
const res = await getResearchUser()
|
||||
researchOptions.value = res.data
|
||||
}
|
||||
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>
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<baseTitle title="费用分摊详情"></baseTitle>
|
||||
<el-form :model="formData" ref="form" class="query-form" label-width="auto">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
@@ -15,10 +16,10 @@
|
||||
</el-form>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="分摊明细" name="first">
|
||||
<expense-detail/>
|
||||
<expense-detail-mobile/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="分摊汇总" name="second" v-loading="loading">
|
||||
<allocation-summary-detail/>
|
||||
<allocation-summary-detail-mobile/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-if="shareData.taskId">
|
||||
@@ -62,6 +63,8 @@ import {ElNotification} from "element-plus";
|
||||
import {useProcessStore} from '@/stores/processStore.js';
|
||||
import {getAllocationDetail} from "@/api/expense-manage";
|
||||
import OpinionMoblie from "./OpinionMoblie.vue";
|
||||
import AllocationSummaryDetailMobile from "./AllocationSummaryDetailMobile.vue";
|
||||
import ExpenseDetailMobile from "./ExpenseDetailMobile.vue";
|
||||
|
||||
const changeDiagram = ref(false)
|
||||
const processStore = useProcessStore()
|
||||
|
||||
Reference in New Issue
Block a user