baoshi-was/resources/views/maintenance/facilitator/index.blade.php

@extends('layouts.app')

@section('title','装卸队')

@section('content')
    <nav id="nav2">
        @component('maintenance.menu')@endcomponent
    </nav>
    <div class="container-fluid d-none" id="facilitator">
        <div class="card">
            @can('装卸队-创建')
            @include('maintenance.facilitator._create')
            @endcan
            @can('装卸队-编辑')
            @include('maintenance.facilitator._edit')
            @endcan
            <div class="card-body">
                <div class="row pull-left m-1">
                    <button class="btn btn-outline-info mb-1 mr-3" @click="showCreatedModal(true)"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
                </div>
            </div>
            @include('maintenance.facilitator._table')
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let facilitatorVue = new Vue({
            el:'#facilitator',
            data:{
                facilitators:{!! $facilitators->toJson() !!}['data'],
                checkData:[],
                createFacilitator:{},
                editFacilitator:{},
                selectIndex:null,
                facilitatorError:{},
                selectTr:0,
            },
            watch:{
                checkData: {
                    handler() {
                        if (this.facilitators.length === this.checkData.length) {
                            document.querySelector('#selectAll').checked = true;
                        } else {
                            document.querySelector('#selectAll').checked = false;
                        }
                    },
                    deep: true
                },
            },
            created(){

            },
            mounted() {
                $('#facilitator').removeClass('d-none');
            },
            methods:{
                checkAll(e) {
                    if (!e.target.checked) this.checkData = [];
                    else {
                        this.providerStatements.forEach((item, i) => {
                            if (this.checkData.indexOf(item.id) === -1) this.checkData.push(item.id);
                        });
                    }
                },
                // 显示隐藏添加页面
                showCreatedModal(isDisplay){
                    this.createFacilitator = {};
                    if(isDisplay){
                        $('#createdModal').modal('show');
                    }else{
                        $('#createdModal').modal('hide');
                    }
                },
                // 显示隐藏更新页面
                showUpDateModal(isDisplay,index = null,facilitator = {}){
                    this.selectIndex = index;
                    this.editFacilitator = JSON.parse(JSON.stringify(facilitator));
                    if(isDisplay){
                        $('#updatedModal').modal('show');
                    }else{
                        this.selectIndex = null;
                        $('#updatedModal').modal('hide');
                    }
                },
                // 创建服务商
                storeFacilitator(){
                    let url = '{{url('apiLocal/facilitator/store')}}';
                    tempTip.setIndex(999);
                    tempTip.setDuration(1999);
                    axios.post(url,this.createFacilitator).then(res=>{
                        if(res.data.success){
                            this.facilitators.unshift(res.data.data);
                            tempTip.showSuccess('添加装卸队成功');
                            this.showCreatedModal(false)
                            return ;
                        }else if(res.data.error){
                            this.facilitatorError = res.data.error;
                            return
                        }
                        tempTip.show(res.data.data);
                    }).catch(err=>{
                        tempTip.show('服务商添加异常'+err);
                    });
                },
                // 更新服务商
                updateFacilitator(){
                    let url = '{{url('apiLocal/facilitator/update')}}';
                    tempTip.setIndex(999);
                    tempTip.setDuration(1999);
                    axios.put(url,this.editFacilitator).then(res=>{
                        if(res.data.success){
                            this.$set(this.facilitators,this.selectIndex,res.data.data);
                            tempTip.showSuccess('装卸队更新成功');
                            this.showUpDateModal(false);
                            return ;
                        }else if(res.data.error){
                            this.facilitatorError = res.data.error;
                            return
                        }
                        tempTip.show(res.data.data);
                    }).catch(err=>{
                        tempTip.show(''+err);
                    });
                },
                // 删除服务商
                destroyFacilitator(facilitator,index){
                    let url = '{{url('apiLocal/facilitator/destroy?id=')}}'+facilitator['id'];
                    tempTip.setIndex(999);
                    tempTip.setDuration(1999);
                    axios.delete(url).then(res=>{
                        if(res.data.success){
                            tempTip.showSuccess("装卸队删除成功");
                            this.$delete(this.facilitators,index);
                            return ;
                        }else if(res.data.error){
                            tempTip.show(res.data.error.id[0]);
                            return ;
                        }
                        tempTip.show(res.data.data ?? '删除异常');
                    }).catch(err=>{
                        tempTip.show(err);
                    })
                }
            }
        });

    </script>
@endsection