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

@extends('layouts.app')
@section('title')模板@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.expressPrinting.menu')@endcomponent
    </span>
    <div class="container-fluid d-none row m-1" id="print-template">
        <div class="col-lg-2 col-sm-3 p-0"  id="part_panel">
            {{--  组件选择面板 --}}
            @include('maintenance.expressPrinting.template._select')
        </div>
        <div class="col-lg-8 col-sm-6 p-0" id="production_panel">
            {{--  模板制作面板 --}}
            @include('maintenance.expressPrinting.template._produce')
        </div>
        <div class="col-lg-2 col-sm-3 p-0" id="compile_panel">
            {{-- 模板编辑页面 --}}
            @include('maintenance.expressPrinting.template._compile')
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vue = new Vue({
            el:"#print-template",
            data:{
                printParts:{!! $printParts !!},
                filterPrintParts:[],
                producePanel:{},              // 背景版
                selectProducePanel:false,              // 是否选中背景版
                productionParts:{
                    printParts:[],                  // 组件s
                    editPart: null,                    // 编辑中的组件
                    editIndex:{},                   // 编辑中组件的下标
                    addPart:{},                     // 添加模板
                },
                partIsSelected:false,               // 表示模块被选中
                selectPrintPart:{},                 // 选中模块
                selectPrintPartPoint:{x:'',y:''},   // 选中模块时模块 point
                mousePointStart:{x:'',y:''},        // 开始拖动时的 point
                mousePointEnd:{x:'',y:''},          // 结束拖动时的 point
                selectPrintPartOffset:{left:'',top:''},     // 选中时的left 和 top
                z_index:10,
            },
            mounted(){
                this.initProductionParts();
                $('.navbar,.nav1,.nav2').hide();
                $('.nav3').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').show();
                });
                $('.body').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').hide();
                });
                $("#print-template").removeClass('d-none');
            },
            methods:{
                _addPartToProductionPanel(printPart){
                    let _clone = JSON.parse(JSON.stringify(printPart));
                    let print_part_style = JSON.parse(printPart.value);
                    let item = {
                        index:this.productionParts.printParts.length,
                        printPart:_clone,
                        left:'10',
                        top:'20',
                        width:print_part_style.width,
                        height:print_part_style.height,
                        text:print_part_style.text,
                        z_index:this.z_index++,
                        style:print_part_style
                    };
                    this.productionParts.printParts.push(item);
                },
                _alignContentToProductionPanel(){
                    this.productionParts.printParts.splice(this.productionParts.editIndex,1);
                    this.$forceUpdate();
                },
                _searchPrintPart(event){
                    let value = $(event.target).val();
                    this.filterPrintParts = this.printParts.filter(function(printPart){
                        return printPart.name.includes(value);
                    });
                    if(value===null || value=== '') this.filterPrintParts = JSON.parse(JSON.stringify(this.printParts));
                },
                showSaveModal(){
                    $('#saveModal').modal('show');
                },
                _savePrintTemplate(){
                    tempTip.setDuration(3000);
                    tempTip.setIndex(1999);
                    window.axios.post("{{url('print/template/store')}}",this.productionParts.addPart).then(res=>{
                        if(res.data.success){
                            tempTip.showSuccess('保存成功!');
                            return ;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.show(err);
                    });
                },
                initProductionParts(){
                    this.productionParts = {printParts:[], editPart:null, addPart:{}};
                    this.filterPrintParts=JSON.parse(JSON.stringify(this.printParts));
                    let height = (window.innerHeight-120)+'px';
                    $("#production_panel,#part_panel,#compile_panel,#select-panel").css({height:height});
                    let produce_panel = $("#produce-panel");
                    produce_panel.css({height:height});
                    let production_panel = $("#production_panel");
                    this.producePanel = {
                        width:parseInt(production_panel.width()),
                        height:parseInt(production_panel.css('height')),
                    };
                },
                getPrintPartStyle(item){
                    let style =  item.style;
                    style = {
                         'display':'flex',
                         'width':style.width+'px',
                         'height':style.height+'px',
                         'border-style':'solid',
                         'border-width':style.border+'px',
                         'font-size':style.font_size+'px',
                         'font-weight':style.font_weight,
                         'justify-content':style.justify_content,
                         'align-items':style.align_items,
                    };
                    return style;
                },
                getPrintPartDivStyle(item){
                    let div_style =  {
                        'left':item.left+'px',
                        'top':item.top+'px',
                        'width':item.width+'px',
                        'height':item.height+'px'
                    };
                    console.log(div_style);
                    return div_style;
                },
                _dragstart(item,$event){
                    {{--开始拖动元素时触发--}}
                    this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};
                    this.mousePointStart = {x:$event.offsetX, y:$event.offsetY};
                },
                _dragend(item,$event){
                    {{--结束拖动元素时触发--}}
                    this.mousePointEnd =  {x:$event.offsetX, y:$event.offsetY};
                    let left  = item.left - (this.mousePointStart.x - this.mousePointEnd.x);
                    let top = item.top - (this.mousePointStart.y - this.mousePointEnd.y);
                    item.left = left >0 ? left:0;
                    item.top =  top > 0 ? top:0;
                },
                editProducePanel(){
                    this.selectProducePanel =!this.selectProducePanel;
                },
            }
        });
    </script>
@endsection