| | |
| | | <div class="search-actions"> |
| | | <el-button size="small" |
| | | type="primary" |
| | | @click="refreshTable()" |
| | | :icon="Search"> |
| | | @click="refreshTable()"> |
| | | 查询 |
| | | </el-button> |
| | | <el-button size="small" |
| | | @click="refresh()" |
| | | :icon="Refresh" |
| | | style="margin-left: 8px"> |
| | | 重置 |
| | | </el-button> |
| | |
| | | <div class="search-buttons"> |
| | | <el-button size="small" |
| | | type="primary" |
| | | @click="configTime" |
| | | :icon="Setting"> |
| | | @click="configTime"> |
| | | 班次配置 |
| | | </el-button> |
| | | <el-button size="small" |
| | | type="success" |
| | | @click="handleDown" |
| | | :loading="downLoading" |
| | | :icon="Download" |
| | | style="margin-left: 8px"> |
| | | 导出 |
| | | </el-button> |
| | | <el-button size="small" |
| | | type="warning" |
| | | @click="schedulingVisible = true" |
| | | :icon="Calendar" |
| | | style="margin-left: 8px"> |
| | | 排班 |
| | | </el-button> |
| | |
| | | </div> |
| | | <div class="user-details"> |
| | | <h4 class="user-name">{{ item.name }}</h4> |
| | | <!-- <div class="user-stats"> |
| | | <span class="stat-item">早:{{ item.day0 }}</span> |
| | | <span class="stat-item">中:{{ item.day1 }}</span> |
| | | <span class="stat-item">夜:{{ item.day2 }}</span> |
| | | <span class="stat-item">休:{{ item.day3 }}</span> |
| | | <span class="stat-item">假:{{ item.day4 }}</span> |
| | | <span class="stat-item">差:{{ item.day6 }}</span> |
| | | </div> --> |
| | | <div class="user-stats"> |
| | | <span v-if="item.monthlyAttendance?.['休息']" class="stat-item stat-rest">休:{{ item.monthlyAttendance['休息'] }}</span> |
| | | <el-tooltip v-if="item.holidayDates?.length > 0" placement="top"> |
| | | <template #content> |
| | | <div>请假日期:</div> |
| | | <div v-for="date in item.holidayDates" :key="date">{{ date }}</div> |
| | | </template> |
| | | <span class="stat-item stat-holiday">假:{{ item.holidayDates.length }}</span> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="user-total"> |
| | | <span class="total-label">合计出勤:</span> |
| | | <span class="total-value">{{ item.monthlyAttendance.totalAttendance }}天</span> |
| | |
| | | 'shift-box-leave': m.shift === '请假', |
| | | 'shift-box-other': m.shift === '夜11', |
| | | 'shift-box-business': m.shift === '夜12', |
| | | 'holiday-cell': m.isHoliday, |
| | | }"> |
| | | <span class="shift-text">{{ getShiftNameByValue(m.shift) || '—' }}</span> |
| | | </div> |
| | |
| | | <span style="color: red; margin-right: 4px">*</span>人员名称: |
| | | </div> |
| | | <div class="search_input"> |
| | | <el-select v-model="schedulingQuery.userId" |
| | | <el-select filterable v-model="schedulingQuery.userId" |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | multiple |
| | |
| | | margin-bottom: 8px; |
| | | margin-top: 12px; |
| | | } |
| | | |
| | | /* 请假休息日期特殊样式 */ |
| | | .holiday-cell { |
| | | background-color: #fff3cd !important; |
| | | color: #856404 !important; |
| | | border: 1px solid #ffc107 !important; |
| | | } |
| | | |
| | | /* 用户统计区域 */ |
| | | .user-stats { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 4px; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .stat-item { |
| | | font-size: 12px; |
| | | color: #666; |
| | | padding-right: 4px; |
| | | } |
| | | |
| | | .stat-rest { |
| | | color: #10b981; |
| | | background-color: rgba(16, 185, 129, 0.1); |
| | | padding: 1px 6px; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | .stat-holiday { |
| | | color: #f59e0b; |
| | | background-color: rgba(245, 158, 11, 0.1); |
| | | padding: 1px 6px; |
| | | border-radius: 10px; |
| | | cursor: pointer; |
| | | } |
| | | </style> |