95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="cardBox">
|
|||
|
|
<div class="searchBox">
|
|||
|
|
<div class="row">
|
|||
|
|
<span>时间：</span>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="timeValue"
|
|||
|
|
type="datetimerange"
|
|||
|
|
range-separator="-"
|
|||
|
|
start-placeholder="开始时间"
|
|||
|
|
end-placeholder="结束时间"
|
|||
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|||
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|||
|
|
style="width: 340px;">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<span>商品：</span>
|
|||
|
|
<el-input v-model="sku_id" clearable></el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">筛选</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-card>
|
|||
|
|
<el-table v-loading="loading" border :data="lossList">
|
|||
|
|
<el-table-column label="日期" prop="date"></el-table-column>
|
|||
|
|
<el-table-column label="报损数" prop="total_num"></el-table-column>
|
|||
|
|
<el-table-column label="报损金额" prop="total_loss_amount"></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getLossStatistics } from "@/api/dataCenter.js"
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
timeValue: [],
|
|||
|
|
lossList: [],
|
|||
|
|
sku_id: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.fetchData()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
fetchData() {
|
|||
|
|
this.loading = true
|
|||
|
|
let params = {
|
|||
|
|
start_time: this.timeValue ? this.timeValue[0] : '',
|
|||
|
|
end_day: this.timeValue ? this.timeValue[1] : '',
|
|||
|
|
sku_id: this.sku_id || 0
|
|||
|
|
}
|
|||
|
|
getLossStatistics(params).then((res) => {
|
|||
|
|
this.lossList = res.data.data
|
|||
|
|
this.loading = false
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleSearch() {
|
|||
|
|
this.fetchData()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.searchBox{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
.row{
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
margin-right: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
margin-left: 20px;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|