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

@extends('layouts.app')

@section('title','查询')

@section('content')
    <div class="container-fluid" id="part-template">
        <table class="table table-striped table-sm table-hover">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>内容</th>
                <th>绑定</th>
                <th>操作</th>
            </tr>
            <tr v-for="(template,i) in templates">
                <td>@{{ i+1 }}</td>
                <td>@{{ template.name }}</td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-primary" @click="edit(template,i)">编辑关联</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger" @click="destroy(template.id,i)">删除</button>
                    <a class="btn btn-primary" :href="'{{url('maintenance/expressPrinting/template/edit')}}'+'/'+template.id" :target="'maintenance/expressPrinting/template/edit'+template.id">编辑模板</a>
                </td>
            </tr>
            @include('maintenance.expressPrinting.template._edit')
        </table>
        {{ $templates->links() }}
    </div>
@endsection

@section('lastScript')
    <script>
        let vue = new Vue({
            el:'#part-template',
            data:{
                templates:{!! $templates->toJson() !!}['data'],
                logistics:[@foreach($logistics as $logistic ){!! $logistic !!},@endforeach],
                owners:[@foreach($owners as $owner ){!! $owner !!},@endforeach],
                deliveryInterfaces:[@foreach($delivery_interfaces as $key=>$delivery_interface)'{!! $delivery_interface !!}',@endforeach],
                editTemplate:null,
                templateMode:null,
                editTemplateOwner:null,
                editTemplateLogistic:null,
            },
            mounted() {
                this.init();
            },
            computed:{

            },
            methods:{
                init(){
                    let self = this;
                    let data = {};
                    this.owners.forEach(function(owner){
                        // isActivation 是否激活
                        // selected 是否选中
                        data[owner.id] = {isActivation:false,logistics:{},name:owner.name,selected:false,id:owner.id};
                        self.logistics.forEach(function(logistic){
                            data[owner.id].logistics[logistic.id] = {isActivation:false,id:logistic.id,name:logistic.name,selected:false}
                        })
                    });
                    this.templateMode = data;
                },
                destroy(id,i){
                    if (!confirm('是否删除当前模板')) return;
                    let url = "{{url('apiLocal/maintenance/expressPrinting/template')}}"+"/"+id;
                    window.axios.delete(url).then(res=>{
                        if(res.data.success){
                            window.tempTip.showSuccess('删除成功');
                            this.$delete(this.templates,i);
                        }
                    }).catch(err=>{
                        window.tempTip.show('删除异常:'+err);
                    })
                },
                edit(template,index){
                    let data = JSON.parse(JSON.stringify(this.templateMode));

                    if (!template['owner_logistic_print_template']) return

                    template['owner_logistic_print_template'].forEach(function(item){
                        data[item.owner_id].isActivation = true;
                        data[item.owner_id].logistics[item.logistic_id].isActivation = true;
                    });

                    this.editTemplate = JSON.parse(JSON.stringify(template));
                    this.editTemplate.index = index
                    this.editTemplate.data = data;

                    $("#edit-template").modal('show');
                },
                selectOwner(data,owners){
                    if(data.selected === true){
                        data.selected = false;
                        this.editTemplateOwner = null
                        this.editTemplateLogistic = null;
                        return ;
                    }
                    for (const dataKey in owners) {
                        if (dataKey!==data.id){
                            owners[dataKey]['selected'] = false;
                        }
                    }
                    data.selected = true;
                    this.editTemplateOwner = data;
                },
                // 添加货主关联
                linkOwnerRelation(model){
                    model.isActivation = true;
                    this.$forceUpdate();
                },
                // 取消 货主关联
                cancelOwnerRelation(model){
                    if (!confirm("是否取消模板和货主的关联")){return ;}
                    let url = "{{url("apiLocal/maintenance/expressPrinting/template/saveRelation")}}";
                    let data = {
                        'owner_id' : model.id,
                        'print_template_id' : this.editTemplate.id,
                    };
                    window.tempTip.setIndex(1999)
                    window.axios.post(url,data).then(res=>{
                        if (res.data.success){
                            window.tempTip.showSuccess("保存成功");
                            model.isActivation = false;
                            for (const key in model.logistics) {
                                if(model.logistics[key].isActivation) model.logistics[key].isActivation = false
                            }
                            this.$set(this.templates,this.editTemplate.index,res.data);
                            this.$forceUpdate();
                            return
                        }
                        window.tempTip.show("保存异常")
                    }).catch(err=>{
                        window.tempTip.show(err)
                    })
                },
                // 取消  货主和承运商的关联
                cancelOwnerLogisticRelation(logistic,model){
                    if (!confirm("是否取消模板，货主和承运商的关联")){return ;}
                    let url = "{{url("apiLocal/maintenance/expressPrinting/template/saveRelation")}}";
                    let data = {
                        'owner_id' : this.editTemplateOwner.id,
                        'logistic_id' : logistic.id,
                        'print_template_id' : this.editTemplate.id,
                    };
                    window.tempTip.setIndex(1999)
                    window.axios.post(url,data).then(res=>{
                        if (res.data.success){
                            logistic.isActivation = false
                            this.editTemplateLogistic = null;
                            for (const dataKey in logistic.interfaces) {
                                logistic.interfaces[dataKey].selected  = false;
                                logistic.interfaces[dataKey].isActivation = false
                            }
                            this.$set(this.templates,this.editTemplate.index,res.data);
                            this.$forceUpdate()
                            return
                        }
                        window.tempTip.show("保存异常")
                    }).catch(err=>{
                        window.tempTip.show(err)
                    })
                },
                selectOwnerLogistic(logistic,model){
                    if (logistic.selected === true){
                        logistic.selected = false;
                        this.editTemplateLogistic = null;
                        return ;
                    }
                    for (const dataKey in model.logistics) {
                        if (dataKey!==logistic.id){
                            model.logistics[dataKey].selected  = false;
                        }
                    }
                    logistic.selected = true;
                    this.editTemplateLogistic = logistic;
                },
                isChecking(){
                    if(this.editTemplate === null)return false;
                    if (this.editTemplate.data === null )return false;
                    for (const argumentsKey in this.editTemplate.data) {
                        if (this.editTemplate.data[argumentsKey].isActivation === true){
                            return true;
                        }
                    }
                    return false;
                },
                saveOwnerLogisticPrinterTempRelation(item,islink){
                    if (!islink && !confirm("是否取消当前关联关系")){
                        return ;
                    }
                    let url = "{{url("apiLocal/maintenance/expressPrinting/template/saveRelation")}}";
                    let data = {
                        'owner_id' : this.editTemplateOwner.id,
                        'logistic_id' : this.editTemplateLogistic.id,
                        'print_template_id' : this.editTemplate.id,
                        'is_save':islink
                    }
                    window.tempTip.setIndex(1999)
                    window.axios.post(url,data).then(res=>{
                        if (res.data.success){
                            this.$set(this.templates,this.editTemplate.index,res.data.data);
                            window.tempTip.showSuccess("保存成功");
                            item.isActivation = islink;
                            return
                        }
                        window.tempTip.show("保存异常")
                    }).catch(err=>{
                        window.tempTip.show(err)
                    })
                }
            }
        });
    </script>
@endsection