baoshi-was/resources/views/maintenance/ownerMaterial/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="owner_material">
        <div class="card">
            @can('项目耗材-编辑')
                @include('maintenance.ownerMaterial._create')
                @include('maintenance.ownerMaterial._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.ownerMaterial._table')
            </div>
        </div>
        @can('项目耗材-文件上传')
            @include('maintenance.ownerMaterial._uploadFile')
        @endcan
    </div>
@endsection

@section('lastScript')
<script>
    let vue = new Vue({
        el:"#owner_material",
        data:{
            ownerMaterials:{!! $ownerMaterials->toJson() !!}['data'],
            owners:{!! $owners->toJson() !!},
            materials:{!! $materials->toJson() !!},
            addOwnerMaterial:{},
            editOwnerMaterial:{},
            index:'',
            filterOwners:'',
            filterMaterials:'',
            materialErrors:{},
            uploadError: null,
            selectTr:0
        },
        mounted(){
            $('#owner_material').removeClass('d-none');
            this.filterOwners = JSON.parse(JSON.stringify(this.owners));
            this.filterMaterials = JSON.parse(JSON.stringify(this.materials));
        },
        created(){
            let _this = this;
            this.ownerMaterials.forEach(function(item){
                _this.fileType(item);
            })
        },
        methods:{
            fileType(ownerMaterial){
                let file_types = [ 'gif','jpeg','jpg','png','svg'];
                if(!ownerMaterial.file){
                    ownerMaterial.isImg = false;
                    return;
                }
                if(ownerMaterial.file.url){
                    let target = ownerMaterial.file.url;
                    let index= target.lastIndexOf(".");
                    let ext = target.substr(index+1);
                    if(file_types.includes(ext)){
                        ownerMaterial.isImg = true;
                    }
                }
            },
            destroy(id,index){
                if (!confirm('是否删除当前项目耗材')) return;
                axios.delete('{{url('apiLocal/ownerMaterial')}}/'+id).then(res=>{
                    if(res.data.success){
                        tempTip.setIndex(100);
                        tempTip.setDuration(3000);
                        tempTip.showSuccess('删除成功');
                        this.$delete(this.ownerMaterials,index);
                        return ;
                    }
                    tempTip.setDuration(3000);
                    tempTip.show(res.data.message);
                }).catch(err=>{
                    tempTip.setDuration(3000);
                    tempTip.show('删除当前项目耗材失败:'+err);
                });
            },
            edit(ownerMaterial,i){
                this.materialErrors = {};
                this.editOwnerMaterial = JSON.parse(JSON.stringify(ownerMaterial));
                this.filterMaterials = JSON.parse(JSON.stringify(this.materials));
                this.filterOwners = JSON.parse(JSON.stringify(this.owners));
                $('#editOwnerName').val('');
                this.index = i;
                $('#edit-ownerMaterial').modal('show');
            },
            update(){
                let url = '{{url('apiLocal/ownerMaterial/update')}}';
                let params = this.editOwnerMaterial;
                if(!this.validateOwnerMaterial(params))return;
                window.tempTip.setIndex(1099);
                window.tempTip.setDuration(3000);
                window.axios.post(url,params).then(res=>{
                    if(res.data.success){
                        this.fileType(res.data);
                        this.$set(this.ownerMaterials,this.index,res.data.data);
                        this.index = null;
                        $("#edit-ownerMaterial").modal('hide');
                        window.tempTip.showSuccess('修改成功');
                        return ;
                    }else if (res.data.errors){
                        this.materialErrors = res.data.errors;
                        return ;
                    }
                    window.tempTip.show('修改成功');
                }).catch(err=>{
                    window.tempTip.show(err);
                });
            },
            store(){
                this.addOwnerMaterial = {};
                this.materialErrors = {};
                $('#filterOwnerName').val('');
                this.filterMaterials = JSON.parse(JSON.stringify(this.materials));
                this.filterOwners = JSON.parse(JSON.stringify(this.owners));
                $('#add-ownerMaterial').modal('show');
            },
            create(params){
                let url = '{{url('apiLocal/ownerMaterial/store')}}';
                if(!this.validateOwnerMaterial(params))return;
                window.tempTip.setIndex(1099);
                window.tempTip.setDuration(3000);
                window.axios.post(url,params).then(res=>{
                    if(res.data.success){
                        this.fileType(res.data.data);
                        this.ownerMaterials.unshift(res.data.data);
                        this.addOwnerMaterial = {};
                        $("#add-ownerMaterial").modal('hide');
                        window.tempTip.showSuccess('创建成功');
                        return ;
                    }else if (res.data.errors){
                        this.materialErrors = res.data.errors;
                        return ;
                    }
                    window.tempTip.show('创建失败');
                }).catch(err=>{
                    window.tempTip.show(err);
                });
            },
            uploadModal(ownerMaterial,i){
                this.editOwnerMaterial = JSON.parse(JSON.stringify(ownerMaterial));
                this.filterMaterials = JSON.parse(JSON.stringify(this.materials));
                this.filterOwners = JSON.parse(JSON.stringify(this.owners));
                this.index = i;
                $('#uploadFile').modal('show');
            },
            getDownFileUrl(ownerMaterial){
                return '{{ url("maintenance/ownerMaterial/downFile?file=")}}'+ownerMaterial.file.url+'&name='+ownerMaterial.file.file_name;
            },
            uploadFile(){
                tempTip.setDuration(3000);
                tempTip.setIndex(1099);
                let url = '{{url('apiLocal/ownerMaterial/uploadFile')}}';
                let data = new FormData();
                let file = this.$refs.file.files[0];
                if(file===null){
                    if (!confirm('请选择上传文件')) return;
                }
                if (file.size >=10485760){
                    tempTip.show("图片大小不能超过10MB！");
                    return;
                }
                data.append('file',file);
                data.append('id',this.editOwnerMaterial.id);
                window.axios.post(url,data,{
                    'Content-Type':'multipart/form-data'
                }).then(res=>{
                    if(res.data.success){
                        this.fileType(res.data.data);
                        this.$set(this.ownerMaterials,this.index,res.data.data);
                        this.editOwnerMaterial = {};
                        this.index = '';
                        tempTip.showSuccess('文件上传成功');
                        $("#uploadFile").modal('hide');
                        return ;
                    }
                    tempTip.show(res.data.message ?? '文件上传失败');
                }).catch(err=>{
                    tempTip.show('文件上传失败'+err);
                })
            },
            filterMaterial(e,type){
                let value = $(e.target).val();
                let materials = JSON.parse(JSON.stringify(this.materials));
                if(value==='' || value===null)this.filterMaterials = materials;
                else {
                    this.filterMaterials = materials.filter(function(item){
                        return item.name.indexOf(value) !== -1;
                    });
                    if(this.filterMaterials.length>0){
                        if(type===1)this.addOwnerMaterial.material_id = this.filterMaterials[0]['id'];
                        if(type===2)this.editOwnerMaterial.material_id = this.filterMaterials[0]['id'];
                    }
                }
            },
            filterOwner(e,type){
                let value = $(e.target).val();
                let owners = JSON.parse(JSON.stringify(this.owners));
                if(value==='' || value===null)this.filterOwners = owners;
                else {
                    this.filterOwners = owners.filter(function(item){
                        return item.name.indexOf(value) !== -1;
                    });
                    if(this.filterOwners.length>0){
                        if(type===1)this.addOwnerMaterial.owner_id = this.filterOwners[0]['id'];
                        if(type===2)this.editOwnerMaterial.owner_id = this.filterOwners[0]['id'];
                    }
                }
            },
            validateOwnerMaterial(material){
                let is_validate = true;
                if(!material.hasOwnProperty('owner_id') || material['owner_id']=== 0){
                    this.$set(this.materialErrors,'owner_id',['货主为必选项']);
                    is_validate = false;
                }
                if(!material.hasOwnProperty('material_id') || material['owner_id'] === 0 ){
                    this.$set(this.materialErrors,'material_id',['耗材为必选项']);
                    is_validate = false;
                }
                if((!material.hasOwnProperty('material_code')) || material['material_code'].trim()===''){
                    this.$set(this.materialErrors,'material_code',['耗材编码为必填项']);
                    is_validate = false;
                }
                if(!material.hasOwnProperty('size')  ||  ((material['size']).trim().length === 0)){
                    this.$set(this.materialErrors,'size',['耗材编码为必填项']);
                    is_validate = false;
                }
                if(!is_validate)this.$forceUpdate();
                return is_validate;
            }
        }
    });
</script>
@endsection