hemall.terabimsoft.com.cn/plugins/printer/views/admin/temp_detail.blade.php

@extends('layouts.base')

@section('content')
@section('title', '添加模板')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{resource_get('plugins/more-printer/assets/css/temp-detail.css?time='.time())}}">
<style>
    .top-box {
        padding: 0 20px;
    }

    .el-tag {
        font-size: 16px;
        cursor: pointer;
    }

    @media (max-width: 1450px) {
        .fixed-pane {
            left:70% !important;
        }
    }

    @media (max-height: 960px) {
        .fixed-pane {
            height: 45% !important;
            overflow: auto !important;
        }
    }
</style>
<div id="app">
    <div class="all">
    <div class="vue-head">
        <div class="vue-main-title">
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content">消息模板信息</div>
        </div>
        <div style="padding: 10px;">
        <div style="color:#333333;margin-bottom:14px">订单商品详情默认打印，按照打印列格式打印。</div>

          <div style="background-color: #F6F7F9;width:480px;border-radius: 6px;">
             <table style="width:460px;height:120px;align:center;cellspace:0;cellpading:0">
                <tr align="center">
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>金额</td>
                </tr>
                <tr align="center">
                    <td>商品名称1</td>
                    <td>￥100.00</td>
                    <td>1</td>
                    <td>￥100.00</td>
                </tr>
                <tr align="center">
                    <td>商品名称2</td>
                    <td>￥100.00</td>
                    <td>1</td>
                    <td>￥100.00</td>
                </tr>
             </table>
             </div>
        </div>
    </div>
    <div class="vue-main">
    <el-row>
        <el-col :span="16">
            <div class="top-box">
                <div style="padding: 50px 50px;">
                    <el-form label-position="right" label-width="80px" :model="form">
                        <el-form-item label="模板名称" label-width="200px">
                            <el-input placeholder="小票模板名称，例：订单打印小票" v-model="form.title" @focus="focus"></el-input>
                        </el-form-item>
                        <el-form-item label="打印头部" label-width="200px">
                            <el-input v-model="form.print_title" @focus="focus"></el-input>
                            <span class="help-block">打印头部信息,比如商家名称 建议不超过8个字,会进行加粗处理</span>
                        </el-form-item>

                        <el-form-item label="打印列格式" label-width="200px">
                            <el-input v-model="form.print_style" @focus="focus"></el-input>
                            <div class="tip">
                                <span class="help-block">
                                例如：
                                    <span style="color: #F30000;">名称:6|单价:6|数量:5|金额:5|折后实付:10</span>
                                        解释: 名称 占据6位,单价占据6位,数量占据5位,金额占据5位,折后实付占据10位;总共每行是32个字符,每个中文或中文标点占用2字符;请严格按照格式来!
                                </span>
                                <br>
                                <span class="help-block">
                                    打印列格式顺序与打印顺序需要保持一致，避免发生占据字符错乱
                                </span>
                            </div>
                        </el-form-item>

                        <el-form-item label="打印顺序" label-width="200px">
                            <div class="order-pane">
                                <draggable :list="form.print_style_order_arr">
                                    <div class="order-box" v-for="(item,index) in form.print_style_order_arr" :key="index">
                                        <span class="name">[[item]]</span>
                                        <i class="el-icon-circle-close" @click="removeOrderName(item,index)"></i>
                                    </div>
                                </draggable>
                            </div>
                            <div class="order-name">
                                <span :class="item.status ? 'name no-drop' : 'name'" v-for="(item,index) in print_order_name" :key="index" @click="sureOrderName(item,index)">[[item.name]]</span>
                                <span class="tip">不填则默认按名称，单价，数量，金额进行打印</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="字体放大一倍" label-width="200px">
                            <el-switch v-model="form.print_style_enlarge" active-color="#29BA9C" inactive-color="#DCDFE6" active-value="on" inactive-value="off">
                            </el-switch>
                            <span class="help-block" style="color: #F30000;">注：放大一倍，默认关闭</span>
                        </el-form-item>
                        <el-form-item label="打印内容" label-width="200px" v-for="(item,index) in form.print_data">
                            <el-input v-model="form.print_data[index]"  @focus="focus">
                                <template slot="append">
                                <div style="cursor:pointer"  @click="deleteKey(index)">
                                <i class="el-icon-delete" style="font-size:20px"></i>
                            </div>
                                </template>
                            </el-input>
                            <span class="help-block">输入要打印的内容</span>
                            <el-switch v-model="form.is_enlarge[index]" active-color="#29BA9C" inactive-color="#DCDFE6" active-value="on" inactive-value="off">
                            </el-switch>
                            <span class="help-block" style="color: #F30000;">注：放大一倍，默认关闭</span>
                        </el-form-item>
                        <el-button type="success" style="margin-bottom: 22px; margin-left:100px;background-color:#29BA9C" @click="appendKey"><i class="el-icon-plus">增加一条键</i></el-button>
                        <el-form-item label="打印二维码" label-width="200px">
                            <el-input v-model="form.qr_code" @focus="focus"></el-input>
                            <span class="help-block">为空则不显示</span>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        <el-col :span="8" :push="2" style="margin-top: 35px;;position:fixed;left:75%;top:300px" class="fixed-pane">
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <div v-if="value == '1'">
                <div style="width: 217px;margin-top:20px" class="help-block">
                    点击变量后会自动插入选择的文本框的焦点位置，在打印时系统会自动替换对应变量值
                </div>
                <span style="color:#f44336">注意：以上模板消息变量只适用于小票打印</span>
            </div>
            <div v-if="value == '2'" style="width: 340px;">
                <div style="color: #353535;line-height: 48px;font-size:16px;margin-left:10px;color:#353535;font-weight:500">订单变量</div>
                <el-tag style="border-color: #C8CEDE;margin-bottom: 12px;margin-right: 12px;color:#333333" color="#fff" @click="chose(item)" v-for="(item,index) in order_name" :key="index">[[item]]</el-tag>
                <div style="background-color:#F6F7F9;border-radius: 6px;color: #333333;padding:8px;margin-top:12px">
                点击变量后会自动插入选择的文本框的焦点位置,
                <div>在打印时系统会自动替换对应变量值</div>
                <div style="margin-top: 14px;color:#F30000">注意：以上模板消息变量只适用于小票打印</div>
                </div>
            </div>
        </el-col>
    </el-row>
    </div>
    <div class="vue-page">
        <div class="vue-center">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="backTo">返回列表</el-button>
        </div>
    </div>
    </div>
</div>

<script src="{{resource_get('resources/views/goods/assets/js/vueDraggable/sortable.js')}}"></script>
<script src="{{resource_get('resources/views/goods/assets/js/vueDraggable/vuedraggable.js')}}"></script>
<script language='javascript'>
    let id = "{{ request()-> id }}"
    //vue
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                form: {
                    title: '',
                    print_title: '',
                    print_style: '',
                    print_style_enlarge: 'off',
                    print_data: [],
                    is_enlarge: [],
                    qr_code: '',
                    print_style_order_arr: [],
                },
                value: '',
                options: [{
                    value: '1',
                    label: '选择模板变量类型'
                }, {
                    value: '2',
                    label: '订单打印'
                }, ],
                order_name: ['订单编号', '订单金额', '订单时间', '订单状态', '商品条码', '商品编号', '优惠金额', '抵扣金额', '收货地址', '运费', '备注', '姓名', '电话', '订单应付金额', '提货人姓名', '提货人手机号'],
                current_input_obj: null,
                print_order_name:[{
                    name:'名称',
                    status: false
                },{
                    name:'单价',
                    status: false
                },{
                    name:'数量',
                    status: false
                },{
                    name:'金额',
                    status: false
                },{
                    name:'折后实付',
                    status: false
                }]
            }
        },
        computed: {

        },
        mounted() {
            if (id) {
                this.getTempDetail()
            }
        },
        methods: {
            //选择变量
            chose(item) {
                if (this.current_input_obj) {
                    this.current_input_obj.target.value += `[${item}]`
                    this.current_input_obj.target.dispatchEvent(new Event('input')) //通过触发自定义input事件实现vue中绑定的数据更新
                } else {
                    return
                }
            },
            //聚焦
            focus(event) {
                this.current_input_obj = event
            },
            //返回列表
            backTo() {
                let url =  "{!! yzWebUrl('plugin.printer.admin.temp.index') !!}"
                                  window.location.href=url
            },
            //删除一条键
            deleteKey(index) {
                this.form.print_data.splice(index, 1)
                this.form.is_enlarge.splice(index, 1)
            },
            //增加一条键
            appendKey() {
                this.form.print_data.push("")
                this.form.is_enlarge.push('off')
            },
            //提交表单
            submit() {
                let json = {
                    title: this.form.title,
                    print_data: this.form.print_data,
                    print_style: this.form.print_style,
                    qr_code: this.form.qr_code,
                    print_title: this.form.print_title,
                    print_style_order_arr: this.form.print_style_order_arr
                }
                if(this.form.print_style_enlarge =='on'){
                   json.print_style_enlarge = 'on'
                }else{

                }
                json.is_enlarge = []
                for (const jsonKey in this.form.is_enlarge) {
                    if(this.form.is_enlarge[jsonKey] == 'on'){
                        json.is_enlarge[jsonKey] = this.form.is_enlarge[jsonKey]
                    }
                }
                if(json.is_enlarge.length == 0){
                    delete json.is_enlarge
                }
                if (id) {
                    this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.temp.edit') !!}", {
                            temp: {
                                id,
                                ...json
                            }
                        }).then((res) => {
                            if (res.data.result) {
                                this.$message.success(res.data.msg)
                                let url =  "{!! yzWebUrl('plugin.printer.admin.temp.index') !!}"
                                  window.location.href=url
                            } else {
                                this.$message.error(res.data.msg);

                            }
                        })

                } else {
                    if (this.form.print_data < 1) {
                        this.$message.error('请添加一个键')
                    } else {
                        this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.temp.add') !!}", {
                            temp: {
                               ...json
                            }
                        }).then((res) => {
                            if (res.data.result) {
                                this.$message.success(res.data.msg)
                                let url =  "{!! yzWebUrl('plugin.printer.admin.temp.index') !!}"
                                  window.location.href=url

                            } else {
                                this.$message.error(res.data.msg);

                            }
                        })
                    }
                }
            },
            //获取模板详情
            getTempDetail() {
                this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.temp.info') !!}", {
                    id
                }).then((res) => {
                    if (res.data.result) {
                        let data = res.data.data
                        this.form.title = data.title
                        this.form.print_title = data.print_title
                        this.form.print_style = data.print_style
                        this.form.print_style_enlarge = data.print_style_enlarge
                        this.form.print_data = data.print_data?data.print_data:[]
                        this.form.is_enlarge = data.is_enlarge?data.is_enlarge:[]
                        this.form.qr_code = data.qr_code;
                        this.form.print_style_order_arr = Array.isArray(data.print_style_order_arr) ? data.print_style_order_arr : [];

                        for(let item of this.print_order_name) {
                            for(let citem of this.form.print_style_order_arr) {
                                if(citem == item.name) {
                                    item.status = true;
                                }
                            }
                        }
                    } else {
                        this.$message.error(res.data.msg);

                    }
                })
            },

            //选中排序名称
            sureOrderName(row,index) {
                if(row.status) return
                this.print_order_name[index].status = true;
                this.form.print_style_order_arr.push(row.name);
            },
            //移出选中排序名称
            removeOrderName(name,index) {
                this.form.print_style_order_arr.splice(index,1);
                let index_of = this.print_order_name.findIndex(item => item.name == name);
                this.print_order_name[index_of].status = false;
            }
        },
    })
</script>
@endsection