klp-oa/klp-ui/src/views/wms/hrm/attendance/drag.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>
    </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;">
                    <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;">
                    <el-option v-for="rule in shiftRuleList" :key="rule.ruleId"
                      :label="rule.ruleName" :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>
            <!-- <el-button icon="el-icon-copy" size="mini" @click="copyShiftItem(index)"
              title="复制班次配置">复制</el-button> -->
          </div>
          <EmployeeSelector
            v-model="item.employeeIds"
            :multiple="true"
            :disabled-names="getExcludedIds(index)"
            placeholder="选择该班次的员工"
            title="选择班次员工" />
        </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="editDialogVisible" width="400px">
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <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="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 { listAttendanceSchedule, generateenerateSchedule, updateAttendanceSchedule, addAttendanceSchedule, delAttendanceSchedule } from '@/api/wms/attendanceSchedule'
import { listShift } from '@/api/wms/attendanceShift'
import { listAttendanceShiftRule } from '@/api/wms/attendanceShiftRule'

export default {
  name: 'AttendanceSchedule',
  components: { TimeRangePicker, EmployeeSelector },
  data() {
    return {
      loading: false,
      buttonLoading: false,
      dateRangeParams: {},
      defaultStartTime: '',
      defaultEndTime: '',
      dateList: [],
      scheduleData: [],
      shiftList: [],
      shiftRuleList: [],
      dialogVisible: false,
      editDialogVisible: false,
      currentStep: 1, // 步骤：1-选择班次，2-分配人员，3-确认
      form: {
        dateRange: [],
        shiftList: [
          { shiftId: '', ruleId: '', employeeIds: '' }
        ]
      },
      editForm: {
        shiftId: ''
      },
      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
    },
    currentShift() {
      if (!this.editForm.shiftId) {
        return null
      }
      return this.shiftList.find(s => s.shiftId === this.editForm.shiftId)
    }
  },
  created() {
    this.initDateRange()
    this.getShiftList()
    this.getShiftRuleList()
  },
  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.editDialogVisible = true
    },

    // 取消编辑
    cancelEdit() {
      this.editDialogVisible = false
      this.editForm.shiftId = ''
      this.currentEditRow = null
      this.currentEditDate = ''
    },

    // 提交编辑
    submitEdit() {
      if (!this.editForm.shiftId || !this.currentEditRow) {
        return
      }

      const shift = this.shiftList.find(s => s.shiftId === this.editForm.shiftId)
      if (!shift) {
        return
      }

      const date = this.currentEditDate
      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.currentEditRow[date] = {
      //   scheduleId: this.currentEditRow[date]?.scheduleId,
      //   shiftId: shift.shiftId,
      //   shiftName: shift.shiftName,
      //   shiftType: shift.shiftType,
      //   shiftStartTime: shift.startTime,
      //   shiftEndTime: shift.endTime,
      //   shiftStartTime2: shift.startTime2,
      //   shiftEndTime2: shift.endTime2
      // }

      this.cancelEdit()
    },

    // 删除排班
    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('已取消删除')
      })
    },

    // 处理班次变更
    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()
    }
  }
}
</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;
}

/* 快速操作按钮 */
.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>