共计 3547 个字符,预计需要花费 9 分钟才能阅读完成。
图示
须要应用到快捷键的 vue 页面
html
<el-form-item label="建单工夫">
<BaseTime @picked="(val) => timeRange = val" v-model="timeRange" ref="timeRange" />
</el-form-item>
<span @click="shortcuts('today')"> 今日 </span>
<span @click="shortcuts('this-week')"> 本周 </span>
<span @click="shortcuts('this-month')"> 本月 </span>
<span @click="shortcuts('last-month')"> 上月 </span>
<el-form-item label="领取工夫">
<BaseTime @picked="(val) => timeRange2 = val" v-model="timeRange2" ref="timeRange2" />
</el-form-item>
<span @click="shortcuts('this-quarter','timeRange2')"> 本季 </span>
<span @click="shortcuts('this-year','timeRange2')"> 本年 </span>
<!-- 阐明
1. BaseTime 是对 el-date-picker type="datetimerange" 以及其余雷同属性的封装,代码略
2. timeRange 是数组,每个工夫区间后端应用 2 个字段接管。所以前端的命名就比拟随便,如果页面有多少个工夫区间,命名就是 timeRange、timeRange1、timeRange2、timeRange3....
3. 应用 BaseTime,ref 是必要的,须要调用组件的 @change 办法
4. 款式略
-->
script
/**
* 快捷键逻辑原本放在 @/mixins/standard-list 里的为了演示不便放在这里
* 其余代码省略
**/
export default {data() {timeRange: [], // 工夫区间 --- 建单工夫
timeRange1: [], // 工夫区间 --- 领取工夫},
watch: {
timeRange: {handler (newV) {if (newV instanceof Array) {this.searchData.createTimeBegin = newV[0];
this.searchData.createTimeEnd = newV[1];
} else {
this.searchData.createTimeBegin = null;
this.searchData.createTimeEnd = null;
}
}
},
timeRange2: {handler (newV) {if (newV instanceof Array) {this.searchData.payTimeBegin = newV[0];
this.searchData.payTimeEnd = newV[1];
} else {
this.searchData.payTimeBegin = null;
this.searchData.payTimeEnd = null;
}
}
},
},
methods: {
// 日期快捷键(默认绑定 timeRange)shortcuts(text, ref='timeRange'){const start = new Date();
const end = new Date();
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
end.setHours(23); end.setMinutes(59); end.setSeconds(59);
const month = start.getMonth()+1; // 0-11, 月份加 1,不便和大月、小月口诀对应
switch (text) {
case 'today':
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-week':
const today = start.getDate(); // 1-31
const weekday = start.getDay() || 7; // 0-6, 若为 0 则改为 7
start.setDate(today+(1-weekday));
end.setDate(today+(7-weekday));
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-month':
start.setDate(1);
if (month===1 || month===3 || month===5 || month===7 || month===8 || month===10 ||month===12) {end.setDate(31);
}
if (month===4 || month===6 || month===9 || month===11) {end.setDate(30);
}
if (month===2) {const year = start.getFullYear();
if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {end.setDate(29);
} else {end.setDate(28);
}
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'last-month':
const lastMonth = start.getMonth() - 1;// 0-11, 月份减 1,失去上月,-1-10
if (lastMonth === -1) {const year = start.getFullYear();
start.setFullYear(year - 1);
start.setMonth(11);
end.setFullYear(year - 1);
end.setMonth(11);
end.setDate(31); // - 1 月份单写
} else {start.setMonth(lastMonth);
end.setMonth(lastMonth);
}
start.setDate(1);
const tem = lastMonth+1
if (tem ===1 || tem===3 || tem===5 || tem===7 || tem===8 || tem===10) {end.setDate(31);
}
if (tem===4 || tem===6 || tem===9 || tem===11) {end.setDate(30);
}
if (tem===2) {const year = start.getFullYear();
if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {end.setDate(29);
} else {end.setDate(28);
}
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-quarter':
const quarter = Math.floor((month%3 === 0 ? ( month/3) : (month/3 + 1)))
start.setDate(1);
if (quarter === 1) {start.setMonth(0);
end.setMonth(2);
end.setDate(31);
}
if (quarter === 2) {start.setMonth(3);
end.setMonth(5);
end.setDate(30);
}
if (quarter === 3) {start.setMonth(6);
end.setMonth(8);
end.setDate(30);
}
if (quarter === 4) {start.setMonth(9);
end.setMonth(11);
end.setDate(31);
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-year':
start.setMonth(0);
start.setDate(1);
end.setMonth(11);
end.setDate(31);
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
}
},
}
}
正文完