GEKE_VIEW/src/views/system/modules/AttendanceRuleModal.vue

<template>
  <j-modal title="排班" :width="1000" :visible="visible" @ok="save()" switchFullscreen @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <!-- <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="*上班类型">
         <a-radio-group v-model="types">
            <a-radio value="1">固定时间上下班</a-radio>
            <a-radio value="2">按班次上下班</a-radio>
            <a-radio value="3">自由上下班</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="*上班时间" v-if="types==1">
          <a-time-picker showTime format='HH:mm' v-model="startDate">
            <div slot="addon" style="width:100%;overflow:hidden">
              <div style="width:50%;float:left;border-right:solid 1px ;text-align:center">
                <div style="padding-top:10%;padding-bottom:10%">
                  <span style="width:100%;">时</span>
                </div>
              </div>
              <div style="width:50%;float:right;text-align:center">
                <div style="padding-top:10%;padding-bottom:10%">
                  <span style="width:100%;">分</span>
                </div>
              </div>
            </div>
          </a-time-picker>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="*下班时间" v-if="types==1">
          <a-time-picker showTime format='HH:mm' v-model="endDate">
            <div slot="addon" style="width:100%;overflow:hidden">
              <div style="width:50%;float:left;border-right:solid 1px ;text-align:center">
                <div style="padding-top:10%;padding-bottom:10%">
                  <span style="width:100%;">时</span>
                </div>
              </div>
              <div style="width:50%;float:right;text-align:center">
                <div style="padding-top:10%;padding-bottom:10%">
                  <span style="width:100%;">分</span>
                </div>
              </div>
            </div>
          </a-time-picker>
        </a-form-item>
      </a-form> -->
      <!-- <a-form-item v-if="types!=2" label="*打卡人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-tag v-for='(user,i) in selectUsers' :key="user.id" closable @close="tagBtnCloseFunc(user)">{{user.realname}}
        </a-tag>

      </a-form-item> -->

      <div v-if="types=='2'">
        <div class='month'>
          <ul>
            <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
            <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
            <li class='year-month'>
              <span class='choose-year'>{{ currentYear }}年</span>
              <span class='choose-month'>{{ currentMonth }}月</span>
            </li>
            <li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
          </ul>
          <br>
        </div>

        <div>
          <a-table bordered :data-source="dataSource" :loading="loading" :columns="columns" :scroll="{ x:300,y:500 }" :pagination="ipagination"
            @change="handleTableChange">
            <template v-for='(dayobject,i) in days' :slot="dayobject.day.getDate()" style="color: #ff6b81">
              <div style="height: 35px;">
                <div style="text-align: center;margin-top: -10px;">
                  <p>{{dayobject.day.getDate()}}</p>
                  <div style="margin-top: -10px;">
                    <p v-if='dayobject.day.getDay()==0'>日</p>
                    <p v-else-if='dayobject.day.getDay()==1'>一</p>
                    <p v-else-if='dayobject.day.getDay()==2'>二</p>
                    <p v-else-if='dayobject.day.getDay()==3'>三</p>
                    <p v-else-if='dayobject.day.getDay()==4'>四</p>
                    <p v-else-if='dayobject.day.getDay()==5'>五</p>
                    <p v-else-if='dayobject.day.getDay()==6'>六</p>
                  </div>
                </div>
              </div>
            </template>


            <span v-for='(d,i) in tpdata' style="margin-left: -11px;" :slot="d" slot-scope="text, record, index">
              <a-dropdown :trigger="['click']">
                <a-tag color="blue" v-if="text=='休息'" @click="UserType(d,record,index)">{{text}}</a-tag>
                <a-tag color="#87d068" v-else-if="text!='休息'&&text!=''&&text!=null" @click="UserType(d,record,index)">
                  {{text}}
                </a-tag>
                <a-tag color="#FFFFFF" v-else @click="UserType(d,record,index)" style="width: 40px;">.</a-tag>
                <a-menu slot="overlay" v-if="record.isColse">
                  <a-menu-item key="0">
                    <a @click="shiftOks(0,d,record,index)">休息</a>
                  </a-menu-item>
                  <a-menu-item v-if="isShow" v-for="(item,index) in shiftlist" :key="item.id">
                    <a @click="shiftOks(item,d,record,index)">{{item.name}} ({{item.startDate}} - {{item.endDate}})</a>
                  </a-menu-item>

                </a-menu>
              </a-dropdown>


            </span>

          </a-table>
        </div>

        </a-calendar>
        <a-modal v-model="visibles" title="班次" @ok="shiftOk()">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">

                <a-col :xl="10" :lg="10" :md="8" :sm="24">
                  <a-form-item label="班次名称">
                    <a-select v-model="shiftname" placeholder="请选择班次">
                      <a-select-option value="">请选择</a-select-option>
                      <a-select-option value="a">休息</a-select-option>
                      <a-select-option v-for="(item,index) in shiftlist" :value="item.id">{{item.name}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

              </a-row>
            </a-form>
          </div>
        </a-modal>
      </div>
    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction,
    getFileAccessHttpUrl,
    getAction,
    deleteAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'
  import ar from '../AttendanceRuleList.vue'
  export default {
    name: "UserShiftModal",
    mixins: [JeecgListMixin],
    data() {
      return {
        tts: false,
        tpdata: [],
        dataSource: [],
        columns: [],
        queryParam: {
          shiftDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          type: "1"
        },
        types: "1",
        currentMonth: new Date().getMonth(),
        currentYear: new Date().getYear(),
        days: [],
        selectUsers: [],
        checkUserIds: "",
        visibles: false,
        shiftDate: null,
        startDate: "",
        endDate: "",
        show: 1,
        id: null,
        obj: {
          "cid": "C0",
          "ctext": "区县"
        },
        shiftname: "",
        username: "",
        deptlist: null,
        shiftlist: null,
        title: "操作",
        visible: false,
        key: null,
        index: null,
        vs: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        isShow: true,
        listData: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          add: "/attendanceRule/attendanceRule/add",
          userShift: "/userShift/userShift/queryMothByUser",
          shift: "/shift/shift/lists",
          list: "/sys/user/queryMothByUsers",
          moth: "/userShift/userShift/queryMothByUser",
          deptlist: "/sys/sysDepart/listAll",
          delUserShift: '/userShift/userShift/delete',
          edit: '/attendanceRule/attendanceRule/edit',
          userShiftDay:'/userShift/userShift/UserShiftType'
        },
      }
    },
    created() {
      this.initData(null)
      this.queryShift()
    },
    methods: {
      tagBtnCloseFunc(e) {
        const tags = this.selectUsers.filter(tag => tag !== e);
        this.selectUsers = tags;
      },
      UserType(e, a, index) {
        this.isShow = true;
        var d = new Date(this.formatDate(this.currentYear, this.currentMonth, e))
        var obj = this.dataSource[index];
        var list = [];
        var sum=0;
        var f=false;
        if (d.getDay() == 1) {
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
          list.push(this.getDays(2, d));
          list.push(this.getDays(3, d));
          list.push(this.getDays(4, d));
          list.push(this.getDays(5, d));
          list.push(this.getDays(6, d));
        } else if (d.getDay() == 2) {
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
          list.push(this.getDays(2, d));
          list.push(this.getDays(3, d));
          list.push(this.getDays(4, d));
          list.push(this.getDays(5, d));
        } else if (d.getDay() == 3) {
          list.push(this.getDays(-2, d));
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
          list.push(this.getDays(2, d));
          list.push(this.getDays(3, d));
          list.push(this.getDays(4, d));
        } else if (d.getDay() == 4) {
          list.push(this.getDays(-3, d));
          list.push(this.getDays(-2, d));
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
          list.push(this.getDays(2, d));
          list.push(this.getDays(3, d));
        } else if (d.getDay() == 5) {
          list.push(this.getDays(-4, d));
          list.push(this.getDays(-3, d));
          list.push(this.getDays(-2, d));
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
          list.push(this.getDays(2, d));
        } else if (d.getDay() == 6) {
          list.push(this.getDays(-5, d));
          list.push(this.getDays(-4, d));
          list.push(this.getDays(-3, d));
          list.push(this.getDays(-2, d));
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
          list.push(this.getDays(1, d));
        } else if (d.getDay() == 0) {
          list.push(this.getDays(-6, d));
          list.push(this.getDays(-5, d));
          list.push(this.getDays(-4, d));
          list.push(this.getDays(-3, d));
          list.push(this.getDays(-2, d));
          list.push(this.getDays(-1, d));
          list.push(this.getDays(0, d));
        }


        for (var i = 0; i < list.length; i++) {
          if (list[i].split("-")[0] != this.currentYear || list[i].split("-")[1] != this.currentMonth) {
            getAction(this.url.userShiftDay, {
                userid: a.id,
                shiftDate:moment(new Date(list[i])).format('YYYY-MM-DD HH:mm:ss') ,
              }
              ).then((res) => {
              if (res.success) {
                if(res.result!=0||res.result!='0'){
                  sum++;
                }
              } 
            }).finally(() => {
            })
            list.splice(i, 1)
          }
        }

        for (var o = 0; o< list.length; o++) {
          for (var t in obj) { //用javascript的for/in循环遍历对象的属性
            if (t == "shiftid" + list[o].split("-")[2]&&list[o].split("-")[2]==e) {
              if(obj[t]!=0){
                sum++;
                f=true;
              }
            }else if(t == "shiftid" + list[o].split("-")[2]){
              if(obj[t]!=0){
                sum++;
              }
            }
          }

        }

        if (a.category == 106) {
          if (sum==6&&f==false) {
            this.isShow = false;
          }

        } else{
          if (sum==5&&f==false) {
            this.isShow = false;
          }
        }
      },
      // 获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】
      getDays(day, date) {
        var today = new Date(date);
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码

        var tYear = today.getFullYear();
        var tMonth = today.getMonth() + 1;
        var tDate = today.getDate();
        return tYear + "-" + tMonth + "-" + tDate;
      },
      doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
          m = "0" + month;
        }
        return m;
      },

      shiftOks(a, b, c, d) {
        var date = this.currentYear + "-" + this.currentMonth + "-" + b + " 00:00:000";
        var name = a.name;
        var shift = a.id;
        if (a == 0 || a == "0") {
          name = "休息";
          shift = "0";
        }


        if (b == 1) {
          c.a1 = name;
          c.shiftid1 = shift;
        } else if (b == 2) {
          c.a2 = name;
          c.shiftid2 = shift;
        } else if (b == 3) {
          c.a3 = name;
          c.shiftid3 = shift;
        } else if (b == 4) {
          c.a4 = name;
          c.shiftid4 = shift;
        } else if (b == 5) {
          c.a5 = name;
          c.shiftid5 = shift;
        } else if (b == 6) {
          c.a6 = name;
          c.shiftid6 = shift;
        } else if (b == 7) {
          c.a7 = name;
          c.shiftid7 = shift;
        } else if (b == 8) {
          c.a8 = name;
          c.shiftid8 = shift;
        } else if (b == 9) {
          c.a9 = name;
          c.shiftid9 = shift;
        } else if (b == 10) {
          c.a10 = name;
          c.shiftid10 = shift;
        } else if (b == 11) {
          c.a11 = name;
          c.shiftid11 = shift;
        } else if (b == 12) {
          c.a12 = name;
          c.shiftid12 = shift;
        } else if (b == 13) {
          c.a13 = name;
          c.shiftid13 = shift;
        } else if (b == 14) {
          c.a14 = name;
          c.shiftid14 = shift;
        } else if (b == 15) {
          c.a15 = name;
          c.shiftid15 = shift;
        } else if (b == 16) {
          c.a16 = name;
          c.shiftid16 = shift;
        } else if (b == 17) {
          c.a17 = name;
          c.shiftid17 = shift;
        } else if (b == 18) {
          c.a18 = name;
          c.shiftid18 = shift;
        } else if (b == 19) {
          c.a19 = name;
          c.shiftid19 = shift;
        } else if (b == 20) {
          c.a20 = name;
          c.shiftid20 = shift;
        } else if (b == 21) {
          c.a21 = name;
          c.shiftid21 = shift;
        } else if (b == 22) {
          c.a22 = name;
          c.shiftid22 = shift;
        } else if (b == 23) {
          c.a23 = name;
          c.shiftid23 = shift;
        } else if (b == 24) {
          c.a24 = name;
          c.shiftid24 = shift;
        } else if (b == 25) {
          c.a25 = name;
          c.shiftid25 = shift;
        } else if (b == 26) {
          c.a26 = name;
          c.shiftid26 = shift;
        } else if (b == 27) {
          c.a27 = name;
          c.shiftid27 = shift;
        } else if (b == 28) {
          c.a28 = name;
          c.shiftid28 = shift;
        } else if (b == 29) {
          c.a29 = name;
          c.shiftid29 = shift;
        } else if (b == 30) {
          c.a30 = name;
          c.shiftid30 = shift;
        } else if (b == 31) {
          c.a31 = name;
          c.shiftid31 = shift;
        }


      },

      pickPre: function(year, month) {
        var d = new Date(this.formatDate(year, month, 1))
        d.setDate(0)
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        this.queryParam.shiftDate = this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
        this.$options.methods.searchQuery.call(this)
      },

      pickNext: function(year, month) {
        var d = new Date(this.formatDate(year, month + 1, 1))
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        this.queryParam.shiftDate = this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
        this.$options.methods.searchQuery.call(this)
      },

      initData: function(cur) {
        this.columns = [];
        var date
        if (cur) {
          date = new Date(cur)
        } else {
          var now = new Date()
          date = now;
        }
        this.currentDay = date.getDate()
        this.currentYear = date.getFullYear()
        this.currentMonth = date.getMonth() + 1
        this.currentWeek = date.getDay() // 1...6,0

        var str = this.formatDate(
          this.currentYear,
          this.currentMonth,
          this.currentDay
        )
        this.days.length = 0
        var moth = new Date(str);
        moth.setDate(28)

        moth.setMonth(moth.getMonth() + 1);
        moth.setDate(0);
        this.columns.push({
          title: '名称',
          dataIndex: 'realname',
          width: '100px'
        })
        for (var i = 1; i <= moth.getDate(); i++) {
          var d = new Date(this.formatDate(this.currentYear, this.currentMonth, i))
          this.tpdata.push(i)
          var dayobjectSelf = {
            width: '49px',
            slots: {
              title: d.getDate()
            },
            dataIndex: "a" + d.getDate(),
            scopedSlots: {
              customRender: i
            },

          } // 用一个对象包装Date对象  以便为以后预定功能添加属性
          var dat = {};
          dat.day = d;

          this.days.push(dat)
          this.columns.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
        }
      },

      // 返回 类似 2016-01-02 格式的字符串
      formatDate: function(year, month, day) {
        var y = year
        if (month > 12) {
          y = y + 1;
          month = 1;
        };
        var m = month
        if (m < 10) m = '0' + m
        var d = day
        if (d < 10) d = '0' + d
        return y + '-' + m + '-' + d
      },

      delUserShift(e) {
        this.vs = true;
        deleteAction(this.url.delUserShift, {
          id: e
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.message);

          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.vs = false;
          this.getListData(moment(this.queryParam.entryDate).format('YYYY-MM-DD HH:mm:ss'));
        })
      },
      queryUserShifts() {
        this.queryParam.shiftDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        this.$options.methods.searchQuery.call(this);

      },



      close() {
        this.selectedRowKeys = [];
        this.queryParam = {};
        this.shiftname = "";
        this.id = null;
        this.$emit('close');
        this.dataSource = [];
        this.visible = false;
        this.selectUsers = [];
        this.startDate = "";
        this.endDate = "";
        this.initData(null);

      },
      queryShift() {
        httpAction(this.url.shift, "", "get").then((res) => {
          if (res.success) {
            this.shiftlist = res.result;
          }
        }).finally(() => {

        })

      },

      handleCancel() {
        this.close()
      },
      save() {
        var userid = "";
        var startDate = "";
        var endDate = "";
        var workDay = "";
        var obj = "";
        var year = this.currentYear + "-" + this.currentMonth;
        if (this.types != '2' && this.types != 2) {
          if (this.selectUsers == [] || this.selectUsers.length < 1) {
            this.$message.warning('人员不能为空');
            return;
          } else if (this.types == '1' || this.types == 1) {
            if (this.startDate == null || this.startDate == "") {
              this.$message.warning('请选择上班时间');
              return;
            } else if (this.endDate == null || this.endDate == "") {
              this.$message.warning('请选择下班时间');
              return;
            }
            startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm') + ":00";
            endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm') + ":00";
          }
          var ids = [];
          for (var i = 0; i < this.selectUsers.length; i++) {
            ids.push(this.selectUsers[i].id);
          }
          userid = ids.join(',');
          workDay = "1,2,3,4,5";
        } else if (this.types == '2' || this.types == 2) {
          var data = [];
          var uids = [];
          userid = this.checkUserIds;
          for (var i = 0; i < this.dataSource.length; i++) {
            uids.push(this.dataSource[i].id);
            if (this.dataSource[i].shiftid1 != "" && this.dataSource[i].shiftid1 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid1,
                date: year + "-1 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid2 != "" && this.dataSource[i].shiftid2 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid2,
                date: year + "-2 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid3 != "" && this.dataSource[i].shiftid3 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid3,
                date: year + "-3 00:00:00",
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid4 != "" && this.dataSource[i].shiftid4 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid4,
                date: year + "-4 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid5 != "" && this.dataSource[i].shiftid5 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid5,
                date: year + "-5 00:00:00",
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid6 != "" && this.dataSource[i].shiftid6 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid6,
                date: year + "-6 00:00:00",
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid7 != "" && this.dataSource[i].shiftid7 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid7,
                date: year + "-7 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid8 != "" && this.dataSource[i].shiftid8 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid8,
                date: year + "-8 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid9 != "" && this.dataSource[i].shiftid9 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid9,
                date: year + "-9 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid10 != "" && this.dataSource[i].shiftid10 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid10,
                date: year + "-10 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid11 != "" && this.dataSource[i].shiftid11 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid11,
                date: year + "-11 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid12 != "" && this.dataSource[i].shiftid12 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid12,
                date: year + "-12 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid13 != "" && this.dataSource[i].shiftid13 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid13,
                date: year + "-13 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid14 != "" && this.dataSource[i].shiftid14 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid14,
                date: year + "-14 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid15 != "" && this.dataSource[i].shiftid15 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid15,
                date: year + "-15 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid16 != "" && this.dataSource[i].shiftid16 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid16,
                date: year + "-16 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid17 != "" && this.dataSource[i].shiftid17 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid17,
                date: year + "-17 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid18 != "" && this.dataSource[i].shiftid18 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid18,
                date: year + "-18 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid19 != "" && this.dataSource[i].shiftid19 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid19,
                date: year + "-19 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid20 != "" && this.dataSource[i].shiftid20 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid20,
                date: year + "-20 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid21 != "" && this.dataSource[i].shiftid21 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid21,
                date: year + "-21 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid22 != "" && this.dataSource[i].shiftid22 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid22,
                date: year + "-22 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid23 != "" && this.dataSource[i].shiftid23 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid23,
                date: year + "-23 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid24 != "" && this.dataSource[i].shiftid24 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid24,
                date: year + "-24 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid25 != "" && this.dataSource[i].shiftid25 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid25,
                date: year + "-25 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid26 != "" && this.dataSource[i].shiftid26 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid26,
                date: year + "-26 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid27 != "" && this.dataSource[i].shiftid27 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid27,
                date: year + "-27 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid28 != "" && this.dataSource[i].shiftid28 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid28,
                date: year + "-28 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid29 != "" && this.dataSource[i].shiftid29 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid29,
                date: year + "-29 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid30 != "" && this.dataSource[i].shiftid30 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid30,
                date: year + "-30 00:00:00"
              };
              data.push(str)
            }
            if (this.dataSource[i].shiftid31 != "" && this.dataSource[i].shiftid31 != null) {
              var str = {
                userid: this.dataSource[i].id,
                shiftid: this.dataSource[i].shiftid31,
                date: year + "-31 00:00:00"
              };
              data.push(str)
            }

          }
          obj = JSON.stringify(data);
          userid = uids.join(",");
        }

        var url = this.url.add;
        var typet = "post"
        if (this.id != null && this.id != "") {
          url = this.url.edit;
          typet = "put";
        }
        this.confirmLoading = true;
        httpAction(url, {
            id: this.id,
            type: this.types,
            startDate: startDate,
            endDate: endDate,
            userId: userid,
            workDay: workDay,
            ruleType: obj
          },
          typet).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('ok');
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false;
          this.close();
        })
      },
      add(e, a) {
        this.visible = true;
        this.queryParam.usertid = e.join(",");
        this.checkUserIds = e.join(",");
        this.selectUsers = a;
        this.queryParam.shiftDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        this.queryParam.type = "1";
        this.$options.methods.searchQuery.call(this)
      },
      edit(e, a) {
        this.visible = true;
        this.queryParam.usertid = e.join(",");
        this.checkUserIds = e.join(",");
        this.selectUsers = a;
        this.types = a[0].type;
        this.id = a[0].id;
        this.queryParam.shiftDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        this.queryParam.type = "2";
        if (a[0].startDate != null) {
          this.startDate = moment(new Date(a[0].startDate)).format('YYYY-MM-DD HH:mm:ss');
        }
        if (a[0].endDate != null) {
          this.endDate = moment(new Date(a[0].endDate)).format('YYYY-MM-DD HH:mm:ss');
        }
        this.$options.methods.searchQuery.call(this)
      }


    }
  }
</script>

<style lang="less" scoped>
  .month {
    width: 100%;
    color: #333333;
    background: #ffffff;
    margin-top: -20px;
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    height: 30px;
    list-style-type: none;
  }

  .year-month {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
  }

  .choose-month {
    text-align: center;
    font-size: 12px;
  }

  .arrow {
    padding: 15px;
    color: #999999;
  }

  .month ul li {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }


  .weekdays {
    margin: 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    color: #999;
    justify-content: space-around;
    background: #ffffff;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 10px;
    background: #ffffff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .ts {
    padding: 20px;
    background: #ffffff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .days li {
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    text-align: center;
    padding-bottom: 4px;
    padding-top: 5px;
    font-size: 13px;
    color: #000;
    height: 40px;
  }

  .days li .active {
    padding: 8px 10px;
    border-radius: 5%;
    background: #00b8ec;
    color: #fff;

  }

  .days li .other-month {
    padding: 5px;
    color: gainsboro;
  }

  .days li:hover .act {
    padding: 6px 10px;
    border-radius: 50%;
    background: #e1e1e1;
    color: #fff;
  }
</style>