baoshi-was/resources/views/customer/project/area.blade.php

@extends('layouts.app')
@section('title')
    用仓盘点-项目管理
@endsection
@section('content')
    @component('customer.project.menu')@endcomponent
    <div class="container-fluid d-none" id="container">

        @include("customer._selectedOwner")
        @include("customer.project._editArea")
        <!-- pc >544 -->
        <div class="d-none d-sm-block">
            <div id="form_div"></div>
            <div>
                <button type="button" class="btn btn-outline-dark btn-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="areaExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="areaExport(true)" href="javascript:">导出所有页</a>
                </div>
                <button class="ml-1 btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#selectedOwner">新 增</button>
            </div>
            <label for="all" id="cloneCheckAll" class="d-none">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="d-none" id="headerRoll"></table>
            <table class="table table-sm table-striped table-hover" id="headerParent">
                <tr class="text-nowrap" id="header"></tr>
                <tr v-for="(area,i) in areas">
                    <td>
                        <label><input type="checkbox" :value="area.id" v-model="checkData"></label>
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>
                        <span v-if="area.status=='编辑中'">
                            <button class="btn btn-sm btn-outline-info" @click="edit(area,i)">编辑</button>
                            @can("项目管理-项目-用仓盘点-审核")<button class="btn btn-sm btn-outline-success" v-if="area.accountingArea" @click="audit(i)">审核</button>@endcan
                        </span>
                        <span v-if="area.status=='已完成'" class="text-success font-weight-bold">@{{ area.status }}</span>
                        <span v-if="area.status=='已审核'" class="text-primary font-weight-bold">@{{ area.status }}</span>
                    </td>
                    <td>@{{ area.userOwnerGroupName }}</td>
                    <td>@{{ area.customerName }}</td>
                    <td>@{{ area.ownerName }}</td>
                    <td>@{{ area.countingMonth }}</td>
                    <td>@{{ area.updatedAt }}</td>
                    <td>@{{ area.ownerStoragePriceModel }}</td>
                    <td>@{{ area.unitName }}</td>
                    <td>@{{ area.areaOnTray }}</td>
                    <td>@{{ area.areaOnHalfTray }}</td>
                    <td>@{{ area.areaOnFlat }}</td>
                    <td>@{{ area.accountingArea }}</td>
                </tr>
            </table>
        </div>
        <!-- phone <544 -->
        <div class="d-xl-none">
            <div v-for="(area,i) in areas" class="mt-1 border border-1 rounded"
                 @click="openAll(i)">
                <div class="row">
                    <div class="col-4">
                        <label class="text-muted">序号：</label>@{{ i+1 }}
                    </div>
                    <div class="col-4 text-center">
                        <b :class="area.status=='编辑中' ? 'text-secondary' : (area.status=='已完成' ? 'text-success' : 'text-primary')">@{{ area.status }}</b>
                    </div>
                    <div class="col-4">
                        <span class="pull-right mr-1 text-primary font-weight-bold small" v-if="area.unitName=='m²' && area.status=='编辑中'">点击展开编辑</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label class="text-muted">项目：</label>@{{ area.ownerName }}
                    </div>
                    <div class="col-6">
                        <label class="text-muted">客户：</label>@{{ area.customerName }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label class="text-muted">用仓：</label>@{{ area.ownerStoragePriceModel }}
                    </div>
                    <div class="col-6">
                        <label class="text-muted">单位：</label>@{{ area.unitName }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label class="text-muted">项目组：</label>@{{ area.userOwnerGroupName }}
                    </div>
                    <div class="col-6">
                        <label class="text-muted">结算月：</label>@{{ area.countingMonth }}
                    </div>
                </div>
                <div class="row font-weight-bold">
                    <div class="col-6">
                        <label class="text-dark">结算值：</label>@{{ area.accountingArea }}
                    </div>
                    <div class="col-6">
                        <label class="text-dark">平面区：</label>@{{ area.areaOnFlat }}
                    </div>
                </div>
                <div class="row font-weight-bold">
                    <div class="col-6">
                        <label class="text-dark">货物整托：</label>@{{ area.areaOnTray }}
                    </div>
                    <div class="col-6">
                        <label class="text-dark">货物半托：</label>@{{ area.areaOnHalfTray }}
                    </div>
                </div>
                <div :id="'area_'+i" class="up" v-if="area.unitName=='m²' && area.status=='编辑中'">
                    <div class="row">
                        <label class="text-dark col-4">平面区：</label>
                        <label class="col-8">
                            <input :id="'item-'+i+'-areaOnFlat'" class="form-control form-control-sm" type="number" step="0.01" min="0" :value="area.areaOnFlat" @click="$event.stopPropagation();">
                        </label>
                    </div>
                    <div class="row">
                        <label class="text-dark col-4">货物整托：</label>
                        <label class="col-8">
                            <input :id="'item-'+i+'-areaOnTray'" class="form-control form-control-sm" type="number" step="0.01" min="0" :value="area.areaOnTray" @click="$event.stopPropagation();">
                        </label>
                    </div>
                    <div class="row">
                        <label class="text-dark col-4">货物半托：</label>
                        <label class="col-8">
                            <input :id="'item-'+i+'-areaOnHalfTray'" class="form-control form-control-sm" type="number" step="0.01" min="0" :value="area.areaOnHalfTray" @click="$event.stopPropagation();">
                        </label>
                    </div>
                    <div class="row">
                        <div class="col-10 offset-1">
                            @can('项目管理-项目-用仓盘点-审核')<button type="button" @click.stop="submitArea(i)" class="btn btn-sm btn-outline-primary w-100">提交编辑</button>@endcan
                        </div>
                    </div>
                </div>
                <div class="row mt-2" v-if="area.status=='编辑中'">
                    <div class="col-10 offset-1">
                        @can('项目管理-项目-用仓盘点-审核')<button type="button" @click.stop="audit(i)" class="btn btn-sm btn-outline-success w-100">审核</button>@endcan
                    </div>
                </div>
            </div>
        </div>
        {{$areas->appends($params)->links()}}
    </div>
@stop

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                areas : [
                    @foreach($areas as $area)
                    {
                        id : "{{$area->id}}",
                        ownerGroupId : "{{$area->user_owner_group_id}}",
                        userOwnerGroupName : "{{$area->userOwnerGroup->name ?? ''}}",
                        ownerName : "{{$area->owner ? $area->owner->name : ''}}",
                        customerName : "{{$area->owner ? ($area->owner->customer ? $area->owner->customer->name : '') : ''}}",
                        countingMonth : "{{$area->counting_month}}",
                        areaOnTray : "{{$area->area_on_tray}}",
                        areaOnHalfTray : "{{$area->area_on_half_tray}}",
                        areaOnFlat : "{{$area->area_on_flat}}",
                        accountingArea : "{{$area->accounting_area}}",
                        status : "{{$area->status}}",
                        updatedAt : "{{$area->updated_at}}",
                        ownerStoragePriceModel:"{{ $area->ownerStoragePriceModel ? $area->ownerStoragePriceModel->using_type : '' }}",
                        unitName:"{{ $area->ownerStoragePriceModel->unit->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
                ],
                owners : [
                    @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                status : [{name:"编辑中",value:"编辑中"},{name:"已审核",value:"已审核"},{name:"已完成",value:"已完成"}],
                checkData : [],
                sum : Number("{{ $areas->total() }}"),
                errors:[],
                area:{},
                index:"",
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.areas.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted(){
                $(".up").slideUp();
                $('#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:'结束结算月'},
                        {name:'status',type:'select',tip:'状态',placeholder: '状态',data:this.status},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'status',value: '状态'},
                    {name:'userOwnerGroupName',value: '项目组'},
                    {name:'customerName',value: '客户'},
                    {name:'ownerName',value: '子项目'},
                    {name:'countingMonth',value: '结算月'},
                    {name:'createdAt',value: '录入时间'},
                    {name:'ownerStoragePriceModel',value: '用仓类型'},
                    {name:'unitName',value: '单位'},
                    {name:'areaOnTray',value: '货物整托', neglect: true},
                    {name:'areaOnHalfTray',value: '货物半托', neglect: true},
                    {name:'areaOnFlat',value: '平面区', neglect: true},
                    {name:'accountingArea',value: '结算', neglect: true},
                ];
                let _this=this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.reports,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods:{
                openAll(index){
                    $("#area_"+index).slideToggle();
                },
                areaExport(isAll){
                    let url = '{{url('customer/project/area/export')}}';
                    let token='{{ csrf_token() }}';
                    //excelExport 定义在 js/queryForm/export.js
                    excelExport(isAll,this.checkData,url,this.sum,token);
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.areas.forEach((el)=>{
                            if (this.checkData.indexOf(el.id) === '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                edit(area,index){
                    $("#editArea").modal("show");
                    this.area = Object.assign({},area);
                    this.index = index;
                },
                submitArea(i = null){
                    let url = "{{url('customer/project/updateArea')}}";
                    let param = this.area;
                    let index = this.index;
                    if (i!==null){
                        index = i;
                        param = {id:this.areas[i].id,areaOnTray:document.getElementById("item-"+i+"-areaOnTray").value,
                            areaOnHalfTray:document.getElementById("item-"+i+"-areaOnHalfTray").value,areaOnFlat:document.getElementById("item-"+i+"-areaOnFlat").value};
                    }
                    window.tempTip.postBasicRequest(url,param,res=>{
                        if (this.areas[index].ownerGroupId !== res.user_owner_group_id){
                            this.areas[index].ownerGroupId = res.user_owner_group_id;
                            this.ownerGroups.some(group=>{
                                if(group.name === res.user_owner_group_id){
                                    this.areas[index].userOwnerGroupName = group.value;
                                    return true;
                                }
                            });
                        }
                        this.areas[index].areaOnTray = res.area_on_tray;
                        this.areas[index].areaOnHalfTray = res.area_on_half_tray;
                        this.areas[index].areaOnFlat = res.area_on_flat;
                        this.areas[index].accountingArea = res.accounting_area;
                        $("#editArea").modal("hide");
                        return "修改成功";
                    },true);
                },
                createReport(isAll = false){
                    let dom = $("#owners");
                    let val = dom.selectpicker('val');
                    if (isAll){
                        val = [];
                        this.owners.forEach(owner=>{
                            val.push(owner.name);
                        });
                    }
                    window.tempTip.setDuration(3000);
                    window.tempTip.setIndex(1099);
                    if (val.length<1){
                        window.tempTip.show("未选择");
                        return;
                    }
                    let url="{{url('customer/project/createAreaReport')}}";
                    let params = {val:val};
                    window.tempTip.postBasicRequest(url,params,res=>{
                        res.forEach(data =>{
                            if (this.areas.every(area=>{
                                if (area.id == data.id)return false;
                                else return true;
                            }))this.areas.unshift(data);
                        });
                        dom.selectpicker('val',[]);
                        return "已生成报表";
                    },true)
                },
                audit(index){
                    window.tempTip.confirm("确定要通过该盘点记录的审核吗？",()=>{
                        let area = this.areas[index];
                        let url = '{{url('customer/project/areaReportAudit')}}';
                        window.tempTip.postBasicRequest(url,{id:area.id},()=>{
                            this.areas[index].status = "已审核";
                            return "审核通过";
                        });
                    })
                },
            },
        });
    </script>
@stop