erp/resources/frontend/src/views/plat/orderList.vue

<template>
    <div class="conent">
        <el-card>
            <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="所属店铺:">
                    <el-select v-model="form.shop_id" placeholder="店铺">
                        <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.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-select v-model="form.goods_sku_num" placeholder="商品数量">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="1" label="1个商品"></el-option>
                        <el-option value="2" label="2-5个商品"></el-option>
                        <el-option value="6" label="6个以上商品"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="打印状态:">
                    <el-select v-model="form.print_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.external_sku_ids" multiple filterable remote reserve-keyword placeholder="订单商品"
                        :remote-method="remoteMethod" :loading="searchLoading">
                        <el-option v-for="item in options" :key="item.external_sku_id" :label="item.title"
                            :value="item.external_sku_id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="下单时间:">
                    <el-date-picker v-model="form.confirm_at" type="datetimerange" range-separator="-" start-placeholder="起"
                        end-placeholder="止" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </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="print">打印</el-button>
                <el-button v-if="form.goods_sku_num === 2" type="primary">配货单导出</el-button>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px">
            <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="店铺名称">
                    <template slot-scope="scope">
                        {{ scope.row.shop.name }}
                    </template>
                </el-table-column>

                <el-table-column label="跟团号">
                    <template slot-scope="scope">
                        {{ scope.row.is_supplier ? '自卖团: ' : '帮卖团: ' }}
                        {{ scope.row.is_supplier ? scope.row.participate_no : scope.row.supply_participate_no }}
                    </template>
                </el-table-column>

                <el-table-column label="收件人信息" width="160">
                    <template slot-scope="scope">
                        <p>{{ scope.row.receiver_name }}</p>
                        <p>{{ scope.row.receiver_address_province }} {{ scope.row.receiver_address_city }} {{
                            scope.row.receiver_address_district }}</p>
                        <p>{{ scope.row.receiver_address_detail }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="shipping_status" 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 label="商品信息" width="420">
                    <template slot-scope="scope">
                        <div v-for="item in scope.row.items" :key="item.id">
                            {{ item.goods_name }}
                            <br />
                            <span style="color: red;">+{{ item.goods_number }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="confirm_at" label="下单时间" width="100"></el-table-column>
                <el-table-column prop="print_status" 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>
    </div>
</template>

<script>
import { platOrderList, printOrders, printSuccess } from "../../api/plat";
import { storeList } from "../../api/shop";
import { goodsSkusList } from "../../api/goods";
export default {
    data() {
        return {
            form: {
                shop_id: "",
                // activity_no: "",
                shipping_status: "",
                // is_supplier: "",
                cancel_status: "0",
                after_sales_status: "0",
                // supply_participate_no: "",
                // participate_no: "",
                goods_sku_num: "",
                print_status: "0",
                external_sku_ids: [],
                confirm_at: [],
                ids: [],
            },
            dialogVisible: false,
            loading: true,
            searchLoading: false,
            options: [],
            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' }
                ],
            },
            confirmAt: [],
            print_order_ids: '',
            print_documents: [],
            socket: null,
            lockReconnect: false, //是否真正建立连接
            timeout: 58 * 1000, //58秒一次心跳
            timeoutObj: null, //心跳心跳倒计时
            serverTimeoutObj: null, //心跳倒计时
            timeoutnum: null, //断开 重连倒计时
            defaultPrinter: null,
            taskIDArray: [],
        };
    },
    created() {
        this.initConfirmAt();
        this.getPlatOrderList({
            confirm_at_start: this.form.confirm_at[0],
            confirm_at_end: this.form.confirm_at[1]
        });
        this.initWebSocket();
    },
    mounted() {
        // 展示店铺列表
        this.getShopsList();
    },
    beforeDestroy() {
        // 订阅事件记得要取消
    },
    destroyed() {
    },
    methods: {
        initConfirmAt() {
            const nowTimeDate = new Date();
            nowTimeDate.setHours(0, 0, 0, 0);
            this.form.confirm_at[0] = nowTimeDate.toLocaleString('zh', { hour12: false }).replaceAll('/', '-');
            nowTimeDate.setHours(23, 59, 59, 999);
            this.form.confirm_at[1] = nowTimeDate.toLocaleString('zh', { hour12: false }).replaceAll('/', '-');
            this.confirmAt = this.form.confirm_at;
        },
        // 店铺列表
        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.confirm_at_start = this.form.confirm_at[0] ? this.form.confirm_at[0] : '',
                this.form.confirm_at_end = this.form.confirm_at[1] ? this.form.confirm_at[1] : '',
                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: "0",
                after_sales_status: "0",
                // supply_participate_no: "",
                // participate_no: "",
                goods_sku_num: '',
                print_status: 0,
                external_sku_ids: [],
                confirm_at: this.confirmAt,
                multipleSelectionIds: [],
            };
            this.getPlatOrderList();
        },
        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;
                }
            });
        },
        remoteMethod(query) {
            if (query !== '') {
                this.searchLoading = true;
                setTimeout(() => {
                    this.searchLoading = false;
                    goodsSkusList(query).then((res) => {
                        this.options = res.data.filter(item => {
                            return item.title.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                    });
                }, 200);
            } else {
                this.options = [];
            }
        },
        print() {
            const print_loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            printOrders(this.form).then((res) => {
                this.print_documents = res.data.documents;
                this.print_order_ids = res.data.order_ids;
                print_loading.close();
                this.doPrint();
            })
        },
        handleSelectionChange(val) {
            let ids = [];
            val.forEach((item) => {
                ids.push(item.id);
            })
            this.form.ids = ids;
        },
        initWebSocket() {
            //初始化weosocket
            const wsuri = "ws://127.0.0.1:5000";
            this.socket = new WebSocket(wsuri);
            // 客户端接收服务端数据时触发
            this.socket.onmessage = this.websocketonmessage;
            // 连接建立时触发
            this.socket.onopen = this.websocketonopen;
            // 通信发生错误时触发
            this.socket.onerror = this.websocketonerror;
            // 连接关闭时触发
            this.socket.onclose = this.websocketclose;
        },
        // 连接建立时触发
        websocketonopen() {
            //开启心跳
            this.start();
            if (this.socket.readyState === 1) {
                // 获取打印机列表
                this.getPrinters();
            }
        },
        start() {
            //开启心跳
            console.log("开启心跳");
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            self.timeoutObj = setTimeout(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                if (self.socket.readyState == 1) {
                    //如果连接正常
                } else {
                    //否则重连
                    self.reconnect();
                }
                self.serverTimeoutObj = setTimeout(function () {
                    //超时关闭
                    self.socket.close();
                }, self.timeout);
            }, self.timeout);
        },
        reconnect() {
            //重新连接
            var that = this;
            if (that.lockReconnect) {
                return;
            }
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () {
                //新连接
                that.initWebSocket();
                that.lockReconnect = false;
            }, 5000);
        },
        // 通信发生错误时触发
        websocketonerror() {
            console.log("出现错误");
            this.reconnect();
        },
        // 客户端接收服务端数据时触发
        websocketonmessage(e) {
            console.log(e);
            if (JSON.parse(e.data).printers !== undefined) {
                this.defaultPrinter = JSON.parse(e.data).defaultPrinter;
            }
            // JSON.parse 用来解析JSON字符串
            console.log("默认打印机" + this.defaultPrinter)

            if (JSON.parse(e.data).status === 'success') {
                console.log("打印就绪..")
            }
            if (JSON.parse(e.data).status === 'failed') {
                console.log("打印未就绪..")
            }
            if (JSON.parse(e.data).taskStatus === 'printed') {
                console.log('出纸成功--打印成功')
                // 打印成功回调
                printSuccess({ order_ids: this.print_order_ids }).then((res) => {
                    console.log(res)
                })
            }
            if (JSON.parse(e.data).taskStatus === 'failed') {
                console.log("打印失败!")
            }
            if (JSON.parse(e.data).taskStatus === 'canceled') {
                console.log("打印取消!")
            }

            //收到服务器信息，心跳重置
            this.reset();
        },
        reset() {
            //重置心跳
            var that = this;
            //清除时间
            clearTimeout(that.timeoutObj);
            clearTimeout(that.serverTimeoutObj);
            //重启心跳
            that.start();
        },
        websocketsend(Data) {
            //数据发送
            this.socket.send(Data);
        },
        // 连接关闭时触发
        websocketclose(e) {
            //关闭
            console.log("断开连接", e);
            //重连
            this.reconnect();
        },
        getPrinters() {
            var request = this.getRequestObject("getPrinters");
            this.websocketsend(JSON.stringify(request));
        },
        doPrint() {
            var request = this.getRequestObject("print");
            request.task = new Object();
            request.task.taskID = this.getUUID(8, 10);
            // 把每次打印的任务 taskID 保存到 taskIDArray 数组
            this.taskIDArray.push(request.task.taskID)
            // 记录当前打印请求的ID
            this.requestIDGetGlobalConfig = request.task.taskID
            request.task.preview = false;
            request.task.printer = this.defaultPrinter;
            request.task.documents = this.print_documents;
            console.log(request.task.documents)

            this.websocketsend(JSON.stringify(request));
        },
        getRequestObject(cmd) {
            var request = new Object();
            // 必须:请求的ID,用于唯一标识每个请求，每个客户端保证生成唯一的ID
            request.requestID = this.getUUID(8, 16);
            //必须: 协议当前版本
            request.version = "1.0";
            //必须: 请求命令名称
            request.cmd = cmd;

            return request;
        },
        getUUID(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;
            if (len) {
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                var r;
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }

            return uuid.join('');
        }
    },
};
</script>

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