maintenance_system/src/views/integratedManage/attendManage/components/renyuanpaiban.vue

<template>
  <div class="schedule-table-container">
    <el-table 
      :data="scheduleData" 
      style="width: 100%" 
      max-height="600"
      stripe
      border
      v-loading="loading"
    >
      <!-- 固定列 -->
      <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
      <el-table-column fixed="left" prop="postName" label="岗位" width="120" align="center" />
      <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
      
      <!-- 日期列 - 纵向显示号数和星期几 -->
      <el-table-column 
        v-for="(dateInfo, index) in currentMonthDates" 
        :key="index" 
        :prop="`day${index + 1}`" 
        width="80"
        align="center"
      >
        <template #header>
          <div class="vertical-header">
            <div class="date-number">{{ dateInfo.date }}</div>
            <div class="week-day">{{ dateInfo.weekDay }}</div>
          </div>
        </template>
        <template #default="scope">
          <div 
            class="schedule-cell" 
            :class="getShiftClass(scope.row[`day${index + 1}`])"
            @click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
          >
            {{ formatShiftText(scope.row[`day${index + 1}`]) }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <!-- <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';
import { getCurrentMonthDates, getMonthDates } from '@/utils/getDate';
import { ElMessage } from 'element-plus';

// 定义排班类型接口
interface UserTypePair {
  schedulingDate: string;
  schedulingType: string;
  schedulingTypeName: string;
  // 可能还有其他字段
  [key: string]: any;
}

// 定义员工排班信息接口
interface ScheduleItem {
  opsUserId: number;
  opsUserName: string;
  durationCount: number;
  postName: string;
  userTypePairs: UserTypePair[];
  // 可能还有其他字段
  [key: string]: any;
}

// 定义日期信息接口
interface DateInfo {
  date: number;
  weekDay: string;
  fullDate: string;
  year: number;
  month: number;
}

// 定义表格行数据接口
interface TableRowData {
  opsUserId: number;
  name: string;
  postName: string;
  weeklyHours: number;
  [key: string]: any; // 动态添加day1, day2等字段
}

// 定义props接收排班数据
const props = defineProps<{
  scheduleList: ScheduleItem[];
  loading?: boolean;
  // 可选：指定要显示的月份
  targetMonth?: { year: number; month: number };
}>();

const emit = defineEmits<{
  'edit-schedule': [rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any];
  'page-change': [currentPage: number, pageSize: number];
}>();

// 排班类型与样式的映射关系
const shiftConfig = {
  '早班': { color: '#67c23a', className: 'morning-shift' },
  '中班': { color: '#e6a23c', className: 'afternoon-shift' },
  '晚班': { color: '#409eff', className: 'evening-shift' },
  '休息': { color: '#909399', className: 'rest-day' },
};

// 获取当前月的日期信息
const currentMonthDates = ref<(DateInfo & { year: number; month: number })[]>([]);

// 分页相关状态
const currentPage = ref(1);
const pageSize = ref(10);
const total = computed(() => props.scheduleList ? props.scheduleList.length : 0);

// 格式化排班文本，支持多排班情况
const formatShiftText = (shiftData: any): string => {
  if (!shiftData) return '休息';
  
  // 如果是字符串，直接返回
  if (typeof shiftData === 'string') {
    return shiftData;
  }
  
  // 如果是数组，返回第一个排班类型
  if (Array.isArray(shiftData)) {
    return shiftData.length > 0 ? shiftData[0].schedulingTypeName || '休息' : '休息';
  }
  
  // 如果是对象，返回排班类型名称
  if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
    return shiftData.schedulingTypeName;
  }
  
  return '休息';
};

// 获取排班对应的样式类名
const getShiftClass = (shiftData: any): string => {
  const shiftText = formatShiftText(shiftData);
  return shiftConfig[shiftText as keyof typeof shiftConfig]?.className || 'unknown-shift';
};

// 生成排班数据
const scheduleData = computed((): TableRowData[] => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  
  // 确保 props.scheduleList 存在
  const scheduleList = props.scheduleList || [];
  
  // 如果没有数据且loading为false，返回空数组显示空状态
  if (scheduleList.length === 0 && !props.loading) {
    return [];
  }
  
  // 处理排班数据
  return scheduleList.map((item: ScheduleItem) => {
    const rowData: TableRowData = {
      opsUserId: item.opsUserId,
      name: item.opsUserName || `未知员工${item.opsUserId}`,
      postName: item.postName || '未知岗位',
      weeklyHours: item.durationCount || 0
    };
    
    // 为当月每一天生成排班数据
    currentMonthDates.value.forEach((dateInfo, dayIndex) => {
      // 格式化日期为 YYYY-MM-DD
      const dateKey = `${dateInfo.year}-${String(dateInfo.month).padStart(2, '0')}-${String(dateInfo.date).padStart(2, '0')}`;
      
      // 从userTypePairs中查找对应日期的所有排班信息
      let daySchedule = null;
      if (item.userTypePairs && Array.isArray(item.userTypePairs)) {
        // 查找对应日期的所有排班信息
        const dateSchedules = item.userTypePairs.filter(pair => pair.schedulingDate === dateKey);
        
        // 如果有多个排班，也返回，方便后续扩展显示多个排班
        daySchedule = dateSchedules.length > 0 ? dateSchedules : null;
      }
      
      // 如果找到排班信息，存储原始数据；如果没有，设置为'休息'
      rowData[`day${dayIndex + 1}`] = daySchedule || '休息';
    });
    
    return rowData;
  }).slice(startIndex, endIndex);
});

// 更新日期列表
const updateDates = () => {
  if (props.targetMonth) {
    // 使用指定的月份
    const dates = getMonthDates(props.targetMonth.year, props.targetMonth.month - 1); // getMonthDates的month参数是0-11
    currentMonthDates.value = dates.map(date => ({
      ...date,
      year: props.targetMonth!.year,
      month: props.targetMonth!.month
    }));
  } else {
    // 使用当前月份
    const today = new Date();
    const dates = getCurrentMonthDates();
    currentMonthDates.value = dates.map(date => ({
      ...date,
      year: today.getFullYear(),
      month: today.getMonth() + 1
    }));
  }
};

// 分页大小变化处理
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1; // 重置为第一页
  emit('page-change', currentPage.value, pageSize.value);
};

// 当前页码变化处理
const handleCurrentChange = (current: number) => {
  currentPage.value = current;
  emit('page-change', currentPage.value, pageSize.value);
};

// 处理单元格点击事件
const handleCellClick = (rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any) => {
  // 获取当前单元格的排班数据
  const cellData = rowData[`day${columnData.index + 1}`];
  const shiftText = formatShiftText(cellData);
  
  // 如果是休息状态，显示提示信息，不触发编辑事件
  if (shiftText === '休息') {
    ElMessage.warning('请前往管理考勤增加排班');
    return;
  }
  
  // 非休息状态，触发编辑事件
  emit('edit-schedule', rowData, columnData, cellEvent);
};

// 组件挂载时初始化
onMounted(() => {
  updateDates();
});

// 监听目标月份变化，更新日期列表
watch(() => props.targetMonth, () => {
  updateDates();
}, { deep: true });

// 监听排班数据变化，重置页码
watch(() => props.scheduleList, () => {
  currentPage.value = 1;
}, { deep: true });
</script>

<style scoped>
.schedule-table-container {
  overflow-x: auto;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

/* 优化滚动条样式 */
.schedule-table-container::-webkit-scrollbar {
  height: 8px;
}

.schedule-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.schedule-table-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.schedule-table-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 优化表格样式 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table__header-wrapper th) {
  background-color: #fafafa;
  font-weight: 500;
  padding: 0 !important;
  height: auto !important;
  min-height: 60px;
}

:deep(.el-table__body-wrapper) {
  overflow-x: visible;
}

/* 纵向表头样式 */
.vertical-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 0;
}

.date-number {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.week-day {
  font-size: 12px;
  color: #666;
}

/* 排班单元格样式 */
.schedule-cell {
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  border-radius: 4px;
}

.schedule-cell:hover {
  background-color: #f5f7fa;
  transform: scale(1.05);
}

/* 排班类型样式 */
.morning-shift {
  color: #67c23a; /* 早班 - 绿色 */
  font-weight: 500;
}

.afternoon-shift {
  color: #e6a23c; /* 中班 - 橙色 */
  font-weight: 500;
}

.evening-shift {
  color: #409eff; /* 晚班 - 蓝色 */
  font-weight: 500;
}

.rest-day {
  color: #909399; /* 休息 - 灰色 */
}


.unknown-shift {
  color: #333; /* 未知类型 - 默认黑色 */
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 分页组件样式优化 */
:deep(.el-pagination) {
  font-size: 14px;
}

/* 加载状态样式优化 */
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
}
</style>