253 lines
8.0 KiB
Vue
253 lines
8.0 KiB
Vue
<template>
|
|
<div class="adv-picker">
|
|
<el-select id="selectInput" v-model="valueStr" :placeholder="placeholder" clearable ref="searchSelect" :filter-method="dataFilter" @visible-change="visibleChange" @focus="selectFocus" @blur="selectBlur" @change="selectChange">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<div class="time-picker-wrapper">
|
|
<el-date-picker
|
|
v-model="dateTimeRange"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
ref="timePicker"
|
|
size="mini"
|
|
v-show="false"
|
|
@change="dateTimeChange"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
placeholder: "",
|
|
},
|
|
data() {
|
|
return {
|
|
selectOptions: [
|
|
{value: '1',label: '今日'},
|
|
{value: '2',label: '昨日'},
|
|
{value: '5',label: '前日'},
|
|
{value: '3',label: '本月'},
|
|
{value: '4',label: '上月'},
|
|
{value: '-1',label: '手动选择'},
|
|
// {value: '5',label: '最近三天'},
|
|
// {value: '6',label: '最近一周'},
|
|
// {value: '7',label: '最近三个月'}
|
|
],
|
|
dateTimeRange: [],
|
|
optionsFilter: [],
|
|
valueStr: undefined,
|
|
value: [],
|
|
}
|
|
},
|
|
methods: {
|
|
dataFilter(val) {
|
|
// this.value = val;
|
|
// if (val) {
|
|
// this.options = this.optionsFilter.filter((item) => {
|
|
// if (item.label.includes(val) || item.label.toUpperCase().includes(val.toUpperCase())) {
|
|
// return true
|
|
// }
|
|
// })
|
|
// } else {
|
|
// this.options = this.optionsFilter;
|
|
// }
|
|
},
|
|
selectFocus(e){
|
|
// let value = e.target.value;
|
|
// setTimeout(() => {
|
|
// let input = this.$refs.searchSelect.$children[0].$refs.input;
|
|
// input.value = value;
|
|
// })
|
|
},
|
|
selectBlur(){
|
|
// console.log('失去')
|
|
},
|
|
selectChange(){
|
|
let input = this.$refs.searchSelect.$children[0].$refs.input;
|
|
var start='';
|
|
var end='';
|
|
if(this.valueStr == 1){
|
|
let day=this.getDay(0);
|
|
start = day.replaceAll("-","");
|
|
end = "";
|
|
}
|
|
else if(this.valueStr == 2){
|
|
let day=this.getDay(-1);
|
|
start = day.replaceAll("-","");
|
|
end = "";
|
|
}
|
|
else if(this.valueStr == 5){
|
|
let day=this.getDay(-2);
|
|
start = day.replaceAll("-","");
|
|
end = "";
|
|
}
|
|
else if(this.valueStr == 3){
|
|
start = this.getCurrentMonthFirst();
|
|
end = this.getCurrentMonthLast();
|
|
}
|
|
else if(this.valueStr == 4){
|
|
start = this.getLastMonthFirst();
|
|
end = this.getLastMonthLast();
|
|
}
|
|
else if(this.valueStr == -1){
|
|
document.querySelector('.el-date-editor').querySelector('input').focus()
|
|
}
|
|
// this.dateTimeRange[0]=new Date(start);
|
|
// this.dateTimeRange[1]=new Date(end);
|
|
|
|
this.dateTimeRange[0]=start;
|
|
this.valueStr=start ;
|
|
if(end!=""){
|
|
this.valueStr=this.valueStr+ " - " + end;
|
|
}else{
|
|
end=start;
|
|
}
|
|
this.dateTimeRange[1]=end;
|
|
|
|
this.$emit('change',this.dateTimeRange)
|
|
},
|
|
visibleChange(val){
|
|
if(!val){
|
|
let input = this.$refs.searchSelect.$children[0].$refs.input;
|
|
input.blur();
|
|
}
|
|
}
|
|
,getDay(day) {
|
|
var today = new Date();
|
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
|
today.setTime(targetday_milliseconds);
|
|
var tYear = today.getFullYear();
|
|
var tMonth = today.getMonth();
|
|
var tDate = today.getDate();
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|
tDate = this.doHandleMonth(tDate);
|
|
return tYear + "-" + tMonth + "-" + tDate;
|
|
},
|
|
doHandleMonth(month) {
|
|
var m = month;
|
|
if (month.toString().length == 1) {
|
|
m = "0" + month;
|
|
}
|
|
return m;
|
|
},
|
|
getCurrentMonthFirst() {
|
|
var date = new Date()
|
|
date.setDate(1)
|
|
var tYear = date.getFullYear();
|
|
var tMonth = date.getMonth();
|
|
var tDate = date.getDate();
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|
tDate = this.doHandleMonth(tDate);
|
|
return tYear + tMonth + tDate;
|
|
},
|
|
// 获取当前月的最后一天
|
|
getCurrentMonthLast() {
|
|
var date = new Date()
|
|
var currentMonth = date.getMonth()
|
|
var nextMonth = ++currentMonth
|
|
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
|
|
var oneDay = 1000 * 60 * 60 * 24
|
|
|
|
var newDate=new Date(nextMonthFirstDay - oneDay);
|
|
var tYear = newDate.getFullYear();
|
|
var tMonth = newDate.getMonth();
|
|
var tDate = newDate.getDate();
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|
tDate = this.doHandleMonth(tDate);
|
|
return tYear + tMonth + tDate;
|
|
},
|
|
getLastMonthFirst() {
|
|
const nowdays = new Date()
|
|
let year = nowdays.getFullYear()
|
|
let month = nowdays.getMonth()
|
|
if (month === 0) {
|
|
month = 12
|
|
year = year - 1
|
|
}
|
|
if (month < 10) {
|
|
month = '0' + month
|
|
}
|
|
let firstDayOfPreMonth = year + '' + month + '' + '01'
|
|
firstDayOfPreMonth = firstDayOfPreMonth.toString()
|
|
return firstDayOfPreMonth
|
|
// return new Date(firstDayOfPreMonth)
|
|
}
|
|
,getLastMonthLast() {
|
|
const nowdays = new Date()
|
|
let year = nowdays.getFullYear()
|
|
let month = nowdays.getMonth()
|
|
if (month === 0) {
|
|
month = 12
|
|
year = year - 1
|
|
}
|
|
if (month < 10) {
|
|
month = '0' + month
|
|
}
|
|
const lastDay = new Date(year, month, 0)
|
|
let lastDayOfPreMonth = year + '' + month + '' + lastDay.getDate()
|
|
lastDayOfPreMonth = lastDayOfPreMonth.toString()
|
|
return lastDayOfPreMonth
|
|
// return new Date(lastDayOfPreMonth)
|
|
}
|
|
,getDateTimeToString(date)
|
|
{
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth()+1;
|
|
var day = date.getDate();
|
|
if(month<10) month = "0"+month;
|
|
if(day<10) day = "0"+day;
|
|
|
|
var hours = date.getHours();
|
|
var mins = date.getMinutes();
|
|
var secs = date.getSeconds();
|
|
// var msecs = date.getMilliseconds();
|
|
if(hours<10) hours = "0"+hours;
|
|
if(mins<10) mins = "0"+mins;
|
|
if(secs<10) secs = "0"+secs;
|
|
// if(msecs<10) secs = "0"+msecs;
|
|
// return year+"-"+month+"-"+day+" "+hours+":"+mins+":"+secs;
|
|
return year+""+month+""+day;
|
|
|
|
}
|
|
,dateTimeChange(value) {
|
|
// picker.$emit('pick', [start, end])
|
|
|
|
var start=this.getDateTimeToString(this.dateTimeRange[0]);
|
|
var end=this.getDateTimeToString(this.dateTimeRange[1]);
|
|
this.dateTimeRange[0]=start;
|
|
this.dateTimeRange[1]=end;
|
|
this.valueStr=start + " - " + end;
|
|
this.$emit('change',this.dateTimeRange)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.datetimepicker {
|
|
position: relative;
|
|
}
|
|
|
|
.time-picker-wrapper {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 0px;
|
|
overflow: hidden;
|
|
height: 0px;
|
|
}
|
|
|
|
</style>
|