baoshi-was/resources/views/kpi/month/index.blade.php

@extends('layouts.app')
@section('title')KPI-月报表@endsection
@section('content')
    <div class="d-none" id="list">
        <div class="container-fluid">
            <div id="form_div"></div>
            <!--            导出-->
            <span class="dropdown"></span>
            <h3>2021</h3>
            <!--            表格-->
            <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><input class="checkItem" type="checkbox" :value="item.id"></td>
                    <td class="td-warm text-muted"><span>@{{item.userWorkgroupName}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.statTime.slice(0,10)}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.purchseEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.allocateTransferEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.inWarehouseEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.otherEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.returnEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.barterEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.adjustEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.virtualEntry}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.overtimeShelve}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2cDeliveryQty}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2cDeliveryNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2cDelayNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2cErrorNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2cComplainNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bDeliveryNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bDeliveryQty}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bComplainNum}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bDeliveryBulk}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.b2bDeliveryWeigh}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.inventory}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.inventoryProfit}}</span></td>
                    <td class="td-warm text-muted"><span>@{{item.inventoryLoss}}</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>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                selectTr: '',
                details: {
                    data: [],
                    total: null,
                    current: null,
                    pages: null,
                    size: null
                },
                size: 10,
                current: 1
            },
            created() {
                let url = this.getBaseUrl();
                url += `/api/deliver/getMonthPage?size=${this.size}&current=${this.current}`;
                axios.get(url).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 data = [
                    [
                        {name: 'date_start', type: 'dateTime', tip: '选择显示指定日期的起始时间'},
                    ]
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
                this.rendingHeader();

            },
            methods: {
                getBaseUrl() {
                    let url = '';
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = ' http://127.0.0.1:8111'
                    } else if (env === 'production') {
                        url = ' http://101.133.135.193'
                    }
                    return url;
                },
                pagination(flag) {
                    console.log(flag);
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    console.log(this.current, this.details.pages);
                    let url = this.getBaseUrl();
                    url += `/api/deliver/getMonthPage?size=${this.size}&current=${this.current}`;
                    axios.get(url).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;
                    });
                },
                rendingHeader() {
                    let column = [
                        {name: 'workgroupName', value: '组名', neglect: true, class: "td-warm"},
                        {name: 'month', value: '月份', class: "td-warm"},
                        {name: 'purchseEntry', value: '入库采购', neglect: true, class: "td-warm"},
                        {name: 'allocateTransferEntry', value: '调拨入库', class: "td-warm"},
                        {name: 'b2bEntry', value: 'B2B入库', class: "td-warm"},
                        {name: 'inWarehouseEntry', value: '进仓入库', neglect: true, class: "td-warm"},
                        {name: 'otherEntry', value: '其他入库', class: "td-warm"},
                        {name: 'returnEntry', value: '退货入库', class: "td-warm"},
                        {name: 'barterEntry', value: '换货入库', class: "td-warm"},
                        {name: 'adjustEntry', value: '调整入库', class: "td-warm"},
                        {name: 'virtualEntry', value: '虚拟入库', class: "td-warm"},
                        {name: 'overtimeShelve', value: '未及时上架', class: "td-warm"},


                        {name: 'b2cDeliveryQty', value: 'B2C发货个数', class: "td-cool"},
                        {name: 'b2cDeliveryNum', value: 'B2C发货单数', class: "td-cool"},
                        {name: 'b2cDelayNum', value: 'B2C延误单数', neglect: true, class: "td-cool"},
                        {name: 'b2cErrorNum', value: 'B2C错漏发单数', neglect: true, class: "td-cool"},
                        {name: 'b2cComplainNum', value: 'B2C客诉单数', class: "td-cool"},
                        {name: 'b2bDeliveryNum', value: 'B2B发货行数', neglect: true, class: "td-cool"},
                        {name: 'b2bDeliveryQty', value: 'B2B发货个数', class: "td-cool"},
                        {name: 'b2bComplainNum', value: 'B2B客诉行数', class: "td-cool"},
                        {name: 'b2bDeliveryBulk', value: 'B2B发货体积', class: "td-cool"},
                        {name: 'b2bDeliveryWeigh', value: 'B2B发货重量', class: "td-cool"},


                        {name: 'inventory', value: '盘点总数量', class: "td-warm"},
                        {name: 'inventoryProfit', value: '盘盈数量', class: "td-warm"},
                        {name: 'inventoryLoss', value: '盘亏数量', class: "td-warm"},
                    ];
                    new Header({
                        el: "table",
                        name: "details",
                        column: column,
                        data: this.details.data,
                        restorationColumn: 'id',
                        fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 2,
                        before: [
                            {colspan: '13', value: '生产部-入库数据', class: "table-header-layer-1"},
                            {
                                colspan: '10',
                                value: '生产部-发货数据',
                                font: "fa fa-file-text-o",
                                class: "table-header-layer-1"
                            },
                            {colspan: '4', value: '生产部-库存数据', font: "fa fa-truck", class: "table-header-layer-1"},
                        ],
                    }).init();
                },
            },
        });
    </script>
@endsection