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-show="selectProducePanel">
                <span>背景版编辑</span>
            </div>
            <div class="card-body" v-show="selectProducePanel">
                <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="producePanel.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="producePanel.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-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">
                    <label for="compile-width" class="col-form-label">宽</label>
                    <input type="text" id="compile-width" class="form-control form-control-sm" v-model="productionParts.editPart.width">
                </div>
                <div class="form-group m-0">
                    <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" >
                    <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.fontSize">
                </div>
                <div class="form-group m-0" >
                    <label for="compile-font-weight" class="col-form-label text-sm-right">字体粗细</label>
                    <select class="form-control" id="compile-font-weight" v-model="productionParts.editPart.fontWeight">
                        <option  value="normal">正常</option>
                        <option  value="lighter">细体</option>
                        <option  value="bold">粗体</option>
                    </select>
                </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" >
                    <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.justifyContent">
                        <option value="">左对齐</option>
                        <option value="center">居中对齐</option>
                        <option value="flex-end">右对齐</option>
                    </select>
                </div>
                <div class="form-group m-0" >
                    <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.alignItems">
                        <option value="">顶部</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>