czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增增加打印机

Browse Source
This commit is contained in:
gyq
2024-04-03 15:57:58 +08:00
parent da00851195
commit 07d7df0416
19 changed files with 1562 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
src/views/device/add.vue Normal file
View 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>

8
src/views/device/icons.js Normal file
View File

@@ -0,0 +1,8 @@
import icon_dev1 from '@/assets/icon_dev1.png'
import icon_dev2 from '@/assets/icon_dev2.png'
import icon_dev3 from '@/assets/icon_dev3.png'
export default {
cash: icon_dev2,
label: icon_dev1,
kitchen: icon_dev3
}

344
src/views/device/index.vue Normal file
View File

@@ -0,0 +1,344 @@
<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>设备管理</el-text>
</div>
<div class="d_content">
<div class="d_list">
<div class="row_title">打印设备</div>
<div class="row_list">
<div class="item" v-for="item in list" :key="item.id">
<div class="left">
<div class="icon">
<el-image
:src="icons[item.subType]"
style="width: 40px; height: 40px"
></el-image>
</div>
<div class="info">
<div class="name">{{ item.name }}</div>
<div class="xh">{{ item.config.deviceName }}</div>
</div>
</div>
<div class="right">
<div class="switch">
<el-switch
v-model="item.status"
inline-prompt
active-text="开"
inactive-text="关"
:active-value="0"
:inactive-value="1"
width="90"
@change="statusChange($event, item)"
/>
</div>
<div class="editor">
<el-text
type="primary"
@click="
router.push({ name: 'add_device', query: { id: item.id } })
"
>
编辑
</el-text>
<el-text type="primary" @click="showDelete(item)">删除</el-text>
</div>
</div>
</div>
</div>
<!-- <div class="row_title">云打印设备</div>
<div class="row_list">
<div class="item" v-for="item in list" :key="item.id">
<div class="left">
<div class="icon"></div>
<div class="info">
<div class="name">{{ item.name }}</div>
<div class="xh">{{ item.xh }}</div>
</div>
</div>
<div class="right">
<div class="switch">
<el-switch
v-model="item.state"
inline-prompt
active-text="开"
inactive-text="关"
:active-value="1"
:inactive-value="0"
width="90"
/>
</div>
<div class="editor">
<el-text type="primary">编辑</el-text>
<el-text type="primary">删除</el-text>
</div>
</div>
</div>
</div> -->
</div>
<div class="menu_wrap">
<div
class="row"
@click="router.push({ name: 'add_device', query: { type: 1 } })"
>
<div class="icon" style="background-color: var(--primary-color)">
<el-image
:src="icons.cash"
style="width: 36px; height: 36px"
></el-image>
</div>
<div class="info">
<div class="name">添加小票打印机</div>
<div class="intro">用来打印客户（收银）小票的打印机。</div>
</div>
</div>
<div class="row">
<div class="icon" style="background-color: #79c3d5">
<el-image
:src="icons.label"
style="width: 38px; height: 38px"
></el-image>
</div>
<div class="info">
<div class="name">添加标签打印机</div>
<div class="intro">用来打印商品标签的打印机。</div>
</div>
</div>
<div class="row">
<div class="icon" style="background-color: #8fc783">
<el-image
:src="icons.kitchen"
style="width: 44px; height: 44px"
></el-image>
</div>
<div class="info">
<div class="name">添加出品打印机</div>
<div class="intro">用来打印商品至厨房或出品台的打印机。</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog v-model="dialogVisible" title="注意" width="500">
<span class="dialog_content">确定删除该打印机吗？</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button
type="primary"
:loading="delLoading"
@click="tbPrintMachineDeleteAjax"
>
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import {
tbPrintMachineGet,
tbPrintMachineDelete,
tbPrintMachinePost,
} from "@/api/device";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useUser } from "@/store/user.js";
import { ElMessage } from "element-plus";
import icons from "./icons";
const store = useUser();
const router = useRouter();
const list = ref([]);
const dialogVisible = ref(false);
const deleteId = ref("");
const delLoading = ref(false);
async function statusChange(e, item) {
console.log(e, item);
try {
await tbPrintMachinePost(item, "put");
tbPrintMachineGetAjax();
} catch (error) {
console.log(error);
}
}
// 显示删除打印机弹窗
function showDelete(item) {
deleteId.value = item.id;
dialogVisible.value = true;
}
// 删除打印机
async function tbPrintMachineDeleteAjax() {
try {
delLoading.value = true;
await tbPrintMachineDelete({ id: deleteId.value });
delLoading.value = false;
dialogVisible.value = false;
ElMessage.success("删除成功");
tbPrintMachineGetAjax();
} catch (error) {
console.log(error);
}
}
// 获取打印机列表
async function tbPrintMachineGetAjax() {
try {
const res = await tbPrintMachineGet({
shopId: store.userInfo.shopId,
page: 0,
pageSize: 100,
});
list.value = res.list;
} catch (error) {
console.log(error);
}
}
onMounted(() => {
tbPrintMachineGetAjax();
});
</script>
<style scoped lang="scss">
.dialog_content {
font-size: var(--el-font-size-base);
}
.dialog-footer {
padding: 0 var(--el-font-size-base) var(--el-font-size-base);
}
.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;
.row_title {
color: #555;
margin-bottom: 15px;
}
.row_list {
.item {
border-radius: 6px;
background-color: #f1f1f1;
margin-bottom: 10px;
padding: 15px;
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.info {
display: flex;
flex-direction: column;
padding-left: 15px;
.xh {
color: #999;
padding-top: 6px;
}
}
}
.right {
display: flex;
flex-direction: column;
align-items: center;
.editor {
display: flex;
gap: 20px;
}
}
}
}
}
.menu_wrap {
flex: 1.5;
margin-left: 15px;
background-color: #fff;
border-radius: 10px;
padding: 0 15px;
.row {
display: flex;
align-items: center;
padding: 20px 0;
&:not(:last-child) {
border-bottom: 1px solid #ececec;
}
.icon {
--size: 60px;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 15px;
.name {
font-size: 20px;
}
.intro {
color: #999;
padding-top: 8px;
}
}
}
}
}
</style>