1377 lines
42 KiB
Vue
1377 lines
42 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 日期范围选择 -->
|
||
<div class="date-range-section">
|
||
<TimeRangePicker v-model="dateRangeParams" startKey="scheduleDateStart" endKey="scheduleDateEnd"
|
||
:defaultStartTime="defaultStartTime" :defaultEndTime="defaultEndTime" @change="handleDateRangeChange"
|
||
@quick-select="getScheduleList" />
|
||
</div>
|
||
|
||
<!-- 操作栏 -->
|
||
<div class="operation-bar">
|
||
<el-button plain type="primary" icon="el-icon-plus" @click="handleCreate">创建排班</el-button>
|
||
<el-button plain type="info" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
|
||
<el-button plain type="success" icon="el-icon-setting" @click="showTemplateManager = true">管理模板</el-button>
|
||
<el-button plain type="warning" icon="el-icon-edit" @click="handleBatchUpdate">批量修改</el-button>
|
||
</div>
|
||
|
||
<el-alert type="info" title="提示：双击排班单元格可编辑排班"></el-alert>
|
||
|
||
<!-- 排班表格 -->
|
||
<div class="schedule-table-wrapper">
|
||
<el-table v-loading="loading" :data="scheduleData" border stripe height="calc(100vh - 200px)">
|
||
<!-- 员工列 -->
|
||
<el-table-column prop="employeeName" label="员工" width="120" fixed="left" />
|
||
<!-- 操作列 -->
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="danger" @click="handleDeleteRow(scope.row)">删除整行</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 动态日期列 -->
|
||
<el-table-column v-for="date in dateList" :key="date" :label="formatDateLabel(date)" width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="schedule-cell" :class="{ 'has-data': scope.row[date], 'empty-cell': !scope.row[date] }"
|
||
@dblclick="handleCellDoubleClick(scope.row, date)">
|
||
<template v-if="scope.row[date]">
|
||
<div class="shift-name" :class="getShiftTypeClass(scope.row[date].shiftType)">
|
||
{{ scope.row[date].shiftName }}
|
||
</div>
|
||
<div class="shift-time-info">
|
||
<span v-if="scope.row[date].shiftStartTime">{{ scope.row[date].shiftStartTime }}-{{
|
||
scope.row[date].shiftEndTime }}</span>
|
||
<span v-if="scope.row[date].shiftStartTime2" class="second-shift">
|
||
{{ scope.row[date].shiftStartTime2 }}-{{ scope.row[date].shiftEndTime2 }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<span class="empty-hint">双击排班</span>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 创建排班弹窗 -->
|
||
<el-dialog title="创建排班" :visible.sync="dialogVisible" width="900px">
|
||
<!-- 步骤指示器 -->
|
||
<div class="steps">
|
||
<div :class="['step', { active: currentStep >= 1, done: currentStep > 1 }]">
|
||
<span class="step-number">1</span>
|
||
<span class="step-text">选择班次</span>
|
||
</div>
|
||
<div class="step-arrow">→</div>
|
||
<div :class="['step', { active: currentStep >= 2, done: currentStep > 2 }]">
|
||
<span class="step-number">2</span>
|
||
<span class="step-text">分配人员</span>
|
||
</div>
|
||
<div class="step-arrow">→</div>
|
||
<div :class="['step', { active: currentStep >= 3 }]">
|
||
<span class="step-number">3</span>
|
||
<span class="step-text">确认生成</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤1：选择班次配置 -->
|
||
<div v-if="currentStep === 1" class="step-content">
|
||
<el-form ref="form" :model="form" label-width="100px">
|
||
<el-form-item label="时间段">
|
||
<el-date-picker v-model="form.dateRange" type="daterange" range-separator="至"
|
||
start-placeholder="开始日期" end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd" style="width: 100%;" />
|
||
</el-form-item>
|
||
<el-form-item label="班次配置">
|
||
<div class="shift-config-panel">
|
||
<div v-for="(item, index) in form.shiftList" :key="index" class="shift-config-row">
|
||
<div class="shift-config-header">
|
||
<span class="config-label">班次 {{ index + 1 }}</span>
|
||
<el-button icon="el-icon-plus" size="mini" @click="addShiftItem">添加班次</el-button>
|
||
<el-button v-if="form.shiftList.length > 1" icon="el-icon-delete" size="mini"
|
||
@click="removeShiftItem(index)">删除</el-button>
|
||
</div>
|
||
<div class="shift-config-fields">
|
||
<el-select v-model="item.shiftId" placeholder="选择班次" style="width: 180px;" clearable>
|
||
<el-option v-for="shift in shiftList" :key="shift.shiftId"
|
||
:label="shift.shiftName" :value="shift.shiftId" />
|
||
</el-select>
|
||
<span v-if="item.shiftId" class="shift-time-display">
|
||
{{ getShiftTime(item.shiftId) }}
|
||
</span>
|
||
<el-select v-model="item.ruleId" placeholder="倒班规则（可选）" style="width: 180px;" clearable>
|
||
<el-option v-for="rule in shiftRuleList" :key="rule.ruleId"
|
||
:label="rule.changeDays" :value="rule.ruleId" />
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 步骤2：为每个班次分配人员 -->
|
||
<div v-if="currentStep === 2" class="step-content">
|
||
<div v-for="(item, index) in form.shiftList" :key="index" class="shift-assignment">
|
||
<div class="assignment-header">
|
||
<el-tag type="primary">{{ getShiftName(item.shiftId) || '未选择班次' }}</el-tag>
|
||
<span class="assignment-count">
|
||
已分配 {{ item.employeeIds ? item.employeeIds.split(',').filter(id => id.trim()).length : 0 }} 人
|
||
</span>
|
||
<div class="import-export-buttons">
|
||
<el-button icon="el-icon-download" size="mini" type="success" @click="exportCsv(index)"
|
||
title="导出CSV">导出人员</el-button>
|
||
<el-button icon="el-icon-upload" size="mini" type="info" @click="importCsv(index)"
|
||
title="导入CSV">导入人员</el-button>
|
||
<el-button icon="el-icon-save" size="mini" type="warning" @click="saveSingleTemplate(index)"
|
||
title="保存为模板">存储为模板</el-button>
|
||
<el-button icon="el-icon-folder-open" size="mini" type="primary" @click="openTemplateDialog(index)"
|
||
title="使用模板">使用模板</el-button>
|
||
</div>
|
||
</div>
|
||
<EmployeeSelector
|
||
v-model="item.employeeIds"
|
||
:multiple="true"
|
||
:disabled-names="getExcludedIds(index)"
|
||
placeholder="选择该班次的员工"
|
||
title="选择班次员工" />
|
||
<input type="file" ref="fileInput" class="file-input" accept=".csv" @change="handleFileChange($event, index)" />
|
||
</div>
|
||
<!-- <div class="quick-actions">
|
||
<el-button type="success" icon="el-icon-random" @click="quickAssignByDepartment">
|
||
按部门自动分配
|
||
</el-button>
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- 步骤3：确认生成 -->
|
||
<div v-if="currentStep === 3" class="step-content">
|
||
<el-table :data="previewData" border style="width: 100%;">
|
||
<el-table-column prop="shiftName" label="班次" />
|
||
<el-table-column prop="employeeNames" label="员工列表" />
|
||
<el-table-column prop="count" label="人数" align="center" />
|
||
</el-table>
|
||
<div class="preview-summary">
|
||
<span>共 {{ totalEmployeeCount }} 名员工，{{ totalScheduleCount }} 条排班记录</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤导航按钮 -->
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="cancel" v-if="currentStep === 1">取消</el-button>
|
||
<template v-else>
|
||
<el-button @click="prevStep">上一步</el-button>
|
||
</template>
|
||
<template v-if="currentStep < 3">
|
||
<el-button type="primary" @click="nextStep" :disabled="!canProceed" :loading="buttonLoading">
|
||
{{ currentStep === 1 ? '下一步：分配人员' : '下一步：确认' }}
|
||
</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button type="primary" @click="submitForm" :loading="buttonLoading">确认生成</el-button>
|
||
</template>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 模板管理弹窗 -->
|
||
<el-dialog title="人员列表模板管理" :visible.sync="showTemplateManager" width="1000px" :close-on-click-modal="false">
|
||
<AttendanceTemplateManager
|
||
:employee-list="employeeListForTransfer"
|
||
@update="loadTemplates"
|
||
/>
|
||
</el-dialog>
|
||
|
||
<!-- 班次模板选择弹窗 -->
|
||
<el-dialog title="选择人员模板" :visible.sync="showTemplateDialog" width="500px">
|
||
<el-table :data="templateList" border style="width: 100%;">
|
||
<el-table-column prop="name" label="模板名称" />
|
||
<el-table-column prop="employeeCount" label="员工数量" align="center" />
|
||
<el-table-column prop="createTime" label="创建时间" />
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="primary" @click.stop="applySingleTemplate(scope.row)">应用</el-button>
|
||
<el-button size="mini" type="danger" @click.stop="deleteSingleTemplate(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="showTemplateDialog = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 批量修改弹窗 -->
|
||
<el-dialog title="批量修改排班" :visible.sync="batchDialogVisible" width="600px">
|
||
<el-form ref="batchForm" :model="batchForm" label-width="100px">
|
||
<el-form-item label="日期" prop="workDate" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
|
||
<el-date-picker v-model="batchForm.workDate" type="date" placeholder="选择日期"
|
||
value-format="yyyy-MM-dd" style="width: 100%;" />
|
||
</el-form-item>
|
||
<el-form-item label="班次" prop="shiftId" :rules="[{ required: true, message: '请选择班次', trigger: 'change' }]">
|
||
<el-select v-model="batchForm.shiftId" placeholder="选择班次" style="width: 100%;" clearable>
|
||
<el-option v-for="shift in shiftList" :key="shift.shiftId" :label="shift.shiftName" :value="shift.shiftId" />
|
||
</el-select>
|
||
<div v-if="batchForm.shiftId" class="shift-detail" style="margin-top: 8px;">
|
||
<div>
|
||
<span class="time-label">时段一：</span>
|
||
<span class="time-value">{{ getShiftTime(batchForm.shiftId) }}</span>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="员工" prop="userIds" :rules="[{ required: true, message: '请选择员工', trigger: 'change' }]">
|
||
<EmployeeSelector v-model="batchForm.userIds" :multiple="true" placeholder="选择要修改的员工"
|
||
title="选择员工" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="batchDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitBatchUpdate" :loading="buttonLoading">确定修改</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 编辑班次弹窗 -->
|
||
<el-dialog :title="editDialogTitle" :visible.sync="editDialogVisible" :width="editForm.batchEdit ? '600px' : '400px'">
|
||
<el-form ref="editForm" :model="editForm" label-width="80px">
|
||
<el-form-item label="批量编辑">
|
||
<el-checkbox v-model="editForm.batchEdit" @change="handleBatchEditChange">勾选后可选择多个员工批量修改</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item v-if="editForm.batchEdit" label="员工">
|
||
<EmployeeSelector v-model="editForm.batchUserIds" :multiple="true" placeholder="选择要批量修改的员工"
|
||
title="选择员工" />
|
||
</el-form-item>
|
||
<el-form-item label="班次">
|
||
<el-select v-model="editForm.shiftId" placeholder="选择班次" style="width: 100%;">
|
||
<el-option v-for="shift in shiftList" :key="shift.shiftId" :label="shift.shiftName"
|
||
:value="shift.shiftId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="工作时间">
|
||
<div v-if="currentShift" class="shift-detail">
|
||
<div>
|
||
<span class="time-label">时段一：</span>
|
||
<span class="time-value">{{ currentShift.startTime }} - {{ currentShift.endTime }}</span>
|
||
</div>
|
||
<div v-if="currentShift.startTime2">
|
||
<span class="time-label">时段二：</span>
|
||
<span class="time-value">{{ currentShift.startTime2 }} - {{ currentShift.endTime2 }}</span>
|
||
</div>
|
||
</div>
|
||
<span v-else>请选择班次</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="cancelEdit">取消</el-button>
|
||
<el-button type="danger"
|
||
v-if="!editForm.batchEdit && currentEditRow && currentEditRow[currentEditDate] && currentEditRow[currentEditDate].scheduleId"
|
||
@click="handleDelete">删除排班</el-button>
|
||
<el-button type="primary" @click="submitEdit" :disabled="!editForm.shiftId">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TimeRangePicker from '@/views/wms/report/components/timeRangePicker.vue'
|
||
import EmployeeSelector from '@/components/EmployeeSelector/index.vue'
|
||
import AttendanceTemplateManager from '@/components/AttendanceTemplateManager/index.vue'
|
||
import { listAttendanceSchedule, generateenerateSchedule, updateAttendanceSchedule, addAttendanceSchedule, delAttendanceSchedule, batchUpdateSchedule } from '@/api/wms/attendanceSchedule'
|
||
import { listShift } from '@/api/wms/attendanceShift'
|
||
import { listAttendanceShiftRule } from '@/api/wms/attendanceShiftRule'
|
||
import { listEmployeeInfo } from '@/api/wms/employeeInfo'
|
||
|
||
export default {
|
||
name: 'AttendanceSchedule',
|
||
components: { TimeRangePicker, EmployeeSelector, AttendanceTemplateManager },
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
buttonLoading: false,
|
||
dateRangeParams: {},
|
||
defaultStartTime: '',
|
||
defaultEndTime: '',
|
||
dateList: [],
|
||
scheduleData: [],
|
||
shiftList: [],
|
||
shiftRuleList: [],
|
||
dialogVisible: false,
|
||
batchDialogVisible: false,
|
||
batchForm: {
|
||
workDate: '',
|
||
shiftId: '',
|
||
userIds: ''
|
||
},
|
||
editDialogVisible: false,
|
||
showTemplateDialog: false,
|
||
showTemplateManager: false,
|
||
templateList: [],
|
||
currentShiftIndex: -1,
|
||
employeeList: [],
|
||
currentStep: 1, // 步骤：1-选择班次，2-分配人员，3-确认
|
||
form: {
|
||
dateRange: [],
|
||
shiftList: [
|
||
{ shiftId: '', ruleId: '', employeeIds: '' }
|
||
]
|
||
},
|
||
editForm: {
|
||
shiftId: '',
|
||
batchEdit: false,
|
||
batchUserIds: ''
|
||
},
|
||
currentEditRow: null,
|
||
currentEditDate: '',
|
||
rules: {
|
||
dateRange: [
|
||
{ required: true, message: '请选择时间段', trigger: 'change' }
|
||
],
|
||
selectedEmployees: [
|
||
{ required: true, message: '请选择员工', trigger: 'change' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 检查是否可以进入下一步
|
||
canProceed() {
|
||
if (this.currentStep === 1) {
|
||
// 步骤1：必须选择时间段和至少一个有效班次
|
||
if (!this.form.dateRange || this.form.dateRange.length === 0) return false
|
||
return this.form.shiftList.some(item => item.shiftId)
|
||
} else if (this.currentStep === 2) {
|
||
// 步骤2：至少有一个班次分配了人员
|
||
return this.form.shiftList.some(item => item.employeeIds && item.employeeIds.trim())
|
||
}
|
||
return true
|
||
},
|
||
|
||
// 预览数据
|
||
previewData() {
|
||
return this.form.shiftList
|
||
.filter(item => item.shiftId && item.employeeIds)
|
||
.map(item => ({
|
||
shiftName: this.getShiftName(item.shiftId),
|
||
employeeNames: this.getEmployeeNames(item.employeeIds),
|
||
count: item.employeeIds.split(',').filter(id => id.trim()).length
|
||
}))
|
||
},
|
||
|
||
// 总员工数
|
||
totalEmployeeCount() {
|
||
const allIds = new Set()
|
||
this.form.shiftList.forEach(item => {
|
||
if (item.employeeIds) {
|
||
item.employeeIds.split(',').forEach(id => {
|
||
if (id.trim()) allIds.add(id.trim())
|
||
})
|
||
}
|
||
})
|
||
return allIds.size
|
||
},
|
||
|
||
// 总排班记录数
|
||
totalScheduleCount() {
|
||
let count = 0
|
||
this.form.shiftList.forEach(item => {
|
||
if (item.employeeIds) {
|
||
count += item.employeeIds.split(',').filter(id => id.trim()).length
|
||
}
|
||
})
|
||
return count
|
||
},
|
||
editDialogTitle() {
|
||
if (this.editForm.batchEdit) {
|
||
const employeeIds = this.editForm.batchUserIds ? this.editForm.batchUserIds.split(',').filter(id => id.trim()) : []
|
||
return `批量编辑排班 - ${this.currentEditDate || ''} (已选 ${employeeIds.length} 人)`
|
||
}
|
||
return `编辑排班 - ${this.currentEditDate || ''}`
|
||
},
|
||
currentShift() {
|
||
if (!this.editForm.shiftId) {
|
||
return null
|
||
}
|
||
return this.shiftList.find(s => s.shiftId === this.editForm.shiftId)
|
||
},
|
||
employeeListForTransfer() {
|
||
return this.employeeList.map(emp => ({
|
||
key: emp.id,
|
||
label: emp.name
|
||
}))
|
||
}
|
||
},
|
||
created() {
|
||
this.initDateRange()
|
||
this.getShiftList()
|
||
this.getShiftRuleList()
|
||
this.loadTemplates()
|
||
this.getEmployeeList()
|
||
},
|
||
methods: {
|
||
// 刷新排班
|
||
handleRefresh() {
|
||
this.getScheduleList()
|
||
},
|
||
// 初始化日期范围为当前月份
|
||
initDateRange() {
|
||
const now = new Date()
|
||
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
||
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
|
||
|
||
this.defaultStartTime = this.formatDate(firstDay) + ' 00:00:00'
|
||
this.defaultEndTime = this.formatDate(lastDay) + ' 23:59:59'
|
||
|
||
this.dateRangeParams = {
|
||
scheduleDateStart: this.defaultStartTime,
|
||
scheduleDateEnd: this.defaultEndTime
|
||
}
|
||
|
||
this.generateDateList(firstDay, lastDay)
|
||
this.getScheduleList()
|
||
},
|
||
|
||
// 格式化日期
|
||
formatDate(date) {
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
},
|
||
|
||
// 生成日期列表
|
||
generateDateList(startDate, endDate) {
|
||
this.dateList = []
|
||
let currentDate = new Date(startDate)
|
||
while (currentDate <= endDate) {
|
||
this.dateList.push(this.formatDate(currentDate))
|
||
currentDate.setDate(currentDate.getDate() + 1)
|
||
}
|
||
},
|
||
|
||
handleDeleteEmployee(index) {
|
||
this.form.shiftConfig.splice(index, 1)
|
||
},
|
||
|
||
// 格式化日期标签
|
||
formatDateLabel(date) {
|
||
const dateObj = new Date(date)
|
||
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
|
||
const month = dateObj.getMonth() + 1
|
||
const day = dateObj.getDate()
|
||
const weekDay = weekDays[dateObj.getDay()]
|
||
return `${month}月${day}日 周${weekDay}`
|
||
},
|
||
|
||
// 日期范围变化
|
||
handleDateRangeChange() {
|
||
if (this.dateRangeParams.scheduleDateStart && this.dateRangeParams.scheduleDateEnd) {
|
||
const startDate = new Date(this.dateRangeParams.scheduleDateStart.split(' ')[0])
|
||
const endDate = new Date(this.dateRangeParams.scheduleDateEnd.split(' ')[0])
|
||
this.generateDateList(startDate, endDate)
|
||
this.getScheduleList()
|
||
}
|
||
},
|
||
|
||
// 获取排班列表
|
||
getScheduleList() {
|
||
this.loading = true
|
||
listAttendanceSchedule(this.dateRangeParams).then(response => {
|
||
this.scheduleData = this.transformScheduleData(response.rows || [])
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
|
||
|
||
// 转换排班数据
|
||
transformScheduleData(rows) {
|
||
const dataMap = {}
|
||
|
||
rows.forEach(record => {
|
||
if (!dataMap[record.userId]) {
|
||
dataMap[record.userId] = {
|
||
employeeName: record.employeeName,
|
||
employeeId: record.userId
|
||
}
|
||
}
|
||
if (record.workDate) {
|
||
const dateKey = record.workDate.split(' ')[0]
|
||
dataMap[record.userId][dateKey] = {
|
||
scheduleId: record.scheduleId,
|
||
shiftId: record.shiftId,
|
||
shiftName: record.shiftName,
|
||
shiftType: record.shiftType,
|
||
shiftStartTime: record.shiftStartTime,
|
||
shiftEndTime: record.shiftEndTime,
|
||
shiftStartTime2: record.shiftStartTime2,
|
||
shiftEndTime2: record.shiftEndTime2
|
||
}
|
||
}
|
||
})
|
||
|
||
return Object.values(dataMap)
|
||
},
|
||
|
||
// 获取班次列表
|
||
getShiftList() {
|
||
listShift().then(response => {
|
||
this.shiftList = response.rows || []
|
||
})
|
||
},
|
||
|
||
// 获取倒班规则列表
|
||
getShiftRuleList() {
|
||
listAttendanceShiftRule().then(response => {
|
||
this.shiftRuleList = response.rows || []
|
||
})
|
||
},
|
||
|
||
// 获取班次时间显示
|
||
getShiftTime(shiftId) {
|
||
const shift = this.shiftList.find(s => s.shiftId === shiftId)
|
||
if (!shift) return ''
|
||
|
||
const startTime = shift.startTime ? shift.startTime.substring(0, 5) : ''
|
||
const endTime = shift.endTime ? shift.endTime.substring(0, 5) : ''
|
||
|
||
if (shift.isCrossDay) {
|
||
return `${startTime} - 次日${endTime}`
|
||
}
|
||
return `${startTime} - ${endTime}`
|
||
},
|
||
|
||
// 获取班次类型样式
|
||
getShiftTypeClass(shiftType) {
|
||
return shiftType === '夜班' ? 'night-shift' : 'day-shift'
|
||
},
|
||
|
||
// 双击单元格处理
|
||
handleCellDoubleClick(row, date) {
|
||
this.currentEditRow = row
|
||
this.currentEditDate = date
|
||
if (row[date]) {
|
||
this.editForm.shiftId = row[date].shiftId
|
||
} else {
|
||
this.editForm.shiftId = ''
|
||
}
|
||
this.editForm.batchEdit = false
|
||
this.editForm.batchUserIds = ''
|
||
this.editDialogVisible = true
|
||
},
|
||
|
||
// 取消编辑
|
||
cancelEdit() {
|
||
this.editDialogVisible = false
|
||
this.editForm.shiftId = ''
|
||
this.editForm.batchEdit = false
|
||
this.editForm.batchUserIds = ''
|
||
this.currentEditRow = null
|
||
this.currentEditDate = ''
|
||
},
|
||
|
||
// 提交编辑
|
||
submitEdit() {
|
||
if (!this.editForm.shiftId || (!this.currentEditRow && !this.editForm.batchEdit)) {
|
||
return
|
||
}
|
||
|
||
const shift = this.shiftList.find(s => s.shiftId === this.editForm.shiftId)
|
||
if (!shift) {
|
||
return
|
||
}
|
||
|
||
const date = this.currentEditDate
|
||
|
||
if (this.editForm.batchEdit) {
|
||
const userIds = this.editForm.batchUserIds.split(',').filter(id => id.trim())
|
||
if (userIds.length === 0) {
|
||
this.$message.warning('请选择要批量修改的员工')
|
||
return
|
||
}
|
||
this.buttonLoading = true
|
||
batchUpdateSchedule({
|
||
userIds: userIds,
|
||
workDate: date,
|
||
shiftId: shift.shiftId,
|
||
shiftName: shift.shiftName
|
||
}).then(() => {
|
||
this.$message.success(`批量修改成功，共修改 ${userIds.length} 名员工`)
|
||
this.buttonLoading = false
|
||
this.getScheduleList()
|
||
this.cancelEdit()
|
||
}).catch(() => {
|
||
this.buttonLoading = false
|
||
})
|
||
return
|
||
}
|
||
|
||
const employeeId = this.currentEditRow.employeeId
|
||
|
||
if (this.currentEditRow[date]) {
|
||
updateAttendanceSchedule({
|
||
scheduleId: this.currentEditRow[date].scheduleId,
|
||
userId: employeeId,
|
||
workDate: date,
|
||
shiftId: shift.shiftId,
|
||
shiftName: shift.shiftName,
|
||
}).then(_ => {
|
||
this.$message.success('修改成功')
|
||
this.getScheduleList()
|
||
}).catch(() => {
|
||
this.$message.error('修改失败')
|
||
this.getScheduleList()
|
||
})
|
||
} else {
|
||
addAttendanceSchedule({
|
||
shiftId: shift.shiftId,
|
||
userId: employeeId,
|
||
workDate: date,
|
||
shiftName: shift.shiftName,
|
||
}).then(_ => {
|
||
this.$message.success('添加成功')
|
||
this.getScheduleList()
|
||
}).catch(() => {
|
||
this.$message.error('添加失败')
|
||
this.getScheduleList()
|
||
})
|
||
}
|
||
|
||
this.cancelEdit()
|
||
},
|
||
|
||
// 批量编辑模式切换
|
||
handleBatchEditChange(val) {
|
||
if (!val) {
|
||
this.editForm.batchUserIds = ''
|
||
}
|
||
},
|
||
|
||
// 删除排班
|
||
handleDelete() {
|
||
const scheduleId = this.currentEditRow[this.currentEditDate]?.scheduleId
|
||
if (!scheduleId) {
|
||
return
|
||
}
|
||
|
||
this.$confirm('确定要删除该排班吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delAttendanceSchedule(scheduleId).then(() => {
|
||
this.$message.success('删除成功')
|
||
delete this.currentEditRow[this.currentEditDate]
|
||
this.cancelEdit()
|
||
}).catch(() => {
|
||
this.$message.error('删除失败，正在重新获取数据')
|
||
this.getScheduleList()
|
||
this.cancelEdit()
|
||
})
|
||
}).catch(() => {
|
||
this.$message.info('已取消删除')
|
||
})
|
||
},
|
||
|
||
// 删除整行排班
|
||
handleDeleteRow(row) {
|
||
const scheduleIds = []
|
||
this.dateList.forEach(date => {
|
||
if (row[date] && row[date].scheduleId) {
|
||
scheduleIds.push(row[date].scheduleId)
|
||
}
|
||
})
|
||
|
||
if (scheduleIds.length === 0) {
|
||
this.$message.info('该行没有排班记录')
|
||
return
|
||
}
|
||
|
||
this.$confirm(`确定要删除该员工的 ${scheduleIds.length} 条排班记录吗？`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delAttendanceSchedule(scheduleIds.join(',')).then(() => {
|
||
this.$message.success('删除成功')
|
||
this.getScheduleList()
|
||
}).catch(() => {
|
||
this.$message.error('删除失败，正在重新获取数据')
|
||
this.getScheduleList()
|
||
})
|
||
}).catch(() => {
|
||
this.$message.info('已取消删除')
|
||
})
|
||
},
|
||
|
||
// 批量修改排班
|
||
handleBatchUpdate() {
|
||
this.batchForm = {
|
||
workDate: '',
|
||
shiftId: '',
|
||
userIds: ''
|
||
}
|
||
this.batchDialogVisible = true
|
||
},
|
||
|
||
// 提交批量修改
|
||
submitBatchUpdate() {
|
||
this.$refs['batchForm'].validate(valid => {
|
||
if (!valid) return
|
||
|
||
const userIds = this.batchForm.userIds.split(',').filter(id => id.trim())
|
||
if (userIds.length === 0) {
|
||
this.$message.warning('请选择员工')
|
||
return
|
||
}
|
||
|
||
const shift = this.shiftList.find(s => s.shiftId === this.batchForm.shiftId)
|
||
if (!shift) {
|
||
this.$message.warning('请选择班次')
|
||
return
|
||
}
|
||
|
||
this.$confirm(`确定要为 ${userIds.length} 名员工修改 ${this.batchForm.workDate} 的班次为「${shift.shiftName}」吗？`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.buttonLoading = true
|
||
batchUpdateSchedule({
|
||
userIds: userIds,
|
||
workDate: this.batchForm.workDate,
|
||
shiftId: shift.shiftId,
|
||
shiftName: shift.shiftName
|
||
}).then(() => {
|
||
this.$message.success('批量修改成功')
|
||
this.batchDialogVisible = false
|
||
this.buttonLoading = false
|
||
this.getScheduleList()
|
||
}).catch(() => {
|
||
this.buttonLoading = false
|
||
})
|
||
}).catch(() => {
|
||
this.$message.info('已取消')
|
||
})
|
||
})
|
||
},
|
||
|
||
// 处理班次变更
|
||
handleShiftChange(employeeId, date, shiftId) {
|
||
if (!shiftId) {
|
||
return
|
||
}
|
||
const shift = this.shiftList.find(s => s.shiftId === shiftId)
|
||
if (!shift) {
|
||
return
|
||
}
|
||
|
||
|
||
|
||
const scheduleItem = this.scheduleData.find(item => item.employeeId === employeeId)
|
||
|
||
|
||
if (scheduleItem && scheduleItem[date]) {
|
||
updateAttendanceSchedule({
|
||
...scheduleItem[date],
|
||
shiftId: scheduleItem.shiftId
|
||
}).then(_ => {
|
||
this.$message.success('修改成功')
|
||
}).catch(() => {
|
||
this.$message.success('修改成功')
|
||
this.getScheduleList()
|
||
})
|
||
scheduleItem[date].shiftId = shift.shiftId
|
||
scheduleItem[date].shiftName = shift.shiftName
|
||
scheduleItem[date].shiftType = shift.shiftType
|
||
scheduleItem[date].shiftStartTime = shift.startTime
|
||
scheduleItem[date].shiftEndTime = shift.endTime
|
||
scheduleItem[date].shiftStartTime2 = shift.startTime2
|
||
scheduleItem[date].shiftEndTime2 = shift.endTime2
|
||
} else if (scheduleItem) {
|
||
scheduleItem[date] = {
|
||
shiftId: shift.shiftId,
|
||
shiftName: shift.shiftName,
|
||
shiftType: shift.shiftType,
|
||
shiftStartTime: shift.startTime,
|
||
shiftEndTime: shift.endTime,
|
||
shiftStartTime2: shift.startTime2,
|
||
shiftEndTime2: shift.endTime2
|
||
}
|
||
}
|
||
},
|
||
|
||
// 创建排班
|
||
handleCreate() {
|
||
this.reset()
|
||
this.dialogVisible = true
|
||
},
|
||
|
||
// 重置表单
|
||
reset() {
|
||
this.currentStep = 1
|
||
this.form = {
|
||
dateRange: [],
|
||
shiftList: [
|
||
{ shiftId: '', ruleId: '', employeeIds: '' }
|
||
]
|
||
}
|
||
if (this.$refs['form']) {
|
||
this.$refs['form'].resetFields()
|
||
}
|
||
},
|
||
|
||
// 添加班次配置项
|
||
addShiftItem() {
|
||
this.form.shiftList.push({ shiftId: '', ruleId: '', employeeIds: '' })
|
||
},
|
||
|
||
// 移除班次配置项
|
||
removeShiftItem(index) {
|
||
this.form.shiftList.splice(index, 1)
|
||
},
|
||
|
||
// 复制班次配置（不复制人员）
|
||
copyShiftItem(index) {
|
||
const source = this.form.shiftList[index]
|
||
this.form.shiftList.push({
|
||
shiftId: source.shiftId,
|
||
ruleId: source.ruleId,
|
||
employeeIds: ''
|
||
})
|
||
},
|
||
|
||
// 获取排除的员工ID（避免重复分配）
|
||
getExcludedIds(currentIndex) {
|
||
const excluded = []
|
||
this.form.shiftList.forEach((item, index) => {
|
||
if (index !== currentIndex && item.employeeIds) {
|
||
excluded.push(...item.employeeIds.split(','))
|
||
}
|
||
})
|
||
return excluded.join(',').trim()
|
||
},
|
||
|
||
// 获取班次名称
|
||
getShiftName(shiftId) {
|
||
const shift = this.shiftList.find(s => s.shiftId === shiftId)
|
||
return shift ? shift.shiftName : '未知班次'
|
||
},
|
||
|
||
// 获取员工姓名（临时实现，实际应从API获取）
|
||
getEmployeeNames(employeeIds) {
|
||
if (!employeeIds) return '未分配'
|
||
return employeeIds.split(',').filter(id => id.trim()).length + ' 名员工'
|
||
},
|
||
|
||
// 下一步
|
||
nextStep() {
|
||
if (this.currentStep < 3) {
|
||
this.currentStep++
|
||
}
|
||
},
|
||
|
||
// 上一步
|
||
prevStep() {
|
||
if (this.currentStep > 1) {
|
||
this.currentStep--
|
||
}
|
||
},
|
||
|
||
// 按部门自动分配
|
||
quickAssignByDepartment() {
|
||
this.$message.info('按部门自动分配功能开发中...')
|
||
// 实际实现时可以调用API获取部门员工列表并分配
|
||
},
|
||
|
||
// 提交表单
|
||
submitForm() {
|
||
this.buttonLoading = true
|
||
|
||
// 构建提交数据
|
||
const list = []
|
||
const startDate = this.form.dateRange[0]
|
||
const endDate = this.form.dateRange[1]
|
||
|
||
this.form.shiftList.forEach(shiftItem => {
|
||
if (!shiftItem.shiftId || !shiftItem.employeeIds) return
|
||
|
||
const employeeIds = shiftItem.employeeIds.split(',').filter(id => id.trim())
|
||
employeeIds.forEach(employeeId => {
|
||
list.push({
|
||
userId: employeeId,
|
||
shiftId: shiftItem.shiftId,
|
||
ruleId: shiftItem.ruleId,
|
||
startDate: startDate,
|
||
endDate: endDate
|
||
})
|
||
})
|
||
})
|
||
|
||
// 调用API
|
||
generateenerateSchedule(list).then(response => {
|
||
this.$modal.msgSuccess('生成成功')
|
||
this.dialogVisible = false
|
||
this.buttonLoading = false
|
||
this.getScheduleList()
|
||
}).catch(() => {
|
||
this.buttonLoading = false
|
||
})
|
||
},
|
||
|
||
// 取消
|
||
cancel() {
|
||
this.dialogVisible = false
|
||
this.reset()
|
||
},
|
||
|
||
// 导出CSV文件
|
||
exportCsv(index) {
|
||
const shiftItem = this.form.shiftList[index]
|
||
const shiftName = this.getShiftName(shiftItem.shiftId) || '班次'
|
||
const ruleName = shiftItem.ruleId ? this.getRuleName(shiftItem.ruleId) : ''
|
||
|
||
let csvContent = '名字\n'
|
||
|
||
if (shiftItem.employeeIds) {
|
||
const ids = shiftItem.employeeIds.split(',').filter(id => id.trim())
|
||
ids.forEach(id => {
|
||
csvContent += `${id}\n`
|
||
})
|
||
}
|
||
|
||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||
const link = document.createElement('a')
|
||
const url = URL.createObjectURL(blob)
|
||
const fileName = `${shiftName}${ruleName ? '_' + ruleName : ''}_员工列表.csv`
|
||
link.setAttribute('href', url)
|
||
link.setAttribute('download', fileName)
|
||
link.style.visibility = 'hidden'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
},
|
||
|
||
// 导入CSV文件
|
||
importCsv(index) {
|
||
const fileInput = document.querySelector('.file-input')
|
||
if (fileInput) {
|
||
fileInput.click()
|
||
}
|
||
},
|
||
|
||
// 处理文件选择
|
||
handleFileChange(event, index) {
|
||
const file = event.target.files[0]
|
||
if (!file) return
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
const content = e.target.result
|
||
const lines = content.split('\n').filter(line => line.trim())
|
||
|
||
if (lines.length === 0) {
|
||
this.$message.warning('CSV文件内容为空')
|
||
return
|
||
}
|
||
|
||
const header = lines[0].trim()
|
||
if (header !== '名字') {
|
||
this.$message.warning('CSV文件格式不正确，第一行应为"名字"')
|
||
return
|
||
}
|
||
|
||
const names = lines.slice(1).map(line => line.trim()).filter(name => name)
|
||
if (names.length === 0) {
|
||
this.$message.warning('CSV文件中没有有效的员工名字')
|
||
return
|
||
}
|
||
|
||
const shiftItem = this.form.shiftList[index]
|
||
shiftItem.employeeIds = names.join(',')
|
||
|
||
this.$message.success(`成功导入 ${names.length} 名员工`)
|
||
}
|
||
reader.readAsText(file, 'UTF-8')
|
||
|
||
event.target.value = ''
|
||
},
|
||
|
||
// 获取规则名称
|
||
getRuleName(ruleId) {
|
||
const rule = this.shiftRuleList.find(r => r.ruleId === ruleId)
|
||
return rule ? rule.changeDays : ''
|
||
},
|
||
|
||
// 获取员工列表
|
||
getEmployeeList() {
|
||
const params = {
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
}
|
||
listEmployeeInfo(params).then(response => {
|
||
// 过滤掉已离职的员工
|
||
const filteredList = (response.rows || []).filter(employee => {
|
||
return employee.isLeave !== 1 && employee.isLeave !== '1'
|
||
})
|
||
this.employeeList = filteredList.map(item => ({
|
||
id: item.infoId,
|
||
name: item.name
|
||
}))
|
||
}).catch(() => {
|
||
this.employeeList = []
|
||
})
|
||
},
|
||
|
||
// 加载模板列表
|
||
loadTemplates() {
|
||
try {
|
||
const templates = localStorage.getItem('attendanceTemplates')
|
||
this.templateList = templates ? JSON.parse(templates) : []
|
||
} catch (e) {
|
||
this.templateList = []
|
||
}
|
||
},
|
||
|
||
// 保存模板到localStorage
|
||
saveTemplates() {
|
||
localStorage.setItem('attendanceTemplates', JSON.stringify(this.templateList))
|
||
},
|
||
|
||
// 保存单个班次为模板
|
||
saveSingleTemplate(index) {
|
||
const shiftItem = this.form.shiftList[index]
|
||
if (!shiftItem.employeeIds || !shiftItem.employeeIds.trim()) {
|
||
this.$message.warning('请先分配人员')
|
||
return
|
||
}
|
||
|
||
this.$prompt('请输入模板名称', '保存模板', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputValue: this.getShiftName(shiftItem.shiftId) + '_' + new Date().toLocaleDateString()
|
||
}).then(({ value }) => {
|
||
if (!value.trim()) {
|
||
this.$message.warning('模板名称不能为空')
|
||
return
|
||
}
|
||
|
||
const employeeIds = shiftItem.employeeIds.split(',').filter(id => id.trim())
|
||
|
||
const template = {
|
||
id: Date.now().toString(),
|
||
name: value.trim(),
|
||
employeeIds: employeeIds,
|
||
employeeCount: employeeIds.length,
|
||
createTime: new Date().toLocaleString('zh-CN')
|
||
}
|
||
|
||
this.templateList.push(template)
|
||
this.saveTemplates()
|
||
this.$message.success('模板保存成功')
|
||
}).catch(() => {
|
||
this.$message.info('已取消保存')
|
||
})
|
||
},
|
||
|
||
// 打开模板选择弹窗
|
||
openTemplateDialog(index) {
|
||
this.currentShiftIndex = index
|
||
this.showTemplateDialog = true
|
||
},
|
||
|
||
// 应用单个模板到当前班次
|
||
applySingleTemplate(template) {
|
||
if (!template || !template.employeeIds || this.currentShiftIndex < 0) return
|
||
|
||
this.form.shiftList[this.currentShiftIndex].employeeIds = template.employeeIds.join(',')
|
||
this.showTemplateDialog = false
|
||
this.currentShiftIndex = -1
|
||
this.$message.success('模板应用成功')
|
||
},
|
||
|
||
// 删除单个模板
|
||
deleteSingleTemplate(template) {
|
||
this.$confirm('确定要删除这个模板吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
const index = this.templateList.findIndex(t => t.id === template.id)
|
||
if (index > -1) {
|
||
this.templateList.splice(index, 1)
|
||
this.saveTemplates()
|
||
this.$message.success('删除成功')
|
||
}
|
||
}).catch(() => {
|
||
this.$message.info('已取消删除')
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.date-range-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.operation-bar {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.schedule-table-wrapper {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.schedule-cell {
|
||
padding: 4px;
|
||
min-height: 60px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.schedule-cell:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.has-data {
|
||
padding: 8px 4px;
|
||
}
|
||
|
||
.empty-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.empty-hint {
|
||
font-size: 12px;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.shift-info {
|
||
text-align: center;
|
||
}
|
||
|
||
.shift-name {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
color: #fff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.day-shift {
|
||
background-color: #67c23a;
|
||
}
|
||
|
||
.night-shift {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.shift-time-info {
|
||
font-size: 10px;
|
||
color: #606266;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.second-shift {
|
||
display: block;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.shift-config {
|
||
width: 100%;
|
||
}
|
||
|
||
.shift-config-item {
|
||
margin-bottom: 12px;
|
||
padding: 12px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.employee-info {
|
||
min-width: 100px;
|
||
}
|
||
|
||
.shift-time {
|
||
flex: 1;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.time-label {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.time-value {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
}
|
||
|
||
/* ===== 优化后的排班弹窗样式 ===== */
|
||
|
||
/* 步骤指示器 */
|
||
.steps {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.step-number {
|
||
width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 50%;
|
||
background-color: #e4e7ed;
|
||
color: #909399;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.step.active .step-number {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
|
||
.step.done .step-number {
|
||
background-color: #67c23a;
|
||
color: #fff;
|
||
}
|
||
|
||
.step-text {
|
||
margin-top: 8px;
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
|
||
.step.active .step-text,
|
||
.step.done .step-text {
|
||
color: #606266;
|
||
}
|
||
|
||
.step-arrow {
|
||
margin: 0 12px;
|
||
color: #c0c4cc;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 步骤内容 */
|
||
.step-content {
|
||
min-height: 200px;
|
||
}
|
||
|
||
/* 班次配置面板 */
|
||
.shift-config-panel {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.shift-config-row {
|
||
margin-bottom: 16px;
|
||
padding: 16px;
|
||
background-color: #fafafa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.shift-config-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.config-label {
|
||
font-weight: 600;
|
||
color: #606266;
|
||
}
|
||
|
||
.shift-config-fields {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.shift-time-display {
|
||
font-size: 13px;
|
||
color: #67c23a;
|
||
padding: 4px 8px;
|
||
background-color: #f0f9eb;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 班次分配区域 */
|
||
.shift-assignment {
|
||
margin-bottom: 20px;
|
||
padding: 16px;
|
||
background-color: #fafafa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.assignment-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.assignment-count {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
|
||
.import-export-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.file-input {
|
||
display: none;
|
||
}
|
||
|
||
/* 快速操作按钮 */
|
||
.quick-actions {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px dashed #e4e7ed;
|
||
}
|
||
|
||
/* 预览摘要 */
|
||
.preview-summary {
|
||
margin-top: 16px;
|
||
padding: 12px;
|
||
background-color: #f0f9eb;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
color: #67c23a;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 对话框按钮 */
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
</style>
|