baoshi-was/resources/views/station/rule/index.blade.php

@extends('layouts.app')

@section('title','站规则')

@section('content')
    <div class="container-fluid d-none" id="list">
        @can('站管理-站规则-创建')
            <button class="btn btn-md btn-outline-primary ml-1" @click="createStationRuleBatch">创建</button>
        @endcan
        @include('station.rule._table')
        @include('station.rule._edit')
    </div>
@endsection

@section('lastScript')
    <script>
        let vue = new Vue({
            el: '#list',
            data: {
                selectTr: null,
                stationRuleBatches: {!! $stationRuleBatches->toJson() !!}['data'],
                owners:{!! $owners !!},
                ownerFilters: [],
                filterName: null,
                tag: null,
                tagIndex: null,
                stationRuleBatch: {},
                errors: {}
            },
            mounted() {
                $('#list').removeClass('d-none');
                this.filterOwner();
            },
            methods: {
                createStationRuleBatch() {
                    this.tag = 'create';
                    this.filterOwner();
                    this.stationRuleBatch = {};
                    this.errors = {};
                    $('#box').modal('show');
                },
                editStationRuleBatch(item, index) {
                    this.stationRuleBatch = JSON.parse(JSON.stringify(item));
                    this.tag = 'update';
                    this.tagIndex = index;
                    this.filterOwner();
                    this.errors = {};
                    $('#box').modal('show');
                },
                deleteStationRuleBatch(item, index) {
                    if (!confirm("确定要删除对应的栈规则")) {
                        return;
                    }
                    let url = '{{url('apiLocal/station/rule/destroy')}}' + '/?id=' + item['id'];
                    window.axios.delete(url).then(res => {
                        if (res.data.success) {
                            window.tempTip.showSuccess('删除成功');
                            this.$delete(this.stationRuleBatches, index);
                            return;
                        }
                        window.tempTip.show('删除异常,刷新页面重试');
                    }).catch(err => {
                        window.tempTip.show('网络异常,' + err);
                    });
                },
                _create() {
                    let url = '{{url('apiLocal/station/rule/store')}}';
                    console.log(this.stationRuleBatch);
                    window.axios.post(url, this.stationRuleBatch).then(res => {
                        if (res.data.success) {
                            this.stationRuleBatches.unshift(res.data.data);
                            window.tempTip.showSuccess('创建成功');
                            $('#box').modal('hide');
                            this.$forceUpdate();
                            this.tag = null;
                            this.tagIndex = null;
                            this.stationRuleBatch = {};
                            return;
                        }else if(res.data.errors){
                            this.errors = res.data.errors;
                            this.$forceUpdate();
                            return;
                        }
                        window.tempTip.show('创建异常');
                    }).catch(err => {
                        window.tempTip.show('网络异常,' + err);
                    });
                },
                _edit() {
                    let url = '{{url('apiLocal/station/rule/update')}}';
                    window.axios.put(url, this.stationRuleBatch).then(res => {
                        if (res.data.success) {
                            this.$set(this.stationRuleBatches, this.tagIndex, res.data.data);
                            window.tempTip.showSuccess('修改成功!');
                            $('#box').modal('hide');
                            this.tag = null;
                            this.tagIndex = null;
                            this.stationRuleBatch = {};
                            this.$forceUpdate();
                            return;
                        }else if(res.data.errors){
                            this.errors =res.data.errors;
                            this.$forceUpdate();
                            return;
                        }
                        window.tempTip.show('编辑异常,刷新页面重试');
                    }).catch(err => {
                        window.tempTip.show('网络异常,' + err);
                    });
                },
                setStationRuleBatchName($e){
                    let selectValue = $($e.target).find('option:selected').text();
                    if(selectValue && !this.stationRuleBatch.name )
                        this.$set(this.stationRuleBatch,'name',selectValue)
                },
                filterOwner($e = null) {
                    let copyOwner = JSON.parse(JSON.stringify(this.owners));
                    this.ownerFilters = copyOwner;
                    if ($e !== null) {
                        let value = $($e.target).val();
                        this.ownerFilters = copyOwner.filter(function (owner) {
                            return owner.name.indexOf(value) !== -1;
                        });
                        if (this.ownerFilters.length !== this.owners.length && this.ownerFilters.length > 0) {
                            this.$set(this.stationRuleBatch,'owner_id',this.ownerFilters[0]['id']);
                            this.$set(this.stationRuleBatch,'name',this.ownerFilters[0]['name']);
                        } else {
                            this.$set(this.stationRuleBatch,'owner_id',null);
                        }
                    }
                    this.$forceUpdate();
                }
            }
        })
    </script>
@endsection