baoshi-was/resources/views/maintenance/expressPrinting/setting/printer/index.blade.php

@extends('layouts.app')

@section('title','打印终端')

@section('content')
    <div class="container-fluid " id="list">
        <div class="card">
{{--            @can('基础设置-快递打印-打印机-添加')--}}
                @include('maintenance.expressPrinting.setting.printer._create')
{{--            @endcan--}}
{{--            @can('基础设置-快递打印-打印机-编辑')--}}
                @include('maintenance.expressPrinting.setting.printer._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="showCreatedModel"><span
                                class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增
                        </button>
{{--                    @endcan--}}
                </div>
                @include('maintenance.expressPrinting.setting.printer._table')
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        var list = new Vue({
            el: "#list",
            data: {
                printers: {!! $terminalPrinters->toJson() !!}['data'],
                terminals: [
                    @foreach($terminals as $terminal)
                    {id:'{{$terminal->id}}',name:'{{$terminal->name}}'},
                    @endforeach
                ],
                logistics:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}'},
                    @endforeach
                ],
                printer: {
                    logistic_ids:[],
                },
                printerErrors: {},
                terminalFilter:null,
                filter:{
                    logistic:null,      // 删选 logistic
                    printer_logistic:null, // 删选 printer->logistic
                },
                index: null,
                selectTr: null,
            },
            mounted() {
                $("#list").removeClass('d-none');
            },
            computed:{
                filterTerminals(){
                    let terminals = JSON.parse(JSON.stringify(this.terminals));
                    let self = this;
                    if(this.terminalFilter === null){
                        return terminals;
                    }
                    let terminalFilter = terminals.filter(item=>{
                        return item.name.indexOf(self.terminalFilter) >= 0;
                    });
                    if (terminalFilter.length < this.terminals.length && terminalFilter.length>0)
                        this.printer.terminal_id = terminalFilter[0]['id'];
                    return terminalFilter;
                },

            },
            methods: {
                includeLogistics(item){
                    let bool = !this.printer.logistic_ids.includes(item.id);
                    if (bool && this.filter.logistic !== null && this.filter.logistic.length > 0)
                        return item.name.includes(this.filter.logistic)
                    return bool;
                },
                includePrintLogistic(item){
                    if (this.printer.logistic_ids.length === 0) return false;
                    let bool = this.printer.logistic_ids.includes(item.id);
                    if (bool && this.filter.printer_logistic !== null  && this.filter.printer_logistic.length > 0)
                        return item.name.includes(this.filter.printer_logistic)
                    return bool;
                },
                showCreatedModel() {
                    this.printer.logistic_ids = [];
                    this.printerErrors = {};
                    this.filter.logistic = null;
                    this.filter.printer_logistic = null;
                    $('#create-printer').modal('show');
                },
                showEditModel(printer, index) {
                    let data = JSON.parse(JSON.stringify(printer));
                    data.logistics = null;
                    data.logistic_ids = printer.logistics.map(item=>{
                        return ""+item.id;
                    });
                    this.printer = data;
                    this.$forceUpdate();
                    this.index = index;
                    this.printerErrors = {};
                    this.filter.logistic = null;
                    this.filter.printer_logistic = null;
                    $('#edit-printer').modal('show');
                },
                createPrinter() {
                    let url = '{{url('apiLocal/maintenance/expressPrinting/setting/printer')}}';
                    let data = this.printer;
                    window.tempTip.setIndex(1999)
                    window.axios.post(url, data).then(res => {
                        if (res.data['success']) {
                            this.printers.unshift(res.data['data']);
                            this.$forceUpdate();
                            $('#create-printer').modal('hide');
                            window.tempTip.showSuccess('添加成功！');
                            return;
                        } else if (res.data['errors']) {
                            this.printerErrors = res.data['errors'];
                            return;
                        }
                        window.tempTip.show(res.data['message']);
                    }).catch(err => {
                        window.tempTip.show('网络异常！' + err);
                    })

                },
                editPrinter() {
                    let url = '{{url('apiLocal/maintenance/expressPrinting/setting/printer')}}';
                    let data = this.printer;
                    window.tempTip.setIndex(1999)
                    window.axios.put(url, data).then(res => {
                        if (res.data['success']) {
                            this.$set(this.printers, this.index, res.data['data']);
                            window.tempTip.showSuccess('编辑成功！');
                            $('#edit-printer').modal('hide');
                            return;
                        } else if (res.data['errors']) {
                            this.printerErrors = res.data['errors'];
                            return;
                        }
                        window.tempTip.show(res.data['message'])
                    }).catch(err => {
                        window.tempTip.show('网络异常！' + err)
                    });
                },
                destroyPrinter(printer, index) {
                    let url = '{{url('apiLocal/maintenance/expressPrinting/setting/printer')}}' + '/' + printer['id'];
                    if (!confirm('是否删除当前终端')) return;
                    window.axios.delete(url).then(res => {
                        if (res.data['success']) {
                            this.$delete(this.printers, index);
                            window.tempTip.showSuccess('删除成功！');
                            return;
                        } else if (res.data['errors']) {
                            this.printerErrors = res.data['errors'];
                            return;
                        }
                        window.tempTip.show(res.data['message'])
                    }).catch(err => {
                        window.tempTip.show('网络异常！' + err)
                    });
                },
                addToLogistics(logistic){
                    this.printer.logistic_ids.push(logistic.id)
                },
                removeToLogistics(logistic){
                    this.printer.logistic_ids = this.printer.logistic_ids.filter(item=>{
                        return item !== logistic.id;
                    });
                }
            }
        })
    </script>
@endsection