baoshi-was/resources/views/finance/instantBill.blade.php

@extends('layouts.app')
@section('title')即时账单-客户项目@endsection

@section('content')
    @component('finance.menu')@endcomponent
    <div class="container-fluid d-none" id="container">
        <div class="container-fluid nav3">
            <div class="card menu-third">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a target="customer/finance/instantBill" class="nav-link" href="{{url('finance/instantBill')}}" :class="!thisType ? 'active' : ''">全部</a>
                    </li>
                    <li class="nav-item">
                        <a target="customer/finance/instantBill" class="nav-link" href="{{url('finance/instantBill?type=发货')}}" :class="thisType=='发货' ? 'active' : ''">发货</a>
                    </li>
                    <li class="nav-item">
                        <a target="customer/finance/instantBill" class="nav-link" href="{{url('finance/instantBill?type=收货')}}" :class="thisType=='收货' ? 'active' : ''">收货</a>
                    </li>
                    <li class="nav-item">
                        <a target="customer/finance/instantBill" class="nav-link" href="{{url('finance/instantBill?type=增值服务')}}" :class="thisType=='增值服务' ? 'active' : ''">增值服务</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="form_div"></div>
        <div class="mt-1">
            <button type="button" class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                    data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                导出Excel
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" @click="billExport(false)" href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="billExport(true)" href="javascript:">导出所有页</a>
            </div>
            @include("finance._resetInstantBill")
            @can("结算管理-即时账单-重置即时账单")<button data-toggle="modal" data-target="#resetInstantBill" class="btn btn-sm btn-outline-primary">重置即时账单</button>@endcan
        </div>
        <div>
            <table class="table table-sm text-nowrap td-min-width-80" id="table">
                <tbody v-for="(bill,i) in bills" :class="i%2==0 ? 'bg-light-gray' : 'bg-white'">
                <tr>
                    <td :rowspan="bill.rowspan">
                        <label><input type="checkbox" :value="bill.id"></label>
                    </td>
                    <td :rowspan="bill.rowspan"><span>@{{ i+1 }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.customerName }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.ownerName }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.workedAt }}</span></td>
                    <td :rowspan="bill.rowspan">
                        <span>
                            <label v-if="bill.type == '增值服务'">服务<span class="badge badge-primary"><span>@{{ bill.methodName }}</span></span></label>
                            <label v-else>@{{ bill.type }}</label>
                        </span>
                    </td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.shopName }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.operationBill }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.consigneeName }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.consigneePhone }}</span></td>
                    <td><span>@{{ bill.commodityAmount }}</span></td>
                    <td><span>@{{ bill.province }}</span></td>
                    <td>
                        <span>
                            <span v-if="bill.rowspan <= 1">@{{ bill.logisticBill }}</span>
                            <span v-else class="font-weight-bold text-secondary">分箱：</span>
                        </span>
                    </td>
                    <td><span>@{{ bill.volume }}</span></td>
                    <td><span>@{{ bill.weight }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.logisticName }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.workFee }}</span></td>
                    <td><span>@{{ bill.logisticFee }}</span></td>
                    <td :rowspan="bill.rowspan"><span>@{{ bill.total }}</span></td>
                </tr>
                <tr v-for="item in bill.items">
                    <td><span>@{{ item.amount }}</span></td>
                    <td><span>@{{ item.logistic_bill }}</span></td>
                    <td><span>@{{ item.volume }}</span></td>
                    <td><span>@{{ item.weight }}</span></td>
                    <td><span>@{{ item.logistic_fee }}</span></td>
                </tr>
                </tbody>
            </table>
            {{$details->appends($params)->links()}}
        </div>
    </div>
@stop

@section("lastScript")
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                bills : [
                    @foreach($details as $detail)
                    {   id : "{{$detail->id}}",
                        ownerName : "{{$detail->owner ? $detail->owner->name : ''}}",
                        customerName : "{{$detail->owner ? ($detail->owner->customer ? $detail->owner->customer->name : '') : ''}}",
                        workedAt : "{{$detail->worked_at}}",
                        type : "{{$detail->type}}",
                        shopName : "{{$detail->shop ? $detail->shop->name : ''}}",
                        operationBill : "{{$detail->operation_bill}}",
                        consigneeName : "{{$detail->consignee_name}}",
                        consigneePhone : "{{$detail->consignee_phone}}",
                        commodityAmount : "{{$detail->commodity_amount}}",
                        logisticBill : "{{$detail->logistic_bill}}",
                        province : "{{$detail->province}}",
                        volume : "{{$detail->volume ? floor($detail->volume/10)/100 : ''}}",
                        weight : "{{$detail->weight}}",
                        logisticName : "{{$detail->logistic ? $detail->logistic->name : ''}}",
                        methodName : "{{$detail->processMethod ? $detail->processMethod->name : ''}}",
                        workFee : "{{$detail->work_fee}}",
                        logisticFee : "{{$detail->logistic_fee}}",
                        createdAt : "{{$detail->created_at}}",
                        total : "{{$detail->work_fee + $detail->logistic_fee}}",
                        items:{!! $detail->items !!},
                        rowspan:Number("{{count($detail->items)}}")+1
                    },
                    @endforeach
                ],
                owners : [
                    @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                customers : [
                    @foreach($customers as $customer)
                    {name:"{{$customer->id}}",value:"{{$customer->name}}"},
                    @endforeach
                ],
                shops : [
                    @foreach($shops as $shop)
                    {name:"{{$shop->id}}",value:"{{$shop->name}}"},
                    @endforeach
                ],
                types : [
                    {name:"发货",value:"发货"},{name:"收货",value:"收货"},{name:"增值服务",value:"增值服务"},
                ],
                sum : Number("{{ $details->total() }}"),
                thisType : "",
                reset:{
                    owner:[],
                },
            },
            mounted(){
                $('#container').removeClass('d-none');
                let data=[
                    [
                        {name:'shop_id',type:'select',tip:'店铺',placeholder: '店铺',data:this.shops},
                        {name:'worked_at_start',type:'dateTime',tip:'起始作业日期'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的项目'],
                            placeholder:['项目','定位或多选项目'],data:this.owners},
                        {name: 'operation_bill', type: 'input', tip: '可支持多发/收/退/提货单号：模糊搜索可在两侧增加百分号(%)进行', placeholder: '单据号'},
                    ],[
                        {name:'customer_id',type:'select',tip:'客户',placeholder: '客户',data:this.customers},
                        {name:'worked_at_end',type:'dateTime',tip:'结束作业日期'},
                        {name:'logistic_bill', type: 'input', tip: '可支持多物流/快递单号,模糊搜索可在两侧增加百分号(%)进行', placeholder: '快递单号'},
                        {name:'type',type:'select',tip:'类型',placeholder: '类型',data:this.types},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'index',value: '序号', neglect: true},
                    {name:'customerName',value: '客户', class: "bg-info"},
                    {name:'ownerName',value: '项目', class: "bg-info"},
                    {name:'workedAt',value: '作业时间', class: "bg-info"},
                    {name:'type',value: '类型', class: "bg-info"},
                    {name:'shopName',value: '店铺', class: "bg-info"},
                    {name:'operationBill',value: '单号(发/收/退/提)', class: "bg-info"},
                    {name:'consigneeName',value: '收件人', class: "bg-info"},
                    {name:'consigneePhone',value: '收件人电话', class: "bg-info"},
                    {name:'commodityAmount',value: '商品数量', class: "bg-info", neglect: true},
                    {name:'province',value: '省份', class: "bg-khaki"},
                    {name:'logisticBill',value: '物流/快递单号', class: "bg-khaki"},
                    {name:'volume',value: '体积(cm³)', class: "bg-khaki", neglect: true},
                    {name:'weight',value: '重量(kg)', class: "bg-khaki", neglect: true},
                    {name:'logisticName',value: '承运商', class: "bg-khaki"},
                    {name:'workFee',value: '操作费', class: "bg-cyanogen", neglect: true},
                    {name:'logisticFee',value: '物流费', class: "bg-cyanogen", neglect: true},
                    {name:'total',value: '合计', class: "bg-cyanogen", neglect: true},
                ];
                new Header({
                    el: "table",
                    name: "instantBill",
                    column: column,
                    data: this.bills,
                    restorationColumn: 'id',
                    fixedTop:($('#form_div').height())+2,
                    before:[
                        {colspan:'2',value: ''},
                        {colspan:'9',value: '单据信息', class:"bg-light-info"},
                        {colspan:'5',value: '物流作业信息', class:"bg-light-khaki"},
                        {colspan:'4',value: '费用信息', class:"bg-light-cyanogen"},
                    ],
                }).init();
                this.thisType = document.getElementsByName("type")[0].value;
            },
            methods:{
                billExport(isAll){
                    let url = '{{url('finance/instantBill/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(isAll,checkData,url,this.sum,token);
                },
                resetInstantBill(){
                    window.tempTip.setDuration(3000);
                    window.tempTip.setIndex(1099);
                    if (!this.reset.startDate){
                        window.tempTip.show("未选择起始日期");
                        return;
                    }
                    window.tempTip.setDuration(999999);
                    window.tempTip.waitingTip("加载中......");
                    window.tempTip.postBasicRequest("{{url('customer/project/resetInstantBill')}}",this.reset,res=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.cancelWaitingTip();
                        return "重置成功";
                    },true)
                },
            },
        });
    </script>
@stop