cnbg_mp/src/components/table/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 { getWmtasktypePageApi } from '@/service/modules/objectivesList'
import { onMounted, ref } from 'vue'

const porops = defineProps({
  planScore: Number
})

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

const getList = async () => {
  const obj = {
    current: 1,
    size: 100,
    status: '3'
  }
  const res = await getWmtasktypePageApi(obj)
  tableData.value = res?.data?.records.map((item: any) => {
    if (item.delFlag == 0) {
      const obj = {
        qty: 0,
        subtotal: 0,
        editable: false,
        baseId: item.baseId,
        percentage: 0,
        taskTypeName: item.taskTypeName,
        score: item.score,
        taskTypeId: item.id
      }
      return obj
    }
  })
}

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
  }
}

onMounted(() => {
  getList()
})

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

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

const change = (detail: any, index: number, row: any) => {
  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 allSubtotal = tableData.value.reduce((accumulator, currentValue) => {
    if (currentValue.baseId === row.baseId) {
      return accumulator + currentValue.subtotal
    }
    return accumulator
  }, 0)

  const percentage = calculatePercentage(allSubtotal, porops.planScore)
  tableData.value.forEach((item) => {
    if (item.baseId === row.baseId) {
      item.percentage = percentage
    }
  })
}

const getData = () => {
  return tableData.value
}
defineExpose({ getData })
</script>

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