mosr-web/src/components/DetailComponent/ExpenseDetail.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">
              <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";
import {ElNotification} from "element-plus";

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 => {
    if(res.code!==1000){
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
    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>