<template>
  <div>
    <el-card>
      <div style="padding: 10px;background-color:#F5F5F5">
        <div style="margin-left:20px;font-size: 14px">维修班组：</div>
        <el-select v-model="teamValue" class="select12" style="margin-left: 18px" placeholder="请选择维修班组" clearable @change="searchTable">
          <el-option
            v-for="item in teamValues"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button class="button11" style="margin-left: 20px;" size="small" icon="el-icon-circle-plus-outline" @click="batchSchedule('')">批量排班</el-button>
      </div>
      <div style="margin-top: 20px;margin-left: 10px">
        <el-row>
          <el-col v-for="(item,index) in ShiftValues" :span="1.5" :key="index" style="margin:2px 30px 0px 0px;">{{ item.label }} <span :style="{ background: item.Samplecolor }" style="text-indent:-9999px;"> &nbsp;&nbsp;&nbsp;&nbsp; </span></el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;margin-left: 10px;width: 1600px">
        <el-row style="width: 400px;margin: 0 auto;">
          <el-button style="margin-left: 100px;display: inline-block" type="text" size="small" icon="el-icon-d-arrow-left" @click="getLastMonth()"/>
          <div style="margin-left: 50px;margin-top: 9px;display: inline-block">{{ x + "," + year }}</div>
          <el-button style="margin-left: 50px;display: inline-block" type="text" size="small" icon="el-icon-d-arrow-right" @click="getNextMonth()"/>
        </el-row>
        <el-table
          :data="calenderTableData"
          :cell-style="addClass"
          :header-cell-style="{
            'background-color': 'white',
            'color': 'black',
            'font-weight': '800',
          }"
          empty-text=" "
          style="width: 100%;margin-top:20px;margin-left: 0"
          @cell-click="cellClick">
          <el-table-column label="姓名" prop="姓名" width="80px" fixed="left"/>
          <el-table-column :label="x" align="center">
            <el-table-column v-for="(item,index) of calenderTableHeader" :key="item.日期" :label="item.详细日期" :prop="prop[index]" :render-header="renderHeader" width="50px"/>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!--    单独排班-->
    <el-dialog :title="calendarTitle" :visible.sync="calendarDialogFormVisible" width="300px">
      <el-form ref="calenderForm" :model="calenderForm" label-position="top" label-width="120px" style="width: 100%;margin: auto">
        <div style="font-size: 16px;margin-bottom: 20px">{{ calenderForm.Name }}</div>
        <el-form-item label="Choose a date" prop="dateValue">
          <el-date-picker
            :class="styleAble === true ? 'input2' : 'input3'"
            v-model="calenderForm.dateValue"
            :picker-options="pickerOptions"
            :disabled="dateAble"
            style="width: 200px"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="班次" prop="className">
          <el-select
            :class="styleAble === true ? 'input2' : 'input3'"
            v-model="calenderForm.className"
            :disabled="selectAble"
            style="width: 200px"
            placeholder="请选择班次"
            @change="getIsSpecial">
            <el-option
              v-for="item in classNames"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-show="timeAble" prop="startTimeValue" label="开始时间" >
          <!-- <vue-clock-picker
            id="clockStart"
            :disabled="startTimeAble"
            :input-class="styleAble === true ? 'input-class2' : 'input-class1'"
            v-model="calenderForm.startTimeValue"
            done-text="√"
            cancel-text="×"
            active-color="rgb(192,192,192)"
            color="black"/> -->
          <el-time-picker
            v-model="calenderForm.startTimeValue"
            :disabled="startTimeAble"
            :class="styleAble === true ? 'input4' : 'input3'"
            format="HH:mm"
            value-format="HH:mm"/>
        </el-form-item>
        <el-form-item v-show="timeAble" prop="endTimeValue" label="结束时间" >
          <!-- <vue-clock-picker
              id="clockEnd"
              :disabled="endTimeAble"
              :input-class="styleAble === true ? 'input-class2' : 'input-class1'"
              v-model="calenderForm.endTimeValue"
              done-text="√"
              cancel-text="×"
              active-color="rgb(192,192,192)"
              color="black"/> -->
          <el-time-picker
            :disabled="endTimeAble"
            v-model="calenderForm.endTimeValue"
            :class="styleAble === true ? 'input4' : 'input3'"
            format="HH:mm"
            value-format="HH:mm"/>
        </el-form-item>
        <el-form-item >
          <div style="margin-left: 100px !important;margin-top: 10px !important;">
            <el-button :style="submitAble === false ? 'margin-left: 70px' : ''" class="button11" size="small" @click="addCallOff('calenderForm')">取消</el-button>
            <el-button v-show="submitAble" :disabled="addDisable" class="button12" size="small" @click="addSubmit('calenderForm')">确 认</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    批量排班-->
    <el-dialog :title="batchScheduleTitle" :visible.sync="batchScheduleDialogFormVisible" width="700px">
      <el-row>
        <el-col :span="8">
          <div>
            <div style="font-size: 14px;font-weight: bold;margin-bottom: 5px">开始日期 </div>
            <el-date-picker
              v-model="startDateValue"
              :picker-options="pickerOptions"
              class="input3"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"/>
          </div>
          <div style="font-size: 14px;font-weight: bold;margin-bottom: 5px;margin-top: 30px">维修班组管理 </div>
          <el-select v-model="ScheduleTeamValue" class="input3" placeholder="请选择班组" @change="batchScheduleTeamPerson()">
            <el-option
              v-for="item in ScheduleTeamValues"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <div v-show="checkBox" style="margin: 15px 0;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
              <div style="font-size: 20px;line-height: 1.5em">Select all</div>
            </el-checkbox>
            <el-checkbox-group v-model="checkedCities" style="width:20px" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city.人员代码" :key="city.人员代码" :value="city.人员代码"><div style="font-size: 20px;line-height: 1.5em">{{ city.姓名 }}</div></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="14">
          <div style="margin-left: 20px">
            <div style="font-size: 14px;font-weight: bold;margin-bottom: 5px"> 结束日期</div>
            <el-date-picker
              v-model="endDateValue"
              :picker-options="pickerOptions"
              class="input3"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"/>
          </div>
          <el-main>
            <el-col v-loading="" :span="24">
              <el-form v-for="(item, i) in FormArr" :inline="true" :key="i" label-position="top" style="margin-top:5px">
                <el-form-item label="班次" style="margin-bottom: 0 !important">
                  <el-select v-model="item.value" class="input3" placeholder="请选择班次" clearable>
                    <el-option
                      v-for="item in numberNames"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                  <el-button type="text" icon="el-icon-delete" @click="Delete(item.index)"/>
                </el-form-item>
              </el-form>
            </el-col>
          </el-main>
          <div>
            <el-button class="button11" style="margin-top: 0px;margin-left:20px;width:100px" @click="AddForm">添加排班</el-button>
          </div>
        </el-col>
      </el-row>
      <div style="margin-bottom: 20px !important;margin-top: 30px !important;margin-left: 450px !important">
        <el-button :disabled="batchScheduleSubmitAble" class="button11" @click="batchScheduleSubmit()">确认</el-button>
        <el-button class="button12" @click="batchScheduleCallOff()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { ExecDatabase } from '@/main'
import VueClockPicker from '@pencilpix/vue2-clock-picker'
import '@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css'
export default {
  components: {
    VueClockPicker
  },
  data() {
    return {
      teamValue: '',
      teamValues: [],
      ShiftValues: [], // 班次颜色展示
      calenderTableData: [],
      calenderTableHeader: [],
      value: '',
      nextdate: '',
      month: '',
      x: '',
      year: '',
      prop: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      classNames: [], // 单独排班班次数组
      calendarTitle: '',
      calendarDialogFormVisible: false,
      calenderForm: {
        PeopleNum: '',
        UserID: '',
        Name: '',
        dateValue: '',
        startTimeValue: '',
        className: '', // 单独排班班次
        endTimeValue: ''
      },
      submitAble: true,
      selectAble: false,
      dateAble: false,
      startTimeAble: false,
      endTimeAble: false,
      timeAble: false,
      styleAble: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7// 今天以前的日期禁用
        },
        value: ''
      },
      addDisable: false,
      isSpecial: '',
      batchScheduleTitle: '',
      batchScheduleDialogFormVisible: false, // 增加弹框
      startDateValue: '',
      endDateValue: '',
      ScheduleTeamValues: [],
      ScheduleTeamValue: '',
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      batchScheduleSubmitAble: true,
      checkBox: false,
      FormArr: [
        {
          index: 0,
          value: ''
        }
      ],
      numberNames: [], // 批量排班班次数组
      numberName: '', // 批量排班班次
      cityOptions: [],
      str: '',
      班次代码: ''
    }
  },

  created() {
    this.getShiftValues()// 班组颜色展示
  },
  mounted() {
    this.getDate()
    this.getTeamValue()
    this.getSearchCalenderTable()
  },
  methods: {
    // 获得班次
    getShiftValues() {
      this.ShiftValues = []
      var Data = this.CreateData('11', '基础数据_维修班次_查询')
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.ShiftValues.push({
            label: v.班次名称,
            value: v.班次代码,
            Samplecolor: v.示例颜色
          })
        })
      })
    },
    // 获取当前时间的方法
    getDate() {
      const aData = new Date()
      this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.year = aData.getFullYear()
      this.month = aData.getMonth() + 1
      this.nextdate = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + (aData.getDate() + 1)
      switch (this.month) {
        case 1:this.x = '一月'
          break
        case 2:this.x = '二月'
          break
        case 3:this.x = '三月'
          break
        case 4:this.x = '四月'
          break
        case 5:this.x = '五月'
          break
        case 6:this.x = '六月'
          break
        case 7:this.x = '七月'
          break
        case 8:this.x = '八月'
          break
        case 9:this.x = '九月'
          break
        case 10:this.x = '十月'
          break
        case 11:this.x = '十一月'
          break
        case 12:this.x = '十二月'
          break
      }
    },
    // 获得班组
    getTeamValue() {
      this.teamValues = []
      var Data = this.CreateData('11', '基础数据_班组_查询')
      ExecDatabase(Data).then(response => {
        this.teamValues = []
        response.data.map(v => {
          this.teamValues.push({
            label: v.班组名称,
            value: v.班组代码
          })
        })
      })
    },
    // 获得表格表头
    getSearchCalenderTable() {
      this.calenderTableData = []
      const param = []
      param[0] = ['工作年', this.year]
      param[1] = ['工作月', this.month]
      var Data = this.CreateData('11', '工作日历_月份表头_查询', param)
      ExecDatabase(Data).then(response => {
        this.calenderTableHeader = response.data
        console.log(this.calenderTableHeader, '表头')
      })
    },
    // 双层表头
    renderHeader(createElement, { column, _self }) {
      const label = column.label
      const labelArr = label.split(',')
      return createElement(
        'span', // 创建最外层的标签可随意
        [
          createElement('p', { // 创建第一个元素的标签可随意
            attrs: { type: 'text', style: 'font-size:12px;line-height:2px' }
          }, [labelArr[0]]),
          createElement('p', { // 创建第二个元素的标签可随意
            attrs: { type: 'text', style: 'font-size:12px;line-height:2px' } // 给分割的某个元素单独加样式
          }, [labelArr[1]])
        ]
      )
    },
    // 获得表格
    searchTable() {
      this.calenderTableData = []
      const param = []
      param[0] = ['Date', this.year + '-' + this.month + '-' + '01']
      param[1] = ['班组代码', this.teamValue]
      var Data = this.CreateData('11', '工作日历_人员班次_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.calenderTableData.push({
            姓名: v.姓名,
            班组代码: v.班组代码,
            人员代码: v.人员代码,
            1: v.一,
            2: v.二,
            3: v.三,
            4: v.四,
            5: v.五,
            6: v.六,
            7: v.七,
            8: v.八,
            9: v.九,
            10: v.十,
            11: v.十一,
            12: v.十二,
            13: v.十三,
            14: v.十四,
            15: v.十五,
            16: v.十六,
            17: v.十七,
            18: v.十八,
            19: v.十九,
            20: v.二十,
            21: v.二十一,
            22: v.二十二,
            23: v.二十三,
            24: v.二十四,
            25: v.二十五,
            26: v.二十六,
            27: v.二十七,
            28: v.二十八,
            29: v.二十九,
            30: v.三十,
            31: v.三十一
          })
        })
      })
    },
    // 表格单元格样式
    addClass({ row, column, rowIndex, columnIndex }) {
      var date = new Date()
      const label = column.label
      const labelArr = label.split(',')
      if (columnIndex !== 0) {
        if (labelArr[1] === 'Sun' || labelArr[1] === 'Sat') {
          if ((this.year === date.getFullYear()) && (this.month === date.getMonth() + 1) && parseInt(column.property) === date.getDate()) {
            if (row[column.property] !== null && row[column.property] !== '#ffffff') {
              return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from( ' + row[column.property] + '), to(rgb(252,248,227)), color-stop(0.65, ' + row[column.property] + '), color-stop(0.65, rgb(252,248,227)))'
            } else if (row[column.property] === null || row[column.property] === '#ffffff') {
              return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from(rgb(252,248,227)), to(rgb(252,248,227)), color-stop(0.65,rgb(252,248,227)), color-stop(0.65, rgb(252,248,227)))'
            }
          } else if (!((this.year === date.getFullYear()) && (this.month === date.getMonth() + 1) && parseInt(column.property) === date.getDate())) {
            if (row[column.property] !== null && row[column.property] !== '#ffffff') {
              return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from( ' + row[column.property] + '), to(#F3F3F3), color-stop(0.65, ' + row[column.property] + '), color-stop(0.65, #F3F3F3))'
            } else if (row[column.property] === null || row[column.property] === '#ffffff') {
              return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#F3F3F3), color-stop(0.65,#F3F3F3), color-stop(0.65, #F3F3F3))'
            }
          }
        } else if ((this.year === date.getFullYear()) && (this.month === date.getMonth() + 1) && parseInt(column.property) === date.getDate()) {
          if (row[column.property] !== null && row[column.property] !== '#ffffff') {
            return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from( ' + row[column.property] + '), to(rgb(252,248,227)), color-stop(0.65, ' + row[column.property] + '), color-stop(0.65, rgb(252,248,227)))'
          } else if (row[column.property] === null || row[column.property] === '#ffffff') {
            return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from(rgb(252,248,227)), to(rgb(252,248,227)), color-stop(0.65,rgb(252,248,227)), color-stop(0.65, rgb(252,248,227)))'
          }
        } else if ((labelArr[1] !== 'Sun' || labelArr[1] !== 'Sat') && (!((this.year === date.getFullYear()) && (this.month === date.getMonth() + 1) && parseInt(column.property) === date.getDate()))) {
          if (row[column.property] !== null && row[column.property] !== '#ffffff') {
            return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from( ' + row[column.property] + '), to(#ffffff), color-stop(0.65, ' + row[column.property] + '), color-stop(0.65, #ffffff))'
          } else if (row[column.property] === null || row[column.property] === '#ffffff') {
            return 'text-indent:-9999px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff), color-stop(0.65,#ffffff), color-stop(0.65, #ffffff))'
          }
        }
      }
    },
    // 月跳转
    getLastMonth() {
      this.month = this.month - 1
      if (this.month < 1) {
        this.year = this.year - 1
        this.month = 12
      }
      switch (this.month) {
        case 1:this.x = '一月'
          break
        case 2:this.x = '二月'
          break
        case 3:this.x = '三月'
          break
        case 4:this.x = '四月'
          break
        case 5:this.x = '五月'
          break
        case 6:this.x = '六月'
          break
        case 7:this.x = '七月'
          break
        case 8:this.x = '八月'
          break
        case 9:this.x = '九月'
          break
        case 10:this.x = '十月'
          break
        case 11:this.x = '十一月'
          break
        case 12:this.x = '十二月'
          break
      }
      this.getSearchCalenderTable()
      this.searchTable()
    },
    getNextMonth() {
      this.month = this.month + 1
      if (this.month > 12) {
        this.year = this.year + 1
        this.month = 1
      }
      switch (this.month) {
        case 1:this.x = '一月'
          break
        case 2:this.x = '二月'
          break
        case 3:this.x = '三月'
          break
        case 4:this.x = '四月'
          break
        case 5:this.x = '五月'
          break
        case 6:this.x = '六月'
          break
        case 7:this.x = '七月'
          break
        case 8:this.x = '八月'
          break
        case 9:this.x = '九月'
          break
        case 10:this.x = '十月'
          break
        case 11:this.x = '十一月'
          break
        case 12:this.x = '十二月'
          break
      }
      this.getSearchCalenderTable()
      this.searchTable()
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.calendarTitle = '单独排班'
      this.calendarDialogFormVisible = true
      this.getClassNames() // 单独排班
      this.calenderForm.startTimeValue = ''
      this.calenderForm.endTimeValue = ''
      this.timeAble = false
      this.calenderForm.Name = row.姓名
      this.calenderForm.PeopleNum = row.人员代码
      this.calenderForm.className = ''
      this.calenderForm.dateValue = ''
      const param = []
      param[0] = ['人员代码', this.calenderForm.PeopleNum]
      param[1] = ['日期', this.year + '-' + this.month + '-' + [column.property]]
      var Data = this.CreateData('11', '工作日历_单独排班_查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.calenderForm.className = response.data[0].班次代码
          this.calenderForm.startTimeValue = response.data[0].特殊班次开始时间
          this.calenderForm.endTimeValue = response.data[0].特殊班次结束时间
          if (response.data[0].是否特殊班次 === 1) {
            this.timeAble = true
          } else if (response.data[0].是否特殊班次 === 0) {
            this.timeAble = false
          }
        }
      })
      this.calenderForm.dateValue = this.year + '-' + this.month + '-' + [column.property]
      var date1 = new Date(this.calenderForm.dateValue)// 排班日期
      var date2 = new Date(this.value)// 当前日期
      this.styleAble = (date1 < date2)
      if (date1 < date2) {
        if (row[column.property] === null || row[column.property] === '#ffffff') {
          this.calendarDialogFormVisible = false
        }
        this.dateAble = true
        this.selectAble = true
        this.submitAble = false
        this.startTimeAble = true
        this.endTimeAble = true
      } else if (date1 >= date2) {
        this.selectAble = false
        this.dateAble = false
        this.submitAble = true
        this.startTimeAble = false
        this.endTimeAble = false
      }
    },
    // 单独排班班次查询
    getClassNames() {
      this.classNames = []
      var Data = this.CreateData('11', '基础数据_维修班次_查询_全部班次')
      ExecDatabase(Data).then(response => {
        this.classNames = []
        response.data.map(v => {
          this.classNames.push({
            label: v.班次名称,
            value: v.班次代码,
            special: v.是否特殊班次
          })
        })
      })
    },
    // 单独排班点击班次下拉框，如果班次是特殊班次弹出时间框，否则不显示
    getIsSpecial() {
      this.calenderForm.startTimeValue = ''
      this.calenderForm.endTimeValue = ''
      // for (let i = 0; i <= this.classNames.length; i++) {
      for (var i in this.classNames) {
        if (this.calenderForm.className === this.classNames[i].value) {
          this.isSpecial = this.classNames[i].special
          if (this.isSpecial === 1) {
            this.timeAble = true
          } else if (this.isSpecial === 0) {
            this.timeAble = false
          }
        }
      }
    },
    // 修改确定
    addSubmit(calenderForm) {
      this.$refs[calenderForm].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['人员代码', this.calenderForm.PeopleNum]
          param[1] = ['班次日期', this.calenderForm.dateValue]
          param[2] = ['班次代码', this.calenderForm.className]
          param[3] = ['特殊班次开始时间', this.calenderForm.startTimeValue]
          param[4] = ['特殊班次结束时间', this.calenderForm.endTimeValue]
          // console.log(param)
          var Data = this.CreateData('12', '工作日历_单独排班_修改', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '排班修改成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('排班修改失败')
            }
          })
          this.calendarDialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 修改取消
    addCallOff(calenderForm) {
      this.calendarDialogFormVisible = false
      this.$refs[calenderForm].resetFields()
    },
    // 批量排班
    batchSchedule() {
      this.FormArr = [{ index: 0, value: '' }]
      this.startDateValue = this.value
      this.endDateValue = this.nextdate
      this.ScheduleTeamValue = ''
      this.checkBox = false
      this.batchScheduleSubmitAble = false // 本来打算做按钮禁用了，没用上
      this.batchScheduleTitle = '批量排班'
      this.batchScheduleDialogFormVisible = true
      this.batchScheduleTeamValue()
      this.getNumberClass() // 批量排班
    },
    // 批量排班班次查询
    getNumberClass() {
      this.numberNames = []
      var Data = this.CreateData('11', '基础数据_维修班次_查询_非特殊班次')
      ExecDatabase(Data).then(response => {
        this.numberNames = []
        response.data.map(v => {
          this.numberNames.push({
            label: v.班次名称,
            value: v.班次代码
          })
        })
      })
    },
    // 班组查询
    batchScheduleTeamValue() {
      this.ScheduleTeamValues = []
      var Data = this.CreateData('11', '基础数据_班组_查询')
      ExecDatabase(Data).then(response => {
        this.ScheduleTeamValues = []
        response.data.map(v => {
          this.ScheduleTeamValues.push({
            label: v.班组名称,
            value: v.班组代码
          })
        })
      })
    },
    batchScheduleTeamPerson() {
      this.checkBox = true
      this.cities = []
      const param = []
      param[0] = ['班组代码', this.ScheduleTeamValue]
      var Data = this.CreateData('11', '基础数据_排班日历_人员查询', param)
      ExecDatabase(Data).then(response => {
        this.cityOptions = []
        response.data.map(v => {
          this.cityOptions.push(
            v.人员代码
          )
        })
        this.cities = response.data
      })
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    // 添加及删除班次下拉框
    AddForm() {
      this.FormArr.push({
        index: this.FormArr.length,
        value: ''
      })
      // console.log(this.FormArr)
    },
    Delete(index) {
      this.FormArr.splice(index, 1)
      for (const i in this.FormArr) {
        this.FormArr[i].index = i
      }
    },
    batchScheduleSubmit() {
    // 将多选框的人员放在数组中
      var str = ''
      this.FormArr.forEach(function(e) {
        str += e.value + ','
      })
      str = str.substring(0, str.length - 1)
      this.test = str.split(',')
      var param = []
      param[0] = ['人员代码组', this.checkedCities]
      param[1] = ['班次代码组', this.test]
      param[2] = ['开始日期', this.startDateValue]
      param[3] = ['结束日期', this.endDateValue]
      var Data = this.CreateData('12', '工作日历_人员班次_增加_时间区间', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '批量排班增加成功',
            type: 'success'
          })
          this.searchTable()
        } else {
          this.$message.error('批量排班增加失败')
        }
      })
      this.batchScheduleDialogFormVisible = false
    },
    // 修改取消
    batchScheduleCallOff() {
      this.batchScheduleDialogFormVisible = false
    }
  }
}
</script>
<style scoped>
  /*表格整体样式*/
  >>>.el-table__header tr,
  >>>.el-table__header th {
    padding: 0;
    height: 30px;
    line-height: 40px;
  }
  >>>.el-table__body tr,
  >>>.el-table__body td {
    padding: 0;
    height: 30px;
    line-height: 40px;
  }
  >>>.input-class1{
    height: 50px;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-bottom: 1px !important;
    border-right: 0px;
    background: #f3f3f3;
    width: 210px;
    text-align: inherit;
    text-indent: 20px;
  }
  >>>.input-class2{
    height: 50px;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px !important;
    background: #ffffff;
    color: black;
    width: 210px;
    text-align: inherit;
    text-indent: 20px;
  }
  .input2 >>> .el-input__inner{
     height: 50px;
     border-radius: 0px;
     border-top: 0px;
     border-left: 0px;
     border-right: 0px;
     background: #ffffff;
   }
  .input3 >>> .el-input__inner{
    height: 50px;
    width: 200px;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: #f3f3f3;
  }
</style>
