<Form class="search_form" ref="searchForm" :rules="ruleInline" :model="formInline" label-position="right" :label-width="80">
<FormItem prop="searchTime" label="查询时间">
<DatePicker type="datetimerange"
v-model="formInline.searchTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择查询时间范围"
@on-change="getChange"
:transfer=true
:options="timeOptions"
style="width: 100%"></DatePicker>
</FormItem>
<FormItem class="btn_container">
<div class="btn_save" @click="handleSubmit('searchForm')">查询</div>
<div class="btn_cancel" @click="handleReset('searchForm')">重置</div>
</FormItem>
</Form>
data() {
return{
formInline: {
searchTime: [],
startTime: [],
endTime: []
},
ruleInline: {
searchTime: [{
type: 'array',
required: true,
fields: {
0: {type: 'date', required: true, message: '请选择查询时间范围'},
1: {type: 'date', required: true, message: '请选择查询时间范围'}
}
}],
},
timeOptions:{
disabledDate(date) {
return date && date.valueOf() > new Date(new Date().toLocaleDateString());
},
shortcuts: [
{
text: '今天',
value() {
const start = new Date();
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
},
{
text: '昨天',
value() {
const start = new Date(new Date().getTime() - 3600 * 1000 * 24);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
},
{
text: '近3天',
value() {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
},
{
text: '近1周',
value() {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
},
{
text: '1个月',
value() {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
},
{
text: '3个月',
value() {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 59);
return [start, end];
}
}
]
}
}
},
mounted() {
this.initData();
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.searchLoading = true;
this.formInline.startTime = this.msToDate(this.formInline.searchTime[0]);
this.formInline.endTime = this.msToDate(this.formInline.searchTime[1]);
this.$Message.success('查询成功');
this.searchLoading = false;
this.searchResult = 'person';
} else {
this.$Message.error('查询时间不能为空');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
this.initData();
},
getChange (data){
},
initData (){
var now = new Date();
var endTime = this.msToDate(now);
var startTime = this. msToDate(now.setDate(now.getDate() - 1));
this.formInline.searchTime = [startTime, endTime];
},
msToDate(msec){
let datetime = new Date(msec);
let year = datetime.getFullYear();
let month = datetime.getMonth() + 1;
let date = datetime.getDate();
let hour = datetime.getHours();
let minute = datetime.getMinutes();
let second = datetime.getSeconds();
let result = year +
'-' +
((month) < 10 ? '0' + month : month ) +
'-' +
((date) < 10 ? '0' + date : date) +
' ' +
((hour) < 10 ? '0' + hour : hour) +
':' +
((minute) < 10 ? '0' + minute : minute) +
':' +
((second) < 10 ? '0' + second : second);
return result;
}
},