cnbg_mp/src/pages-sub-service-mangement/serviceDeliveryAdd/components/TableData.vue

<template>
  <view class="table">
    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" width="50">序号</uni-th>
        <uni-th align="center">上级服务类型</uni-th>
        <uni-th align="center" width="50">占比（%）</uni-th>
        <uni-th align="center">任务类型</uni-th>
        <uni-th align="center" width="50">积分值</uni-th>
        <uni-th align="center" width="50">任务个数</uni-th>
        <uni-th align="center" width="80">任务积分值</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, index) in tableData" :key="item?.taskTypeId" index>
        <uni-td>{{ index + 1 }}</uni-td>
        <uni-td>{{ showInfo(item, index) }}</uni-td>
        <uni-td>
          <text
            :class="{
              error: item.score != 0 && (item.percentage < 25 || item.percentage > 50)
            }"
            >{{ showPercentage(item, index) }}</text
          >
        </uni-td>
        <uni-td>{{ item.taskTypeName }}</uni-td>
        <uni-td>{{ item.score }}</uni-td>
        <uni-td>
          <input type="number" @blur="(e) => change(e, index, item)" v-model="item.qty" />
        </uni-td>
        <uni-td>{{ item.subtotal }}</uni-td>
      </uni-tr>
      <!-- 结尾 -->
      <uni-tr>
        <uni-td>总计</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>{{ totalQty }}</uni-td>
        <uni-td>{{ totalsubtotal }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref<any[]>([])

const totalQty = ref(0)
const totalsubtotal = ref(0)

const change = (detail: any, index: number) => {
  tableData.value[index].subtotal = tableData.value[index].qty * tableData.value[index].score
  totalQty.value = tableData.value.reduce((sum, row) => Number(sum) + Number(row.qty), 0)
  totalsubtotal.value = tableData.value.reduce((sum, row) => Number(sum) + Number(row.subtotal), 0)
}

const setData = (data: any[], planDetails: any, planScore: number) => {
  totalQty.value = planDetails.qty
  totalsubtotal.value = planDetails.total
  tableData.value = data
  let arr = tableData.value.map((item) => item.baseId)
  arr = [...new Set(arr)]
  for (let currBaseId of arr) {
    const allSubtotal = tableData.value.reduce((accumulator, currentValue) => {
      if (currentValue.baseId === currBaseId) {
        return accumulator + currentValue.subtotal
      }
      return accumulator
    }, 0)

    const percentage = calculatePercentage(allSubtotal, planScore)

    tableData.value.forEach((item) => {
      if (item.baseId === currBaseId) {
        item.percentage = percentage
      }
    })
  }
}
const getData = () => {
  return tableData.value
}

const calculatePercentage = (part: any, total: any) => {
  if (total === 0) return 0 // 避免除以0错误
  return Number(((part / total) * 100).toFixed(2))
}

const showInfo = (item: any, index: number) => {
  if (index === 0) {
    return item.baseId
  }
  if (tableData.value[index - 1].baseId === item.baseId) {
    return ''
  } else {
    return item.baseId
  }
}
const showPercentage = (item: any, index: number) => {
  if (index === 0) {
    return item.percentage
  }
  if (tableData.value[index - 1].baseId === item.baseId) {
    return ''
  } else {
    return item.percentage
  }
}

defineExpose({ setData, getData })
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20rpx;
  width: 640rpx;
  min-height: 300rpx;
  background-color: #fff;
  border-radius: 12rpx;
}
</style>