1284 行
51 KiB
HTML
可执行文件
1284 行
51 KiB
HTML
可执行文件
<!--[1.5.50]-->
|
||
<style>
|
||
.table-box {
|
||
margin: 10px 10px 20px 0;
|
||
max-width: 700px;
|
||
display: inline-block;
|
||
vertical-align: top
|
||
}
|
||
|
||
.edit-box {
|
||
width: 746px;
|
||
border: 1px solid #ebebeb;
|
||
border-radius: 3px;
|
||
transition: .2s;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
background-color: #ebebeb;
|
||
padding: 20px;
|
||
}
|
||
|
||
.edit-title-box {
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
.edit-content {
|
||
position: relative;
|
||
}
|
||
|
||
.edit-content-left {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding: 20px 0;
|
||
background-color: white;
|
||
box-shadow: 1px 1px 10px #ddd, -1px -1px 10px #ddd;
|
||
width: 320px;
|
||
}
|
||
|
||
.edit-content-right {
|
||
width: 320px;
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding: 20px;
|
||
background-color: white;
|
||
box-shadow: 1px 1px 10px #ddd, -1px -1px 10px #ddd;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.edit-content-del {
|
||
position: absolute;
|
||
left: 320px;
|
||
top: 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.edit-content-del.el-button--mini {
|
||
padding: 0;
|
||
}
|
||
|
||
.edit-content-move-up {
|
||
position: absolute;
|
||
left: 320px;
|
||
top: 20px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.edit-content-move-up.el-button--mini.is-circle {
|
||
padding: 3px;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.edit-content-move-down {
|
||
position: absolute;
|
||
left: 320px;
|
||
top: 40px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.edit-content-move-down.el-button--mini.is-circle {
|
||
padding: 3px;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.text-box {
|
||
width: 100%;
|
||
padding: 5px 20px;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
border: 1px dashed #eee;
|
||
}
|
||
|
||
.text-box div {
|
||
height: auto;
|
||
line-height: normal;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.text-box-active {
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.text-box-active .can-edit-text {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.text-left {
|
||
text-align: left;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.star-line {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.line {
|
||
background-color: #999;
|
||
}
|
||
|
||
.goods-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.goods-title > div {
|
||
flex: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.goods-text-box {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.mini-tips {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.switch-text-show span {
|
||
font-weight: normal;
|
||
}
|
||
|
||
.switch-text-hide span[aria-hidden='true'] {
|
||
color: #909399;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.edit-button-box {
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: white;
|
||
box-shadow: 1px 1px 10px #ddd, -1px -1px 10px #ddd;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
<div id="receiptApp">
|
||
<el-collapse accordion>
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<el-button type="text" size="mini">小票设置须知 ></el-button>
|
||
</template>
|
||
<p>1.门店小票未设置或者未开启时，将按系统默认设置打印(功能较少)。</p>
|
||
<p>2.同一时间同一类型小票只能开启一种设置。</p>
|
||
<p>3.小票宽度设置时，安卓USB打印请选择票纸宽度档次，PC桌面收银请设置宽度。</p>
|
||
<p>4.商米一体机设备打印直接按机器类型生效。</p>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<el-divider content-position="left">小票列表</el-divider>
|
||
<if condition="$authArr['receiptSet'] eq true">
|
||
<el-button type="primary" size="small" @click="addReceipt(1)">添加收银小票</el-button>
|
||
<el-button type="primary" size="small" @click="addReceipt(2)" plain>添加充值小票</el-button>
|
||
<el-button size="small" @click="showPrintSet=true">打印设置</el-button>
|
||
</if>
|
||
<div>
|
||
<div class="table-box">
|
||
<el-table border size="small" :data="receiptList">
|
||
<el-table-column align="center" type="index" label="序号" min-width="60"></el-table-column>
|
||
<el-table-column align="center" prop="type_name" label="小票类型" min-width="80"></el-table-column>
|
||
<el-table-column align="center" prop="name" label="名称" min-width="100"></el-table-column>
|
||
<el-table-column align="center" prop="width" label="宽度" min-width="80"></el-table-column>
|
||
<el-table-column align="center" prop="paperwidth" label="票纸宽度" min-width="80"></el-table-column>
|
||
<el-table-column align="center" label="状态" min-width="70">
|
||
<template slot-scope="scope">
|
||
<el-switch v-model="scope.row.status"
|
||
@change="changeStatus(scope.$index)"
|
||
active-value="1"
|
||
inactive-value="2"></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作" min-width="90">
|
||
<template slot-scope="scope">
|
||
<if condition="$authArr['receiptSet'] eq true">
|
||
<el-button size="mini" type="text" @click="editReceipt(scope.row)">编辑</el-button>
|
||
</if>
|
||
<if condition="$authArr['delreceipt'] eq true">
|
||
<el-button size="mini"
|
||
style="color: #999"
|
||
@click="delReceipt(scope.row.id)"
|
||
type="text">删除
|
||
</el-button>
|
||
</if>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="searchForm.page"
|
||
:page-sizes="[1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="currentLen">
|
||
</el-pagination>
|
||
</div>
|
||
<div class="edit-box" v-if="showEdit">
|
||
<div class="edit-title-box">
|
||
<el-form>
|
||
<el-form-item label="模块添加" label-width="80px">
|
||
<template v-for="(item,index) in modelList">
|
||
<el-button v-if="checkModeType(modelNameType[item.data.name])"
|
||
@click="addModelData(item.data)"
|
||
size="small">{{item.name}}
|
||
</el-button>
|
||
</template>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="edit-content">
|
||
<div class="edit-content-left">
|
||
<template v-for="(item,index) in dataForm.set">
|
||
<cashier-text v-if="item.name=='text'"
|
||
:textset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-text>
|
||
<cashier-header v-if="item.name=='header'"
|
||
:headerset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-header>
|
||
<cashier-goods-list v-if="item.name=='goods'"
|
||
:goodsset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-goods-list>
|
||
<cashier-vip v-if="item.name=='vip'"
|
||
:vipset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-vip>
|
||
<cashier-info v-if="item.name=='info'"
|
||
:infoset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-info>
|
||
<cashier-line v-if="item.name=='line'"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-line>
|
||
<cashier-footer v-if="item.name=='footer'"
|
||
:footerset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-footer>
|
||
<cashier-store v-if="item.name=='store'"
|
||
:storeset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-store>
|
||
<cashier-take-goods v-if="item.name=='takegoods'"
|
||
:takegoodsset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-take-goods>
|
||
<cashier-recharge-pay v-if="item.name=='rechargepay'"
|
||
:rechargepayset="item.set"
|
||
:index="index"
|
||
:act-index="actIndex"
|
||
@emitout="pickThis"></cashier-recharge-pay>
|
||
</template>
|
||
<el-button type="text"
|
||
size="mini"
|
||
v-if="dataForm.set.length"
|
||
@click="delDataSet"
|
||
class="edit-content-del el-icon-delete"
|
||
:style="{marginTop:setBoxTop+'px'}">
|
||
</el-button>
|
||
<el-button size="mini"
|
||
v-if="dataForm.set.length"
|
||
:disabled="actIndex==0?true:false"
|
||
@click="moveModel(1)"
|
||
circle
|
||
class="edit-content-move-up el-icon-arrow-up"
|
||
:style="{marginTop:setBoxTop+'px'}">
|
||
</el-button>
|
||
<el-button size="mini"
|
||
v-if="dataForm.set.length"
|
||
:disabled="actIndex==dataForm.set.length-1?true:false"
|
||
@click="moveModel(2)"
|
||
circle
|
||
class="edit-content-move-down el-icon-arrow-down"
|
||
:style="{marginTop:setBoxTop+'px'}">
|
||
</el-button>
|
||
</div>
|
||
<div class="edit-content-right" :style="{marginTop:setBoxTop+'px'}">
|
||
<el-form label-width="100px" size="mini">
|
||
<el-form-item label="小票名称">
|
||
<el-input v-model="dataForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="安卓小票宽度">
|
||
<el-radio v-model="dataForm.paperwidth" :label="58">58mm</el-radio>
|
||
<el-radio v-model="dataForm.paperwidth" :label="80">80mm</el-radio>
|
||
<div class="mini-tips">该设置仅在安卓USB打印生效</div>
|
||
</el-form-item>
|
||
<el-form-item label="PC小票宽度">
|
||
<el-input v-model="dataForm.width"
|
||
oninput="value=this.value.replace(/^[0]|\D/,'')"></el-input>
|
||
<div class="mini-tips">58mm纸建议填180,80mm纸建议填248</div>
|
||
<div class="mini-tips">该设置仅在PC端USB打印生效</div>
|
||
</el-form-item>
|
||
<el-form-item label="标题/内容"
|
||
v-if="dataForm.set[actIndex].name=='text'||dataForm.set[actIndex].name=='info'">
|
||
<el-input type="textarea" v-model="dataForm.set[actIndex].set.text"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="头部字体大小" v-if="dataForm.set[actIndex].name=='header'">
|
||
<el-input-number v-model="dataForm.set[actIndex].set.headerfontSize"
|
||
:min="12" :max="40" step-strictly
|
||
:step="2"></el-input-number>
|
||
<div class="mini-tips">字体为12~40(只能为偶数)</div>
|
||
</el-form-item>
|
||
<el-form-item label="字体大小" v-if="dataForm.set[actIndex].name!='line'">
|
||
<el-input-number v-model="dataForm.set[actIndex].set.fontSize"
|
||
:min="12" :max="40" step-strictly
|
||
:step="2"></el-input-number>
|
||
<div class="mini-tips">字体为12~40(只能为偶数)</div>
|
||
</el-form-item>
|
||
<template v-if="switchList[dataForm.set[actIndex].name]">
|
||
<template v-for="(item,index) in switchList[dataForm.set[actIndex].name]">
|
||
<el-form-item :label="item.name">
|
||
<el-switch v-model="dataForm.set[actIndex].set[item.key]"
|
||
:active-text="dataForm.set[actIndex].set[item.key]==1?'显示':'不显示'"
|
||
:class="dataForm.set[actIndex].set[item.key]==1?'switch-text-show':'switch-text-hide'"
|
||
:active-value="1"
|
||
:inactive-value="0"></el-switch>
|
||
<span class="mini-tips" v-if="item.tip" v-text="item.tip"></span>
|
||
</el-form-item>
|
||
</template>
|
||
</template>
|
||
<el-form-item label="二维码内容" v-if="dataForm.set[actIndex].name =='info'">
|
||
<el-input v-model="dataForm.set[actIndex].set.src"></el-input>
|
||
<div class="mini-tips">将按填写的内容生成二维码(建议填写网址链接)</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="edit-button-box">
|
||
<el-button size="medium" type="primary" @click="saveReceiptSet">保存设置</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog title="打印设置"
|
||
width="500px"
|
||
:visible.sync="showPrintSet"
|
||
:modal-append-to-body="false"
|
||
:close-on-click-modal="false"
|
||
:append-to-body="false">
|
||
<el-form>
|
||
<el-form-item label="是否显示完整的手机号" label-width="180px">
|
||
<el-switch v-model="showMobileStatus"
|
||
@change="changeMobileStatus"
|
||
:active-text="showMobileStatus==2?'17666666666':'176****666'"
|
||
:class="showMobileStatus==2?'switch-text-show':'switch-text-hide'"
|
||
active-value="2"
|
||
inactive-value="1"></el-switch>
|
||
<div style="color: #999">注意：仅针对打印店内订单与线上订单</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
<script type="text/javascript" src="__PUBLIC__/receipt/JsBarcode.js"></script>
|
||
<script type="text/javascript">
|
||
// 注册一个全局自定义指令 `v-focus`
|
||
Vue.directive('focus', {
|
||
// 当被绑定的元素插入到 DOM 中时……
|
||
inserted: function (el, binding) {
|
||
// 聚焦元素
|
||
if (binding.value.value) {
|
||
el.focus()
|
||
}
|
||
}
|
||
})
|
||
// 注册一个全局自定义指令
|
||
Vue.directive('qrcode',
|
||
function (el, binding) {
|
||
el.innerHTML = "";
|
||
var text = binding.value.value;
|
||
text = text ? text : "http://www.baidu.com";
|
||
new QRCode(el, {
|
||
text: text,
|
||
width: 128,
|
||
height: 128,
|
||
colorDark: "#000000",
|
||
colorLight: "#ffffff",
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
});
|
||
})
|
||
Vue.directive('barcode',
|
||
function (el, binding) {
|
||
var str = binding.value.value;
|
||
var options = {
|
||
format: "CODE128",
|
||
displayValue: false,
|
||
fontSize: 18,
|
||
height: 100
|
||
};
|
||
JsBarcode(el, str, options);
|
||
})
|
||
// 定义一个新组件 文本
|
||
Vue.component('cashier-text', {
|
||
props: ['textset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.textset
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''">
|
||
<div :style="{fontSize:set.fontSize+'px'}" class="can-edit-text">{{set.text}}</div>
|
||
</div>`,
|
||
watch: {
|
||
textset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 头部信息
|
||
Vue.component('cashier-header', {
|
||
props: ['headerset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.headerset,
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="can-edit-text" :style="{fontSize:set.headerfontSize+'px'}">{{set.text}}</div>
|
||
<div class="text-left" v-if="set.ordertype">订单类型：店内订单</div>
|
||
<div class="text-left" v-if="set.ordernum">订单号：000000000000000000</div>
|
||
<div class="text-left" v-if="set.ordertime">订单时间：2019-01-01</div>
|
||
<div class="text-left" v-if="set.num">编号：00002</div>
|
||
<div class="text-left" v-if="set.cashier">收银：收银员XXX</div>
|
||
<div class="text-left" v-if="set.guide">导购：导购员XXX</div>
|
||
</div>`,
|
||
watch: {
|
||
headerset: {
|
||
handler: function (n, o) {
|
||
this.set = {},
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 商品
|
||
Vue.component('cashier-goods-list', {
|
||
props: ['goodsset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.goodsset,
|
||
}
|
||
},
|
||
template: `<div class="text-box goods-text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<hr class="line">
|
||
<div class="goods-title">
|
||
<div class="text-left" v-if="set.goodsname">名称</div>
|
||
<div class="text-right" v-if="set.price">单价</div>
|
||
<div class="text-right" v-if="set.num">数量</div>
|
||
<div class="text-right" v-if="set.allmoney">小计</div>
|
||
</div>
|
||
<div class="goods-title">
|
||
<div class="text-left" v-if="set.goodsname">商品1<div v-if="set.sku">(规格XX)</div></div>
|
||
<div class="text-right" v-if="set.price">10</div>
|
||
<div class="text-right" v-if="set.num">1</div>
|
||
<div class="text-right" v-if="set.allmoney">10</div>
|
||
</div>
|
||
<div class="goods-title">
|
||
<div class="text-left" v-if="set.goodsname">商品2<div v-if="set.sku">(规格XX)</div></div>
|
||
<div class="text-right" v-if="set.price">5</div>
|
||
<div class="text-right" v-if="set.num">3</div>
|
||
<div class="text-right" v-if="set.allmoney">15</div>
|
||
</div>
|
||
<div class="goods-title">
|
||
<div class="text-left" v-if="set.goodsname">商品3<div v-if="set.sku">(规格XX)</div></div>
|
||
<div class="text-right" v-if="set.price">8.5</div>
|
||
<div class="text-right" v-if="set.num">1</div>
|
||
<div class="text-right" v-if="set.allmoney">8.5</div>
|
||
</div>
|
||
<hr class="line">
|
||
</div>`,
|
||
watch: {
|
||
goodsset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
//会员信息
|
||
Vue.component('cashier-vip', {
|
||
props: ['vipset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.vipset,
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="text-left" v-if="set.name">会员名称：会员XXX</div>
|
||
<div class="text-left" v-if="set.cardnum">会员号码：137XXXXXXXX</div>
|
||
<div class="text-left" v-if="set.money">余额：188</div>
|
||
<div class="text-left" v-if="set.score">积分：234</div>
|
||
</div>`,
|
||
watch: {
|
||
vipset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 店铺推广信息
|
||
Vue.component('cashier-info', {
|
||
props: ['infoset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.infoset,
|
||
qrcode: ""
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="text-left can-edit-text">{{set.text}}</div>
|
||
<div>
|
||
<div class=".qrcode" v-qrcode="{'value':set.src}" style="width: 128px;height:128px;margin: auto;"></div>
|
||
</div>
|
||
</div>`,
|
||
watch: {
|
||
infoset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
},
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 辅助线
|
||
Vue.component('cashier-line', {
|
||
props: ['index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.infoset,
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''">
|
||
<hr class="line">
|
||
</div>`,
|
||
watch: {
|
||
infoset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 底部支付信息
|
||
Vue.component('cashier-footer', {
|
||
props: ['footerset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.footerset
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="text-left" v-if="set.paytime">支付时间：2019-01-11</div>
|
||
<div class="text-left" v-if="set.ordernum || set.barcode">
|
||
<div v-if="set.ordernum">订单号：20190111141227154718004465</div>
|
||
<img v-barcode="{'value':'20190111141227154718004465'}" v-if="set.barcode" style="width:100%;" />
|
||
</div>
|
||
<div class="text-left" v-if="set.needpay">应收金额：33.50</div>
|
||
<div class="text-left" v-if="set.getmoney">实收金额：50.00</div>
|
||
<div class="text-left" v-if="set.paytype">支付方式：现金</div>
|
||
<div class="text-left" v-if="set.coupon">优惠金额：0.00</div>
|
||
<div class="text-left" v-if="set.smallchange">抹零金额：0.00</div>
|
||
<div class="text-left" v-if="set.returnmoney">找零金额：16.50</div>
|
||
</div>`,
|
||
watch: {
|
||
footerset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 店铺名称
|
||
Vue.component('cashier-store', {
|
||
props: ['storeset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.storeset
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''">
|
||
<div :style="{fontSize:set.fontSize+'px'}">XXX小店</div>
|
||
</div>`,
|
||
watch: {
|
||
storeset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
//收货信息信息
|
||
Vue.component('cashier-take-goods', {
|
||
props: ['takegoodsset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.takegoodsset,
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="text-left" v-if="set.name">收货人：张三</div>
|
||
<div class="text-left" v-if="set.phone">联系电话：137XXXXXXXX</div>
|
||
<div class="text-left" v-if="set.address">收货地址：江苏省苏州市XX区XX街道XX号</div>
|
||
<div class="text-left" v-if="set.fee">配送费：3.50</div>
|
||
<div class="text-left" v-if="set.remark">备注：请赠送赠品</div>
|
||
</div>`,
|
||
watch: {
|
||
takegoodsset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
// 底部支付信息
|
||
Vue.component('cashier-recharge-pay', {
|
||
props: ['rechargepayset', 'index', 'actIndex'],
|
||
data: function () {
|
||
return {
|
||
set: this.rechargepayset
|
||
}
|
||
},
|
||
template: `<div class="text-box" @click="pickThis($event)" :class="actIndex==index?'text-box-active':''" :style="{fontSize:set.fontSize+'px'}">
|
||
<div class="text-left" v-if="set.paytime">充值时间：2019-01-11</div>
|
||
<div class="text-left" v-if="set.ordernum">
|
||
<div v-if="set.ordernum">订单号：20190115103710154751004687</div>
|
||
</div>
|
||
<div class="text-left" v-if="set.money">充值实付：100.00</div>
|
||
<div class="text-left" v-if="set.allmoney">充值获得：120.00</div>
|
||
<div class="text-left" v-if="set.paytype">支付方式：现金支付</div>
|
||
<div class="text-left" v-if="set.cashier">操作人员：收银员张三</div>
|
||
</div>`,
|
||
watch: {
|
||
rechargepayset: {
|
||
handler: function (n, o) {
|
||
this.set = n;
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
pickThis() {
|
||
this.$emit('emitout', this.index);
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
<script>
|
||
new Vue({
|
||
el: '#receiptApp',
|
||
data: {
|
||
showPrintSet: false,//是否显示打印设置
|
||
showMobileStatus: '2',//是否显示完整的手机号
|
||
receiptList: [],//小票列表
|
||
currentLen: 0,//小票列表总数量
|
||
searchForm: {
|
||
limit: 10,
|
||
page: 1,
|
||
},//列表获取条件参数
|
||
showEdit: false,//是否显示编辑区
|
||
actIndex: 0,//编辑小票当前点左边击位置
|
||
dataForm: {},//编辑的小票数据
|
||
setBoxTop: 20,//小票编辑区的top值
|
||
modelNameType: {
|
||
header: [1],
|
||
goods: [1],
|
||
info: [1, 2],
|
||
store: [1, 2],
|
||
footer: [1],
|
||
vip: [1, 2],
|
||
line: [1, 2],
|
||
text: [1, 2],
|
||
takegoods: [1],
|
||
rechargepay: [2],
|
||
},//模板可使用的类型
|
||
modelList: {
|
||
header: {
|
||
name: '标题', data: {
|
||
name: "header",
|
||
set: {
|
||
fontSize: 14,
|
||
text: '收银小票',
|
||
headerfontSize: 18,
|
||
ordertype: 1,
|
||
ordernum: 1,
|
||
ordertime: 1,
|
||
num: 1,
|
||
cashier: 1,
|
||
guide: 1,
|
||
}
|
||
},
|
||
},
|
||
goods: {
|
||
name: '商品信息', data: {
|
||
name: "goods",
|
||
set: {
|
||
fontSize: 14,
|
||
goodsname: 1,
|
||
price: 1,
|
||
num: 1,
|
||
allmoney: 1,
|
||
sku: 1
|
||
}
|
||
},
|
||
},
|
||
info: {
|
||
name: '店铺推广', data: {
|
||
name: 'info',
|
||
set: {
|
||
fontSize: 14,
|
||
text: '店铺推广内容',
|
||
src: "https://www.baidu.com"
|
||
}
|
||
},
|
||
},
|
||
store: {
|
||
name: '店名区', data: {
|
||
name: "store",
|
||
set: {
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
},
|
||
footer: {
|
||
name: '支付信息', data: {
|
||
name: "footer",
|
||
set: {
|
||
fontSize: 14,
|
||
paytime: 1,
|
||
ordernum: 1,
|
||
barcode: 1,
|
||
needpay: 1,
|
||
getmoney: 1,
|
||
paytype: 1,
|
||
coupon: 1,
|
||
smallchange: 1,
|
||
returnmoney: 1
|
||
}
|
||
},
|
||
},
|
||
vip: {
|
||
name: '客户信息', data: {
|
||
name: 'vip',
|
||
set: {
|
||
fontSize: 14,
|
||
name: 1,
|
||
cardnum: 1,
|
||
money: 1,
|
||
score: 1,
|
||
}
|
||
},
|
||
},
|
||
line: {
|
||
name: '辅助线', data: {
|
||
name: 'line',
|
||
},
|
||
},
|
||
text: {
|
||
name: '文本', data: {
|
||
name: 'text',
|
||
set: {
|
||
text: '谢谢惠顾，欢迎再次光临！',
|
||
fontSize: 20
|
||
}
|
||
},
|
||
},
|
||
takegoods: {
|
||
name: '收货信息', data: {
|
||
name: 'takegoods',
|
||
set: {
|
||
fontSize: 14,
|
||
name: 1,
|
||
phone: 1,
|
||
address: 1,
|
||
remark: 1,
|
||
fee: 1
|
||
}
|
||
},
|
||
},
|
||
rechargepay: {
|
||
name: '会员充值', data: {
|
||
name: 'rechargepay',
|
||
set: {
|
||
fontSize: 14,
|
||
paytime: 1,
|
||
ordernum: 1,
|
||
barcode: 1,
|
||
money: 1,
|
||
allmoney: 1,
|
||
paytype: 1,
|
||
cashier: 1
|
||
}
|
||
},
|
||
}
|
||
},//左边模块列表
|
||
switchList: {
|
||
header: [
|
||
{name: '订单类型', key: 'ordertype'},
|
||
{name: '订单号', key: 'ordernum'},
|
||
{name: '订单时间', key: 'ordertime'},
|
||
{name: '编号', key: 'num'},
|
||
{name: '收银员', key: 'cashier'},
|
||
{name: '导购员', key: 'guide'},
|
||
],//头部
|
||
goods: [
|
||
{name: '商品名称', key: 'goodsname'},
|
||
{name: '商品单价', key: 'price'},
|
||
{name: '商品数量', key: 'num'},
|
||
{name: '商品小计', key: 'allmoney'},
|
||
{name: '商品小计', key: 'allmoney'},
|
||
{name: '规格', key: 'sku'},
|
||
],//商品
|
||
vip: [
|
||
{name: '会员名称', key: 'name'},
|
||
{name: '会员号码', key: 'cardnum'},
|
||
{name: '余额', key: 'money'},
|
||
{name: '积分', key: 'score'},
|
||
],//会员信息
|
||
takegoods: [
|
||
{name: '收货人', key: 'name'},
|
||
{name: '联系方式', key: 'phone'},
|
||
{name: '收货地址', key: 'address'},
|
||
{name: '配送费', key: 'fee'},
|
||
{name: '备注', key: 'remark'},
|
||
],//收货信息
|
||
footer: [
|
||
{name: '付款时间', key: 'paytime'},
|
||
{name: '订单号', key: 'ordernum'},
|
||
{name: '订单条码', key: 'barcode'},
|
||
{name: '应收金额', key: 'needpay'},
|
||
{name: '实收金额', key: 'getmoney', tip: '现金支付时出现'},
|
||
{name: '找零金额', key: 'returnmoney', tip: '现金支付时出现'},
|
||
{name: '抹零金额', key: 'smallchange'},
|
||
{name: '支付方式', key: 'paytype'},
|
||
{name: '优惠券', key: 'coupon'},
|
||
],//金额单号信息
|
||
rechargepay: [
|
||
{name: '付款时间', key: 'paytime'},
|
||
{name: '订单号', key: 'ordernum'},
|
||
{name: '订单条码', key: 'barcode'},
|
||
{name: '充值支付', key: 'money'},
|
||
{name: '充值获得', key: 'allmoney'},
|
||
{name: '支付方式', key: 'paytype'},
|
||
{name: '收银员', key: 'cashier'},
|
||
],//会员充值信息
|
||
},//显示与隐藏字段列表
|
||
},
|
||
methods: {
|
||
//新增小票
|
||
addReceipt(type) {
|
||
this.dataForm = this.getDefaultForm(type);
|
||
this.showEdit = true;
|
||
this.$nextTick(() => {
|
||
this.actIndex = 0;
|
||
})
|
||
},
|
||
//编辑小票
|
||
editReceipt(item) {
|
||
let dataForm = JSON.parse(JSON.stringify(item));
|
||
for (let i in dataForm) {
|
||
if (/^[0-9]+$/g.test(dataForm[i])) {
|
||
dataForm[i] = dataForm[i] * 1;
|
||
}
|
||
if (dataForm[i].set) {
|
||
for (let j in dataForm[i].set) {
|
||
for (let k in dataForm[i].set[j]) {
|
||
if (/^[0-9]+$/g.test(dataForm[i].set[j][k])) {
|
||
dataForm[i].set[j][k] = dataForm[i].set[j][k] * 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.dataForm = dataForm;
|
||
this.showEdit = true;
|
||
this.$nextTick(() => {
|
||
this.actIndex = 0;
|
||
})
|
||
},
|
||
//点击编辑某个模块
|
||
pickThis: function (index) {
|
||
this.actIndex = index;
|
||
},
|
||
// 移动左侧模块 type==1向上 type==2向下
|
||
moveModel(type) {
|
||
let dataForm = JSON.parse(JSON.stringify(this.dataForm));
|
||
let item = dataForm.set.splice(this.actIndex, 1);
|
||
if (type == 1) {
|
||
//向上移动一个
|
||
dataForm.set.splice(this.actIndex - 1, 0, item[0]);
|
||
this.actIndex--;
|
||
} else {
|
||
//向下移动一个
|
||
dataForm.set.splice(this.actIndex + 1, 0, item[0]);
|
||
this.actIndex++;
|
||
}
|
||
this.dataForm = dataForm;
|
||
},
|
||
//新增某个模块
|
||
addModelData(item) {
|
||
this.dataForm.set.splice(this.actIndex + 1, 0, JSON.parse(JSON.stringify(item)));
|
||
this.actIndex++;
|
||
},
|
||
//删除小票某个模块
|
||
delDataSet() {
|
||
this.dataForm.set.splice(this.actIndex, 1);
|
||
},
|
||
//保存设置
|
||
saveReceiptSet() {
|
||
if (!this.dataForm.name) {
|
||
this.$message({
|
||
message: '小票名称不能为空',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.dataForm.width) {
|
||
this.$message({
|
||
message: '小票宽度设置不正确',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
this.$confirm("确认保存小票？", "温馨提示", {
|
||
confirmButtonText: '保存',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
var data = JSON.parse(JSON.stringify(this.dataForm));
|
||
data.set = JSON.stringify(data.set);
|
||
$.ajax({
|
||
url: "/index.php/Retail/Receipt/receiptSet",
|
||
data: data,
|
||
type: "POST",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
});
|
||
this.showEdit = false;
|
||
this.getData();
|
||
} else {
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
//验证小票与模板类型是否一致
|
||
checkModeType(type) {
|
||
return type.indexOf(this.dataForm.type * 1) != -1 ? true : false;
|
||
},
|
||
//获取默认的小票设置
|
||
getDefaultForm(type) {
|
||
let obj = {
|
||
't_1': {
|
||
type_name: '收银小票',
|
||
name: '',
|
||
type: 1,
|
||
width: 180,
|
||
paperwidth: 58,
|
||
set: [
|
||
this.modelList.store.data,
|
||
this.modelList.header.data,
|
||
this.modelList.goods.data,
|
||
this.modelList.vip.data,
|
||
this.modelList.takegoods.data,
|
||
this.modelList.line.data,
|
||
this.modelList.footer.data,
|
||
this.modelList.info.data,
|
||
this.modelList.text.data,
|
||
],
|
||
},
|
||
't_2': {
|
||
type_name: '充值小票',
|
||
name: '',
|
||
type: 2,
|
||
width: 180,
|
||
paperwidth: 58,
|
||
set: [
|
||
this.modelList.store.data,
|
||
this.modelList.rechargepay.data,
|
||
this.modelList.vip.data,
|
||
this.modelList.line.data,
|
||
this.modelList.info.data,
|
||
this.modelList.text.data,
|
||
],
|
||
}
|
||
};
|
||
return JSON.parse(JSON.stringify(obj['t_' + type]));
|
||
},
|
||
//切换每页数量
|
||
handleSizeChange(val) {
|
||
this.searchForm.limit = val;
|
||
this.searchForm.page = 1;
|
||
this.getData();
|
||
},
|
||
//切换页数
|
||
handleCurrentChange(val) {
|
||
this.searchForm.page = val;
|
||
this.getData();
|
||
},
|
||
//获取小票列表数据
|
||
getData() {
|
||
$.ajax({
|
||
url: '/index.php/Retail/Receipt/receiptList',
|
||
type: 'post',
|
||
data: this.searchForm,
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.receiptList = res.data;
|
||
this.currentLen = res.count;
|
||
} else {
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
//修改小票状态
|
||
changeStatus(index) {
|
||
var receiptList = JSON.parse(JSON.stringify(this.receiptList));
|
||
$.ajax({
|
||
url: "/index.php/Retail/Receipt/editReceiptStatus",
|
||
data: {
|
||
id: receiptList[index].id,
|
||
status: receiptList[index].status,
|
||
},
|
||
type: "POST",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
});
|
||
this.getData();
|
||
} else {
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
receiptList[index].status = receiptList[index].status == 2 ? '1' : '2';
|
||
this.receiptList = [];
|
||
this.receiptList = receiptList;
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
receiptList[index].status = receiptList[index].status == 2 ? '1' : '2';
|
||
this.receiptList = [];
|
||
this.receiptList = receiptList;
|
||
}
|
||
})
|
||
},
|
||
//删除小票
|
||
delReceipt(id) {
|
||
this.$confirm("确认删除该小票？", "温馨提示", {
|
||
confirmButtonText: '删除',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "/index.php/Retail/Receipt/delreceipt",
|
||
data: {id: id},
|
||
type: "POST",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
})
|
||
this.getData();
|
||
} else {
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
changeMobileStatus() {
|
||
$.ajax({
|
||
url: "/index.php/Retail/Receipt/setMobileShow",
|
||
data: {mobile_set: this.showMobileStatus},
|
||
type: "POST",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
})
|
||
} else {
|
||
this.showMobileStatus = this.showMobileStatus == 1 ? '2' : '1';
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.getData();
|
||
$.ajax({
|
||
url: '/index.php/Retail/Receipt/getMobileShow',
|
||
type: 'post',
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.showMobileStatus = res.data.mobile_set;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
watch: {
|
||
actIndex(n, o) {
|
||
let index = n + 1;
|
||
this.setBoxTop = $('.edit-content-left>.text-box:nth-child(' + index + ')')[0].offsetTop;
|
||
}
|
||
}
|
||
})
|
||
</script>
|