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

@extends('layouts.app')
@section('title')账单确认-项目管理@endsection

@section('content')
    @component('finance.menu')@endcomponent
    <div class="container-fluid d-none" id="container">
        <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._resetBillConfirmation")
            @can("结算管理-账单确认-重置账单确认")<button data-toggle="modal" data-target="#resetBillConfirmation" class="btn btn-sm btn-outline-primary">重置账单确认</button>@endcan
        </div>
        <div>
            <table class="table table-sm text-nowrap table-striped table-hover td-min-width-80" id="table">
                <tr v-for="(bill,i) in bills">
                    <td>
                        <label><input type="checkbox" :value="bill.id"></label>
                    </td>
                    <td><span>@{{ i+1 }}</span></td>
                    <td><span>@{{ bill.ownerGroupName }}</span></td>
                    <td><span>@{{ bill.customerName }}</span></td>
                    <td><span>@{{ bill.ownerName }}</span></td>
                    <td><span>@{{ bill.countingMonth }}</span></td>
                    <td><span>@{{ bill.updatedAt }}</span></td>
                    <td class="font-weight-bold"><span>@{{ bill.initialFee }}</span></td>
                    <td>
                        <label><input :id="'confirmFee-'+bill.id" @click="thisIndex=i" :readonly="thisIndex==i ? false : true" type="number" min="0" class="form-control form-control-sm" :value="bill.confirmFee"></label>
                        <div v-if="thisIndex==i">
                            <button class="btn btn-sm btn-success" @click="updateConfirmFee(bill)">确定</button>
                            <button class="btn btn-sm btn-danger" @click="thisIndex='-1'">取消</button>
                        </div>
                    </td>
                    <td><span>@{{ bill.difference }}</span></td>
                    <td>
                        <button class="btn btn-sm btn-outline-success" v-if="bill.confirmed == '否'" @click="billConfirm(bill)">确认</button>
                        <label v-else class="text-success">已确认</label>
                    </td>
                </tr>
            </table>
        </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($bills as $bill)
                    {   id : "{{$bill->id}}",
                        ownerGroupName : "{{$bill->owner ? ($bill->owner->userOwnerGroup ? $bill->owner->userOwnerGroup->name : '') : ''}}",
                        customerName : "{{$bill->owner ? ($bill->owner->customer ? $bill->owner->customer->name : '') : ''}}",
                        ownerName : "{{$bill->owner ? $bill->owner->name : ''}}",
                        countingMonth : "{{$bill->counting_month}}",
                        updatedAt : "{{$bill->updated_at}}",
                        initialFee : "{{$bill->initial_fee}}",
                        confirmFee : "{{$bill->confirm_fee}}",
                        difference : "{{$bill->difference}}",
                        confirmed : "{{$bill->confirmed}}",
                    },
                    @endforeach
                ],
                owners : [
                    @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                ownerGroups : [
                    @foreach($ownerGroups as $ownerGroup)
                    {name:"{{$ownerGroup->id}}",value:"{{$ownerGroup->name}}"},
                    @endforeach
                ],
                customers : [
                    @foreach($customers as $customer)
                    {name:"{{$customer->id}}",value:"{{$customer->name}}"},
                    @endforeach
                ],
                thisIndex:"-1",
                sum : Number("{{ $bills->total() }}"),
                reset:{
                    owner:[],
                }
            },
            mounted(){
                $('#container').removeClass('d-none');
                let data=[
                    [
                        {name:'owner_group_id',type:'select',tip:'项目小组',placeholder: '项目小组',data:this.ownerGroups},
                        {name:'counting_month_start',type:'dateMonth',tip:'起始结算月'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的项目'],
                            placeholder:['项目','定位或多选项目'],data:this.owners},
                    ],[
                        {name:'customer_id',type:'select',tip:'客户',placeholder: '客户',data:this.customers},
                        {name:'counting_month_end',type:'dateMonth',tip:'结束结算月'},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'index',value: '序号', neglect: true},
                    {name:'ownerGroupName',value: '项目小组'},
                    {name:'customerName',value: '客户'},
                    {name:'ownerName',value: '子项目'},
                    {name:'countingMonth',value: '结算月'},
                    {name:'updatedAt',value: '录入日期'},
                    {name:'initialFee',value: '原始账单金额', neglect: true},
                    {name:'confirmFee',value: '确认账单金额', neglect: true},
                    {name:'difference',value: '差额', neglect: true},
                    {name:'operating',value: '操作', neglect: true},
                ];
                new Header({
                    el: "table",
                    name: "billConfirmation",
                    column: column,
                    data: this.reports,
                    fixedTop:($('#form_div').height())+2,
                }).init();
            },
            methods:{
                billExport(isAll){
                    let url = '{{url('finance/billConfirmation/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(isAll,checkData,url,this.sum,token);
                },
                updateConfirmFee(bill){
                    let confirm_fee = $('#confirmFee-'+bill.id).val();
                    if (confirm_fee === bill.fee){
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("无更新");
                        return;
                    }
                    window.tempTip.confirm("确定要更新账单确认金额为“"+confirm_fee+"”吗？",()=>{
                        window.axios.post("{{url('finance/updateBillReport')}}",{id:bill.id,confirm_fee:confirm_fee})
                            .then(res=>{
                                if (res.data.success){
                                    bill.confirmFee = confirm_fee;
                                    bill.difference = Number(confirm_fee) - Number(bill.initialFee);
                                    bill.updatedAt = res.data.data;
                                    this.thisIndex = '-1';
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("修改成功");
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("网络错误："+err);
                            })
                    });
                },
                billConfirm(bill){
                    window.tempTip.confirm("确定要完结该账单吗？",()=>{
                        window.axios.post("{{url('finance/billConfirm')}}",{id:bill.id})
                            .then(res=>{
                                if (res.data.success){
                                    bill.confirmed = "是";
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("完结成功！");
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    });
                },
                resetBillConfirmation(){
                    window.tempTip.setDuration(3000);
                    window.tempTip.setIndex(1099);
                    if (!this.reset.month){
                        window.tempTip.show("未选择结算月");
                        return;
                    }
                    window.tempTip.setDuration(999999);
                    window.tempTip.waitingTip("加载中......");
                    window.tempTip.postBasicRequest("{{url('customer/project/resetBillConfirmation')}}",this.reset,res=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.cancelWaitingTip();
                        return "重置成功";
                    },true)
                },
            },
        });
    </script>
@stop