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

@extends('layouts.app')
@section('title','供应商')
@section('content')
    <div class="container-fluid d-none" id="supplier">
        <div class="card">
            @can('供应商-编辑')
                @include('maintenance.supplier._create')
                @include('maintenance.supplier._edit')
            @endcan
            <div class="card-body">
                <div class="row pull-left m-1">
                    @can('供应商-编辑')
                        <button class="btn btn-outline-info mb-1 mr-3" @click="store"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
                    @endcan
                </div>
                @include('maintenance.supplier._table')
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:'#supplier',
            data:{
                suppliers:{!! $suppliers->toJson() !!}['data'],
                materials : [
                        @foreach($materials as $material)
                    {id:"{{$material->id}}",name:"{{$material->name}}"},
                    @endforeach
                ],
                material_id:{!! old('material_id') ? json_encode(old('material_id')) : '[]' !!},
                editSupplier:{material_id:[]},
                addSupplier:{material_id:[]},
                supplierErrors:{},
                index:''  ,
                selectTr:0,
                selectIndex:0,
            },
            mounted(){
                $(".up").slideUp();
                $("#xx").slideDown();
                $('#supplier').removeClass('d-none');
            },
            watch:{
                'editSupplier.material_id':function(){
                    this.supplierErrors.material_id =[];
                },
                'addSupplier.material_id':function(){
                    this.supplierErrors.material_id = [];
                },
            },
            methods:{
                show(id,$e){
                    $("#"+id).slideToggle();
                    let value= $($e.target).html();
                    if(value=== '点击展开'){
                        value = '点击收起';
                    }else if(value === '点击收起'){
                        value ='点击展开'
                    }
                    $($e.target).html(value);
                },
                destroy(id,index){
                    if (!confirm('是否删除当前供应商')) return;
                    tempTip.setIndex(1009);
                    tempTip.setDuration(3000);
                    axios.delete('{{url('apiLocal/supplier')}}/'+id).then(res=>{
                        if(res.data.success){
                            tempTip.showSuccess('删除成功');
                            this.$delete(this.suppliers,index);
                            return ;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.show('删除当前项目耗材失败:'+err);
                    });
                },
                edit(supplier,i){
                    this.selectIndex = i;
                    this.editSupplier = JSON.parse(JSON.stringify(supplier));
                    this.editSupplier.material_id = [];
                    this.supplierErrors = {material_id:[]};     // 重置异常信息
                    supplier.material.forEach((item)=>{
                        this.editSupplier.material_id.push(item.id);
                    });
                    $('#edit-supplier').modal('show');
                },
                update(editSupplier,index){
                    this.supplierErrors = {material_id:[]};     // 重置异常信息
                    let url = '{{url('apiLocal/supplier/update')}}';
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(2000);
                    if(!this.validatePhone(editSupplier))return;
                    window.axios.post(url,editSupplier).then(res=>{
                        if(res.data.success){
                            this.$set(this.suppliers,index,res.data.data);
                            this.selectIndex = null;
                            this.editSupplier = {material_id:[]};
                            $("#edit-supplier").modal('hide');
                            window.tempTip.showSuccess("修改成功")
                            return;
                        }else if(res.data.errors){
                            this.supplierErrors =res.data.errors;
                            return;
                        }
                        window.tempTip.show(res.data.message ?? '修改失败')
                    }).catch(err=>{
                        window.tempTip.showSuccess(err)
                    });
                },
                store(){
                    this.addSupplier = {material_id:[]};
                    this.supplierErrors = {material_id:null};
                    $('#add-supplier').modal('show');
                },
                create(supplier){
                    let url = '{{url('apiLocal/supplier/store')}}';
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(2000);
                    if(!this.validatePhone(supplier))return;
                    window.axios.post(url,supplier).then(res=>{
                        if(res.data.success){
                            this.suppliers.unshift(res.data.data);
                            this.addSupplier = {material_id:[]};
                            window.tempTip.showSuccess("创建成功");
                            $("#add-supplier").modal('hide');
                            return;
                        }else if(res.data.errors){
                            this.supplierErrors =res.data.errors;
                            return;
                        }
                        window.tempTip.show(res.data.message ?? '创建失败')
                    }).catch(err=>{
                        window.tempTip.showSuccess(err)
                    });
                },
                validatePhone(param){
                    let is_validate = true;
                    if(!(/^1[34578]\d{9}$/.test(param['phone']))){
                        this.$set(this.supplierErrors,'phone',['请输入正确的联系号码','']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('name') || (param['name'].trim().length === 0)){
                        this.$set(this.supplierErrors,'name',['供应商为必填项']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('contact_man') || (param['contact_man'].trim().length === 0)){
                        this.$set(this.supplierErrors,'contact_man',['联系人为必填项']);
                        is_validate = false;
                    }

                    if(!param.hasOwnProperty('invoice_title') || (param['invoice_title'].trim().length === 0)){
                        this.$set(this.supplierErrors,'invoice_title',['发票抬头为必填项']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('bank') || (param['bank'].trim().length === 0)){
                        this.$set(this.supplierErrors,'bank',['账户银行必填项']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('bank_account') || (param['bank_account'].trim().length === 0)){
                        this.$set(this.supplierErrors,'bank_account',['收款账户为必填项']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('opening_bank') || (param['opening_bank'].trim().length === 0)){
                        this.$set(this.supplierErrors,'opening_bank',['开户行为必填项']);
                        is_validate = false;
                    }
                    if(!param.hasOwnProperty('material_id') || (param['material_id'].length === 0)){
                        this.$set(this.supplierErrors,'material_id',['耗材类型为必填项']);
                        is_validate = false;
                    }
                    if(!is_validate)this.$forceUpdate();
                    return is_validate;
                }
            }
        })
    </script>
@endsection