基于 Vue 组件的部门排班系统开发与功能扩展

在前端开发中，实现一个实用的部门排班系统是一个常见且有挑战性的任务。本文将详细介绍如何使用 Vue 组件开发一个基础的部门排班系统，并逐步扩展其功能，包括添加删除员工排班的功能。

基础部门排班组件实现

实现思路

首先明确基础的实现思路，我们需要管理部门列表和排班信息，通过用户交互选择部门并进行排班设置。利用 Vue 的响应式数据来管理状态，同时提供基本的界面交互功能。

代码示例与解释

<template>
  <div>
    <!-- 选择部门 -->
    <select v-model="selectedDepartment">
      <option v-for="department in departments" :key="department" :value="department">
        {
  { department }}
      </option>
    </select>
    <!-- 显示当前选择的部门 -->
    <p>当前选择的部门: {
  { selectedDepartment }}</p>
    <!-- 排班输入 -->
    <div v-for="(day, index) in daysOfWeek" :key="index">
      <label>{
  { day }}: </label>
      <input v-model="schedules[selectedDepartment][index]" type="text" placeholder="排班信息">
    </div>
    <!-- 显示当前部门的排班信息 -->
    <p>当前部门排班信息: {
  { schedules[selectedDepartment] }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 部门列表
      departments: ['部门 A', '部门 B', '部门 C'],
      // 选择的部门
      selectedDepartment: '部门 A',
      // 一周的日期
      daysOfWeek: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // 排班信息
      schedules: {
        '部门 A': ['', '', '', '', '', '', ''],
        '部门 B': ['', '', '', '', '', '', ''],
        '部门 C': ['', '', '', '', '', '', '']
      }
    };
  }
};
</script>

<style scoped>
/* 样式部分可根据需求进行调整 */
select {
  margin-bottom: 10px;
}

input {
  margin-bottom: 5px;
}
</style>

模板部分

• 使用 select 元素让用户选择部门，通过 v-model 绑定 selectedDepartment 来获取用户选择。
• 通过 v-for 指令遍历一周的日期，为每天提供一个输入框用于输入排班信息，输入框通过 v-model 绑定到 schedules 对象中对应部门的排班信息。
• 显示当前选择的部门和对应的排班信息。

数据部分

• departments 存储所有部门的名称。
• selectedDepartment 存储当前选择的部门。
• daysOfWeek 存储一周的日期。
• schedules 是一个对象，存储每个部门的排班信息。

样式部分

使用 scoped 属性确保样式只应用于当前组件，对 select 和 input 元素设置了简单的边距样式。

功能扩展：完善排班操