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
    >
      <!-- 固定列 -->
      <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
      <el-table-column fixed="left" prop="position" 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>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';

// 员工列表
const employees = [
  { name: '张三', position: '水泥工', weeklyHours: 142 },
  { name: '李四', position: '电工', weeklyHours: 138 },
  { name: '王五', position: '木工', weeklyHours: 145 },
  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
  { name: '钱七', position: '油漆工', weeklyHours: 135 },
  { name: '孙八', position: '瓦工', weeklyHours: 143 },
  { name: '周九', position: '钳工', weeklyHours: 137 },
  { name: '吴十', position: '管道工', weeklyHours: 139 },
  { name: '郑十一', position: '焊工', weeklyHours: 141 },
  { name: '王十二', position: '起重工', weeklyHours: 136 }
];

// 排班类型
const shifts = ['早班', '中班', '晚班', '休息'];

// 获取当前月的日期信息
const currentMonthDates = ref<any[]>([]);

// 计算当前月份并生成日期信息
const getCurrentMonthDates = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth(); // 0-11
  
  // 获取当月第一天
  const firstDay = new Date(year, month, 1);
  // 获取当月最后一天
  const lastDay = new Date(year, month + 1, 0);
  // 当月总天数
  const daysInMonth = lastDay.getDate();
  
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  const dates = [];
  
  // 生成当月所有日期信息
  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i);
    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
    dates.push({
      date: i,
      weekDay: weekdays[weekDayIndex],
      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
    });
  }
  
  return dates;
};

// 生成排班数据
const scheduleData = computed(() => {
  return Array.from({ length: 20 }, (_, index) => {
    // 循环使用员工数据
    const employee = employees[index % employees.length];
    
    // 为每行生成不同的排班组合
    const rowData = {
      name: employee.name,
      position: employee.position,
      weeklyHours: employee.weeklyHours
    };
    
    // 为当月每一天生成排班数据
    currentMonthDates.value.forEach((_, dayIndex) => {
      // 使用不同的种子生成略有变化的排班模式
      const seed = (index * 3 + dayIndex + 1) % shifts.length;
      rowData[`day${dayIndex + 1}`] = shifts[seed];
    });
    
    return rowData;
  });
});

// 组件挂载时获取当前月数据
onMounted(() => {
  currentMonthDates.value = getCurrentMonthDates();
});
</script>

<style scoped>
.schedule-table-container {
  overflow-x: auto;
}

/* 优化滚动条样式 */
.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;
}
</style>