baoshi-was/resources/views/procurement/finance/procurementBill.blade.php

@extends('layouts.app')
@section('title')采购管理-财务-采购账单@endsection

@section('content')
    @component('procurement.finance.menu')@endcomponent
    <div class="container-fluid" id="list">
        <div id="form_div" class="mt-1"></div>
        <div class="row mt-2">
        <span class="dropdown ml-3">
        <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="{{--procurementExport(false)--}}" href="javascript:">导出勾选内容</a>
            <a class="dropdown-item" @click="{{--procurementExport(true)--}}" href="javascript:">导出所有页</a>
        </div>
        </span>
        </div>
        <label for="all" id="cloneCheckAll" class="d-none">
            <input id="all" type="checkbox" @click="checkAll($event)">全选
        </label>
        <table class="table table-sm table-bordered text-nowrap d-none" id="headerRoll"></table>
        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2"
               id="headerParent">
            <tr id="header"></tr>
            <tr v-for="(procurement,i) in procurements">
                <td>
                    <input class="checkItem" type="checkbox" :value="procurement" v-model="checkData">
                </td>
                <td class="">@{{ procurement.code }}</td>
                <td class="">@{{ procurement.created_at }}</td>
                <td class=""></td>
                <td class=""></td>
                <td class="">@{{ procurement.owner_name }}</td>
                <td class="">@{{ procurement.company_name }}</td>
                <td class="">@{{ procurement.supplier_name }}</td>
                <td class="tooltipTarget" style="max-width: 200px;overflow:hidden">@{{ procurement.material_code }}</td>
                <td class="text-muted">@{{ procurement.material_name }}</td>
                <td class="text-muted">@{{ procurement.size }}</td>
                <td class="text-muted">@{{ procurement.special }}</td>
                <td class="text-muted">@{{ procurement.specification }}</td>
                <td>@{{ procurement.quantity }}</td>
                <td>@{{ procurement.amount }}</td>
                <td></td>
                <td>@{{ procurement.cost_price }}</td>
                <td>@{{ procurement.unit_price }}</td>
                <td></td>
                <td></td>
                <td><span>@{{ procurement.status }}</span></td>
                <td>
                    <span class="btn btn-sm btn-outline-danger">锁定</span>
                    <span class="btn btn-sm btn-outline-success">修改采购单价</span>
                </td>
            </tr>
        </table>
        <div class="text-info h5 btn btn">{{$procurements->count()}}/@{{ sum }}</div>
        <div>{{$procurements->appends($paginateParams)->links()}}</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>
    <script>
        let vue = new Vue({
            el: '#list',
            data: {
                procurements: [
                        @foreach($procurements as $procurement)
                    {
                        id:'{{$procurement->id}}',code:'{{$procurement->code}}',type:'{{$procurement->type}}',created_at:'{{$procurement->created_at}}',
                        quantity:'{{$procurement->quantity}}',unit_price:'{{$procurement->unit_price}}',status:'{{$procurement->status}}',cost_price:'{{$procurement->cost_price}}',
                        @if($procurement->ownerMaterial)
                        owner_id:'{{$procurement->ownerMaterial->owner_id}}',size:'{{$procurement->ownerMaterial->size}}',
                        special:'{{$procurement->ownerMaterial->special}}',specification:'{{$procurement->ownerMaterial->specification}}',@endif
                            @if($procurement->ownerMaterial->material)
                        material_id:'{{$procurement->ownerMaterial->material->id}}',material_code:'{{$procurement->ownerMaterial->material->code}}',
                        material_name:'{{$procurement->ownerMaterial->material->name}}',@endif
                            @if($procurement->ownerMaterial->owner)owner_name:'{{$procurement->ownerMaterial->owner->name}}',@endif
                            @if($procurement->supplier)supplier_name:'{{$procurement->supplier->name}}',@endif
                            @if($procurement->ownerMaterial->owner->customer)
                        company_name:'{{$procurement->ownerMaterial->owner->customer->company_name}}',customer_id:'{{$procurement->ownerMaterial->owner->customer->id}}',
                        phone:'{{$procurement->ownerMaterial->owner->customer->phone}}',@endif
                    },
                    @endforeach
                ],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                materials: [
                        @foreach($materials as $material)
                    {name:'{{$material->id}}',value:'{{$material->name}}'},
                    @endforeach
                ],
                suppliers:[
                        @foreach($suppliers as $supplier)
                    {name:'{{$supplier->id}}',value:'{{$supplier->name}}'},
                    @endforeach
                ],
                checkData: [],
                sum:{!! $procurements->total() !!},

            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $('#list').removeClass('d-none');
                let data = [
                    [
                        {name: 'created_at_start', type: 'dateTime', tip: '选择显示指定日期的起始时间'},
                        {name: 'created_at_end', type: 'dateTime', tip: '选择显示指定日期的结束时间'},
                        {
                            name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的项目'],
                            placeholder: ['项目', '定位或多选项目'], data: this.owners
                        },
                        {
                            name: 'material_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的耗材'],
                            placeholder: ['耗材', '定位或多选耗材'], data: this.materials
                        },
                        {
                            name: 'supplier_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的耗材'],
                            placeholder: ['供应商', '定位或多选供应商'], data: this.suppliers
                        },
                        {name: 'company_name', type: 'input', tip: '采购公司:可在两侧增加百分号(%)进行模糊搜索', placeholder: '采购公司'},
                    ],
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
                let column = [
                    {
                        name: 'cloneCheckAll', customization: true, type: 'checkAll',
                        dom: $('#cloneCheckAll').removeClass('d-none'), neglect: true
                    },
                    {name: 'code', value: '采购编号', neglect: true},
                    {name: 'code', value: '采购日期', neglect: true},
                    {name: 'code', value: '接单日期', neglect: true},
                    {name: 'code', value: '签收日期', neglect: true},
                    {name: 'owner_id', value: '项目名称', class: ''},
                    {name: 'company_name', value: '采购公司', class: ''},
                    {name: 'supplier_name', value: '供应商',},
                    {name: 'material_code', value: '耗材编号', class: 'text-muted'},
                    {name: 'material_name', value: '耗材'},
                    {name: 'size', value: '尺寸大小', class: 'text-muted'},
                    {name: 'special', value: '特殊要求', class: 'text-muted'},
                    {name: 'specification', value: '材质规格', class: 'text-muted'},
                    {name: 'quantity', value: '采购数量', neglect: true},
                    {name: '', value: '销售数量', neglect: true},
                    {name: '', value: '收货数量', neglect: true},
                    {name: '', value: '采购单价(元)', neglect: true},
                    {name: 'unit_price', value: '销售单价(元)', neglect: true},
                    {name: '', value: '应收金额(元)', neglect: true},
                    {name: '', value: '应付金额(元)', neglect: true},
                    {name: '', value: '状态', neglect: true},
                    {name: '', value: '操作', neglect: true},
                ];

                let _this = this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.procurements,
                        restorationColumn: 'id',
                        fixedTop: ($('#form_div').height()) + 2,
                        offset: 0.5,
                        vue: vue
                    });
                    header.init();
                }, 0);
            },
            methods: {
                //全选事件
                checkAll(e) {
                    if (e.target.checked) {
                        this.procurements.forEach((el, i) => {
                            if (this.checkData.indexOf(el) == '-1') {
                                this.checkData.push(el);
                            }
                        });
                    } else {
                        this.checkData = [];
                    }
                },

            }
        });
    </script>
@endsection