# 人员排班请假休息联动

## 涉及页面

- 人员排班管理页面（月度排班查看）

## API

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /personalShift/page | 人员排班月度分页查询（已新增请假休息联动） |

**请求参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| size | Integer | 是 | 分页大小 |
| current | Integer | 是 | 当前页码 |
| time | String | 是 | 时间（格式：yyyy-MM-dd HH:mm:ss） |
| userName | String | 否 | 员工姓名（模糊查询） |
| sysDeptId | Integer | 否 | 部门ID |

**响应结构变化：**

```json
{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "page": {
      "records": [
        {
          "name": "员工姓名",
          "userId": "员工ID",
          "department": "部门",
          "shiftTime": null,
          "monthlyAttendance": {
            "早": 5,
            "中": 3,
            "休息": 2,
            "totalAttendance": 8
          },
          "list": [
            {
              "id": "排班记录ID",
              "shift": "早",
              "time": "2026-06-01 00:00:00",
              "isHoliday": false
            },
            {
              "id": "排班记录ID",
              "shift": "休息",
              "time": "2026-06-05 00:00:00",
              "isHoliday": true
            }
          ],
          "holidayDates": ["2026-06-05", "2026-06-06"]
        }
      ]
    },
    "headerList": [...]
  }
}
```

### 新增字段说明

| 字段 | 类型 | 说明 |
|------|------|------|
| list[].isHoliday | Boolean | 该日期是否为审核通过的请假日期 |
| list[].shift | String | 如有请假则显示"休息"，否则显示原班次 |
| holidayDates | List<String> | 该员工当月所有审核通过的请假日期列表（格式：yyyy-MM-dd） |
| monthlyAttendance.休息 | Integer | 当月请假休息天数统计 |

## 前端修改点

### 1. 表格渲染逻辑修改

在渲染排班表格时，需要根据 `isHoliday` 字段判断是否为请假休息日期，并显示特殊样式。

```html
<el-table-column v-for="day in headerList" :key="day.headerTime" :label="day.headerTime">
  <template #default="{ row }">
    <!-- 找到对应日期的排班数据 -->
    <div
      v-for="item in row.list.filter(i => i.time.startsWith(day.headerTime.split(' ')[0]))"
      :key="item.id"
      :class="{ 'holiday-cell': item.isHoliday }"
    >
      {{ item.shift }}
    </div>
  </template>
</el-table-column>
```

### 2. 样式修改

请假休息日期需要特殊样式标记。

```css
.holiday-cell {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  padding: 4px 8px;
  border-radius: 4px;
}
```

### 3. 数据处理

```js
// 在获取数据后，处理请假日期显示
handleShiftData(data) {
  data.page.records.forEach(row => {
    // row.holidayDates 包含所有请假日期
    // row.list 中 isHoliday=true 的项表示请假休息
    // row.monthlyAttendance.休息 表示当月请假休息天数
  });
}
```

### 4. 可选：请假详情弹窗

如需查看请假详情，可通过 `holidayDates` 列表展示。

```html
<el-tooltip v-if="row.holidayDates.length > 0" placement="top">
  <template #content>
    <div>请假日期：</div>
    <div v-for="date in row.holidayDates" :key="date">{{ date }}</div>
  </template>
  <el-tag type="warning" size="small">{{ row.holidayDates.length }}天请假</el-tag>
</el-tooltip>
```

## 注意事项

- 请假数据来源于 `HolidayApplication` 表，只有状态为 `APPROVED`（审核通过）的请假记录才会被同步
- 请假日期范围内，原班次会被替换为"休息"显示
- 月度统计中的"休息"天数会单独统计请假休息天数
- 出勤天数统计（早/中/晚/夜）不会统计请假休息日期