310 lines
10 KiB
Vue
310 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
<div class="cardBox">
|
||
<div class="searchBox">
|
||
<div class="row">
|
||
<span>统计时间：</span>
|
||
<el-select v-model="time_type" style="width: 100px;margin-right: 5px;" @change="changeTimeType">
|
||
<el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-date-picker
|
||
v-if="time_type == 'day' || time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
|
||
v-model="dayValue"
|
||
:clearable="false"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
@change="changeDayTime">
|
||
</el-date-picker>
|
||
|
||
<el-date-picker
|
||
v-else-if="time_type == 'month'"
|
||
v-model="monthValue"
|
||
type="month"
|
||
:clearable="false"
|
||
format="yyyy-MM"
|
||
value-format="yyyy-MM"
|
||
placeholder="选择月"
|
||
@change="changeMonthTime">
|
||
</el-date-picker>
|
||
|
||
<el-date-picker
|
||
v-else-if="time_type == 'custom'"
|
||
v-model="customValue"
|
||
type="datetimerange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
:clearable="false"
|
||
style="width: 250px;"
|
||
@change="changeCustomTime">
|
||
</el-date-picker>
|
||
|
||
<div class="time">
|
||
<span>当前统计时间：</span>
|
||
<span v-if="startTime == endTime">{{ startTime }}</span>
|
||
<span v-else>{{ startTime }}~{{ endTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card>
|
||
<div class="opaBox">
|
||
<el-button type="success" icon="el-icon-download" @click="handleExport" :loading="downloadLoading">导出</el-button>
|
||
</div>
|
||
<el-table v-loading="loading" border :data="saleList">
|
||
<el-table-column label="商品名称" prop="name"></el-table-column>
|
||
<el-table-column label="sku规格" prop="title"></el-table-column>
|
||
<el-table-column label="规格编码" prop="external_sku_id"></el-table-column>
|
||
<el-table-column label="销量" prop="goods_total"></el-table-column>
|
||
<el-table-column label="销售额" prop="goods_total_amount"></el-table-column>
|
||
|
||
<el-table-column label="昨日销量" prop="yesterday_avg_num" v-if="time_type == 'day'"></el-table-column>
|
||
<el-table-column label="3日内销量" prop="three_day_avg_num" v-if="time_type == 'day'"></el-table-column>
|
||
<el-table-column label="7日内销量" prop="seven_day_avg_num" v-if="time_type == 'day'"></el-table-column>
|
||
<el-table-column label="已发货数" prop="shipping_num" v-if="time_type == 'day'"></el-table-column>
|
||
<el-table-column label="未发货数" prop="unshipping_num" v-if="time_type == 'day'"></el-table-column>
|
||
|
||
<el-table-column label="库存" prop="stock"></el-table-column>
|
||
<el-table-column label="可售库存" prop="sale_stock"></el-table-column>
|
||
<el-table-column label="状态" prop="status"></el-table-column>
|
||
</el-table>
|
||
<div class="page-pagination">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
layout="prev, pager, next, jumper, sizes, total"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSkuSalesCount } from "@/api/dataCenter.js"
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
time_type: 'day',
|
||
timeTypeList: [
|
||
{ label: '自然日', value: 'day' },
|
||
{ label: '自然周', value: 'week' },
|
||
{ label: '自然月', value: 'month' },
|
||
{ label: '近7天', value: 'seven' },
|
||
{ label: '近30天', value: 'thirty' },
|
||
{ label: '自定义', value: 'custom' }
|
||
],
|
||
TIMETYPE: {
|
||
'day': '自然日',
|
||
'week': '自然周',
|
||
'month': '自然月',
|
||
'seven': '近7天',
|
||
'thirty': '近30天',
|
||
'custom': '自定义'
|
||
},
|
||
dayValue: '',
|
||
monthValue: '',
|
||
customValue: [],
|
||
startTime: '',
|
||
endTime: '',
|
||
page: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
saleList: [],
|
||
downloadLoading: false,
|
||
autoWidth: true,
|
||
bookType: 'xlsx'
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getInitList()
|
||
},
|
||
methods: {
|
||
getInitList() {
|
||
let time = this.getDayTime()
|
||
this.dayValue = this.startTime = this.endTime = time
|
||
this.fetchData()
|
||
},
|
||
changeTimeType() {
|
||
if(this.time_type == 'day') {
|
||
let time = this.getDayTime()
|
||
this.dayValue = this.startTime = this.endTime = time
|
||
} else if(this.time_type == 'week') {
|
||
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
|
||
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
|
||
} else if(this.time_type == 'month') {
|
||
this.monthValue = dayjs().format('YYYY-MM')
|
||
this.startTime = this.monthValue + '-01'
|
||
this.endTime = this.monthValue + '-' + this.getDaysInMonth(this.monthValue)
|
||
} else if(this.time_type == 'seven') {
|
||
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
|
||
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
|
||
} else if(this.time_type == 'thirty') {
|
||
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
|
||
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
|
||
} else if(this.time_type == 'custom') {
|
||
this.startTime = this.endTime = dayjs().format('YYYY-MM-DD')
|
||
this.customValue = [this.startTime, this.startTime]
|
||
}
|
||
this.page = 1
|
||
this.fetchData()
|
||
},
|
||
fetchData() {
|
||
this.loading = true
|
||
let params = {
|
||
type: this.time_type == 'day' ? 1 : 2,
|
||
start_day: this.startTime,
|
||
end_day: this.endTime,
|
||
page: this.page,
|
||
per_page: this.pageSize
|
||
}
|
||
getSkuSalesCount(params).then((res) => {
|
||
this.saleList = res.data.data.data
|
||
this.total = res.data.data.total
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 获取当前日期
|
||
getDayTime() {
|
||
let time = dayjs().format('YYYY-MM-DD')
|
||
return time
|
||
},
|
||
// 获取所在周的周一
|
||
getFirstDay(date) {
|
||
let day = new Date(date).getDay() || 7
|
||
return new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate() + 1 - day)
|
||
},
|
||
getDaysInMonth(date) {
|
||
let year = date.split('-')[0] * 1
|
||
let month = date.split('-')[1] * 1
|
||
const startOfMonth = dayjs(new Date(year, month - 1, 1))
|
||
const endOfMonth = startOfMonth.endOf('month')
|
||
return endOfMonth.date()
|
||
},
|
||
changeDayTime() {
|
||
if(this.time_type == 'day') {
|
||
this.startTime = this.endTime = this.dayValue
|
||
} else if(this.time_type == 'week') {
|
||
this.endTime = this.dayValue
|
||
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
|
||
} else if(this.time_type == 'seven') {
|
||
this.endTime = this.dayValue
|
||
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
|
||
} else if(this.time_type == 'thirty') {
|
||
this.endTime = this.dayValue
|
||
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
|
||
}
|
||
this.page = 1
|
||
this.fetchData()
|
||
},
|
||
changeMonthTime() {
|
||
this.startTime = this.monthValue + '-01'
|
||
this.endTime = this.monthValue + '-' + this.getDaysInMonth(this.monthValue)
|
||
this.page = 1
|
||
this.fetchData()
|
||
},
|
||
changeCustomTime() {
|
||
this.startTime = this.customValue[0]
|
||
this.endTime = this.customValue[1]
|
||
this.page = 1
|
||
this.fetchData()
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page = 1
|
||
this.pageSize = val
|
||
this.fetchData()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.page = val
|
||
this.fetchData()
|
||
},
|
||
handleExport() {
|
||
this.downloadLoading = true
|
||
let params = {
|
||
type: this.time_type == 'day' ? 1 : 2,
|
||
start_day: this.startTime,
|
||
end_day: this.endTime,
|
||
page: 1,
|
||
per_page: this.total
|
||
}
|
||
getSkuSalesCount(params).then((res) => {
|
||
if(!res.data.data.data.length) {
|
||
this.$message({
|
||
message: '暂无数据',
|
||
type: 'error'
|
||
})
|
||
this.downloadLoading = false
|
||
return
|
||
}
|
||
import('@/util/Export2Excel').then(excel => {
|
||
const tHeader = ['商品名称', 'sku规格', '规格编码', '销量', '销售额', '库存', '可售库存', '状态']
|
||
const filterVal = ['name', 'title', 'external_sku_id', 'goods_total', 'goods_total_amount', 'stock', 'sale_stock', 'status']
|
||
if(this.time_type == 'day') {
|
||
tHeader.splice(5, 0, '昨日销量', '3日内销量', '7日内销量', '已发货数', '未发货数')
|
||
filterVal.splice(5, 0, 'yesterday_avg_num', 'three_day_avg_num', 'seven_day_avg_num', 'shipping_num', 'unshipping_num')
|
||
}
|
||
const list = res.data.data.data
|
||
const data = this.formatJson(filterVal, list)
|
||
let date = this.startTime == this.endTime ? this.startTime : this.startTime + '-' + this.endTime
|
||
excel.export_json_to_excel({
|
||
header: tHeader,
|
||
data,
|
||
filename: 'sku销售统计数据【' + this.TIMETYPE[this.time_type] + date + '】',
|
||
autoWidth: this.autoWidth,
|
||
bookType: this.bookType
|
||
})
|
||
this.downloadLoading = false
|
||
}).catch(() => {
|
||
this.downloadLoading = false
|
||
})
|
||
}).catch(() => {
|
||
this.downloadLoading = false
|
||
})
|
||
},
|
||
formatJson(filterVal, jsonData) {
|
||
return jsonData.map(v => filterVal.map(j => {
|
||
return v[j]
|
||
}))
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
.opaBox{
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
|