mashangyoujiu/Application/Retail/View/Inventory/index.html

<!--[1.7.90]-->
<style>
    th {
        background-color: #f5f7fa !important;
    }

    th > .cell {
        white-space: nowrap !important;
        text-align: center;
    }

    th, td {
        text-align: center;
        line-height: 30px;
        padding: 0;
    }

    th > .cell, td > .cell {
        text-align: center;
    }

    .el-pagination {
        padding: 8px;
    }

    .el-table__row > td:last-child > .cell {
        white-space: nowrap;
    }

    .center-content {
        margin: 0 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .center-content .el-input__inner {
        padding: 0 15px;
        text-align: left;
    }

    .el-input {
        margin-bottom: 10px;
    }

    .el-range-editor--small .el-range-separator {
        line-height: 32px;
    }
</style>
<div class="purchaseBox" id="purchase" v-cloak>
    <div class="center-content">
        <div>
            <el-input placeholder="盘点单号"
                      style="width: 200px"
                      type="text"
                      size="small"
                      clearable
                      @keydown.enter.exact.native.prevent="search"
                      v-model="order_number"></el-input>
            
            <date-picker-range :date-time.sync="add_time"></date-picker-range>

            <el-button type="primary" @click="search" size="small">搜索</el-button>
            <if condition="$authArr['addInventoryOrder'] eq true">
                <el-button type="primary" plain @click="addInventoryOrder(0)" size="small">新增</el-button>
            </if>
            <el-button @click="exportOperation" size="small">导出</el-button>
        </div>
    </div>
    <div style="border: 1px solid #e6e6e6;max-width: calc(100vw - 208px);">
        <el-table border :data="InventoryList" style="width: calc(100vw - 208px);border: none;"
                  size="mini"
                  max-height="500"
                  v-loading="loading"
                  element-loading-text="数据获取中"
                  element-loading-spinner="el-icon-loading">
            <el-table-column prop="index" label="序号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="order_number" label="盘点单号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="warehouse_name" label="盘点仓库" show-overflow-tooltip></el-table-column>
            <el-table-column prop="operator" label="操作人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="add_time" label="盘点时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goods_species" label="商品总种类" show-overflow-tooltip></el-table-column>
            <el-table-column prop="quantity" label="盈亏数量" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="盈亏金额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status_name" label="状态" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="right" label="操作" width="150px" style="border-right: none;">
                <template slot-scope="scope">
                    <if condition="$authArr['OrderInfo'] eq true">
                        <el-button @click="OrderInfo(scope.row.id,scope.row.operator)" type="text" size="small">盘点详情
                        </el-button>
                    </if>
                    <if condition="$authArr['addInventoryOrder'] eq true">
                        <el-button @click="addInventoryOrder(scope.row.id)" type="text" size="small"
                                   v-if="scope.row.status == 2">继续盘点
                        </el-button>
                    </if>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="currentLen">
        </el-pagination>
    </div>
</div>
<script type="text/javascript">
    var purchase = new Vue({
        el: "#purchase",
        data: function () {
            return {
                order_number: "",
                add_time: "",
                InventoryList: [],
                currentPage: 1,
                currentLimit: 10,
                currentLen: 0,
                loading: true,
            }
        },
        methods: {
            handleSizeChange: function (val) {
                this.currentLimit = val;//切换每页数量
                this.currentPage = 1;
                this.getData();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.getData();//切换页数
            },
            //搜索
            search: function () {
                this.currentPage = 1;
                this.getData();
            },
            //查询
            getData: function () {
                var that = this;
                that.loading = true;
                var page = that.currentPage;
                var limit = that.currentLimit;
                var order_number = that.order_number;
                var add_time = that.add_time;
                $.ajax({
                    url: "{:U('InventoryList')}",
                    type: "post",
                    data: {
                        page: page,
                        limit: limit,
                        order_number: order_number,
                        add_time: add_time,
                    },
                    success: function (res) {
                        that.InventoryList = res.data;
                        that.loading = false;
                        that.$nextTick(function () {
                            that.currentLen = parseInt(res.count);
                        })
                    }
                })
            },
            addInventoryOrder: function (inventory_id) {
                var that = this;
                layer.open({
                    type: 2,
                    content: "{:U('addInventory')}?inventory_id=" + inventory_id,
                    title: "盘点单",
                    area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                    offset: 'rb',
                    shade: 0,
                    btnAlign: 'c',
                    end: function () {
                        that.getData();
                    }
                })
            },
            //详情
            OrderInfo: function (id, operator) {
                var that = this;
                layer.open({
                    type: 2,
                    content: "{:U('details')}?id=" + id + '&operator=' + operator,
                    title: "详情",
                    area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                    offset: 'rb',
                    shade: 0,
                    btnAlign: 'c',
                })
            },
            //导出
            exportOperation: function () {
                var that = this;
                var order_number = that.order_number;
                var add_time = that.add_time;
                window.location.href = "{:U('export')}?order_number=" + order_number + "&add_time=" + add_time
            }
        },
        created: function () {
            this.getData();
        }
    })
</script>