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

@extends('layouts.app')
@section('title')订单管理-跟踪@endsection
@section('content')
    @component('order.tracking.menu')@endcomponent
    <div class="container-fluid" id="tracking_div">
        <div>
            <div class="d-none" id="list">
                @can('订单管理-跟踪-监听')
                <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="pasteDataTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header row form-inline">
                                <input type="text" v-model="name" class="form-control form-control-sm col-5 offset-3" placeholder="搜索货主，点击下方块添加" />
                                <button class="btn btn-sm btn-info col-2" @click="seekOwner()">搜索</button>
                                <label class="col-2"></label>
                            </div>
                            <div class="modal-body container row" style="text-align:center">
                                <div class="col-2 mt-2" v-for="owner in owners">
                                    <div style="border: 1px solid #aac7ea;height: 80px;text-align: center;line-height: 80px;border-radius: 4px;cursor: pointer"
                                         :style="[{'background': loggingOwners.includes(Number(owner.name)) ? '#00FF00' : ''},
                                    {'box-shadow' : seekOwners.includes(owner.name) ? '0px 0px 10px 5px rgba(0,0,0,0.9)' : ''}]"
                                         @click="addTrackingOwner( owner.id )">@{{ owner.value }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endcan
                <div id="form_div"></div>
                <div class="form-inline mt-1 ">
                    <span class="dropdown">
                        <button type="button"
                                class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                                :class="[checkData.length>0?'btn-dark text-light':'']"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="exportSelect()" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="exportAll()" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                    @can('订单管理-跟踪-监听')
                    <button class="btn btn-outline-info btn-sm tooltipTarget ml-2" @click="openModal()">
                        管理监听货主
                    </button>
                    @endif
                </div>

                <table class="table table-sm table-bordered table-hover card-body table-responsive-sm p-0 m-0">
                    <tr class="text-center">
                        <th>
                            <input id="all" type="checkbox" @click="checkAll($event)"/>
                        </th>
                        <th>序号</th>
                        <th>公司</th>
                        <th>订单号</th>
                        <th>WEB+订单号</th>
                        <th>提货日期</th>
                        <th>销售</th>
                        <th>客户</th>
                        <th>SKU</th>
                        <th>物料描述</th>
                        <th>数量</th>
                        <th>订单备注</th>
                        <th>重量</th>
                        <th>体积</th>
                        <th>托盘合计</th>
                        <th>运输方式</th>
                        <th>运输单号</th>
                        <th>到达城市</th>
                        <th>到达城市</th>
                        <th>应送达时间</th>
                        <th>是否赶上卡班</th>
                        <th>到货情况</th>
                        <th>签收日期</th>
                        <th>签收单情况</th>
                        <th>备注</th>
                    </tr>

                    <tr v-for="(orderTracking,index) in orderTrackings">
                        <td>
                            <input id="all" type="checkbox" @click="checkAll($event)"/>
                        </td>
                        <td>@{{ index }}</td>
                        <td>公司</td>
                        <td>订单号</td>
                        <td>WEB+订单号</td>
                        <td>提货日期</td>
                        <td>销售</td>
                        <td>客户</td>
                        <td>SKU</td>
                        <td>物料描述</td>
                        <td>数量</td>
                        <td>订单备注</td>
                        <td>重量</td>
                        <td>体积</td>
                        <td>托盘合计</td>
                        <td>运输方式</td>
                        <td>运输单号</td>
                        <td>到达城市</td>
                        <td>到达城市</td>
                        <td>应送达时间</td>
                        <td>是否赶上卡班</td>
                        <td>到货情况</td>
                        <td>签收日期</td>
                        <td>签收单情况</td>
                        <td>备注</td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/export200818a.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200901.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200826b.js')}}"></script>

    <script>
        let tracking_vue = new Vue({
            el:'#tracking_div',
            data:{
                orderTrackings:[],
                owners:[@foreach($owners as $owner){name: '{{ $owner->id }}', value: '{{ $owner->name}}'},@endforeach],
                from:'',
                checkData:'',
                seekOwners : [],
                name : "",
                loggingOwners : [],
            },
            mounted:function(){
                $('.tooltipTarget').tooltip({'trigger': 'hover'});
                $("#list").removeClass('d-none');
                let _this = this;
                let data = [
                    [
                        {name:'start_at',type:'dateTime',tip:'起始日期',placeholder:'起始日期'},
                        {name:'owner_id',type:'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                            placeholder: ['货主', '定位或多选货主'],
                            data: _this.owners},
                        {name:'client_code',type:'input',tip:'订单号',placeholder:'订单号'},
                        {name:'client',type:'input',tip:'货主',placeholder:'货主'},
                    ],
                    [
                        {name:'end_at',type:'dateTime',tip:'结束日期',placeholder: '结束日期'},
                        {name:'logistic_number',type:'input',tip:'运输单号',placeholder:'运输单号'},
                        {name:'sku',type:'input',tip:'SKU',placeholder: '商品编号'},
                    ]
                ];
                this.from = new query({
                    el: '#form_div',
                    condition: data,
                }).init();
            },
            watch:{
                checkData: {
                    handler() {
                        if (this.checkData.length === this.orderTrackings.length && this.checkData.length !== 0) {
                            document.querySelector('#all').checked = true;
                        } else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep: true
                },
            },
            methods:{
                checkAll(e){
                    if (e.target.checked) {
                        this.orderTrackings.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) === -1) {
                                this.checkData.push(el.id);
                            }
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                openModal(){
                    let url = "{{url('apiLocal/order/trackingOwner/all')}}";
                    axios.post(url).then(res=>{
                        this.loggingOwners = res.data;
                        $("#modal").modal('show');
                    });
                },
                seekOwner(){
                    if (!this.name)return ;
                    let name = this.name;
                    let seekOwners = [];
                    this.owners.forEach(function (owner) {
                        if ((owner.value).indexOf(name) !== -1){
                            seekOwners.push(owner.name);
                        }
                    });
                    if (seekOwners.length > 0)this.seekOwners = seekOwners;
                },
                addTrackingOwner(owner_id,name){

                },
                selectedColor(id) {
                    if (id === this.selectedStyle) {
                        this.selectedStyle = '';
                        return;
                    }
                    this.selectedStyle = id;
                },
                exportSelect:function(){

                },
                exportAll:function(){

                },
            }
        });
    </script>
@endsection