<template>
<div class="attendance-container">
<div class="search-box">
<div class="start">
<label>消费开始时间：</label>
<el-date-picker v-model="startDate" type="datetime" align="center" placeholder="选择日期时间">
</el-date-picker>
</div>
<div class="start">
<label>消费结束时间：</label>
<el-date-picker align="center" v-model="endDate" type="datetime" placeholder="选择日期时间">
</el-date-picker>
<el-button icon="el-icon-search" type="primary"></el-button>
</div>
</div>
<div class="table-box">
<el-table :data="tableData" style="width: 98%" height="450">
<el-table-column type="index" width="50" label="序号" fixed>
</el-table-column>
<el-table-column prop="name" label="姓名" width="80" fixed>
</el-table-column>
<el-table-column prop="date" label="时间" width="100">
</el-table-column>
<el-table-column prop="province" label="编号" width="80">
</el-table-column>
<el-table-column prop="city" label="部门" width="100">
</el-table-column>
<el-table-column prop="address" label="卡号" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="zip" label="消费类型">
</el-table-column>
<el-table-column prop="zip" label="流水号">
</el-table-column>
<el-table-column prop="zip" label="消费金额">
</el-table-column>
<el-table-column prop="zip" label="时间段">
</el-table-column>
<el-table-column prop="zip" label="设备名称">
</el-table-column>
<el-table-column prop="zip" label="设备上报时间">
</el-table-column>
</el-table>
</div>
<div class="page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
layout="prev, pager, next" :total="totals" :page-size="200">
</el-pagination>
</div>
</div>
</template>
<script>
![111.png](https:
export default {
name: "consumptionRecord",
data() {
return {
totals: 1000,
startDate: '',
endDate: '',
tableData: [{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-05',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-09',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-10',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}],
currentPage4: 4
}
},
components: {
},
created() {
},
mounted() {
this.getCurrent()
},
methods: {
getCurrent(){
var timeStrArr = this.genDate('today');
this.startDate = moment(timeStrArr[0]).format("YYYY-MM-DD HH:mm:ss");
this.endDate = moment(timeStrArr[1]).format("YYYY-MM-DD HH:mm:ss");
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
genDate(type) {
const DATE_NOW = new Date();
let year = DATE_NOW.getFullYear();
let month = DATE_NOW.getMonth() + 1;
let day = DATE_NOW.getDate();
if (type === 'year' || type === 'month') {
return [
new Date(`${year}-01-01 00:00:00`),
new Date(`${year}-${month}-${day} 23:59:59`)
];
} else if (type === 'day') {
return [
new Date(`${year}-${month}-01 00:00:00`),
new Date(`${year}-${month}-${day} 23:59:59`)
];
} else if (type === 'today' || type === 'hour') {
return [
new Date(`${year}-${month}-${day} 00:00:00`),
new Date(`${year}-${month}-${day} 23:59:59`)
];
}
},
}
}
</script>
<style lang="less" scoped>
.attendance-container {
padding: 10px 5px;
.search-box {
.start {
margin-bottom: 10px;
}
.el-date-editor,
.el-input {
width: 195px;
}
margin-bottom: 10px;
}
.table-box {
margin-bottom: 10px;
}
.page {
text-align: right;
}
}
</style>
