<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
<el-form-item>
<el-select @change="changeChooseType" class="selSty" v-model="chooseType" placeholder="请选择"
style="width: 110px;">
<el-option v-for="item in dateTypeselect" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker class="selSty1" v-model="createTimes" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
@change="radioDateInit()">
</el-date-picker>
<el-radio-group style="margin-left: 15px;" v-model="radioDate" @change="nowDay(radioDate)">
<el-radio-button label="0" border>今天</el-radio-button>
<el-radio-button label="3" border>近三天</el-radio-button>
<el-radio-button label="30" border>本月</el-radio-button>
<el-radio-button label="60" border>上月</el-radio-button>
<el-radio-button label="365" border>本年</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
return {
chooseType: "创建时间",
//时间下拉菜单
dateTypeselect: [{
value: "创建时间",
label: "创建时间",
}, ],
//单选框时间 默认选择3天
radioDate: 3,
createTimes:[],
}
methods:{
//初始化时间
initCreateDate() {
this.radioDate = 3;
let nowDate = new Date().getTime();
this.createTimes = [
this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
this.timestampToTime(nowDate) + " 23:59:59",
];
if (null != this.createTimes && this.createTimes.length > 0) {
this.queryParams.createTimeStart = this.createTimes[0];
this.queryParams.createTimesEnd = this.createTimes[1];
}
this.handleQuery()
},
//时间解析
Time(now) {
let year = new Date(now).getFullYear();
let month = new Date(now).getMonth() + 1;
let date = new Date(now).getDate();
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
return year + "-" + month + "-" + date;
},
//获得某月的天数:
getMonthDays: function(myMonth) {
let monthStartDate = new Date(new Date().getFullYear(), myMonth, 1);
let monthEndDate = new Date(new Date().getFullYear(), myMonth + 1, 1);
let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
return days;
},
//时间转换
timestampToTime(time) {
// 时间戳为10位需*1000,时间戳为13位的话不需乘1000
var date = new Date(time);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return y + "-" + MM + "-" + d;
},
nowDay(val) {
this.isCustomerChooseTime = false;
let nowDate = new Date().getTime();
let y = new Date().getFullYear();
if (val == 0) {
this.createTimes = [
this.timestampToTime(nowDate) + " 00:00:00",
this.timestampToTime(nowDate) + " 23:59:59",
];
} else if (val == 3) {
this.createTimes = [
this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
this.timestampToTime(nowDate) + " 23:59:59",
];
} else if (val == 30) {
let month = new Date().getMonth() + 1;
month = month < 10 ? "0" + month : month;
this.createTimes = [
y + "-" + month + "-01 00:00:00",
this.timestampToTime(nowDate) + " 23:59:59",
];
} else if (val == 60) {
let startTime = this.Time(
new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
);
let endTime = this.Time(
new Date(
new Date().getFullYear(),
new Date().getMonth() - 1,
this.getMonthDays(new Date().getMonth() - 1)
)
);
this.createTimes = [startTime + " 00:00:00", endTime + " 23:59:59"];
} else if (val == 365) {
this.createTimes = [
y + "-01-01 00:00:00",
this.timestampToTime(nowDate) + " 23:59:59",
];
}
this.queryParams.createTimeStart = this.createTimes[0]
this.queryParams.createTimesEnd = this.createTimes[1]
this.handleQuery();
},
changeChooseType(val) {
if (val == "创建时间") {
this.chooseType == "创建时间";
this.queryParams.createTimeStart = this.createTimes[0];
this.queryParams.createTimesEnd = this.createTimes[1];
this.queryParams.invoiceTimeStart = "";
this.queryParams.invoiceTimeEnd = "";
this.handleQuery();
}
},
//时间选中状态更改
radioDateInit() {
this.radioDate = "";
this.isCustomerChooseTime = true;
if (null != this.createTimes && this.createTimes.length > 0) {
this.queryParams.createTimeStart = this.createTimes[0];
this.queryParams.createTimesEnd = this.createTimes[1];
}
this.handleQuery();
},
//在使用的时候,需要在查询列表的方法里赋值对应的参数,或者自己后端接口实体新增createTimeStart、createTimesEnd用于接收参数;
//我这里是使用map进行接收:
this.queryParams.params["createTimeStart"] = this.queryParams.createTimeStart
this.queryParams.params["createTimesEnd"] = this.queryParams.createTimesEnd
}