baoshi-was/resources/views/inventory/stockOut/index.blade.php

@extends('layouts.app')
@section('title')库存管理-补货列表@endsection
@section('content')
    <div id="list" class="d-none item-logistic-index">
        <div class="container-fluid">
            <div class="m-2 form-inline" id="btn">
                <select class="form-control form-control-sm tooltipTarget" name="owner_id" id="owner_id"
                        style="width: 150px;position: relative" title="选择指定货主" v-model="owner_id">
                    <option value="">货主</option>
                    <option v-for="owner in owners" :value="owner.name">@{{ owner.value }}</option>
                </select>
                <input placeholder="定位货主" id="ownerName" autocomplete="off" @input="定位货主($event)"
                       class="form-control form-control-sm tooltipTarget" style="width: 100px" title="输入关键字定位货主">
                <button class="btn btn-sm btn-outline-info ml-3" @click="search()" >查询</button>

                <button type="button"
                        @click="orderItemExport(true)"
                        class="btn btn-outline-dark btn-sm ml-2"
                        title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">导出Excel
                </button>

            </div>
            <table class="table table-striped table-bordered table-hover card-body td-min-width-80" id="table">
                <tr v-if="item.amount > 0 " v-for="(item,i) in details" @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                    :class="selectTr===i+1?'focusing' : ''">
                    <td>@{{ item.customerid }}</td>
                    <td>@{{ item.sku }}</td>
                    <td>@{{ item.alternate_sku1 }}</td>
                    <td>
                        <ul style="list-style: none" v-if="item.eaLocation.length>0">
                            <li v-for="(v,k) in item.eaLocation" v-if="k<3 || item.moreEaLocation">@{{ v }}</li>
                            <a v-if="item.eaLocation.length >= 3" href="javascript:;"
                               @click="item.moreEaLocation = !(item.moreEaLocation)">展示更多</a>
                        </ul>
                        <div v-else>拣货库位不存在</div>
                    </td>
                    <td>@{{ item.amount }}</td>
                    <td>
                        <ul style="list-style: none">
                            <li v-for="(v,k) in item.rsLocation" v-if="k<3 || item.moreRaLocation">@{{ v.location }}
                                <span class="font-weight-bold text-dark">&nbsp;&nbsp;&nbsp;:@{{ v.qty }}</span>
                                <span class="font-weight-bold text-dark">&nbsp;&nbsp;&nbsp;:@{{ v.lot }}</span>
                            </li>
                            <a v-if="item.rsLocation.length >= 3" href="#javascript:;"
                               @click="item.moreRaLocation = !(item.moreRaLocation)">展示更多</a>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                selectTr: 0,
                owner_id: '',
                owners: [
                        @foreach($owners as $owner)
                    {
                        name: '{{$owner->code}}', value: '{{$owner->name}}'
                    },
                    @endforeach
                ],
                details: []
            },
            created() {
            },
            mounted() {
                $('#list').removeClass('d-none');
                $(".up").slideUp();
                let column = [
                    {name: 'owner_name', value: '货主'},
                    {name: 'sku', value: '商品名称'},
                    {name: 'barcode', value: '商品条码'},
                    {name: 'ea_location', value: '拣货库位'},
                    {name: 'amount', value: '缺货数'},
                    {name: 'rs_location', value: '存储库位'},
                ];
                new Header({
                    el: "table",
                    name: "item",
                    column: column,
                    data: this.details,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
                $('#table tr:eq(0) th:eq(0)').remove();
            },
            methods: {
                orderItemExport(sign) {
                    if (this.owner_id === '') {
                        tempTip.show('请选择货主!');
                        return;
                    }
                    let url = '{{url('inventory/stockOut/export')}}';
                    let token = '{{ csrf_token() }}';
                    if (sign) {
                        excelExport(true, checkData, url, this.total, token, {customer: this.owner_id});
                    }
                },

                定位货主(e) {
                    this.owners.some(owner => {
                        if (owner.value.indexOf(e.target.value) !== -1) {
                            this.owner_id = owner.name;
                            return true;
                        }
                    });
                    if (e.target.value === '' || e.target.value === null || e.target.value === undefined) {
                        this.owner_id = '';
                    }
                },

                search() {
                    let url = "{{ url('inventory/stockOut/getReplenishmentInfoByCustomer') }}"
                    axios.post(url, {
                        customer: this.owner_id
                    }).then(res => {
                        if (res.data.success){
                            this.details = res.data.data
                        }else {
                            window.tempTip.show(res.data.data);
                            window.tempTip.setDuration(2000);
                        }

                    }).catch(function (err){
                        window.tempTip.show('网络异常'+err);
                        window.tempTip.setDuration(2000);
                    });
                }
            },
            filters: {},
        });
    </script>
@endsection