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

@extends('layouts.app')
@section('title')指定分配-订单管理@endsection

@section('content')
    @component('order.index.menu')@endcomponent
<div class="container-fluid d-none" id="container">
    @include("order.index._importModal")
    <div class="card">
        <div class="card-body">
            <button class="btn  btn-outline-info mb-1" data-toggle="modal" data-target="#importModal">导入</button>
            <table class="table table-striped table-hover td-min-width-80" id="table">
                <tr v-for="(model,i) in models"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                    <td><span>@{{ i+1 }}</span></td>
                    <td><span>@{{ model.orderNumber }}</span></td>
                    <td><span>@{{ model.barcode }}</span></td>
                    <td><span>@{{ model.amount }}</span></td>
                    <td><span>@{{ model.producedAt }}</span></td>
                    <td><span>@{{ model.validAt }}</span></td>
                    <td><span>@{{ model.batchNumber }}</span></td>
                    <td><span>@{{ model.location }}</span></td>
                    <td><span>@{{ model.region }}</span></td>
                    <td><span>@{{ model.createdAt }}</span></td>
                    <td><span>@{{ model.userName }}</span></td>
                </tr>
            </table>
        </div>
    </div>
    {{$assigns->links()}}
</div>
@endsection

@section('lastScript')
<script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
<script>
    new Vue({
        el:"#container",
        data:{
            models:[
                @foreach($assigns as $assign)
                {
                    orderNumber:"{{$assign->order ? $assign->order->code : ''}}",
                    barcode:"{{$assign->commodity ? $assign->commodity->barcode : ''}}",
                    amount:"{{$assign->amount}}",
                    producedAt:"{{$assign->produced_at}}",
                    validAt:"{{$assign->valid_at}}",
                    batchNumber:"{{$assign->batch_number}}",
                    location:"{{$assign->location}}",
                    region:"{{$assign->region}}",
                    createdAt:"{{$assign->created_at}}",
                    userName:"{{$assign->user ? $assign->user->name : 'system'}}",
                },
                @endforeach
            ],
            isShowError : false,
            errors:[],
            selectTr:''
        },
        mounted(){
            $("#container").removeClass("d-none");
            let column = [
                {name:'index',value: '序号', neglect: true},
                {name:'orderNumber',value: '订单编号'},
                {name:'barcode',value: '商品条码'},
                {name:'amount',value: '数量', neglect: true},
                {name:'producedAt',value: '生产日期'},
                {name:'validAt',value: '失效日期'},
                {name:'batchNumber',value: '批次号'},
                {name:'location',value: '库位'},
                {name:'region',value: '库区'},
                {name:'createdAt',value: '导入日期'},
                {name:'userName',value: '操作人'},
            ];
            new Header({
                el: "table",
                name: "orderIndex",
                column: column,
                data: this.models,
            }).init();
        },
        methods:{
            selectFile(){
                $("#file").click();
            },
            importAssign(e){
                let file=e.target.files[0];
                if (!file){
                    window.tempTip.setDuration(3000);
                    window.tempTip.setIndex(1099);
                    window.tempTip.show("未选择文件");
                    return;
                }
                let formData = new FormData();
                formData.append("file",file);
                window.tempTip.setIndex(1099);
                window.tempTip.setDuration(9999);
                window.tempTip.waitingTip("执行中,请耐心等候......");
                window.axios.post('{{url('order/index/commodityAssign/import')}}',formData,{
                    'Content-Type':'multipart/form-data'
                })
                    .then(res=>{
                        if (res.data.success) {
                            this.errors = res.data.errors;
                            this.isShowError = true;
                            window.tempTip.cancelWaitingTip();
                            window.tempTip.setDuration(2000);
                            if (res.data.data.length>0) {
                                this.models.unshift.apply(this.models,res.data.data);
                                if (this.models.length>50) this.models = this.models.split(50);
                                window.tempTip.showSuccess("导入成功!");
                            }else {
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("导入失败!");
                            }
                            return;
                        }
                        window.tempTip.cancelWaitingTip();
                        window.tempTip.setDuration(3000);
                        window.tempTip.show(res.data.data);
                    }).catch(err=> {
                    window.tempTip.cancelWaitingTip();
                    window.tempTip.setDuration(3000);
                    window.tempTip.show("网络错误："+err);
                })
            }
        },
    });
</script>
@endsection