erp/resources/frontend/src/views/dataCenter/salesReport.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 label="总销量大于:">
                    <el-input v-model="form.sales_num" 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%" height="900"
                :cell-style="tableCellClassName" @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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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="销量" sortable="custom">
                    </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";
import { DateTime } from 'luxon';
export default {
    data() {
        return {
            form: {
                date: "",
                name: "",
                sort: "sales_num",
                sortOrder: "DESC",
                sales_num: 0,
            },
            loading: true,
            tableData: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 100, //每页显示数量
        };
    },
    mounted() {
        this.salseReportData();
        // 格式化时间
        this.form.date = DateTime.now().toFormat('yyyy-MM-dd');
    },
    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: DateTime.now().toFormat('yyyy-MM-dd'),
                name: "",
                sales_num: 0,
            };
            this.salseReportData();
        },
        // 排序
        sortChange(line) {
            this.form.sort = line.prop;
            this.form.sortOrder = ('ascending' === line.order) ? 'ASC' : 'DESC';
            this.salseReportData(this.form);
        },
        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            if (column.property == 'S2' || column.property == 'S4' || column.property == 'S6' || column.property == 'S2_rate' || column.property == 'S4_rate' || column.property == 'S6_rate') {
                return {
                    "background-color": "beige"
                };
            } else {
                return '';
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.block {
    margin-top: 20px;
}
</style>