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

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

@section('content')
    <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 type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
    <script type="text/javascript" src="{{mix('/js/utilities/qrcode.js')}}"></script>
    <script>

        let vue = new Vue({
            el: "#print-template",
            data: {
                printParts: [
                        @foreach($printParts as $items)
                    {
                        name: '{{ $items['name'] }}', value: {
                            @foreach($items['value'] as $key=>$value)
                            '{{$key}}': '{{$value}}',
                            @endforeach
                        }
                    },
                    @endforeach
                ],
                imgPrefix:"{{asset("/storage")}}",
                images:{!! $printPartImages ?? [] !!},
                filterPrintParts: [],
                producePanel: {},              // 背景版
                selectProducePanel: false,              // 是否选中背景版
                productionParts: {
                    bg: null,
                    printParts: [],                  // 组件
                    editPart: {
                        id: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() {
                $('.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 = _clone.value
                    if (!this.productionParts.bg && print_part.type !== 'bg') {
                        window.tempTip.show('先添加背景组件在进行其他组件的添加');
                        return
                    } else if (this.productionParts.bg && print_part.type === 'bg') {
                        window.tempTip.show('背景组件请勿重复添加');
                        return
                    }
                    if (print_part.type === 'bg') {
                        this.productionParts.bg = print_part;
                        return;
                    }
                    print_part.index = this.productionParts.printParts.length;
                    this.z_index+=1
                    print_part.z_index = this.z_index;
                    print_part.id = "id" + this.z_index;
                    print_part.text = null;
                    this.productionParts.printParts.push(print_part);  // 添加入组件列表中
                    if (print_part.type === "stripeCode") {
                        setTimeout(function () {
                            window.setBarcode("0123456789", "#svg" + print_part.id, 2, 50, true)
                        }, 100);
                    } else if (print_part.type === "qRCode") {
                        setTimeout(function () {
                            new QRCode(document.getElementById(print_part.id), {
                                text: "0123456789",
                                width: print_part.width,
                                height: print_part.height,
                                colorDark : "#000000",
                                colorLight : "#ffffff",
                                correctLevel : QRCode.CorrectLevel.H
                            });
                        }, 1000)
                    } else if (print_part.type === "image") {

                    }
                },
                // 从面板删除组件
                _removePartToProductionPanel(editPart) {
                    this.productionParts.editPart = null;
                    let index = this.productionParts.printParts.indexOf(editPart);
                    this.productionParts.printParts.splice(index, 1);
                },
                //
                _alignContentToProductionPanel() {
                    this.productionParts.printParts.splice(this.productionParts.editIndex, 1);
                    this.$forceUpdate();
                },
                // 打开保存modal
                showSaveModal() {
                    $('#saveModal').modal('show');
                },
                // 保存modal
                _savePrintTemplate() {
                    tempTip.setDuration(3000);
                    tempTip.setIndex(1999);
                    let printTemplate = JSON.parse(JSON.stringify(this.productionParts.printParts));
                    printTemplate.push(this.productionParts.bg);
                    let data = {
                        name: this.productionParts.addPart.name,
                        value: printTemplate
                    };
                    window.axios.post("{{url('apiLocal/maintenance/expressPrinting/template/create')}}", data).then(res => {
                        if (res.data.success) {
                            tempTip.showSuccess('保存成功!');
                            $('#saveModal').modal('hide');
                            return;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err => {
                        tempTip.show(err);
                    });
                },
                // 开始拖动元素时触发
                _dragstart(item, $event) {
                    console.log(item)
                    this.selectPrintPartPoint = {x: parseInt(item.left), y: parseInt(item.top)};
                    this.mousePointStart = {x: $event.offsetX, y: $event.offsetY};
                },
                // 结束拖动元素时触发
                _dragend(item, $event) {
                    console.log(item)
                    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;
                },
                getProducePanelStyle() {
                    return {
                        width: this.producePanel.width + 'px',
                        height: this.producePanel.height + 'px',
                    }
                },
                getStyle(item) {
                    let style =  {
                        width: item.width + 'px',
                        height: item.height + 'px',
                        left: item.left + 'px',
                        top: item.top + 'px',
                        'z-index' : item['z_index'],
                    };
                    if (item.type === 'textBox'){
                        style['font-size'] = item['font-size'];
                        style['border-width'] = item['border-width']+'px';
                        style['border-color'] = '#000';
                        style['border-style'] = 'solid';
                        style['display'] = 'flex'
                        style['justify-content'] = item['justify-content']
                        style['align-items'] = item['align-items']
                        style['text-align'] = 'center'
                    } else if (item.type === 'qRCode'){
                        style.heigth = style.width;
                        let scale = item.scale;
                        style.transform =  `scale(${scale},${scale})`;
                    } else if (item.type === 'stripeCode'){
                        let scale = item.scale;
                        style.transform =  `scale(${scale},${scale})`;
                    }
                    return style;
                },
                getImageSrc(image){
                    return this.imgPrefix+image.file.url+'.'+image.file.type
                },
                setImageBg(image){
                    let src =  this.getImageSrc(image);
                    this.productionParts.editPart.text = image.name;
                    document.getElementById(this.productionParts.editPart.id).setAttribute('src',src) ;
                },
                changeStripeCodeWidth(){
                    let default_width = 404;
                    if (this.productionParts.editPart.type === 'qRCode')default_width = 100;
                    this.productionParts.editPart.scale = this.productionParts.editPart.width / default_width;
                },
                changeStripeCodeScale(){
                    let default_width = 404;
                    if (this.productionParts.editPart.type === 'qRCode')default_width = 100;
                    this.productionParts.editPart.width = default_width * this.productionParts.editPart.scale;
                }
            }
        });
    </script>
@endsection