baoshi-was/resources/views/order/scanInfo/index.blade.php

@extends('layouts.app')
@section('title')扫描计件-详情@endsection
@section('content')
    <div class="d-none" id="list">
        <!--查询            -->
        <div class="row m-3" style="background-color: #fff;">
            <!-- 分页数量            -->
            <div class="form-group m-2">
                <select class="form-control selectpicker" title="分页大小" v-model="size">
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>
            <!--用户-->
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="用户名">
                <input v-model="search.username" class="form-control" type="text" placeholder="用户名">
            </div>

            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="起始日期">
                <input v-model="search.startTime" class="form-control" type="datetime-local" step="01">
            </div>

            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="截止日期">
                <input v-model="search.endTime" class="form-control" type="datetime-local" step="01">
            </div>

            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="单号">
                <input v-model="search.content" class="form-control" type="text" placeholder="单号">
            </div>

            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="桌号">
                <input v-model="search.scanLocationCode" class="form-control" type="text" placeholder="桌号">
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-success" @click="resetSearch()">重置</button>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-success" @click="downExcel()">导出EXCEL</button>
            </div>
        </div>

        <!--            导出-->
        <span class="dropdown"></span>
        <!--            表格-->
        <table class="table table-striped table-bordered table-hover text-nowrap waybill-table td-min-width-80"
               style="background: #fff;" id="table">
            <tr v-for="(item,i) in details.data" :key="i">
                <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.username }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.macAddress }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.scanLocationCode }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.content }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.skuAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.waveDesc }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.createTime }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.recheckTime }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.recheckUsername }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.workstation }}</span></td>
            </tr>
        </table>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item" :class="current===1?'disabled':''">
                    <button class="page-link" @click="pagination('pre')">上一页</button>
                </li>
                <li class="page-item" :class="current===details.pages?'disabled':''">
                    <button class="page-link" @click="pagination('next')">下一页</button>
                </li>
            </ul>
        </nav>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                users: [],
                selectTr: '',
                details: {
                    data: [],
                    total: null,
                    current: null,
                    pages: null,
                    size: null
                },
                size: 50,
                current: 1,
                search: {
                    startTime: '',
                    endTime: '',
                    userIds: [],
                }
            },
            created() {
                Date.prototype.format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1, //月份
                        "d+": this.getDate(), //日
                        "h+": this.getHours(), //小时
                        "m+": this.getMinutes(), //分
                        "s+": this.getSeconds(), //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    }
                    for (var k in o) {
                        if (new RegExp("(" + k + ")").test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                        }
                    }
                    return fmt;
                }

                let url = this.getBaseUrl();
                url += `/api/report/scanInfo/listPage?size=${this.size}&current=${this.current}`;
                axios.post(url, this.search).then(res => {
                    this.details.data = res.data.data.list;
                    this.details.total = res.data.data.page.total;
                    this.details.current = res.data.data.page.pageNum;
                    this.details.pages = res.data.data.page.pages
                    this.details.size = res.data.data.page.pageSize;
                });
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                let column = [
                    {name: 'username', value: '用户'},
                    {name: 'macAddress', value: 'MAC地址'},
                    {name: 'locationCode', value: '桌号'},
                    {name: 'content', value: '单号'},
                    {name: 'content', value: '数量'},
                    {name: 'content', value: '波次类型'},
                    {name: 'createTime', value: '打包时间'},
                    {name: 'recheckTime', value: '复核时间'},
                    {name: 'recheckUsername', value: '复核人'},
                    {name: 'workstation', value: '工作站'},
                ];
                new Header({
                    el: "table",
                    name: "details",
                    column: column,
                    data: this.details.data,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                resetSearch() {
                    this.current = 1;
                    this.size = 50;
                    this.search = {
                        startTime: null,
                        endTime: null,
                        customerCodeList: [],
                    };
                },
                searchData() {
                    this.current = 1;
                    this.pagination();
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = '';
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8111'
                    } else if (env === 'production') {
                        url = 'https://stat.baoshi56.com'
                    }
                    return url;
                },
                getSearch: function () {
                    let search = Object.assign({}, this.search)
                    if (search.startTime != null && search.startTime !== '') {
                        search.startTime = new Date(Date.parse(search.startTime)).format("yyyy-MM-dd hh:mm:ss");
                    }
                    if (search.endTime != null && search.endTime !== '') {
                        search.endTime = new Date(Date.parse(search.endTime)).format("yyyy-MM-dd hh:mm:ss");
                    }
                    return search;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    let url = this.getBaseUrl();
                    url += `/api/report/scanInfo/listPage?size=${this.size}&current=${this.current}`;
                    let search = this.getSearch();
                    axios.post(url, search).then(res => {
                        if (res.data.data === undefined) {
                            this.details.data = [];
                            this.details.total = 0
                            this.details.current = 1
                            this.details.pages = 0
                            this.details.size = 50;
                        } else {
                            this.details.data = res.data.data.list;
                            this.details.total = res.data.data.page.total;
                            this.details.current = res.data.data.page.pageNum;
                            this.details.pages = res.data.data.page.pages
                            this.details.size = res.data.data.page.pageSize;
                        }
                    });
                },
                downExcel() {
                    let url = this.getBaseUrl();
                    url += '/api/report/scanInfo/export';
                    let search = this.getSearch();
                    axios.post(url, search).then(res => {
                        if (res.data.code === 200) {
                            let filename = res.data.data;
                            let downUrl = this.getBaseUrl() + '/api/report/scanInfo/export/' + filename;
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = downUrl;
                            link.download = `${filename}.xlsx`;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            tempTip.showSuccess('导出成功!');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }
                    })
                }
            },

        });
    </script>
@endsection