pad_spa/src/pages/scheduling/details/index.vue

<template>
  <div>
    <!-- 头部添加查询排班=表 -->
    <div class="header">
      <div class="header-left">
        <div
          class="title"
          :class="activeClass == index ? 'titleActive' : ''"
          v-for="(item, index) in titleList"
          :key="index"
          @click="checkTitle(index)"
        >
          {{ item }}月排班表
          <i class="el-icon-close" @click="delTitle" v-if="index == 1"></i>
        </div>
        <div class="add" @click="addList"><i class="el-icon-plus"></i></div>
      </div>
      <div class="header-right">
        <div class="selectTime">
          <el-date-picker
            popper-class="mydatestyle"
            @change="selectTime"
            v-model="dateList"
            type="month"
            placeholder="查询时间"
            :editable="false"
            :clearable="false"
            :picker-options="pickerOptions"
          >
            <!-- :picker-options="pickerOptions" -->
          </el-date-picker>
        </div>
        <div @click="search" class="search">查询</div>
      </div>
    </div>
    <!-- 排班表 -->
    <div class="list">
      <el-table
        :data="tableData"
        @cell-click="handle"
        :cell-class-name="tableCellClassName"
        :row-class-name="overTime"
        height="550"
      >
        <el-table-column prop="date" label="日期" align="center" width="155">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in nameList"
          :prop="'name' + index"
          :label="item.realname"
          align="center"
          width="155"
          :key="index"
        >
          <template slot-scope="scope">
            <el-dropdown
              @command="selectType"
              :disabled="disabled"
              trigger="click"
            >
              <div
                class="amend"
                :class="
                  tableData[scope.row.index]['name' + index] == '早班'
                    ? 'color1'
                    : tableData[scope.row.index]['name' + index] == '中班'
                    ? 'color2'
                    : tableData[scope.row.index]['name' + index] == '晚班'
                    ? 'color3'
                    : tableData[scope.row.index]['name' + index] == '休息'
                    ? 'color4'
                    : 'color5'
                "
              >
                {{ tableData[scope.row.index]["name" + index] }}
              </div>
              <span v-if="false">{{ scope.row }}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="color1" command="早班"
                  >早班</el-dropdown-item
                >
                <el-dropdown-item class="color2" command="中班"
                  >中班</el-dropdown-item
                >
                <el-dropdown-item class="color3" command="晚班"
                  >晚班</el-dropdown-item
                >
                <el-dropdown-item class="color4" command="休息"
                  >休息</el-dropdown-item
                >
                <el-dropdown-item class="color5" command="离职"
                  >离职</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import api from "../../../server/home";
export default {
  data() {
    return {
      level: "", //10店长可排班
      dateList: "", //选择日期的绑定
      tableData: [], //值班列表
      nameList: [], //员工列表
      row: "", //存入数据的行
      column: "", //存入数据的列
      titleList: [], //月份数组(最多两个月份)
      month: "", //今月
      year: "", //今年
      day: "", //今日
      activeClass: 0, //月份活动类名
      one_selectMonth: "",
      one_selectYear: "",
      selectMonth: "", //选择的月份
      selectYear: "", //选择的年份
      pickerOptions: {
        disabledDate: (time) => {
          const sixMonth = new Date().setMonth(new Date().getMonth() - 5);
          const maxValue = new Date().setMonth(new Date().getMonth() + 1);
          return time.getTime() > maxValue || time.getTime() < sixMonth;
        },
      }, // 筛选选择日期只能查看前6个月 后一个月
      disabled: false, // 之前的日期不可分配
      addYear: "",
      typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 9是休息 10离职
    };
  },
  methods: {
    // 将本月过去的时间添加背景色
    overTime({ row, rowIndex }) {
      if (row.date.split("日")[0].split("月")[0] != this.month) {
        return;
      }
      let one_selectTime =
        this.year +
        "-" +
        row.date.split("日")[0].split("月")[0] +
        "-" +
        row.date.split("日")[0].split("月")[1];
      //现在的时间
      let one_nowTime = this.year + "-" + this.month + "-" + this.day;
      if (
        new Date(one_selectTime.replace(/-/g, "/")) <
        new Date(one_nowTime.replace(/-/g, "/"))
      ) {
        return "over-row";
      }
    },
    // 删除最后一个标题
    delTitle() {
      // 删除标题数组最后一个
      this.titleList.pop();
      // 自动切换到本月月份
      this.checkTitle(0);
      this.selectMonth = "";
      this.selectYear = "";
      this.addYear = "";
    },
    // 查询日期
    search() {
      // 没有选择日期，返回
      if (this.one_selectMonth == "" || this.one_selectMonth == this.month) {
        return;
      }
      this.activeClass = 1;
      this.selectMonth = this.one_selectMonth;
      this.selectYear = this.one_selectYear;
      // 设置月份数组最后一个为当前选择月份
      this.titleList[1] = this.selectMonth;
      // 获取数据月份
      this.currentMonthDays(this.selectMonth);
      this.getWorkList(this.selectMonth, this.selectYear);
    },
    // 选择日期
    selectTime(e) {
      // 获取月份
      this.one_selectMonth = e.getMonth() + 1;
      this.one_selectYear = e.getFullYear();
    },
    // 获取本月所有的日期
    currentMonthDays(month1) {
      let now = new Date();
      // 这个月的月份
      this.month = now.getMonth() + 1;
      this.year = now.getFullYear();
      this.day = now.getDate();
      const daysOfMonth = [];
      let year = month1 == 1 ? now.getFullYear() + 1 : now.getFullYear();
      let month = month1 || now.getMonth() + 1;
      if (!month1) {
        this.titleList.push(month);
      }
      month = parseInt(month, 10);
      const lastDayOfMonth = new Date(year, month, 0).getDate();
      var weekDay = [
        "(周天)",
        "(周一)",
        "(周二)",
        "(周三)",
        "(周四)",
        "(周五)",
        "(周六)",
      ];
      for (let i = 1; i <= lastDayOfMonth; i++) {
        let arr = year + "/" + month + "/" + i;
        var myDate = new Date(Date.parse(arr));
        let week = weekDay[myDate.getDay()];
        daysOfMonth.push(month + "月" + i + "日" + " " + week);
      }
      let arr = [];
      daysOfMonth.map((item) => {
        arr.push({ date: item });
      });
      this.tableData = arr;
    },
    // 选择上班类型
    selectType(e) {
      this.$set(this.tableData[this.row], [`name${this.column - 1}`], e);
      // 选择的类型 (1是早班 2是中班 3是晚班 9是休息 10离职)
      let type = "";
      e == "早班"
        ? (type = 1)
        : e == "中班"
        ? (type = 2)
        : e == "晚班"
        ? (type = 3)
        : e == "休息"
        ? (type = 4)
        : (type = 5);
      let year = this.year;
      // 判断是否选择的是明年的1月
      if (this.selectYear > this.year && this.activeClass != 0) {
        year = this.year + 1;
      } else {
        year = this.year;
      }
      // 判断添加下一个月是1月
      if (this.addYear && this.titleList[1] == 1) {
        year = this.addYear;
      }
      // 选择的时间
      let day =
        year +
        "-" +
        this.tableData[this.row].date.split("日")[0].split("月")[0] +
        "-" +
        this.tableData[this.row].date.split("日")[0].split("月")[1];
      let user_id = this.nameList[this.column - 1].id;
      let params = {
        day,
        type,
        user_id,
      };
      // 添加排班
      api.selectScheduling(params).then((res) => {
        if (res.code == 200) {
        }
      });
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      //注意这里是解构
      //利用单元格的 className 的回调方法，给行列索引赋值
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 获取填写日期的行列
    handle(row, column, event, cell) {
      this.row = row.index; //行
      this.column = column.index; //列
      let one_year = this.selectYear == "" ? this.year : this.selectYear;
      if (this.activeClass == 0) {
        one_year = this.year;
      }
      if (this.month + 1 == this.titleList[1]) {
        one_year = this.year;
      } else if (this.titleList[this.activeClass] == 1) {
        one_year = this.addYear || this.selectYear;
      } else {
        one_year = this.selectYear || this.year;
      }
      //选择的时间
      let one_selectTime =
        one_year +
        "-" +
        this.tableData[this.row].date.split("日")[0].split("月")[0] +
        "-" +
        this.tableData[this.row].date.split("日")[0].split("月")[1];
      //现在的时间
      let one_nowTime = this.year + "-" + this.month + "-" + this.day;
      // 判断是否是今天以前的时间  是否可选择
      new Date(one_selectTime.replace(/-/g, "/")) <
      new Date(one_nowTime.replace(/-/g, "/"))
        ? (this.disabled = true)
        : (this.disabled = false);
        // 如果是店员不予操作
      if (this.level != 10) {
        this.disabled = true;
      }
    },
    // 添加表单
    addList() {
      // 最多可有两个月
      if (this.titleList.length >= 2) {
        return;
      }
      // 判断是否是最后一个月是的话添加表单就为1月份
      if (this.month == 12) {
        this.currentMonthDays(1);
        this.titleList.push(1);
        this.addYear = this.year + 1;
      } else {
        this.currentMonthDays(this.month + 1);
        this.titleList.push(this.month + 1);
      }
      this.activeClass = this.activeClass + 1;
      this.getWorkList(this.month + 1, this.addYear || this.year);
    },
    // 切换表单
    checkTitle(index) {
      this.activeClass = index;
      // 获取切换月的月份
      this.month = this.titleList[index];
      this.currentMonthDays(this.month);
      this.getWorkList(
        this.titleList[this.activeClass],
        this.activeClass == 0
          ? this.year
          : this.addYear == ""
          ? this.selectYear || this.year
          : this.addYear
      );
    },
    // 获取员工列表
    getStaffList() {
      api.getStaffList().then((res) => {
        if (res.code == 200) {
          this.nameList = res.data;
        }
      });
    },
    // 获取排班列表
    getWorkList(month, year) {
      let month1 = year + "-" + month;
      let params = {
        month: month1,
      };
      api.getWorkList(params).then((res) => {
        if (res.code == 200) {
          // 获取全部排班
          let arr = [];
          res.data.map((item) => {
            arr.push(item.type);
          });
          arr.map((item, index) => {
            let newArr = this.tableData[index];
            item.map((item1, index1) => {
              this.$set(newArr, `name${index1}`, this.typeList[item1[0] - 1]);
            });
          });
        }
      });
    },
  },
  created() {
    // 获取店长员工等级
    this.level = localStorage.getItem("level");
    // 获取日期列表
    this.currentMonthDays();
    // 获取员工列表
    this.getStaffList();
    // 获取排班列表
    this.getWorkList(this.month, this.year);
  },
};
</script>

<style lang='less' scoped>
.header {
  width: 857px;
  height: 70px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    display: flex;
    align-items: center;
    .title {
      width: 217px;
      height: 70px;
      // background: #fa7d22;
      border-radius: 8px;
      // color: #ffffff;
      text-align: center;
      line-height: 70px;
      font-size: 24px;
      font-weight: 400;
      position: relative;
      .el-icon-close {
        color: #ffffff;
        font-size: 24px;
        position: absolute;
        top: 3px;
        right: 3px;
        padding: 0;
      }
    }
    .titleActive {
      background: #fa7d22;
      color: #ffffff;
    }
    .add {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      margin-left: 5px;
      text-align: center;
      line-height: 60px;
      /deep/i {
        font-size: 19px;
        color: #e6e6e6;
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--month {
      width: 132px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
    }
    .search {
      width: 80px;
      height: 30px;
      background: #fa7d22;
      border-radius: 20px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
      margin-right: 20px;
      margin-left: 10px;
    }
  }
}
.list {
  height: 420px;
  width: 857px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 18px;
  padding: 0 11px;
  overflow-x: scroll;
  overflow-y: scroll;
  .el-dropdown {
    width: 100%;
    height: 100%;
  }
  .amend {
    width: 100%;
    height: 100%;
  }
}
/deep/ .el-table tbody tr:hover > td {
  background: #fff !important;
}
/deep/tr.el-table__row > * {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  height: 41px;
  width: 115px;
}
/deep/.cell {
  height: 100%;
  width: 100%;
}
.color1 {
  color: #19d1ca !important;
}
.color2 {
  color: #ffafaf !important;
}
.color3 {
  color: #4d5e8e !important ;
}
.color4 {
  color: #fa7d22 !important;
}
.color5 {
  color: #999999 !important;
}
.el-month-table td.current:not(.disabled) .cell {
  color: #4d5e8e;
}
/deep/ .el-month-table td.today .cell {
  color: #4d5e8e;
  font-size: 40px;
}
/deep/.el-picker-panel__body {
  background-color: red;
}
/deep/.el-table {
  .el-table__body-wrapper {
    height: calc(100% - 48px) !important; // 表格高度减去表头的高度
  }
}
/deep/.el-table .over-row {
  background: #f7f8fa;
  pointer-events: none;
}
</style>