379 lines
11 KiB
Vue
379 lines
11 KiB
Vue
<template>
|
||
<div class="device_container" v-loading="requestLoading">
|
||
<div class="header" @click="router.back()">
|
||
<el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
|
||
<ArrowLeft />
|
||
</el-icon>
|
||
<el-text>{{ form.id ? "编辑小票打印机" : "添加小票打印机" }}</el-text>
|
||
</div>
|
||
<div class="d_content">
|
||
<div class="d_list">
|
||
<el-form :model="form" label-position="left" label-width="60%">
|
||
<el-form-item label="设备名称">
|
||
<el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="打印机品牌">
|
||
<el-input v-model="form.contentType" placeholder="请输入打印机品牌"></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item label="设备尺寸">
|
||
<el-select v-model="form.receiptSize">
|
||
<el-option label="58mm" value="58mm"></el-option>
|
||
<el-option label="80mm" value="80mm"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备类型">
|
||
<el-select v-model="form.connectionType">
|
||
<el-option label="USB" value="USB"></el-option>
|
||
<!-- <el-option label="网络" value="network"></el-option> -->
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="选择设备">
|
||
<el-select v-model="form.address">
|
||
<el-option :label="item.name" :value="item.name" v-for="item in printList" :key="item.name"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="打印份数">
|
||
<el-select v-model="form.printQty">
|
||
<el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商品模式">
|
||
<el-select v-model="form.config.model">
|
||
<el-option label="普通出单" value="normal"></el-option>
|
||
<el-option label="分类出单" value="category"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="打印子订单">
|
||
<el-select v-model="form.config.printSub">
|
||
<el-option label="是" :value="0"></el-option>
|
||
<el-option label="否" :value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="自动切刀">
|
||
<el-select v-model="form.config.autoCut">
|
||
<el-option label="是" :value="1"></el-option>
|
||
<el-option label="否" :value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="尾部留空">
|
||
<el-select v-model="form.config.feet">
|
||
<el-option :label="`${item}行`" :value="`${item}`" v-for="item in feets" :key="item"></el-option>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</div>
|
||
<div class="menu_wrap">
|
||
<div class="print_view">
|
||
<div class="title t1">{{ printData.shop_name }}</div>
|
||
<div class="title t2">
|
||
预结算单 <span style="margin-left: 6px;">#{{ printData.orderInfo.orderNum }}</span>
|
||
</div>
|
||
<div class="title t2" style="margin-bottom: 20px;">
|
||
桌号：无
|
||
</div>
|
||
<div class="row">订单号：{{ printData.orderInfo.orderNo }}</div>
|
||
<div class="row">交易时间：{{ printData.createdAt }}</div>
|
||
<div class="row">收银员：{{ printData.loginAccount }}</div>
|
||
<div class="line"></div>
|
||
<table class="table">
|
||
<tr>
|
||
<td>品名</td>
|
||
<td>单价</td>
|
||
<td>数量</td>
|
||
<td>小计</td>
|
||
</tr>
|
||
<tr v-for="(item, index) in printData.carts" :key="index">
|
||
<td>
|
||
<div>{{ item.name }}</div>
|
||
<div class="sku">{{ item.skuName }}</div>
|
||
</td>
|
||
<td>{{ item.salePrice }}</td>
|
||
<td>{{ item.number }}</td>
|
||
<td>{{ item.totalAmount }}</td>
|
||
</tr>
|
||
</table>
|
||
<div class="line"></div>
|
||
<div class="row between">
|
||
<span>原价：</span>
|
||
<span>{{ printData.originAmount }}</span>
|
||
</div>
|
||
<div class="row between">
|
||
<span>折扣：</span>
|
||
<span>-0.00</span>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="row between" style="font-size: 24px;">
|
||
<span>实付：</span>
|
||
<span>￥{{ printData.amount }}</span>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="row" style="font-weight: bold;">备注：{{ printData.remark }}</div>
|
||
<div class="row" style="font-size: 14px;">打印时间：{{ printData.printTime }}</div>
|
||
</div>
|
||
<div class="btn_wrap">
|
||
<div class="btn">
|
||
<el-button plain style="width: 100%" :loading="printDataLoading" @click="printHandle">
|
||
打印测试小票
|
||
</el-button>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dayjs from "dayjs";
|
||
import { ipcRenderer } from "electron";
|
||
import { onMounted, reactive, ref } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { ElMessage } from "element-plus";
|
||
import { useUser } from "@/store/user.js";
|
||
import { usePrint } from "@/store/print.js";
|
||
import { printerAdd, printerDetail } from "@/api/account.js";
|
||
|
||
const printStore = usePrint();
|
||
const store = useUser();
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const printList = ref([]);
|
||
const feets = ref([0, 1, 2, 3, 4, 5, 8]);
|
||
const loading = ref(false);
|
||
const requestLoading = ref(false);
|
||
const form = ref({
|
||
id: "",
|
||
name: '', // 设备名称
|
||
connectionType: 'USB', // 现在打印机支持USB 和 网络、蓝牙
|
||
address: '', // 打印机名称
|
||
port: '', // 端口
|
||
subType: 'cash', // 打印类型（分类）label标签cash小票kitchen出品
|
||
contentType: '', // 打印机品牌
|
||
categoryIds: [], // 打印分类Id
|
||
categoryList: [], // 分类
|
||
sort: '',
|
||
receiptSize: '58mm', // 小票尺寸 58mm 80mm
|
||
classifyPrint: 1, // 分类打印 0-所有 1-部分分类 2-部分商品
|
||
printQty: '', // 打印数量 c1m1^2 = 顾客+商家[2张] m1^1 = 商家[1张] c1^1顾客[1张] c2m1^3顾客2+商家1[3张]
|
||
printMethod: 'all', // 打印方式 all-全部打印 normal-仅打印结账单「前台」one-仅打印制作单「厨房」queue-仅打印排队取号
|
||
printType: [], // 打印类型，JSON数组 refund-确认退款单 handover-交班单 queue-排队取号
|
||
status: 1
|
||
});
|
||
|
||
const printDataLoading = ref(false);
|
||
const printData = reactive({
|
||
shop_name: '',
|
||
loginAccount: '',
|
||
isBefore: true,
|
||
carts: [
|
||
{
|
||
id: 1,
|
||
name: "【测试勿管】娃哈哈矿泉水",
|
||
skuName: "500ml",
|
||
salePrice: "1.0",
|
||
number: "10",
|
||
totalAmount: "10",
|
||
},
|
||
],
|
||
amount: "10.00",
|
||
originAmount: '10.00',
|
||
discountAmount: "0.00",
|
||
discount: 0,
|
||
remark: "给我多放点辣椒，谢谢老板",
|
||
orderInfo: {
|
||
masterId: "",
|
||
orderNo: "202404021023542223445",
|
||
orderNum: '12'
|
||
},
|
||
deviceName: "",
|
||
createdAt: "2024-04-02 10:15",
|
||
printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||
});
|
||
|
||
// 获取打印机列表
|
||
function getPrintList() {
|
||
ipcRenderer.send("getPrintList");
|
||
ipcRenderer.on("printList", (event, arg) => {
|
||
printList.value = arg;
|
||
});
|
||
}
|
||
|
||
// 测试打印
|
||
function printHandle() {
|
||
if (!form.value.address) {
|
||
ElMessage.error("请选择打印设备");
|
||
return;
|
||
}
|
||
printDataLoading.value = true;
|
||
printData.shop_name = store.shopInfo.shopName
|
||
printData.loginAccount = store.userInfo.name
|
||
printData.deviceName = form.value.address;
|
||
printData.printTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||
printStore.pushReceiptData(printData, false);
|
||
setTimeout(() => {
|
||
printDataLoading.value = false;
|
||
}, 2500);
|
||
}
|
||
|
||
// 提交打印机
|
||
async function submitHandle() {
|
||
try {
|
||
if (!form.value.name) {
|
||
ElMessage.error("请输入设备名称");
|
||
return;
|
||
}
|
||
if (!form.value.address) {
|
||
ElMessage.error("请选择打印设备");
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
await printerAdd(form.value, form.value.id ? "put" : "post");
|
||
ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
|
||
printStore.init();
|
||
router.back();
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
loading.value = false;
|
||
}
|
||
|
||
// 查询打印机详情
|
||
async function tbPrintMachineDetailAjax(id) {
|
||
try {
|
||
requestLoading.value = true;
|
||
const res = await printerDetail({ id: id });
|
||
form.value = res;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
requestLoading.value = false;
|
||
}
|
||
|
||
onMounted(() => {
|
||
printData.shop_name = store.shopInfo.shopName
|
||
printData.loginAccount = store.userInfo.name
|
||
|
||
getPrintList();
|
||
if (route.query.id) {
|
||
tbPrintMachineDetailAjax(route.query.id);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.device_container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
padding: 15px;
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
.header {
|
||
height: 50px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.d_content {
|
||
padding-top: 15px;
|
||
display: flex;
|
||
height: calc(100vh - 15px * 2 - 50px);
|
||
|
||
.d_list {
|
||
flex: 2;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
padding: 15px;
|
||
}
|
||
|
||
.menu_wrap {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
display: flex;
|
||
margin-left: 15px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: 0 15px;
|
||
|
||
.btn_wrap {
|
||
display: flex;
|
||
gap: var(--el-font-size-base);
|
||
padding: var(--el-font-size-base) 0;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.print_view {
|
||
flex: 1;
|
||
padding: 20px 0;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 4px;
|
||
|
||
&.t1 {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
.row {
|
||
margin-top: 2px;
|
||
|
||
&.between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
|
||
.line {
|
||
margin: 10px 0;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
|
||
tr {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
td {
|
||
flex: 1;
|
||
|
||
&:nth-child(1) {
|
||
flex: 2;
|
||
}
|
||
|
||
&:not(:first-child) {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.sku {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|