362 lines
16 KiB
PHP
362 lines
16 KiB
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
|
|
|