merchant/src/pages/subPages/view.vue

<template>
<el-container direction="vertical">
    <el-header height="40px" style="border-bottom: 1px solid #eee">操作记录</el-header>
    <div style="margin:10px 0;">
        <el-form :inline="true">
            <el-form-item label="选择柜子">
                <el-select v-model="cabinetValue" placeholder="请选择" @change="onChangeCabinet">
                    <el-option v-for="item in cabinetOptions" :key="item.id" :label="item.alias" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择箱子">
                <el-select v-model="boxValue" placeholder="请选择">
                    <el-option v-for="item in boxOptions" :key="item.box_number" :label="item.box_number" :value="item.box_number"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button style="margin-left:10px;" type="primary" :disabled="disSearch" @click="onSearch">查询</el-button>
            </el-form-item>
        </el-form>
    </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="alias" label="柜号"></el-table-column>
        <el-table-column align="center" prop="box_number" label="箱号"></el-table-column>
        <el-table-column align="center" prop="status_text" label="操作类型"></el-table-column>
        <el-table-column align="center" prop="datetime" 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-change="onPageChange" :current-page="pageNumber"></el-pagination>
    </el-row>
</el-container>
</template>

<script>
import {
    boxActionList,
    cabinetList,
    boxList
} from "@/api";
export default {
    data() {
        return {
            pageSize: 10,
            pageNumber: 1,
            cabinetValue: "",
            cabinetOptions: [],
            boxOptions: [],
            boxValue: "",
            tableData: [],
            total: 0,
        };
    },
    created() {
        this.getCabinetList();
    },
    computed: {
        disSearch() {
            return this.boxValue != "" && this.cabinetValue == "";
        },
    },
    methods: {
        onChangeCabinet(value) {
            if (value) {
                this.getBoxList();
            }
            console.log(value);
        },
        getCabinetList() {
            cabinetList().then((res) => {
                console.log(res);
                if (res && res.msg == "ok") {
                    this.cabinetOptions = res.data.rows;
                }
            });
        },
        getBoxList() {
            boxList({
                cabinet_number: this.cabinetValue
            }).then((res) => {
                if (res && res.msg == "ok") {
                    this.boxOptions = res.data.rows;
                }
            });
        },
        getBoxActionList() {
            let box = this.boxValue ? this.boxValue : 0;
            boxActionList({
                cabinet_number: this.cabinetValue,
                box_number: box,
                pageSize: this.pageSize,
                pageNumber: this.pageNumber,
            }).then((res) => {
                console.log(res);
                if (res && res.msg == "ok") {
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                }
            });
        },
        onPageChange(page) {
            if (page == this.pageNumber) {
                return;
            } else {
                this.pageNumber = page;
                setTimeout(() => {
                    this.getBoxActionList();
                }, 0);
            }
        },
        onSearch() {
            this.pageNumber = 1;
            setTimeout(() => {
                this.getBoxActionList();
            }, 0);
        },
    },
};
</script>

<style scoped>
</style>