baoshi-was/resources/views/order/issue/import.blade.php

@extends('layouts.app')
@section('title')问题件-导入@endsection
@section('content')
    <div id="nav2">
        @component('order.issue.menu')@endcomponent
    </div>
    <div class="container-fluid" id="issue_import_div">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">

                <div class="form-group row text-center">
                    <div class="col-12 text-danger">
                        注意：请保证表第一行有以下对应的字段名<br><span class="text-muted">(可不按顺序)：</span><br>
                        原始运单号，问题类别，情况说明<br>
                        <span class="text-muted" style="opacity:0.7"> 订单问题类别:('拦截', '快递异常', '信息更改', '联系不上', '其他', '错漏发', '仓库问题', '快递丢件', '破损', '撤销丢件', '二次加工', '全检问题', '系统问题', '延迟发货', '仓库丢件', )<br></span>
                    </div>
                    <div class="col-12 text-info ">
                        导入时间随文件大小可能达数十分钟以上，请耐心等候
                        <hr>
                    </div>
                </div>
                @can('订单管理-订单问题件生成-文本导入')
                    <div class="form-group row text-center">
                        <div class="col-12 text-danger">
                            订单问题类别：同Excel文件导入所要求的订单问题类别一致<br/>
                            注意：文本导入的问题件只有全部符合条件的才能生成问题件,自定义订单号可不填<br/>
                            <span class="text-muted" style="opacity:0.7">
                                如果在导入后出现部分数据导入失败，修改对应错误的数据继续导入即可
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <button type="button" class="btn form-control btn-primary"  @click="showPasteDataModal">文本导入</button>
                        </div>
                    </div>
                    <hr/>
                @endcan
                <form action="{{url('order/issue/batchImport')}}" method="post" enctype="multipart/form-data" class="form"  target="_blank">
                    @csrf
                    <div class="form-group row">
                        <label for="sku" class="col-2 col-form-label text-right">选择EXCEL</label>
                        <div class="col-8">
                            <div class="form-control">
                                <input type="file" class="form-control-file @error('file') is-invalid @enderror"
                                       name="file" value="{{ old('file') }}" required>
                                @error('file')
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-success form-control" value="执行导入">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal fade" id="pasteData" role="dialog" tabindex="-1" aria-labelledby="pasteDataTetlie" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row modal-title font-weight-bold w-100 text-nowrap ml-1 noselect" id="pasteDataTitle">
                            <span v-for="(row,i) in rows" draggable="true"
                                  @drop="drop($event,i)" @dragover="dragover($event)" @dragstart="dragstart($event,i)"
                                  class="col-3 border" style="cursor: move"
                                  :class="requiredRows.includes(row)?'text-danger':''">@{{ row }}</span>
                        </div>
                    </div>
                    <div class="modal-body text-center">
                        <button type="button" id="popover" class="btn btn-danger" v-if="popoverContent"
                                data-container="body" data-toggle="popover" data-placement="bottom"
                                :data-content="popoverContent" data-html="true">
                            部分数据导入失败
                        </button>
                        <textarea id="pasteDataText" class="w-100" style="height: 400px" v-model="pasteDataText"
                                  @keydown.tab="forbidTab($event)" @keyup.tab="replaceSpacing()"
                                  placeholder="内容可为EXCEL复制,也可手动输入使用“TAB”缩进符区分列，请注意表头顺序,可拖拽表头字段调整顺序，以该顺序为准"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" @click="importPasteData">开始导入</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let listVue = new Vue({
            el:'#issue_import_div',
            data:{
                rows:['原始运单号','问题类别','情况说明','自定义订单号'],
                requiredRows:['原始运单号','问题类别','情况说明','自定义订单号'],
                popoverContent:'',
                pasteDataText: '',
            },
            mounted:function(){
                $('[data-toggle="popover"]').popover();
            },
            methods:{
                showPasteDataModal(){
                    $('#popover').attr('hidden','hidden')
                    $('#pasteData').modal('show')
                },
                drop(e,index){
                    e.preventDefault();
                    if (this.dom !== e.target.innerHTML){
                        this.dom.innerHTML = e.target.innerHTML;
                        let temp=JSON.parse(JSON.stringify(this.rows[index]));
                        this.$set(this.rows,index,this.rows[e.dataTransfer.getData('text/html')]);
                        this.$set(this.rows,Number(e.dataTransfer.getData('text/html')),temp);
                    }
                },
                dragover(e){
                    e.preventDefault();
                },
                dragstart(e,index){
                    this.dom = e.target.innerHTML;
                    e.dataTransfer.setData("text/html",index);
                },
                importPasteData(){
                    if(!this.pasteDataText){
                        tempTip.setDuration(2000)
                        tempTip.show('导入文本不能为空')
                    }
                    let _this = this
                    let data = {rows:this.rows,pasteDataText:this.pasteDataText}
                    tempTip.setDuration(99999)
                    tempTip.setIndex(1051)
                    tempTip.waitingTip('正在执行中,请稍后')
                    axios.post('{{url('apiLocal/order/issue/importPasteData')}}',data).then(function (response) {
                        tempTip.cancelWaitingTip()
                        if(response.data.success){
                            $('#pasteData').modal('hide')
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('导入完毕')
                        }else{
                            let content = '';
                            for (const key in response.data.fail_info) {
                                content+=key+':'+response.data.fail_info[key] + "</br>"
                            }
                            _this.popoverContent = content
                            setTimeout(function () {
                                $("#popover").removeAttr('hidden').popover('show')
                            },1);
                        }
                    }).catch(function(error){
                        tempTip.cancelWaitingTip()
                        tempTip.setDuration(2000)
                        tempTip.show('导入失败'+error)
                    })
                },
                forbidTab(e){
                    e.preventDefault();
                },
                replaceSpacing(){
                    this.pasteDataText += "\t";
                },

            }
        });
    </script>
@endsection