时效管理的代码

2020-04-21  本文已影响0人  南漂一枚

<template>

  <div>

    <span>时效管理</span>

    <el-button type="info" @click="resetInfo">重置</el-button>

    <el-button type="warning">取消</el-button>

    <el-button type="danger" @click="preserve">保存</el-button>

    <br/>

      年份

    <el-select v-model="year" placeholder="请选择" @change="changeYear">

    <el-option

      v-for="item in options"

      :key="item.value"

      :label="item.label"

      :value="item.value">

    </el-option>

  </el-select>

    <!-- <vue-better-calendar></vue-better-calendar> -->

    <div class="content">

      <Calendar ref="Calendar1" :sundayStart="true" v-on:changeMonth="changeDate1" v-on:choseDay="clickDay" v-on:isToday="clickToday" :markDate="arr"></Calendar>

      <Calendar ref="Calendar2" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar3" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar4" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

    </div>

    <div class="content">

      <Calendar ref="Calendar5" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar6" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar7" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar8" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

    </div>

    <div class="content">

      <Calendar ref="Calendar9" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar10" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar11" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

      <Calendar ref="Calendar12" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>

    </div>

  </div>

</template>

<script>

  import Calendar from 'vue-calendar-component';

  import axios from 'axios';

  import api from '../../../api/index';

  import {hint} from '../../../utils';

  let setHoliday = api.examAndPaper.setHoliday;

  let dayOfRest = api.examAndPaper.dayOfRest;

  let reset = api.examAndPaper.reset;

  export default {

        data() {

            return {

                activeName: "xx",

                flag: {},

                arr:[],

                options: [{

                    value: '2019',

                    label: '2019'

                  }, {

                    value: '2020',

                    label: '2020'

                  }, {

                    value: '2021',

                    label: '2021'

                  }, {

                    value: '2022',

                    label: '2022'

                  }],

                  year: '2019'

            }

        },

        components: {

            Calendar,

        },

        directives: {},

        methods: {

            resetInfo(){

              let params = {

                years:this.year

              }

              reset(params).then((res) => {

                  if(res.status == "200"){

                      hint(this, '重置成功!', 'success');

                  }else {

                      hint(this, '重置失败', 'error')

                  }

              });

            },

            clickDay(data) {

              console.log(data); //选中某天

              if (this.flag[data] == undefined || this.flag[data] == 0) {

                  this.arr.push(data)

                  this.flag[data] = 1

                  console.log(this.arr)

              }else{

                let weizhi = ''

                let array = this.arr;

                  for (let index = 0; index < array.length; index++) {

                    // const element = array[index];

                    if (array[index] == data) {

                      weizhi = index;

                    }

                  }

                  this.arr.splice(weizhi,1);

                  console.log(this.arr)

                  this.flag[data] = 0

              }

            },

            changeDate1(data) {

              console.log(data); //左右点击切换月份

            },

            clickToday(data) {

              console.log(data); //跳到了本月

            },

            changeYear(){

                this.arr = [];

                let  year = this.year;

                this.$refs.Calendar1.ChoseMonth(''+year+'-01-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar2.ChoseMonth(''+year+'-02-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar3.ChoseMonth(''+year+'-03-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar4.ChoseMonth(''+year+'-04-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar5.ChoseMonth(''+year+'-05-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar6.ChoseMonth(''+year+'-06-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar7.ChoseMonth(''+year+'-07-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar8.ChoseMonth(''+year+'-08-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar9.ChoseMonth(''+year+'-09-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar10.ChoseMonth(''+year+'-10-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar11.ChoseMonth(''+year+'-11-12',false); //跳转到18年12月12日 但是不选中当天

                this.$refs.Calendar12.ChoseMonth(''+year+'-12-12',false); //跳转到18年12月12日 但是不选中当天

                this.getInfo()

            },

            isWeekEnd(date){

            ? if( "一二三四五六天".charAt(new ? Date(date).getDay()) == "天" ) return true;

            ? if( "一二三四五六天".charAt(new ? Date(date).getDay()) == "六" ?) ?return true;

            },

            preserve(){

              console.log("总休息日:"+this.arr)

              let xinarr = [];

              let xinarr2 = [];

              this.arr.forEach( ele => {

                let xinele = ele.replace(/\//g, '-')

                xinarr.push(xinele)

              });

              console.log("zhuanhua:")

              console.log(xinarr)

              xinarr.forEach(ele => {

                let xinstr = ele.split('-')

                console.log("xinstr:")

                console.log(xinstr)

                if (xinstr[1]<10) {

                  xinstr[1] = '0'+xinstr[1]

                }

                if (xinstr[2]<10) {

                  xinstr[2] = '0'+xinstr[2]

                }

                let result=xinstr.join('-')

                console.log("result:")

                console.log(result)

                xinarr2.push(result)

              });

              console.log("处理0后:")

              console.log(xinarr2)

              let work = []

              let zhoumo = []

              xinarr2.forEach( ele => {

                if (this.isWeekEnd(ele)) {

                  zhoumo.push(ele)

                }else{

                  work.push(ele)

                }

              });

              console.log("work")

              console.log(work)

              console.log("zhoumo")

              console.log(zhoumo)

              let params = {

                year: Number(this.year),

                holiday:zhoumo,

                workDay:work

              }

              setHoliday(params).then((res) => {

                  if(res.status == "200"){

                      hint(this, '保存成功!', 'success');

                  }else {

                      hint(this, '保存失败', 'error')

                  }

              });

            },

            getInfo(){

              let params = {

                years:this.year

              }

              dayOfRest(params).then((res) => {

                  if(res.data.code == "200"){

                      let array = res.data.data

                      let array2 = []

                      let array3 = [] //去掉0

                      array.forEach( ele => {

                          let xinele = ele.replace(/-/g, '/')

                          array2.push(xinele)

                      });

                      console.log('shuzu:')

                      console.log(array2)

                      array2.forEach( ele => {

                        // debugger

                        let xinstr = ele.split('/')

                        console.log("xinstr:")

                        console.log(xinstr)

                        if (xinstr[1]<10) {

                          xinstr[1] = xinstr[1].replace('0', '')

                        }

                        if (xinstr[2]<10) {

                          xinstr[2] =  xinstr[2].replace('0', '')

                        }

                        let result=xinstr.join('/')

                        console.log("result:")

                        console.log(result)

                        array3.push(result)

                      });

                      this.arr = array3

                      array3.forEach( ele => {

                        this.flag[ele] = 1

                      });

                  }else {

                      hint(this, '获取失败', 'error')

                  }

              });

            }

        },

        computed: {

        },

        created() {

        },

        mounted() {

          let  year = this.year;

          this.$refs.Calendar1.ChoseMonth(''+year+'-01-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar2.ChoseMonth(''+year+'-02-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar3.ChoseMonth(''+year+'-03-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar4.ChoseMonth(''+year+'-04-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar5.ChoseMonth(''+year+'-05-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar6.ChoseMonth(''+year+'-06-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar7.ChoseMonth(''+year+'-07-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar8.ChoseMonth(''+year+'-08-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar9.ChoseMonth(''+year+'-09-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar10.ChoseMonth(''+year+'-10-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar11.ChoseMonth(''+year+'-11-12',false); //跳转到18年12月12日 但是不选中当天

          this.$refs.Calendar12.ChoseMonth(''+year+'-12-12',false); //跳转到18年12月12日 但是不选中当天

          this.getInfo()

        }

  }

</script>

<style scoped>

  .content{

    display: flex;

    flex-direction: row;

    margin-top: 10px;

  }

.card div:nth-child(1){

    background-color:#BDC0BA;

    padding-bottom:0;

}

.card div:nth-child(3) div ,.card div:nth-child(2) div{

    height: 35px;

    width: 35px;

}

/*今天*/

.wh_content_item .wh_isToday[data-v-2ebcbc83]{

    background-color:rgb(139, 175, 241);

}

/*日历点击*/

.wh_content_item .wh_chose_day[data-v-2ebcbc83]{

    background-color:transparent;

}

/*日历划过*/

.wh_item_date[data-v-2ebcbc83]:hover{

    background-color:rgb(111, 223, 223);

    border-radius: 100%;

}

</style>

上一篇下一篇

猜你喜欢

热点阅读