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

<div class="container-fluid">
    <div class="card">
        <form class="form">
            <div class="card-header">
                <button type="button" class="btn btn-success"  @click="showSaveModal">保存当前打印模板</button>
            </div>
            <div class="card-header" v-if="productionParts.bg">
                <span>背景版编辑</span>
            </div>
            <div class="card-body" v-if="productionParts.bg">
                <div class="form-group m-0">
                    <label for="producePanel-width" class="col-form-label">宽</label>
                    <input type="text" id="producePanel-width" class="form-control form-control-sm" v-model="productionParts.bg.width">
                </div>
                <div class="form-group m-0">
                    <label for="producePanel-height" class="col-form-label">高</label>
                    <input type="text" id="producePanel-height" class="form-control form-control-sm" v-model="productionParts.bg.height">
                </div>
            </div>
            <div class="card-header">
                <span>编辑面板</span>
            </div>
            <div class="card-body" v-if="productionParts.editPart">
                <div class="form-group m-0">
                    <label for="compile-border-width" class="col-form-label">边框大小</label>
                    <input type="text" id="compile-border-width" class="form-control form-control-sm" v-model="productionParts.editPart['border-width']">
                </div>
                <div class="form-group m-0">
                    <label for="compile-text" class="col-form-label">文本内容</label>
                    <textarea class="form-control" id="compile-text" cols="30" rows="5" v-model="productionParts.editPart.text"></textarea>
                </div>
                <div class="form-group m-0">
                    <label for="compile-left" class="col-form-label">left</label>
                    <input type="text" id="compile-left" class="form-control form-control-sm" v-model="productionParts.editPart.left">
                </div>

                <div class="form-group m-0">
                    <label for="compile-top" class="col-form-label">top</label>
                    <input type="text" id="compile-top" class="form-control form-control-sm" v-model="productionParts.editPart.top">
                </div>

                <div class="form-group m-0"  v-if="productionParts.editPart.type === 'stripeCode'">
                    <label for="compile-scale" class="col-form-label">比例</label>
                    <input type="text" id="compile-scale" class="form-control form-control-sm"  v-model="productionParts.editPart.scale" @input="changeStripeCodeScale">
                </div>

                <div class="form-group m-0" v-if=" ['textBox','qRCode','stripeCode'].includes(productionParts.editPart.type) ">
                    <label for="compile-width" class="col-form-label">宽</label>
                    <input type="text" id="compile-width" class="form-control form-control-sm"
                           v-if="['qRCode','stripeCode'].includes(productionParts.editPart.type)"
                           v-model="productionParts.editPart.width" @input="changeStripeCodeWidth()">
                    <input type="text" v-else id="compile-width" class="form-control form-control-sm" v-model="productionParts.editPart.width" @input="changeStripeCodeWidth()">
                </div>

                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                    <label for="compile-height" class="col-form-label text-sm-right">高</label>
                    <input type="text" id="compile-height" class="form-control form-control-sm" v-model="productionParts.editPart.height">
                </div>
                <div class="form-group m-0"  v-if="productionParts.editPart['font-size']">
                    <label for="compile-font-size" class="col-form-label text-sm-right">字体大小</label>
                    <input type="text" id="compile-font-size" class="form-control form-control-sm" v-model="productionParts.editPart['font-size']">
                </div>
                <div class="form-group m-0" >
                    <label for="compile-z-index" class="col-form-label text-sm-right">图层</label>
                    <input type="text" id="compile-z-index" class="form-control form-control-sm" v-model="productionParts.editPart.z_index">
                </div>
                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                    <label for="compile-justify-content" class="col-form-label text-sm-right">文本水平对齐方式</label>
                    <select class="form-control-sm form-control" id="compile-justify-content" v-model="productionParts.editPart['justify-content']">
                        <option value="flex-start">左对齐</option>
                        <option value="center">居中对齐</option>
                    </select>
                </div>
                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                    <label for="compile-text-align" class="col-form-label text-sm-right">文本垂直对齐方式</label>
                    <select class="form-control-sm form-control " id="compile-text-align" v-model="productionParts.editPart['align-items']">
                        <option value="flex-start">顶部</option>
                        <option value="center">垂直居中</option>
                        <option value="flex-end">顶部</option>
                    </select>
                </div>
            </div>
            <div class="card-footer" v-show="!selectProducePanel">
                <button type="button" class="btn btn-outline-secondary" v-show="productionParts.editPart" @click="_removePartToProductionPanel(productionParts.editPart)">删除</button>
            </div>
        </form>
    </div>

</div>