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

@extends('layouts.app')
@section('title')组件创建@endsection

@section('content')
    <div class="container-fluid d-none" id="create-print-part">
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-header">
                        基础设置
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="template-width">宽</label>
                            <input type="number" id="template-width" v-model="template.width" class="form form-control">
                        </div>
                        <div class="form-group">
                            <label for=template-height>高</label>
                            <input type="number" id="template-height" v-model="template.height"
                                   class="form form-control">
                        </div>
                        <div class="form-group">
                            <label for="template-border-type">边框类型</label>
                            <select class="form-control" id="template-border-type" v-model="template.borderStyle">
                                <option v-for="style in borderStyles" :value="style.value">@{{ style.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="template-border-weight">边框大小</label>
                            <input type="number" id="template-border-weight" v-model="template.borderWidth"
                                   class="form form-control">
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-success" @click="show">保存当前模板</button>
                    </div>
                </div>
            </div>
            <div class="col-6 justify-content-center align-items-center flex-fill">
                {{-- 模板展示--}}
                <div v-if="template.type==='text'" :style="getStyle()">
                    <span>@{{ template.text }}</span>
                </div>
                {{-- 条纹码展示 --}}
                <svg v-show="template.type === 'StripeCode'" :style="{width:template.width,height:template.height}"
                     id="barcodeDiv">
                </svg>

                {{-- 二维码展示 --}}
                <div v-show="template.type ==='QrCode'" :style="{width:template.width,height:template.height}"
                     id="qrCodeDiv">
                </div>

                {{-- 图片展示 --}}
                <div v-show="template.type ==='QrCode'" :style="{width:template.width,height:template.height}"
                     id="ImageDiv">
                </div>
            </div>
            <div class="col-3">
                {{-- 属性 --}}
                <div class="card">
                    <div class="card-header">
                        设置
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="template-type">组件类型</label>
                            <select class="form-control" id="template-type" v-model="template.type" @change="setContent">
                                <option v-for="type in types" :value="type.value">@{{ type.name }}</option>
                            </select>
                        </div>
                        <div v-if="template.type === 'Image'">
                            <button @click="showUploadModal" class="btn btn-sm btn-primary">上传文件</button>
                        </div>
{{--                        <div class="form-group">--}}
{{--                            <label for="template-text">内容</label>--}}
{{--                            <textarea id="template-text" class="form-text form-control" cols="5" rows="5"--}}
{{--                                      v-model="template.text"></textarea>--}}
{{--                        </div>--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="template-text-align">文本对齐方式</label>--}}
{{--                            <select name="" id="template-text-align" v-model="template.justifyContent"--}}
{{--                                    class="form form-control">--}}
{{--                                <option v-for="justifyContent in justifyContents" :value="justifyContent.value">--}}
{{--                                    @{{ justifyContent.name }}--}}
{{--                                </option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="template-text-align">文本垂直对齐</label>--}}
{{--                            <select name="" id="template-text-align" v-model="template.alignItems"--}}
{{--                                    class="form form-control">--}}
{{--                                <option v-for="alignItem in alignItems" :value="alignItem.value">--}}
{{--                                    @{{ alignItem.name }}--}}
{{--                                </option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="template-font-size">字体大小</label>--}}
{{--                            <input type="text" id="template-font-size" v-model="template.fontSize"--}}
{{--                                   class="form form-control">--}}
{{--                        </div>--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="template-font-weight">字体宽</label>--}}
{{--                            <select id="template-font-weight" v-model="template.fontWeight" class="form-control">--}}
{{--                                <option v-for="fontWeight in fontWeights" :value="fontWeight.value">--}}
{{--                                    @{{ fontWeight.name }}--}}
{{--                                </option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="saveModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="saveModalLabel">保存组件</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">组件名称</label>
                                <input type="text" id="recipient-name" class="form-control" v-model="printPart.name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-success" @click="create">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="template.type === 'Image'">
            <template v-for="value in printImages.values">
                <div class="list-group">
                    @{{ value }}
                </div>
            </template>
        </div>
        <div class="modal" tabindex="-1" id="uploadFileModel">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">上传图片</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-inline form-group">
                            <label for="fileName" class="col-sm-3 col-form-label text-right ">图片名称</label>
                            <input type="name"  class="form-control" id="fileName" placeholder="图片名">
                        </div>

                        <div class="form-inline form-group">
                            <label for="uploadfile" class="col-sm-3 col-form-label text-right ">图片</label>
                            <input type="file" id="uploadfile" class="form-control" name="image" accept="image/*" ref="upload">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="pushImage">上传</button>
                    </div>
                </div>
            </div>
        </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: "#create-print-part",
            data: {
                printPart: {name: '', value: ''},
                printImages:{!! $imgPrintPart->toJson() !!},
                template: {
                    type: 'text',
                    width: 200,
                    height: 100,
                    borderStyle: 'solid',
                    borderWidth: 1,
                    fontSize: 12,
                    text: '',
                    fontWeight: 'normal',   //normal lighter bold
                    justifyContent: '',     //文字水平对齐方式
                    alignItems: 'center',         //文字垂直对齐
                },
                types: [
                    {name: "文本框", value: "text"},
                    {name: "条纹码", value: "StripeCode"},
                    {name: "二维码", value: "QrCode"},
                    {name: "图片", value: "Image"},
                ],
                fontWeights: [
                    {name: "正常", value: "normal"},
                    {name: "细体", value: "lighter"},
                    {name: "粗体", value: "bold"},
                ],
                justifyContents: [
                    {name: "左对齐", value: ""},
                    {name: "居中", value: "center"},
                    {name: "右对齐", value: "flex-end"},
                ],
                alignItems: [
                    {name: "顶部", value: ""},
                    {name: "居中", value: "center"},
                    {name: "底部", value: "flex-end"},
                ],
                borderStyles: [
                    {name: "默认边框", value: "solid"},
                    {name: "无边框", value: "none"},
                    {name: "虚线边框", value: "dashed"},
                ]
            },
            mounted() {
                $("#create-print-part").removeClass('d-none');
            },
            methods: {
                show() {
                    $('#saveModal').modal('show');
                },
                showUploadModal(){
                    $('#uploadFileModel').modal('show');
                },
                getStyle() {
                    return {
                        'display': 'flex',
                        'width': this.template.width + 'px',
                        'height': this.template.height + 'px',
                        'border-style': this.template.borderStyle,
                        'border-width': this.template.borderWidth + 'px',
                        'font-size': this.template.fontSize + 'px',
                        'font-weight': this.template.fontWeight,
                        'justify-content': this.template.justifyContent,
                        'align-items': this.template.alignItems,
                    };
                },
                create() {
                    tempTip.setDuration(3000);
                    tempTip.setIndex(2000);
                    let value = JSON.stringify(this.template);
                    let data = {name: this.printPart.name, value: value};
                    window.axios.post('{{url('apiLocal/maintenance/expressPrinting/part/create')}}', data).then(res => {
                        if (res.data.success) {
                            tempTip.showSuccess(res.data.data);
                            $('#saveModal').modal('hide');
                            return;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err => {
                        tempTip.show('网络异常:' + err);
                    });
                },
                setContent() {
                    if (this.template.type === "text") return;

                    if (this.template.type === "StripeCode") {
                        let div = $("#barcodeDiv");
                        this.template.borderStyle = 'none';
                        window.setBarcode("0123456789", "#barcodeDiv1", 2, 50, true)
                        this.template.width = div.width();
                        this.template.height = div.height();
                    } else if (this.template.type === "QrCode") {
                        $("#qrCodeDiv").html("");
                        new QRCode(document.getElementById("qrCodeDiv"), {
                            text: "占位二维码",
                            width: 128,
                            height: 128,
                            colorDark: "#000000",
                            colorLight: "#fff",
                            correctLevel: QRCode.CorrectLevel.H,
                        });
                    } else if (this.template.type === "Image") {
                        $("#qrCodeDiv").html("#ImageDiv");
                    }
                },
                pushImage(){
                    let url = '{{url("apiLocal/maintenance/expressPrinting/part/pushImage")}}'
                    let data = new FormData();
                    data.set("name",$("#fileName").val());
                    let file= this.$refs.upload.files[0];
                    data.set("file",file);
                    window.tempTip.setIndex(2000);
                    window.axios.post(url,data,{
                        'Content-Type': 'multipart/form-data'
                    }).then(res=>{
                        if(res.data.success){
                            window.tempTip.showSuccess("文件添加成功");
                            $('#uploadFileModel').modal('hide');
                            return
                        }
                        window.tempTip.show(res.data.message);
                    }).catch(err=>{
                        window.tempTip.show(err)
                    });

                },

            }
        });
    </script>
@endsection