162 lines
6.3 KiB
Vue
162 lines
6.3 KiB
Vue
|
<template>
|
||
|
|
<div class="conent">
|
||
|
|
<el-card :body-style="{ padding: '20px 20px 0 20px' }">
|
||
|
|
<el-form ref="form" :inline="true" :model="form">
|
||
|
|
<el-form-item label="日期:">
|
||
|
|
<el-date-picker v-model="form.date" type="date" placeholder="日期" format="yyyy-MM-DD" value-format="yyyy-MM-DD"></el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="商品名称:">
|
||
|
|
<el-input v-model="form.name" placeholder="商品名称"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="handleChoose">筛选</el-button>
|
||
|
|
<el-button plain @click="handleReChoose">重置筛选</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card style="margin-top: 10px">
|
||
|
|
<el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%"
|
||
|
|
@sort-change="sortChange" :default-sort="{ prop: 'sales_num', order: 'descending' }">
|
||
|
|
<el-table-column label="商品名称" prop="name" width="250"></el-table-column>
|
||
|
|
<el-table-column label="完整编码" prop="external_sku_id"></el-table-column>
|
||
|
|
<el-table-column label="入库数量" prop="stock"></el-table-column>
|
||
|
|
<el-table-column label="销量" prop="sales_num" sortable="custom"></el-table-column>
|
||
|
|
<el-table-column label="损耗" prop="loss_num"></el-table-column>
|
||
|
|
<el-table-column label="目标去化率" prop="goal_rate"></el-table-column>
|
||
|
|
|
||
|
|
<el-table-column label="S1(11:00-12:00)">
|
||
|
|
<el-table-column prop="S1" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S1_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S2(11:00-13:30)">
|
||
|
|
<el-table-column prop="S2" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S2_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S3(11:00-15:00)">
|
||
|
|
<el-table-column prop="S3" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S3_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S4(15:00-16:00)">
|
||
|
|
<el-table-column prop="S4" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S4_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S5(11:00-17:30)">
|
||
|
|
<el-table-column prop="S5" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S5_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S6(11:00-20:00)">
|
||
|
|
<el-table-column prop="S6" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S6_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="S7(11:00-09:00)">
|
||
|
|
<el-table-column prop="S7" label="销量">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="S7_rate" label="去化率" sortable="custom">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页功能 -->
|
||
|
|
<div class="block">
|
||
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
|
|
:current-page="current_page" :page-sizes="[50, 100, 150, 200]" :page-size="per_page"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getSalesReportData } from "../../api/dataCenter";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
date: "",
|
||
|
|
name: "",
|
||
|
|
sort: "sales_num",
|
||
|
|
sortOrder: "DESC",
|
||
|
|
},
|
||
|
|
loading: true,
|
||
|
|
tableData: [],
|
||
|
|
Paginationdata: {}, //分页相关数据
|
||
|
|
current_page: 1, //当前页
|
||
|
|
per_page: 50, //每页显示数量
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.salseReportData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 销售数据
|
||
|
|
salseReportData(params = {}) {
|
||
|
|
params.page = this.current_page;
|
||
|
|
params.per_page = this.per_page;
|
||
|
|
|
||
|
|
getSalesReportData(params).then((res) => {
|
||
|
|
this.tableData = res.data.data;
|
||
|
|
this.Paginationdata = res.data.meta;
|
||
|
|
});
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
//分页功能
|
||
|
|
handleSizeChange(val) {
|
||
|
|
//当前条数
|
||
|
|
this.current_page = 1;
|
||
|
|
this.per_page = val;
|
||
|
|
this.salseReportData();
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
//当前页
|
||
|
|
this.current_page = val;
|
||
|
|
this.salseReportData();
|
||
|
|
},
|
||
|
|
// 筛选
|
||
|
|
handleChoose() {
|
||
|
|
this.form = {
|
||
|
|
...this.form,
|
||
|
|
page: 1,
|
||
|
|
per_page: this.per_page,
|
||
|
|
};
|
||
|
|
this.salseReportData(this.form);
|
||
|
|
},
|
||
|
|
// 重置筛选
|
||
|
|
handleReChoose() {
|
||
|
|
this.form = {
|
||
|
|
date: "",
|
||
|
|
name: "",
|
||
|
|
};
|
||
|
|
this.salseReportData();
|
||
|
|
},
|
||
|
|
// 排序
|
||
|
|
sortChange(line) {
|
||
|
|
this.form.sort = line.prop;
|
||
|
|
this.form.sortOrder = ('ascending' === line.order) ? 'ASC' : 'DESC';
|
||
|
|
this.salseReportData(this.form);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.block {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
</style>
|