最近遇到一个需求, 使用饿了么实现日表限制三个月查询, 年表限制一年查询, 如果不做限制的话, 有可能造成数据量过大的请求。 周表不做限制的原因是饿了么的周表就是一个一周内的范围, 已经做了限制 因为是多页面使用, 所以封装为公共组件的形式, 这样好维护, 也方便一点
- 日表限制
- 年表限制
日表限制
<template>
<div>
<el-date-picker
v-model="datePickDay"
:picker-options="pickerOptions"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size='mini'
value-format="yyyyMMdd"
@change="datePickChangeDay"/>
</div>
</template>
<script>
import { dateFormat } from '@/utils/tools'
export default {
name: 'EcFrontDatePickerMonth',
data() {
return {
// 日期
datePickDay: [
// 日期选择器绑定的数据，为一个数组，数组第一个是开始时间，第二个是结束时间，需求是获取前一天的数据
dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyyMMdd'),
dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyyMMdd')
],
pickDate: '', // 存放getPickDate获取的数据
pickerOptions: {
onPick: this.getPickDate,
disabledDate: this.disabledDate
},
}
},
mounted() {
},
methods: {
// 改变日期触发Change事件，子传父组件特获取到的日期传给父组件
datePickChangeDay () {
console.log(this.datePickDay, 'this.datePickDay')
this.$emit('dateChange', this.datePickDay)
},
// 时间选择跨度三个月限制
getPickDate(pick) {
// 获取选择后的时间
this.pickDate = pick
},
// 日期禁用方法
disabledDate(date) {
// 获取开始时间和结束时间
const { minDate, maxDate } = this.pickDate
// 选择后的时间间隔进行计算间隔大于90天后的日期全部 disabled
if (minDate && !maxDate) {
const diff = Math.abs(minDate.valueOf() - date.valueOf())
if (diff > 1000 * 3600 * 24 * 90) {
return true
}
}
}
},
}
</script>
<style lang="scss" scoped>
}
</style>
年表限制
需求为可查询一年内的数据, 以月为单位, 也是封装组件
<template>
<div>
<el-date-picker
ref="picker"
v-model="datePickMonth"
type="monthrange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="mini"
value-format="yyyyMM"
@change="datePickChange"
/>
</div>
</template>
<script>
import { dateFormat } from '@/utils/tools'
export default {
name: 'EcFrontDatePickerMonth',
data() {
return {
// 日期
datePickMonth: [
dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 720), 'yyyyMM'),
dateFormat(new Date(new Date().getTime() - 3600 * 1000 * 720), 'yyyyMM')
],
pickDate: '', // 存放getPickDate获取的数据
pickerOptions: {
onPick: this.getPickDate,
disabledDate: this.disabledDate
},
}
},
mounted() {
},
methods: {
datePickChange () {
console.log(this.datePickMonth, 'this.datePickMonth')
this.$emit('dateChange', this.datePickMonth)
},
// 时间选择跨度三年限制
getPickDate(pick) {
this.pickDate = pick
},
disabledDate(date) {
const { minDate, maxDate } = this.pickDate
if (minDate && !maxDate) {
const diff = Math.abs(minDate.valueOf() - date.valueOf())
if (diff > 1000 * 3600 * 24 * 365) {
return true
}
}
}
},
}
</script>
<style lang="scss" scoped>
}
</style>
希望对你有用!
