yudao-dev/src/views/group/base/groupTeamScheduling/index.vue

<template>
  <div class="groupTeamScheduling">
    <div class="operationArea">
      <el-form :inline="true" class="demo-form-inline">
        <span class="blue-block"></span>
        <el-form-item label="月份选择">
          <el-date-picker
            v-model="startDay"
            type="month"
            placeholder="选择月"
            size="small"
            :disabled="showSetting"
            @change="selectMonth"
            :clearable="false"
            style="width: 120px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span class="separateStyle"></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" :disabled="showSetting || settingBtnDis" @click="settingMsg">设置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" v-show="showSetting && autoScheduling" @click="schedulingBtn">自动排班</el-button>
        </el-form-item>
        <el-form-item>
          <span class="separateStyle" v-show="showSetting"></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" v-show="showSetting" @click="confirmSetting">确认</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button>
        </el-form-item>
        <el-form-item label="请先选择查询的班组" class="rightItem">
          <el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button>
          <el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button>
          <el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 日历区域 -->
    <div class="calenderArea">
      <div style="font-size: 24px;font-weight: 500">{{ this.month }} {{ this.year }}</div>
      <el-calendar v-model="startDay">
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <div v-if="data.type === 'current-month'">
            <!-- 日期 -->
            <div class="dateStyle">
              {{ Number(data.day.split('-')[2]) }}
            </div>
            <!-- 班次班组 -->
            <!-- class有两个样式，一个是类似class1，还有个是选中红框显示 -->
            <el-row :gutter="2" :class="'class' + (index+1) + (chooseTip === (item.startDay+item.classesId) ? ' team-active' : '')" v-for="(item, index) in list[Number(data.day.split('-')[2])]" :key='index'>
              <el-col :span="12">
                <div class="selectDiv">
                  <!-- 选择班组图标 -->
                  <div class="toggle-icon" v-show="showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true)">
                    <svg-icon icon-class="toggle"/>
                  </div>
                  <!-- 不能选择班组 -->
                  <div class="toggle-icon-hide" v-show="!(showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true))"></div>
                  <el-select v-model="item.teamId" size='small' :disabled="!showSetting || (new Date(data.day).valueOf() > new Date().valueOf() ? false: true)">
                    <el-option
                      v-for="i in teamList"
                      :key="i.id"
                      :label="i.name"
                      :value="i.id">
                    </el-option>
                  </el-select>
              </div>
              </el-col>
              <el-col :span="12">
                <el-button class="labelClass" @click="chooseTeam(item)">{{ item.classesName }}</el-button>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
import { listEnabled } from "@/api/base/groupTeam";
import moment from 'moment';

export default {
  name: "GroupTeamScheduling",
  data() {
    return {
      startDay: '',// 查询参数
      year: '',// 2023
      month: '',// 九月
      monthList: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
      list: {},
      teamList: [],// 班组下拉
      showSetting: false,// 设置模式。自动排班，确认，取消按钮显示
      settingBtnDis: false,
      jumpDisabled: true,// 操作按钮控制
      chooseObj: {}, //当前选中的数据，查询按钮用
      chooseTip: '',// 当前选中数据的唯一值，显示红框
      autoScheduling: false // 只有在当前日期后的月份才生效
    };
  },
  created() {
    this.startDay = new Date()
    // 设置按钮是否置灰
    this.settingBtn()
    this.getTeamList()
    this.toggleMonth()
    this.getList()
  },
  methods: {
    // 切换月份
    selectMonth() {
      if (this.startDay) {
        this.settingBtn() // 设置按钮状态,需在getlist前面
        this.toggleMonth()
        this.getList()
        this.clearChoose()
        if ( moment(this.startDay).valueOf() > moment().endOf('month').valueOf()) {
          this.autoScheduling = true
        } else {
          this.autoScheduling = false
        }
      }
    },
    // 获取班组列表
    getTeamList() {
      listEnabled().then(res => {
        this.teamList = res.data || []
      })
    },
    // 获取日历数据
    getList() {
      let year = moment(this.startDay).format('YYYY')
      let month = moment(this.startDay).format('M')
      getPreset({
        year: year,
        month: month
      }).then(res => {
        let obj = res.data || {}
        if (obj) {
          for (let item in obj) {
            for (let i = 0; i < obj[item].length; i++) {
              if (!obj[item][i].teamId) {
                obj[item][i].teamId = ''
              }
            }
          }
        }
        this.list = obj
      }).catch(() => {
        this.list = {}
        this.settingBtnDis = true // 禁用设置按钮
      })
    },
    // 设置
    settingMsg() {
      this.showSetting = !this.showSetting
      this.clearChoose()
    },
    // 取消
    cancelSetting() {
      this.showSetting = !this.showSetting
      this.getList() // 数据还原
    },
    // 确认
    confirmSetting() {
      let num = 0
      // 当月数据的话，今天及今天之前的不传
      if (moment(this.startDay).format('YYYY-MM') === moment().format('YYYY-MM')) {
        num = Number(moment().format('DD'))
      } else {
        num = 0
      }
      // 下月数据全部都传
      // 打平数据
      let tempArr = Object.values(this.list)
      let arr = []
      for (let i = num; i < tempArr.length; i++) {
        for (let j = 0; j < tempArr[i].length; j++) {
          arr.push(tempArr[i][j])
        }
      }
      createOrUpdateList(arr).then(res => {
        if (res.code === 0) {
          this.showSetting = !this.showSetting
          this.$modal.msgSuccess("操作成功")
          this.getList() // 数据更新
        }
      })
    },
    // 点击班次红框选中当前数据
    chooseTeam(value) {
      if (this.showSetting) {
        this.$modal.msgWarning("当前处于设置模式")
        return false
      }
      this.chooseObj = value
      this.chooseTip = value.startDay + value.classesId // 匹配当前的样式
      this.jumpDisabled = false //查询按钮不禁用
    },
    // 自动排班
    schedulingBtn() {
      let tempData = this.list
      // 次月1号有值前端排班
      if (this.list[1][0].teamId) {
        let tempArr = Object.values(this.list)
        let arr = []
        let n = 0
        for (let i = 0; i < tempArr.length; i++) {
          if (n > 0) {
            break;
          }
          for (let j = 0; j < tempArr[i].length; j++) {
            if (tempArr[i][j].teamId) {
              arr.push(tempArr[i][j].teamId)
            } else {
              n++
            }
          }
        }
        let tempNum = 0
        for (let k = 0; k < tempArr.length; k++) {
          for (let v = 0; v < tempArr[k].length; v++) {
            let t = tempNum % arr.length
            if (arr.length === 1) {
              tempData[k+1][v].teamId = arr[0]
            } else {
              tempData[k+1][v].teamId = arr[t]
            }
            tempNum++
          }
        }
        this.list = []
        this.list = tempData
      } else {
        // 次月1号没有值,接口排班
        // console.log(moment(this.startDay).format("YYYY-MM-DD"))
        autoSet({
          year: this.year,
          month: moment(this.startDay).month() + 1
        }).then(res => {
          this.list = res.data || {}
        })
      }
    },
    // 设置按钮如果是上个月或者今天是本月最后一天，设置按钮置灰
    settingBtn() {
      let nowMonth = moment().startOf('month').valueOf()
      let startMonth = moment(this.startDay).valueOf()
      let nowDate = moment(new Date()).date()
      let sumDate = moment().daysInMonth()
      if (nowMonth > startMonth) { // 之前月
        this.settingBtnDis = true
      } else {
        if (nowDate < sumDate) {
          this.settingBtnDis = false
        } else {
          this.settingBtnDis = true
        }
      }
    },
    // 清除红框选中数据
    clearChoose() {
      this.chooseObj = {}
      this.chooseTip = ""
      this.jumpDisabled = true
    },
    // 切换月份显示
    toggleMonth() {
      this.year = moment(this.startDay).format("YYYY")
      let month = Number(moment(this.startDay).format("MM"))
      this.month = this.monthList[month - 1]
    },
    // 3个跳转按钮
    toOtherPage(val) {
      switch (val) {
        case '1':
          this.$router.push({
            // path: '/core/monitoring/production-line-data',
            name: 'ProductionLineData',
            params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
          })
          break;
        case '2': // 能源
          this.$router.push({
            name: 'EnergyReportSearch',
            params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
          })
          break;
        default:
          this.$router.push({
            // path: '/quality/monitoring/quality-statistics',
            name: 'QualityStatistics',
            params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
          })
      }
    }
    }
  }
</script>
<style lang='scss'>
.groupTeamScheduling {
  background-color: #F2F4F9;
  .operationArea {
    padding: 14px 10px 0 16px;
    margin-bottom: 8px;
    background-color: #fff;
    border-radius: 8px;
    .blue-block {
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #0B58FF;
      border-radius: 1px;
      margin-right: 8px;
      margin-top: 10px;
    }
    .separateStyle {
      display: inline-block;
      width: 1px;
      height: 24px;
      background: #E8E8E8;
      vertical-align: middle;
    }
    .el-form-item {
      margin-bottom: 10px;
    }
    .rightItem {
      float: right;
    }
  }
  // 日历
  .calenderArea {
    padding: 14px 10px 0 20px;
    background-color: #fff;
    border-radius: 8px;
    .el-calendar__body {
      padding: 10px 16px 16px 0;
    }
    .el-calendar__header {
      display: none;
    }
    .el-calendar-table > thead {
      height: 48px;
      font-size: 20px;
      font-weight: 500;
      color: #000000;
      background-color: rgba(242, 244, 249, 1);
    }
    .el-calendar-table__row {
      height: 133px;
      .prev, .next {
        pointer-events: none;
      }
      .el-calendar-day {
        padding: 0 10px;
        height: 100%;
        .dateStyle {
          font-size: 20px;
          font-weight: 500;
          color: #000000;
          text-align: right;
          height: 32px;
          line-height: 28px;
          padding-right: 10px;
        }
      }
    }
    .team-active {// 选中班组
      border:2px solid red
    }
    .class1, .class2, .class3 {
      padding: 0;
      font-weight: 600;
      margin-bottom: 2px;
      .selectDiv {
        position: relative;
        .toggle-icon {
          position: absolute;
          width: 26px;
          height: 26px;
          line-height: 26px;
          font-size: 14px;
          z-index: 1;
          text-align: center;
        }
        .toggle-icon-hide {
          position: absolute;
          width: 2px;
          height: 28px;
          z-index: 1;
        }
        .el-input__suffix {
          display: none;
        }
        .el-input--suffix .el-input__inner {
          padding: 0 4px 0 28px;
        }
        .el-input--small .el-input__inner {
          height: 28px;
          border: none;
          font-weight: 600;
        }
      }
      .labelClass {
        width: 100%;
        height: 28px;
        border: none;
        padding: 0;
        font-weight: 600;
        text-align: center;
      }
    }
    .class1 {
      .selectDiv {
        .toggle-icon, .toggle-icon-hide {
          background-color: #FACE00;
        }
        .el-input--small .el-input__inner {
          color: #E7A200;
          background-color: #FFEFC0;
        }
      }
      .labelClass {
        color: #E7A200;
        background-color: #FFEFC0;
      }
    }
    .class2 {
      .selectDiv {
        .toggle-icon, .toggle-icon-hide {
          background-color: #3984FF;
        }
        .el-input--small .el-input__inner {
          color: #2D7BFF;
          background-color: #BEEAFF;
        }
      }
      .labelClass {
        color: #2D7BFF;
        background-color: #BEEAFF;
      }
    }
    .class3 {
      .selectDiv {
        .toggle-icon, .toggle-icon-hide {
          background-color: #37D97F;
        }
        .el-input--small .el-input__inner {
          color: #129F51;
          background-color: #E0FFEE;
        }
      }
      .labelClass {
        color: #129F51;
        background-color: #E0FFEE;
      }
    }
  }
}
</style>