新增增加打印机
This commit is contained in:
364
src/views/device/add.vue
Normal file
364
src/views/device/add.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="device_container">
|
||||
<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-select v-model="form.config.width">
|
||||
<el-option label="58mm" value="58"></el-option>
|
||||
<el-option label="80mm" value="80"></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.config.deviceName">
|
||||
<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-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入设备名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印份数">
|
||||
<el-select v-model="form.config.printerNum">
|
||||
<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">溜溜</div>
|
||||
<div class="title t2">结算单【#002】</div>
|
||||
<div class="row">订单号:202404021023542223445</div>
|
||||
<div class="row">交易时间:2024-04-02 10:15</div>
|
||||
<div class="row">收银员:【POS-1】1</div>
|
||||
<div class="line"></div>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>品名</td>
|
||||
<td>单价</td>
|
||||
<td>数量</td>
|
||||
<td>小计</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div>娃哈哈矿泉水</div>
|
||||
<div class="sku">500ml</div>
|
||||
</td>
|
||||
<td>1.0</td>
|
||||
<td>10</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div>柠檬奶茶</div>
|
||||
<div class="sku">加冰、加珍珠</div>
|
||||
</td>
|
||||
<td>10.0</td>
|
||||
<td>2</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="line"></div>
|
||||
<div class="row between">
|
||||
<span>合计:</span>
|
||||
<span>30.00</span>
|
||||
</div>
|
||||
<div class="row between">
|
||||
<span>合计:</span>
|
||||
<span>30.00</span>
|
||||
</div>
|
||||
<div class="row between">
|
||||
<span>原价:20.00，节省了0</span>
|
||||
</div>
|
||||
<div class="row between">
|
||||
<span>积分:</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div class="row between">
|
||||
<span>余额:</span>
|
||||
<span>0.00</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="row">备注:</div>
|
||||
<div class="row">打印时间:2024-04-02 10:15</div>
|
||||
<div class="btn_wrap">
|
||||
<div class="btn">
|
||||
<el-button plain style="width: 100%" @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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ipcRenderer } from "electron";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { tbPrintMachinePost, tbPrintMachineDetail } from "@/api/device";
|
||||
import { useUser } from "@/store/user.js";
|
||||
import { Loading } from "element-plus/es/components/loading/src/service";
|
||||
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 form = ref({
|
||||
id: "",
|
||||
contentType: "",
|
||||
connectionType: "USB",
|
||||
config: {
|
||||
deviceName: "",
|
||||
width: "58", // 设备尺寸毫米mm
|
||||
printerNum: 1, //打印份数
|
||||
categoryList: [], // 商品分类
|
||||
model: "normal", // 出品模式,
|
||||
feet: "2",
|
||||
autoCut: 0,
|
||||
printSub: 1,
|
||||
},
|
||||
name: "小票打印机",
|
||||
subType: "cash", // 打印类型
|
||||
status: 0,
|
||||
sort: "",
|
||||
shopId: store.userInfo.shopId,
|
||||
});
|
||||
|
||||
// 获取打印机列表
|
||||
function getPrintList() {
|
||||
ipcRenderer.send("getPrintList");
|
||||
ipcRenderer.on("printList", (event, arg) => {
|
||||
printList.value = arg;
|
||||
});
|
||||
}
|
||||
|
||||
// 测试打印
|
||||
function printHandle() {
|
||||
if (!form.value.config.deviceName) {
|
||||
ElMessage.warning("请选择打印设备");
|
||||
return;
|
||||
}
|
||||
ipcRenderer.send(
|
||||
"printStart",
|
||||
JSON.stringify({ deviceName: form.value.config.deviceName })
|
||||
);
|
||||
}
|
||||
|
||||
// 提交打印机
|
||||
async function submitHandle() {
|
||||
try {
|
||||
if (!form.value.config.deviceName) {
|
||||
ElMessage.warning("请选择打印设备");
|
||||
return;
|
||||
}
|
||||
Loading.value = true;
|
||||
await tbPrintMachinePost(form.value, form.value.id ? "put" : "post");
|
||||
Loading.value = false;
|
||||
ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 查询打印机详情
|
||||
async function tbPrintMachineDetailAjax() {
|
||||
try {
|
||||
const res = await tbPrintMachineDetail(route.query.id);
|
||||
form.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
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.5;
|
||||
margin-left: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 15px;
|
||||
|
||||
.print_view {
|
||||
padding: 20px 0;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.t1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&.t2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-top: 2px;
|
||||
|
||||
&.between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_wrap {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user