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" id="headerParent">
                <tr id="header"></tr>
                <tr v-for="(model,i) in models">
                    <td>@{{ i+1 }}</td>
                    <td>@{{ model.orderNumber }}</td>
                    <td>@{{ model.barcode }}</td>
                    <td>@{{ model.amount }}</td>
                    <td>@{{ model.producedAt }}</td>
                    <td>@{{ model.validAt }}</td>
                    <td>@{{ model.batchNumber }}</td>
                    <td>@{{ model.location }}</td>
                    <td>@{{ model.region }}</td>
                    <td>@{{ model.createdAt }}</td>
                    <td>@{{ model.userName }}</td>
                </tr>
            </table>
        </div>
    </div>
    {{$assigns->links()}}
</div>
@endsection

@section('lastScript')
<script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
<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:[],
        },
        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: '操作人'},
            ];
            let header = new Header({
                el: "#header",
                column: column,
                data: this.models,
                restorationColumn: 'id',
            });
            header.init();
        },
        methods:{
            selectFile(){
                $("#file").click();
            },
            importAssign(e){
                let file=e.target.files[0];
                if (!file){
                    tempTip.setDuration(3000);
                    tempTip.setIndex(1099);
                    tempTip.show("未选择文件");
                    return;
                }
                let formData = new FormData();
                formData.append("file",file);
                window.tempTip.setIndex(1099);
                window.tempTip.setDuration(9999);
                window.tempTip.waitingTip("执行中,请耐心等候......");
                axios.post('{{url('order/index/commodityAssign/import')}}',formData,{
                    'Content-Type':'multipart/form-data'
                })
                    .then(res=>{
                        if (res.data.success) {
                            if (res.data.data.length>0) {
                                this.models.unshift.apply(this.models,res.data.data);
                                if (this.models.length>50) this.models.split(50);
                            }
                            this.errors = res.data.errors;
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(2000);
                            tempTip.showSuccess("导入成功!");
                            return;
                        }
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(3000);
                        tempTip.show(res.data.data);
                    }).catch(err=> {
                    tempTip.cancelWaitingTip();
                    tempTip.setDuration(3000);
                    tempTip.show("网络错误："+err);
                })
            }
        },
    });
</script>
@endsection