element 手寫季度元件

元件：

<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>