erp/resources/frontend/src/views/plat/orderList.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-select v-model="form.shop_id" placeholder="店铺" @change="setActivity">
                        <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="活动名称:">
                    <el-select v-model="form.activity_no" placeholder="活动名称">
                        <el-option v-for="item in groupActivity" :key="item.activity_no" :label="item.activity_title"
                            :value="item.activity_no">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="发货状态:">
                    <el-select v-model="form.shipping_status" placeholder="发货状态">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="0" label="未发货"></el-option>
                        <el-option value="2" label="部分发货"></el-option>
                        <el-option value="1" label="已发货"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="订单类型:">
                    <el-select v-model="form.is_supplier" placeholder="订单类型">
                        <el-option value="" label="全部订单"></el-option>
                        <el-option value="1" label="自卖团订单"></el-option>
                        <el-option value="0" label="帮卖团订单"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="订单状态:">
                    <el-select v-model="form.cancel_status" placeholder="订单状态">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="0" label="未取消"></el-option>
                        <el-option value="1" label="已取消"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="售后状态:">
                    <el-select v-model="form.after_sales_status" placeholder="售后状态">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="0" label="未售后"></el-option>
                        <el-option value="1" label="有售后"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="帮卖团跟团号:">
                    <el-input v-model="form.participate_no" placeholder="帮卖团跟团号"></el-input>
                </el-form-item>
                <el-form-item label="自卖团跟团号:">
                    <el-input v-model="form.supply_participate_no" 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-button type="primary" @click="dialogVisible = true">配货单导出</el-button>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px">
            <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
                <el-table-column label="店铺名称">
                    <template slot-scope="scope">
                        {{ scope.row.shop.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="activity_title" label="活动名称"></el-table-column>
                <el-table-column prop="shipping_status" label="发货状态"></el-table-column>
                <el-table-column prop="is_supplier" label="订单类型"></el-table-column>
                <el-table-column prop="cancel_status" label="订单状态"></el-table-column>
                <el-table-column prop="after_sales_status" label="售后状态"></el-table-column>
                <el-table-column prop="supply_participate_no" label="自卖团跟团号"></el-table-column>
                <el-table-column prop="participate_no" label="帮卖团跟团号"></el-table-column>
                <el-table-column label="商品信息">
                    <template slot-scope="scope">
                        <div v-for="item in scope.row.items" :key="item.id">
                            <!-- {{ item.goods_name }}*{{ item.goods_number }} -->
                            {{ item.external_sku_id }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="confirm_at" label="下单时间"></el-table-column>
            </el-table>

            <!-- 分页功能 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                    layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 配货单导出 -->
        <el-dialog title="配货单导出" :visible.sync="dialogVisible" :close-on-click-modal="false">
            <el-form ref="exportForm" :model="exportForm" label-width="100px" :rules="exportFormRules">
                <el-form-item label="店铺:" prop="shop_id">
                    <el-select v-model="exportForm.shop_id" placeholder="店铺" @change="setActivity">
                        <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单类型">
                    <el-radio-group v-model="exportForm.is_supplier">
                        <el-radio :label="1">自卖团订单</el-radio>
                        <el-radio :label="0">帮卖团订单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开始跟团号" prop="start_no">
                    <el-input v-model="exportForm.start_no"></el-input>
                </el-form-item>
                <el-form-item label="结束跟团号" prop="end_no">
                    <el-input v-model="exportForm.end_no"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="derivation('exportForm')">导出</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { platOrderList, activityList, platOrderExport } from "../../api/plat";
import { storeList } from "../../api/shop";
export default {
    data() {
        return {
            form: {
                shop_id: "",
                activity_no: "",
                shipping_status: "",
                is_supplier: "",
                cancel_status: "",
                after_sales_status: "",
                supply_participate_no: "",
                participate_no: "",
            },
            dialogVisible: false,
            loading: true,
            tableData: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 10, //每页显示数量
            shops: [],
            groupActivity: [],
            exportForm: {
                shop_id: "",
                start_no: "",
                end_no: "",
                is_supplier: 1,
            },
            exportFormRules: {
                shop_id: [
                    { required: true, trigger: 'blur' }
                ],
                start_no: [
                    { required: true, trigger: 'blur' }
                ],
                end_no: [
                    { required: true, trigger: 'blur' }
                ],
            }
        };
    },
    mounted() {
        // 展示店铺列表
        this.getPlatOrderList();
        this.getShopsList();
    },
    methods: {
        // 店铺列表
        getPlatOrderList(params = {}) {
            params.page = this.current_page;
            params.per_page = this.per_page;

            platOrderList(params).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
            });
        },
        getShopsList() {
            let page = {
                page: 0,
                per_page: 99,
            };
            storeList(page).then((res) => {
                this.shops = res.data.data;
            });
            this.loading = false;
        },
        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.current_page = 1;
            this.per_page = val;
            this.getPlatOrderList();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.getPlatOrderList();
        },
        // 筛选
        handleChoose() {
            this.form = {
                ...this.form,
                page: 1,
                per_page: this.per_page,
            };
            this.getPlatOrderList(this.form);
        },

        // 重置筛选
        handleReChoose() {
            this.form = {
                shop_id: "",
                activity_no: "",
                shipping_status: "",
                is_supplier: "",
                cancel_status: "",
                after_sales_status: "",
                supply_participate_no: "",
                participate_no: "",
            };
            this.getPlatOrderList();
        },

        setActivity(shopId) {
            activityList(shopId).then((res) => {
                this.groupActivity = res.data;
            })
        },

        derivation(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    window.open("/plat_orders/export?shop_id=" + this.exportForm.shop_id + '&start_no=' + this.exportForm.start_no + '&end_no=' + this.exportForm.end_no + '&is_supplier=' + this.exportForm.is_supplier);
                } else {
                    return false;
                }
            });
        }
    },
};
</script>

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