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

@extends('layouts.app')
@section('title')KPI-日报表@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" style="max-width: 200px !important;">
                <select v-model="search.ownerId" class="selectpicker form-control" title="选择货主"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of owners" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </div>
            <div class="form-group m-2" style="max-width: 200px !important;">
                <select v-model="search.workCoefficientTypeId" class="selectpicker form-control" title="选择单据类型"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of workTypes" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </div>
            <div class="form-group m-2" style="max-width: 200px !important;">
                <select v-model="search.workCoefficientTypeDetailId" class="selectpicker form-control" title="选择单据类型明细"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of workTypeDetails" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </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>

        <!--            导出-->
        <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><input class="checkItem" type="checkbox" :value="item.id"></td>
                <td class="td-warm text-muted"><span>@{{ item.ownerName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.workCoefficientTypeName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.workCoefficientTypeDetailName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.inventoryCoef }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.returnCoef }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.receiveCoef }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.deliverCoef }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.processCoef }}</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: {
                workTypes: [],
                workTypeDetails: [],
                owners: [
                        @foreach($owners as $owner)
                    {
                        name: '{{$owner->name}}', id: '{{$owner->id}}', code: '{{$owner->code}}'
                    },
                    @endforeach
                ],
                selectTr: '',
                details: {
                    data: [],
                    total: null,
                    current: null,
                    pages: null,
                    size: null
                },
                size: 50,
                current: 1,
                search: {
                    ownerId: null,
                    workCoefficientTypeId: null,
                    workCoefficientTypeDetailId: null
                }
            },
            created() {
                let url = this.getBaseUrl();
                url += `/api/ownerWorkCoefficient/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;
                });

                this.initData();

            },
            mounted: function () {
                $('#list').removeClass('d-none');
                let column = [
                    {name: 'owner_id', value: '货主'},
                    {name: 'work_coefficient_type_name', value: '单据类型'},
                    {name: 'work_coefficient_type_detail_name', value: '单据类型详情'},
                    {name: 'inventory_coef', value: '库存组工作系数'},
                    {name: 'return_coef', value: '退货组工作系数'},
                    {name: 'receive_coef', value: '收货组工作系数'},
                    {name: 'deliver_coef', value: '发货组工作系数'},
                    {name: 'process_coef', value: '加工组工作系数'},
                ];
                new Header({
                    el: "table",
                    name: "package",
                    column: column,
                    data: this.packages,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                //初始化数据 大类型和小类型的初始化，完成后才可以渲染页面
                initData() {
                    let names = ['workCoefficientType', 'workCoefficientTypeDetail'];
                    let requests = names.map(name => axios.get(this.getBaseUrl() + "/api/" + name + "/listAll"));
                    Promise.all(requests).then(resList => {
                        for (let res of resList) {
                            if ((res.config.url + '').endsWith('workCoefficientType/listAll')) {
                                this.workTypes = res.data.data;
                            }
                            if ((res.config.url + '').endsWith('workCoefficientTypeDetail/listAll')) {
                                this.workTypeDetails = res.data.data;
                            }
                        }
                    }).then(() => {
                        $('#list').removeClass('d-none');
                    });
                },
                resetSearch() {
                    this.current = 1;
                    this.size = 50;
                    this.search = {
                        ownerId: null,
                        workCoefficientTypeId: null
                    }
                },

                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;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    let env = "{{ config('env') }}";
                    console.log(env);
                    let url = this.getBaseUrl();

                    url += `/api/ownerWorkCoefficient/listPage?size=${this.size}&current=${this.current}`;
                    axios.post(url, this.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;
                        }
                    });
                },
            },
        });
    </script>
@endsection