merchant/src/pages/subPages/order.vue

<template>
<el-container direction="vertical">
    <el-header height="40px" style="border-bottom: 1px solid #eee">订单管理</el-header>
    <div style="margin:10px 0;">
        <el-input placeholder="请输入订单号" v-model="searchValue" style="width:200px;margin-left:10px;" />
        <el-button style="margin-left:10px;" type="primary" @click="onSearch">查询</el-button>
        <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="id" label="订单id"></el-table-column>
        <el-table-column align="center" prop="order_sn" label="订单编号"></el-table-column>
        <el-table-column align="center" prop="alias" label="柜号"></el-table-column>
        <el-table-column align="center" prop="box_number" label="箱号"></el-table-column>
        <el-table-column align="center" prop="code" label="取件码"></el-table-column>
        <el-table-column align="center" prop="order_status" label="订单状态"></el-table-column>
        <el-table-column align="center" prop="enter_time" label="存件日期"></el-table-column>
        <el-table-column align="center" prop="out_time" label="取件日期"></el-table-column>
    </el-table>
    <el-row style="margin-top:10px;" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="onPageChange"></el-pagination>
    </el-row>
</el-container>
</template>

<script>
import {
    orderList
} from "@/api";
export default {
    data() {
        return {
            tableData: [],
            pageSize: 10,
            pageNumber: 1,
            total: 0,
            searchValue: ""
        };
    },
    mounted() {
        this.getOrderList();
    },
    methods: {
        getOrderList() {
            const _self = this;
            orderList({
                pageSize: _self.pageSize,
                pageNumber: _self.pageNumber,
                order_sn: _self.searchValue
            }).then(
                (res) => {
                    if (res && res.msg == "ok") {
                        _self.total = res.data.total;
                        _self.tableData = [...res.data.rows];
                    }
                }
            );
        },
        onPageChange(page) {
            if (page == this.pageNumber) {
                return;
            } else {
                this.pageNumber = page;
                setTimeout(() => {
                    this.getOrderList();
                }, 0)
            }
        },
        onSearch() {
            this.pageNumber = 1;
            this.getOrderList();
        },
        onReset() {
            this.searchValue = "";
            this.pageNumber = 1;
            this.getOrderList();
        }
    },
};
</script>

<style scoped>
</style>