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],
                editTemplate:{
                    index:null,
                    selectOwnerId:null,
                    item:null,
                    data:{},
                },
                templateMode:null,
            },
            mounted() {
                this.init();
            },
            computed:{
                selectOwnerLogistics(){
                    if (this.editTemplate.selectOwnerId === null ) return [];
                    let ownerId = this.editTemplate.selectOwnerId;
                    return this.editTemplate.data[ownerId]['logistics'];
                },
            },
            methods:{
                init(){
                    let self = this;
                    let data = {};
                    this.owners.forEach(function(owner){
                        // isActivation 是否激活
                        data[owner.id] = {isActivation:false,logistics:{},name:owner.name,selected:false,id:owner.id};
                        self.logistics.forEach(function(logistic){
                            // selected 是否选中
                            data[owner.id].logistics[logistic.id] = {isActivation:false,id:logistic.id,name:logistic.name}
                        })
                    });
                    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(item,index){
                    let data = JSON.parse(JSON.stringify(this.templateMode));

                    if (!item['owner_logistic_print_template']) return

                    item['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.item = JSON.parse(JSON.stringify(item));
                    this.editTemplate.data = data;
                    this.editTemplate.index = index

                    $("#edit-template").modal('show');
                },
                ownerIsAction(item){
                    return item.isActivation;
                },
                activateOwner(item){
                    item.isActivation = true;
                },
                deactivateOwner(item){
                    item.isActivation = false;
                    for (const key in this.editTemplate.data[item.id].logistics){
                        this.editTemplate.data[item.id].logistics[key].isActivation = false;
                    }
                },
                selectOwner(item){
                    if(this.editTemplate.selectOwnerId === item.id){
                        for (const key in this.editTemplate.data) {
                            if (this.editTemplate.data[key].id === item.id)
                                this.editTemplate.data[key].selected = false
                        }
                        this.editTemplate.selectOwnerId = null;
                    } else {
                        this.editTemplate.selectOwnerId = JSON.parse(JSON.stringify(item.id))
                        for (const key in this.editTemplate.data) {
                            this.editTemplate.data[key].selected  = false;
                        }
                        item.selected = true;
                    }
                },
                saveRelation(){
                    let url = "{{url("apiLocal/maintenance/expressPrinting/template/saveRelation")}}";
                    let relations = [];
                    for(const key in this.editTemplate.data){
                        if (this.editTemplate.data[key].isActivation){
                            for (const logistic_id in this.editTemplate.data[key].logistics) {
                                if (this.editTemplate.data[key].logistics[logistic_id].isActivation){
                                    relations.push({owner_id:key,logistic_id:logistic_id,print_template_id:this.editTemplate.item.id});
                                }
                            }
                        }
                    }
                    window.axios.post(url,{relations:relations,template_id:this.editTemplate.item['id']}).then(res=>{
                        $("#edit-template").modal('hide');
                        if (res.data.success){
                            this.$set(this.templates,this.editTemplate.index,res.data.data);
                            window.tempTip.showSuccess("保存成功");
                            return
                        }
                        window.tempTip.show(res.data.message)
                    }).catch(err=>{
                        $("#edit-template").modal('hide');
                        window.tempTip.show(err)
                    });
                }
            }
        });
    </script>
@endsection