<template>
<div style="margin:10px;">
<el-card>
<el-date-picker
v-model="boothDate"
type="date"
style="margin-bottom:20px;"
placeholder="選擇日期"
value-format="yyyy-MM-dd"
:clearable="false"
:picker-options="pickerOptions"
@change="getConditionList();getExbList()" //根據日期變化同時調用兩個函數
>
</el-date-picker>
<div class="top-row">
<el-table ref="multipleTable" v-loading="loading" :data="tableData" border style="margin-bottom:50px;">
<el-table-column type="index" label="序號" width="60" align="center"/>
<el-table-column prop="client_type_name" label="客戶類型" align="center" />
<el-table-column prop="register_num" label="登記總數" align="center"/>
<el-table-column prop="splus_all" label="入展總數" align="center" />
<el-table-column prop="splus_1_day" :label="firstDay" align="center" />
<el-table-column prop="splus_2_day" :label="twoDay" align="center" />
<el-table-column prop="splus_3_day" :label="threeDay" align="center" />
<el-table-column prop="splus_4_day" :label="fourDay" align="center" />
</el-table>
</div>
<div class="top-row">
<el-table ref="multipleTable" v-loading="loading" :data="tableData1" border>
<el-table-column type="index" label="序號" width="60" align="center"/>
<el-table-column prop="building_name" label="展館" align="center" />
<el-table-column prop="room_name" label="展位" align="center"/>
<el-table-column prop="tenant_name" label="展商名" align="center" />
<el-table-column prop="splus_all" label="S+數量" align="center" />
<el-table-column prop="splus_1_day" :label="firstDay" align="center" />
<el-table-column prop="splus_2_day" :label="twoDay" align="center" />
<el-table-column prop="splus_3_day" :label="threeDay" align="center" />
<el-table-column prop="splus_4_day" :label="fourDay" align="center" />
</el-table>
</div>
</el-card>
</div>
</template>
<script>
import {queryConditionList,queryExbList} from '@/api/common.js' //傳入后台接口方法
export default {
data() {
return {
tableData:[], //表格數據源
tableData1:[],
boothDate:'', //時間框綁定數據
firstDay:'', //前三天
twoDay:'', //前兩天
threeDay:'', //前一天
fourDay:'', //當天
loading:true, //加載狀態
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now(); //今天之后禁用
}
},
}
},
created() {
//默認獲取當天日期
let toDay = new Date()
this.boothDate = this.addDate(toDay,0)
//查詢
this.getConditionList()
this.getExbList()
},
methods: {
//查詢列表
getConditionList(){
let params = {
time:this.boothDate
}
queryConditionList(params).then(res=>{
this.loading = false
this.tableData = res.data //列表數據賦值
this.firstDay = this.addDate(this.boothDate,-3) //前三天數據
this.twoDay = this.addDate(this.boothDate,-2) //前兩天數據
this.threeDay = this.addDate(this.boothDate,-1) //前一天數據
this.fourDay = this.boothDate //當天數據
})
},
getExbList(){
let params = {
time:this.boothDate
}
queryExbList(params).then(res=>{
this.loading = false
this.tableData1 = res.data
this.firstDay = this.addDate(this.boothDate,-3)
this.twoDay = this.addDate(this.boothDate,-2)
this.threeDay = this.addDate(this.boothDate,-1)
this.fourDay = this.boothDate
})
},
//獲取日期的
addDate(date,addDays){ //date傳入你需要的日期，格式"xxxx-xx-xx"。addDays傳要加減的日期數，往前傳正數，往后傳負數
var Dates = new Date(date);
Dates.setDate(Dates.getDate() + addDays);
var mon = Dates.getMonth() + 1,
day = Dates.getDate();
if(mon < 10){
mon = "0" + mon;//月份小於10，在前面補充0
}
if(day < 10){
day = "0" + day;//日小於10，在前面補充0
}
return Dates.getFullYear() + "-" + mon + "-" +day;
},
},
}
</script>
<style scoped>
</style>