当前位置：首页 > VUE

vue实现工厂排班

2026-01-19 05:10:28VUE

Vue实现工厂排班系统

数据模型设计

使用Vue的响应式数据管理排班信息，核心数据结构包括员工列表、班次类型、日期范围等。例如：

data() {
  return {
    employees: [
      { id: 1, name: '张三', department: '生产部' },
      { id: 2, name: '李四', department: '质检部' }
    ],
    shifts: ['早班', '中班', '晚班'],
    schedule: {} // 以日期为key的排班记录
  }
}

可视化排班表

通过动态表格展示排班信息，使用v-for循环渲染日期和员工。建议采用类似日历的横向布局，日期作为列头，员工作为行头。

vue实现工厂排班

<table class="schedule-table">
  <thead>
    <tr>
      <th>员工/日期</th>
      <th v-for="date in dateRange" :key="date">{{ formatDate(date) }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="emp in employees" :key="emp.id">
      <td>{{ emp.name }}</td>
      <td v-for="date in dateRange" :key="date">
        <select v-model="schedule[date][emp.id]">
          <option v-for="shift in shifts" :value="shift">{{ shift }}</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

交互功能实现

添加班次调整的拖拽功能需要引入第三方库如vuedraggable，或手动实现拖拽事件：

methods: {
  handleDragStart(emp, date) {
    this.draggedItem = { emp, date }
  },
  handleDrop(targetEmp, targetDate) {
    // 交换班次逻辑
  }
}

数据持久化

通过axios与后端API交互保存排班数据：

vue实现工厂排班

saveSchedule() {
  axios.post('/api/schedule', this.schedule)
    .then(response => {
      this.$message.success('排班已保存')
    })
}

高级功能扩展

实现批量排班功能可添加以下方法：

batchAssign(shift, days, dept) {
  this.employees
    .filter(emp => emp.department === dept)
    .forEach(emp => {
      days.forEach(day => {
        this.$set(this.schedule[day], emp.id, shift)
      })
    })
}

样式优化

使用CSS Grid或Flex布局增强可视化效果：

.schedule-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.shift-cell {
  background-color: var(--shift-color);
  min-height: 40px;
}