baoshi-was/resources/views/finance/settlementBills/areaFee/index.blade.php

@extends('layouts.app')

@section('content')
    @include('shared._messages')
    @include('shared._error')
    <div id="list" class="d-none">
        <div class="container-fluid">
            <div id="form_div"></div>
            <div class="ml-3 form-inline" id="btn">
                    <span class="dropdown">
                        <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="areaFeeExport(true)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
            </div>
            <div class="row">
                <span class="fa fa-user fa-4x offset-md-3" style="color: #4c2584;opacity: 0.3"></span>
                <span class="ml-4 mt-2">
                                <h5 class="font-weight-bold">{{ $owner->name }}</h5>
                                <p class="text-muted">货主</p>
                            </span>
                <span v-if="(isArchived===1)" class="fa fa-check-circle  fa-4x offset-md-3" aria-hidden="true"
                      style="color: #4c2584;opacity: 0.3"></span>
                <span v-if="(isArchived===1)" class="ml-4 mt-2">
                                <h5 class="font-weight-bold">已确认</h5>
                            </span>
            </div>
            <table class="table table-striped table-sm text-nowrap table-hover table-bordered" id="table">
                <tr>
                    <th>仓库类型</th>
                    <th>使用区域</th>
                    <th>数量</th>
                    <th>合计面积</th>
                    <th>单价</th>
                    <th>金额</th>
                </tr>
                <tr v-for="(areaReport,i) in areaReports">
                    <td rowspan="3" class="text-center pt-4 bg-light">@{{
                        areaReport.owner_storage_price_model.using_type }}
                    </td>
                    <td>平面区</td>
                    <td>@{{ areaReport.area_on_flat?areaReport.area_on_flat:0 }}</td>
                    <td rowspan="3" class="text-center pt-4 bg-light">@{{ areaReport.accounting_area }}</td>
                    <td :rowspan="areaReports.length*3" class="text-center pt-4 bg-light">@{{ price }}</td>
                    <td :rowspan="areaReports.length*3" class="text-center pt-4 bg-light">@{{ billReport.storage_fee }}
                    </td>
                </tr>
                <tr v-for="(areaReport,i) in areaReports">
                    <td>整托存储</td>
                    <td>@{{ areaReport.area_on_tray?areaReport.area_on_tray:0 }}</td>
                </tr>
                <tr v-for="(areaReport,i) in areaReports">
                    <td>半托存储</td>
                    <td>@{{ areaReport.area_on_half_tray?areaReport.area_on_half_tray:0 }}</td>
                </tr>
            </table>
        </div>
        <div class="container" v-if="!(isArchived===1)">
            <div class="row">
                <div class="col-10"></div>
                <div class="col-2">
                    <form action="{{ 'areaFee/confirmBill' }}" method="post" style="display: inline-block;"
                          onsubmit="return confirm('您确定要确认金额吗？');">
                        {{ csrf_field() }}
                        <input type="hidden" name="owner_id" value="{{ $request['owner_id']??'' }}">
                        <input type="hidden" name="year" value="{{ $request['year']??'' }}">
                        <input type="hidden" name="month" value="{{ $request['month']??''}}">
                        <button type="submit" class="btn btn-outline-success btn-sm">
                            <i class="far fa-trash-alt"></i> 确认金额
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                areaReports: {!! $areaReports !!},
                billReport: {!! $billReport !!},
                owners: [@foreach($owners as $owner){name: '{{ $owner->id }}', value: '{{ $owner->name}}'},@endforeach],
                owner: {!! $owner !!},
                price: {!! $price !!},
                isArchived: {!! $isArchived !!},
                request: {!! $request !!},
                selectTr: 0,
            },
            created() {
            },
            mounted() {
                $('#list').removeClass('d-none');
                let _this = this;
                $(".up").slideUp();
                let data = [
                    [
                        {
                            name: 'owner_id',
                            type: 'select',
                            tip: ['多货主权限选择查看指定货主，默认为权限下的第一个货主'],
                            placeholder: ['货主'],
                            data: _this.owners,
                        },
                        {
                            name: 'year',
                            type: 'select',
                            tip: ['默认为时间上一个月所属年份'],
                            placeholder: ['年'],
                            data: [
                                {name: 2021, value: 2021},
                                {name: 2022, value: 2022},
                                {name: 2023, value: 2023},
                                {name: 2024, value: 2024},
                                {name: 2025, value: 2025},
                                {name: 2026, value: 2026},
                                {name: 2027, value: 2027},
                                {name: 2028, value: 2028},
                                {name: 2029, value: 2029},
                                {name: 2030, value: 2030},
                                {name: 2031, value: 2031},
                                {name: 2032, value: 2032},
                                {name: 2033, value: 2033},
                                {name: 2034, value: 2034},
                                {name: 2035, value: 2035},
                                {name: 2036, value: 2036},

                            ],
                        },
                        {
                            name: 'month',
                            type: 'select',
                            tip: ['默认为上一月'],
                            placeholder: ['月'],
                            data: [
                                {name: 1, value: 1},
                                {name: 2, value: 2},
                                {name: 3, value: 3},
                                {name: 4, value: 4},
                                {name: 5, value: 5},
                                {name: 6, value: 6},
                                {name: 7, value: 7},
                                {name: 8, value: 8},
                                {name: 9, value: 9},
                                {name: 10, value: 10},
                                {name: 11, value: 11},
                                {name: 12, value: 12},
                            ],
                        },
                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                    appendDom: "btn",
                });
                _this.form.init();
            },
            methods: {
                areaFeeExport(sign) {
                    let url = '{{url('finance/settlementBills/areaFee/confirmBill/export')}}';
                    let token = '{{ csrf_token() }}';
                    if (sign) {
                        excelExport(true, checkData, url, this.total, token);
                    } else {
                        excelExport(false, checkData, url, null, token, {
                            owner_id: this.owner.id,
                            year: this.request.year,
                            month: this.request.month,
                        });
                    }
                },
            },
            filters: {},
        });
    </script>
@endsection