GEAR-OA/gear-ui3/src/views/peoples/attendance/components/snapshotDetail.vue

<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="attendanceSummaryDetailList">
      <el-table-column label="用户" align="center" prop="userId" />
      <el-table-column label="正常出勤小时数" align="center" prop="normalHours" />
      <el-table-column label="加班小时数" align="center" prop="overtimeHours" />
      <el-table-column label="出差小时数" align="center" prop="travelHours" />
    </el-table>
  </div>
</template>

<script setup name="AttendanceSummaryDetail">
import { ref, watch } from "vue";
import { listAttendanceSummaryDetail } from "@/api/oa/attendanceSummaryDetail";

const props = defineProps({
  // 考勤汇总ID
  summaryId: {
    type: String,
    required: true
  }
});

const loading = ref(false);
const attendanceSummaryDetailList = ref([]);  // 使用ref替代computed

// 监听summaryId变化
watch(() => props.summaryId, async (newVal) => {
  if (newVal) {
    try {
      loading.value = true;
      // 调用API获取数据
      const response = await listAttendanceSummaryDetail({
        summaryId: newVal,
        pageSize: 9999
      });
      // 先将数字全部转为整数，再判断如果是0转为空字符串
      
      response.rows.forEach(item => {
        const normalHours = parseInt(item.normalHours);
        const overtimeHours = parseInt(item.overtimeHours);
        const travelHours = parseInt(item.travelHours);
        item.normalHours = normalHours === 0 ? '' : normalHours;
        item.overtimeHours = overtimeHours === 0 ? '' : overtimeHours;
        item.travelHours = travelHours === 0 ? '' : travelHours;
      });
      attendanceSummaryDetailList.value = response.rows || [];
    } catch (error) {
      console.error("数据获取失败", error);
      attendanceSummaryDetailList.value = [];
    } finally {
      loading.value = false;
    }
  } else {
    attendanceSummaryDetailList.value = [];
  }
}, { immediate: true }); // 立即执行一次获取初始数据
</script>