美文网首页
时效管理的代码

时效管理的代码

作者: 南漂一枚 | 来源:发表于2020-04-21 16:13 被阅读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>

    相关文章

      网友评论

          本文标题:时效管理的代码

          本文链接:https://www.haomeiwen.com/subject/yvxpihtx.html