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

@extends('layouts.app')
@section('title')查询-货主@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.owner.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <div class="card" id="list">
            <div id="form_div"></div>
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <span class="mb-1 btn btn-sm btn-outline-secondary tooltipTarget" @click="syncOwners">同步货主</span>
                <table class="table table-striped table-sm table-hover">
                    <tr>
                        <th>ID</th>
                        <th>货主编码</th>
                        <th>货主名</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(owner,i) in owners" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td class="text-muted">@{{owner.id}}</td>
                        <td>@{{owner.code}}</td>
                        <td>@{{owner.name}}</td>
                        <td class="text-muted">@{{owner.created_at}}</td>
                        <td>
                            @can('货主-编辑')
                            <button class="btn btn-sm btn-outline-primary" @click="edit(owner.id)">改</button> @endcan
                            @can('货主-删除')
                            <button class="btn btn-sm btn-outline-danger" @click="destroy(owner)">停用</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$owners->withQueryString()->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        new Vue({
            el:"#list",
            data:{
                owners:[
                    @foreach( $owners as $owner )
                    {id:'{{$owner->id}}',code:'{{$owner->code}}',name:'{{$owner->name}}',created_at:'{{$owner->created_at}}'},
                    @endforeach
                ],
                selectTr:0
            },
            mounted:function(){
                let data = [
                   [{name: 'code', type: 'input',tip:'可支持多货主编码,模糊搜索可在两侧添加百分号(%)进行',placeholder:'货主编码'},
                   {name: 'name', type: 'input',tip:'可支持多货主名称,模糊搜索可在两侧添加百分号(%)进行',placeholder:'货主名称'}]
                ];
                this.from =new query({
                    el: '#form_div',
                    condition: data,
                });
                this.from.init();
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/owner')}}/"+id+"/edit";
                },
                destroy:function(owner){
                    confirm('确定要停用货主“' + owner.name + '”吗？');
                    let data=this;
                    let url = "{{url('maintenance/owner')}}/"+owner.id;
                    axios.delete(url,{id:owner.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.owners.length; i++) {
                                    if (data.owners[i].id===owner.id){
                                        data.owners.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('停用货主"'+owner.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('停用货主"'+owner.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('停用货主失败!'+'网络错误：' + err);
                        });
                },
                syncOwners(){
                    let url = '{{url('inventory/syncOwners')}}';
                    axios.get(url).then(function (response) {
                        if(!response.data.success){
                            tempTip.setDuration(3000);
                            tempTip.show(response.data.data);
                        }else {
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('同步货主成功!');
                            location.reload();
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('同步货主失败,网络链接错误！'+err);
                    })
                },
            }
        });
    </script>
@endsection