element 手写季度组件

标签：case Date element date let year 组件 new 手写

组件：

<template>
  <div class="time_quarter">
    <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"
      @click.stop="showSeason = false"></mark>
    <z-input placeholder="请选择季度" v-model="showValue" style="width:100%;" class="elWidth" @focus="showSeason = true">
      <i slot="prefix" class="z-input__icon z-icon-date"></i>
    </z-input>
    <z-card class="box-card" v-show="showSeason" style="width:100%">
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <button type="button" aria-label="前一年"
          class="z-picker-panel__icon-btn z-date-picker__prev-btn z-icon-d-arrow-left" @click="prev"></button>
        <span role="button" class="z-date-picker__header-label">{{ year }}年</span>
        <button type="button" aria-label="后一年" @click="next" :class="{ notallow: year == limitTime }"
          class="z-picker-panel__icon-btn z-date-picker__next-btn z-icon-d-arrow-right"></button>
      </div>
      <div class="text item" style="text-align:center;">
        <z-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
          @click="selectSeason(0)">第一季度</z-button>
        <z-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
          @click="selectSeason(1)">第二季度</z-button>
      </div>
      <div class="text item" style="text-align:center;">
        <z-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
          @click="selectSeason(2)">第三季度</z-button>
        <z-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
          @click="selectSeason(3)">第四季度</z-button>
      </div>
    </z-card>
  </div>
</template>
<script>
export default {
  name: 'QuarterDialog',
  props: {
    valueArr: {
      default: () => {
        return ['01-03', '04-06', '07-09', '10-12'];
      },
      type: Array,
    },
    getValue: {
      default: () => { },
      type: Function,
    },
    // 传入显示的时间
    defaultValue: {
      default: "",
      type: String,
    },
    // 限制的时间
    limitTime: {
      type: String,
      default: "",
      require: true,
    },
  },
  data() {
    return {
      showSeason: false,
      season: "",
      year: new Date().getFullYear(),
      showValue: ''
    };
  },
  computed: {},
  created() {
    if (this.defaultValue) {
      let value = this.defaultValue;
      let arr = value.split("-");
      this.year = arr[0].slice(0, 4);

      var myseason = arr[1];
      this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
    }
    console.log("whitchQuarter", this.whitchQuarter(10));
  },
  watch: {
    defaultValue: function (value, oldValue) {
      let arr = value.split("-");
      this.year = arr[0].slice(0, 4);
      var myseason = arr[1];
      this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
    },
  },
  methods: {
    // 根据输入的月份判断是哪一个季节
    whitchQuarter(month) {
      let quarter = "";
      month = Number(month);
      switch (month) {
        case 1:
        case 2:
        case 3:
          quarter = "1";
          break;
        case 4:
        case 5:
        case 6:
          quarter = "2";
          break;
        case 7:
        case 8:
        case 9:
          quarter = "3";
          break;
        case 10:
        case 11:
        case 12:
          quarter = "4";
          break;
        default:
          console.error("The entered time is incorrect");
      }
      return quarter;
    },
    one() {
      this.showSeason = false;
    },
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      // 如果有时间限制的话会进行判断
      if (this.limitTime == "") {
        this.year = this.year * 1 + 1;
      } else if (this.limitTime != "" && this.year < this.limitTime) {
        this.year = this.year * 1 + 1;
      }
    },
    // 季度时间判定
    InitialTime(val) {
      let num = "";
      val = Number(val);
      switch (val) {
        case 1:
          num = "01";
          break;
        case 2:
          num = "04";
          break;
        case 3:
          num = "07";
          break;
        case 4:
          num = "10";
          break;
        default:
          console.error("时间格式有误！");
      }
      return num;
    },

    selectSeason(i) {
      let that = this;
      that.season = i + 1;
      let arr = that.valueArr[i].split("-");
      that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
      that.showSeason = false;
      this.showValue = `${this.year}年${this.season}季度`;
      var formatValue = `${this.year}-${this.InitialTime(this.season)}`;
      this.$emit("getTime", formatValue);
    }
  },
};
</script>
<style>
.notallow {
  cursor: not-allowed;
}

.time_box {
  position: relative;
}

.box-card {
  position: absolute;
  top: 40px;
  /* left: 22px; */
  padding: 0 3px 20px;
  z-index: 9999;
}

.time_quarter {
  width: 100%;

}

.time_quarter .z-input--small .z-input__inner {
  width: 82%;
}
</style>

 

调用：

<template>
  <div>
    <filter-form :showClapButton="false">
      <z-form ref="form" label-width="40px" size="small">
        <z-row :gutter="10">
          <z-col :span="5">
            <z-form-item label="" label-width="10px">
              <z-radio-group v-model="timeType" size="large">
                <z-radio :label="1">日</z-radio>
                <z-radio :label="2">月</z-radio>
                <z-radio :label="3">季度</z-radio>
              </z-radio-group>
            </z-form-item>
          </z-col>
          <z-col :span="6">
            <z-form-item label="" label-width="10px">
              <z-date-picker v-if="timeType == 1" :auto-fill="true" v-model="value2" type="date" placeholder="选择日期"
                @change="changeTime">
              </z-date-picker>
              <z-date-picker v-if="timeType == 2" :auto-fill="true" v-model="value2" type="month" placeholder="选择月"
                @change="changeTimeM">
              </z-date-picker>
              <quarter-dialog v-if="timeType == 3" @getTime="changeTimeJ" :defaultValue="defaultValue"></quarter-dialog>
            </z-form-item>
          </z-col>
          <z-col :span="6">
            <z-form-item label="" label-width="10px">
              <z-date-picker v-if="timeType == 1" :auto-fill="true" v-model="value2" type="date" placeholder="选择日期"
                @change="changeTime">
              </z-date-picker>
              <z-date-picker v-if="timeType == 2" :auto-fill="true" v-model="value2" type="month" placeholder="选择月"
                @change="changeTimeM">
              </z-date-picker>
              <quarter-dialog v-if="timeType == 3" @getTime="changeTimeJ" :defaultValue="defaultValue"></quarter-dialog>
            </z-form-item>
          </z-col>
        </z-row>
      </z-form>
      <template v-slot:buttons>
        <!--此处写入展开收起按钮前面的查询重置等按钮-->
        <z-button type="primary" size="mini" @click="search('click')">查询</z-button>
        <z-button size="mini" @click="resetForm()">重置</z-button>
      </template>
    </filter-form>
    <!-- <report-card>
      <z-pro-table ref="allTable" :options="tableOptions">
      </z-pro-table>
    </report-card> -->
  </div>
</template>
<script>
import quarterDialog from './components/QuarterDialog'
export default {
  name: 'evaluationMechanism',
  components: { quarterDialog },
  data() {
    return {
      timeType: 1,
      value2: new Date(new Date().valueOf()),
      defaultValue: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),//季度子组件上传递当前的时间
      queryParams: {
        startTime: undefined,
        endTime: undefined
      }
    }
  },
  watch: {
    //监听内容
    timeType() {
      if (this.timeType == 1) {//周
        this.value2 = new Date(new Date().valueOf());
        this.queryParams.startTime = this.getMonday("s", 0);
        this.queryParams.endTime = this.getMonday("e", 0);
      } else if (this.timeType == 2) {//月
        this.value2 = new Date().getFullYear() + '-' + (new Date().getMonth() + 1);
        this.changeTimeM(this.value2);
      } else if (this.timeType == 3) {//季度
        let date = new Date();
        let y = date.getFullYear();
        let M = date.getMonth();
        let quarterStartDate = new Date(y, this.getQuarterStartMonth(M), 1);
        let starts = this.getAllDate(quarterStartDate, "yyyy-MM-dd");
        let end = this.getQuarterEndDate(starts);
        this.queryParams.startTime = starts;
        this.queryParams.endTime = end;
      } else if (this.timeType == 4) {//年
        let date = new Date();
        let y = date.getFullYear();
        this.value2 = y.toString();
        this.changeTimeY(this.value2);
      }
    }
  },
  methods: {
    //查询
    async searchData() {
      const params = {

      }
      this.$refs[`allTable`].doQuery(params, () => { })
    },
    //获取周的开始时间和结束时间
    getMonday(type, dates) {
      var now = new Date();
      var nowTime = now.getTime();
      var day = now.getDay();
      var longTime = 24 * 60 * 60 * 1000;
      var n = longTime * 7 * (dates || 0);
      if (type == "s") {
        var dd = nowTime - (day - 1) * longTime + n;
      };
      if (type == "e") {
        var dd = nowTime + (7 - day) * longTime + n;
      };
      dd = new Date(dd);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      var day = y + "-" + m + "-" + d;
      return day;
    },
    //周
    changeTime(data) {
      let date = new Date(data);
      let y = date.getFullYear();
      let m = date.getMonth();
      let d = date.getDate();
      let week = date.getDay();
      let start = new Date(y, m, d);
      let end = new Date(y, m, d);
      this.queryParams.startTime = this.getCurrentTime(start, 0);
      this.queryParams.endTime = this.getCurrentTime(end, 0);
    },
    //月
    changeTimeM(data) {
      this.queryParams.startTime = this.getCurrentTime(data, 0);
      this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeM(data), 0);
      console.log(this.queryParams)
    },
    //年
    changeTimeY(data) {
      this.queryParams.startTime = this.getCurrentTime(data, 0);
      this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeY(data), 0);
      console.log(this.queryParams)
    },
    getCurrentTime(data, num) {
      let date = new Date(data)
      let Y = date.getFullYear()
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      let D = date.getDate() + num < 10 ? ('0' + (date.getDate() + num)) : (date.getDate() + num);
      date = Y + '-' + M + '-' + D;
      return date
    },
    getCuurrentTimeM(data) {
      let date = new Date(data)
      let Y = date.getFullYear();
      let M = date.getMonth();
      return new Date(Y, M + 1, 0).toLocaleDateString();
    },
    getCuurrentTimeY(data) {
      let date = new Date(data)
      let Y = date.getFullYear();
      return new Date(Y, 11, 31).toLocaleDateString();
    },
    //获得某月的天数
    getMonthDays: function (nowYear, myMonth) {
      var monthStartDate = new Date(nowYear, myMonth, 1);
      var monthEndDate = new Date(nowYear, myMonth + 1, 1);
      var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    //获得本季度的结束日期
    getQuarterEndDate(data) {
      let date = new Date(data);
      let nowYear = date.getFullYear();
      let M = date.getMonth();
      var quarterEndMonth = M + 2;
      var quarterStartDate = new Date(nowYear, quarterEndMonth, this.getMonthDays(nowYear, quarterEndMonth));
      return this.getAllDate(quarterStartDate, "yyyy-MM-dd");
    },
    //获得本季度的开始月份
    getQuarterStartMonth: function (nowMonth) {
      var quarterStartMonth = 0;
      if (nowMonth < 3) {
        quarterStartMonth = 0;
      }
      if (2 < nowMonth && nowMonth < 6) {
        quarterStartMonth = 3;
      }
      if (5 < nowMonth && nowMonth < 9) {
        quarterStartMonth = 6;
      }
      if (nowMonth > 8) {
        quarterStartMonth = 9;
      }
      return quarterStartMonth;
    },
    //获得日期
    getAllDate: function (date, fmt) {
      if (null == fmt || undefined == fmt || "" == fmt)
        fmt = "yyyy/MM/dd";
      var date = new Date(date);
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    },
    changeTimeJ(data) {
      let start = data + "-01";
      this.queryParams.startTime = start + " 00:00:00";
      let end = this.getQuarterEndDate(start);
      this.queryParams.endTime = end + " 23:59:59";
    },
    resetForm() {
      this.$refs.kpiForm.resetFields()
      this.searchData()
    },
  }
}
</script>
<style scoped></style>

 

原谅我找不到原作者了，如果看到我写的一样，抱歉

<template>   <div class="time_quarter">     <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"       @click.stop="showSeason = false"></mark>     <z-input placeholder="请选择季度" v-model="showValue" style="width:100%;" class="elWidth" @focus="showSeason = true">       <i slot="prefix" class="z-input__icon z-icon-date"></i>     </z-input>     <z-card class="box-card" v-show="showSeason" style="width:100%">       <div slot="header" class="clearfix" style="text-align:center;padding:0">         <button type="button" aria-label="前一年"           class="z-picker-panel__icon-btn z-date-picker__prev-btn z-icon-d-arrow-left" @click="prev"></button>         <span role="button" class="z-date-picker__header-label">{{ year }}年</span>         <button type="button" aria-label="后一年" @click="next" :class="{ notallow: year == limitTime }"           class="z-picker-panel__icon-btn z-date-picker__next-btn z-icon-d-arrow-right"></button>       </div>       <div class="text item" style="text-align:center;">         <z-button type="text" size="medium" style="width:40%;color: #606266;float:left;"           @click="selectSeason(0)">第一季度</z-button>         <z-button type="text" size="medium" style="float:right;width:40%;color: #606266;"           @click="selectSeason(1)">第二季度</z-button>       </div>       <div class="text item" style="text-align:center;">         <z-button type="text" size="medium" style="width:40%;color: #606266;float:left;"           @click="selectSeason(2)">第三季度</z-button>         <z-button type="text" size="medium" style="float:right;width:40%;color: #606266;"           @click="selectSeason(3)">第四季度</z-button>       </div>     </z-card>   </div> </template> <script> export default {   name: 'QuarterDialog',   props: {     valueArr: {       default: () => {         return ['01-03', '04-06', '07-09', '10-12'];       },       type: Array,     },     getValue: {       default: () => { },       type: Function,     },     // 传入显示的时间     defaultValue: {       default: "",       type: String,     },     // 限制的时间     limitTime: {       type: String,       default: "",       require: true,     },   },   data() {     return {       showSeason: false,       season: "",       year: new Date().getFullYear(),       showValue: ''     };   },   computed: {},   created() {     if (this.defaultValue) {       let value = this.defaultValue;       let arr = value.split("-");       this.year = arr[0].slice(0, 4);
      var myseason = arr[1];       this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;     }     console.log("whitchQuarter", this.whitchQuarter(10));   },   watch: {     defaultValue: function (value, oldValue) {       let arr = value.split("-");       this.year = arr[0].slice(0, 4);       var myseason = arr[1];       this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;     },   },   methods: {     // 根据输入的月份判断是哪一个季节     whitchQuarter(month) {       let quarter = "";       month = Number(month);       switch (month) {         case 1:         case 2:         case 3:           quarter = "1";           break;         case 4:         case 5:         case 6:           quarter = "2";           break;         case 7:         case 8:         case 9:           quarter = "3";           break;         case 10:         case 11:         case 12:           quarter = "4";           break;         default:           console.error("The entered time is incorrect");       }       return quarter;     },     one() {       this.showSeason = false;     },     prev() {       this.year = this.year * 1 - 1;     },     next() {       // 如果有时间限制的话会进行判断       if (this.limitTime == "") {         this.year = this.year * 1 + 1;       } else if (this.limitTime != "" && this.year < this.limitTime) {         this.year = this.year * 1 + 1;       }     },     // 季度时间判定     InitialTime(val) {       let num = "";       val = Number(val);       switch (val) {         case 1:           num = "01";           break;         case 2:           num = "04";           break;         case 3:           num = "07";           break;         case 4:           num = "10";           break;         default:           console.error("时间格式有误！");       }       return num;     },
    selectSeason(i) {       let that = this;       that.season = i + 1;       let arr = that.valueArr[i].split("-");       that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);       that.showSeason = false;       this.showValue = `${this.year}年${this.season}季度`;       var formatValue = `${this.year}-${this.InitialTime(this.season)}`;       this.$emit("getTime", formatValue);     }   }, }; </script> <style> .notallow {   cursor: not-allowed; }
.time_box {   position: relative; }
.box-card {   position: absolute;   top: 40px;   /* left: 22px; */   padding: 0 3px 20px;   z-index: 9999; }
.time_quarter {   width: 100%;
}
.time_quarter .z-input--small .z-input__inner {   width: 82%; } </style>

标签：case,Date,element,date,let,year,组件,new,手写
From： https://www.cnblogs.com/xiaonanxun/p/18283727