<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
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: '請選擇查詢時間範圍'}
}
}],
}
}
},
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;
}
},