// var dateTimeComponentTemplate = `
//
// `
var dateTimeComponentTemplate = "\n\n \n \n \n \n \n
\n\n";
var dateTimeComponent = {
name: 'date-time-pc',
template: dateTimeComponentTemplate,
props: {
showSelectGroup: {
type: Boolean,
default: true
}
},
data: function () {
return {
timeSelectList: [
{
name: '全部',
value: 'all',
selected: true
},
{
name: '最近7天',
value: 'lately7',
selected: false
},
{
name: '最近30天',
value: 'lately30',
selected: false
},
{
name: '去年',
value: 'lastYear',
selected: false
}
],
dateTimePickerConf: {
type: 'date',
editable: false,
align: 'center',
prefixIcon: 'clear-icon',
format: 'yyyy-MM-dd'
},
dateTimePickerState: {
start: '',
end: '',
startPlaceHolder: '', // 开始日期
endPlaceHolder: '' // 结束日期
},
startPickerOptions: {
disabledDate: function (time) {
var end = this.dateTimePickerState.end
if (end) {
return time.getTime() > +new Date(end)
}
}.bind(this)
},
endPickerOptions: {
disabledDate: function (time) {
var start = this.dateTimePickerState.start
if (start) {
return time.getTime() < +new Date(start)
}
}.bind(this)
}
}
},
created: function () {},
methods: {
setState: function () {
// {
// start: 1620230400000, // 2021-5-6
// end: 1620489600000, // 2021-5-9
// exact: 'all'
// }
if (!data || Object.keys(data).length === 0) {
this.setTimeSelectListState('all')
} else {
switch (data.exact) {
case 'all': {
this.setTimeSelectListState('all')
this.clearDateTimePicker()
break
}
case 'lately7': {
this.setTimeSelectListState('lately7')
this.clearDateTimePicker()
break
}
case 'lately30': {
this.setTimeSelectListState('lately30')
this.clearDateTimePicker()
break
}
case 'lastYear': {
this.setTimeSelectListState('lastYear')
this.clearDateTimePicker()
break
}
case 'exact': {
if (!data.start || !data.end) break
if (data.start < data.end) {
this.dateTimePickerState.start = new Date(data.start)
this.dateTimePickerState.end = new Date(data.end)
}
break
}
default: {
console.warn('exact值为空')
}
}
}
},
getState: function () {
// timeState.exact: all/lately7/lately30/lastYear/exact5种状态
// 为true时候表示精确筛选，从时间选择器中获取值(其他为根据当前时间计算出的值)
var timeState = {
start: 0,
end: 0,
exact: 'exact'
}
var selectButton = this.timeSelectList.find(function (item) { return item.selected })
if (selectButton) {
timeState.exact = selectButton.value
Object.assign(timeState, this.calcNotExactTime(timeState.exact))
} else {
timeState.exact = 'exact'
timeState.start = this.dateTimePickerState.start.getTime()
timeState.end = this.dateTimePickerState.end.getTime()
}
return timeState
},
onChange: function () {
var state = this.getState()
this.$emit('change', state)
},
setTimeSelectListState: function (value, callback) {
this.timeSelectList.forEach(function (item) {
item.selected = item.value === value
callback && callback(item)
})
},
clearDateTimePicker: function () {
this.dateTimePickerState.start = ''
this.dateTimePickerState.end = ''
},
// 计算lately7/lately30/lastYear的开始和结束时间
// endTime传入一个时间戳
calcNotExactTime: function (exact, endTime) {
exact = exact || 'lately7'
endTime = endTime || Date.now()
var t = {
start: 0,
end: +new Date(endTime)
}
var durations = {
hour1: 60 * 60 * 1000,
day1: 60 * 60 * 1000 * 24 * 1,
day7: 60 * 60 * 1000 * 24 * 7,
day30: 60 * 60 * 1000 * 24 * 30
}
switch (exact) {
case 'lately7': {
t.start = t.end - durations.day7
break
}
case 'lately30': {
t.start = t.end - durations.day30
break
}
case 'lastYear': {
var year = new Date(t.end).getFullYear()
var lastYear = year - 1
t.start = +new Date(`${lastYear}`)
t.end = +new Date(`${year}`) - durations.hour1 * 8 - 1
break
}
default: {
t.start = 0
t.end = 0
break
}
}
return t
},
clickTimeButton: function (item) {
if (item.selected) return
this.timeSelectList.forEach(v => (v.selected = false))
item.selected = true
this.onChange()
},
startDatePickerChange: function (start) {
var end = this.dateTimePickerState.end
if (start && end) { // start和end都有值
this.setTimeSelectListState()
this.onChange()
} else if (!start && !end) { // start和end都没值
this.setTimeSelectListState('all')
this.onChange()
}
},
endDatePickerChange: function (end) {
var start = this.dateTimePickerState.start
if (start && end) { // start和end都有值
this.setTimeSelectListState()
this.onChange()
} else if (!start && !end) { // start和end都没值
this.setTimeSelectListState('all')
this.onChange()
}
}
}
}