From 36c5b04dbc92a71c36aaad41734e6c86c1270447 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Mon, 24 Jun 2024 13:39:30 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E6=91=8A/?=
 =?UTF-8?q?=E8=B5=84=E9=87=91=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AllocationSummaryDetailMobile.vue         | 105 ++++++++
 .../mobledetail/ExpenseDetailMobile.vue       | 247 ++++++++++++++++++
 .../mobledetail/ShareDetailMobile.vue         |   7 +-
 3 files changed, 357 insertions(+), 2 deletions(-)
 create mode 100644 src/views/project-management/mobledetail/AllocationSummaryDetailMobile.vue
 create mode 100644 src/views/project-management/mobledetail/ExpenseDetailMobile.vue

diff --git a/src/views/project-management/mobledetail/AllocationSummaryDetailMobile.vue b/src/views/project-management/mobledetail/AllocationSummaryDetailMobile.vue
new file mode 100644
index 0000000..6cdb330
--- /dev/null
+++ b/src/views/project-management/mobledetail/AllocationSummaryDetailMobile.vue
@@ -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>
diff --git a/src/views/project-management/mobledetail/ExpenseDetailMobile.vue b/src/views/project-management/mobledetail/ExpenseDetailMobile.vue
new file mode 100644
index 0000000..1ba2212
--- /dev/null
+++ b/src/views/project-management/mobledetail/ExpenseDetailMobile.vue
@@ -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>
diff --git a/src/views/project-management/mobledetail/ShareDetailMobile.vue b/src/views/project-management/mobledetail/ShareDetailMobile.vue
index 3578ed3..d58d183 100644
--- a/src/views/project-management/mobledetail/ShareDetailMobile.vue
+++ b/src/views/project-management/mobledetail/ShareDetailMobile.vue
@@ -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()