优化打印机
This commit is contained in:
344
src/views/device/add_label.vue
Normal file
344
src/views/device/add_label.vue
Normal 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>{{ 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="商品分类">
|
||||
<div style="cursor: pointer" @click="classifyRef.show()">
|
||||
<span
|
||||
style="color: #409eff"
|
||||
v-for="item in form.config.categoryList"
|
||||
>
|
||||
{{ item.name }},
|
||||
</span>
|
||||
<span
|
||||
style="color: #e65d6e"
|
||||
v-if="!form.config.categoryList.length"
|
||||
>
|
||||
请选择分类
|
||||
</span>
|
||||
</div>
|
||||
</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 blod">#A9 #A9</div>
|
||||
<div class="row blod">
|
||||
<span>甜橙马黛茶</span>
|
||||
<span style="margin-left: 30px">1</span>
|
||||
</div>
|
||||
<div class="row blod">加奶、加珍珠</div>
|
||||
<div class="row blod" style="margin-top: 10px">
|
||||
<span>03-08 16:58</span>
|
||||
<span style="margin-left: 30px">￥28</span>
|
||||
</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>
|
||||
<classify
|
||||
ref="classifyRef"
|
||||
@success="(e) => (form.config.categoryList = e)"
|
||||
/>
|
||||
</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";
|
||||
import classify from "@/components/classify/index.vue";
|
||||
|
||||
const store = useUser();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const classifyRef = ref(null);
|
||||
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: "40", // 设备尺寸毫米mm
|
||||
printerNum: 1, //打印份数
|
||||
categoryList: [], // 商品分类
|
||||
model: "normal", // 出品模式,
|
||||
feet: "2",
|
||||
autoCut: 0,
|
||||
printSub: 1,
|
||||
},
|
||||
name: "标签打印机",
|
||||
subType: "label", // 打印类型
|
||||
status: 1,
|
||||
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;
|
||||
.blod {
|
||||
font-weight: 600;
|
||||
}
|
||||
.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>
|
||||
@@ -43,7 +43,10 @@
|
||||
<el-text
|
||||
type="primary"
|
||||
@click="
|
||||
router.push({ name: 'add_device', query: { id: item.id } })
|
||||
router.push({
|
||||
name: deviceRoute[item.subType],
|
||||
query: { id: item.id },
|
||||
})
|
||||
"
|
||||
>
|
||||
编辑
|
||||
@@ -84,10 +87,7 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="menu_wrap">
|
||||
<div
|
||||
class="row"
|
||||
@click="router.push({ name: 'add_device', query: { type: 1 } })"
|
||||
>
|
||||
<div class="row" @click="router.push({ name: 'add_device' })">
|
||||
<div class="icon" style="background-color: var(--primary-color)">
|
||||
<el-image
|
||||
:src="icons.cash"
|
||||
@@ -99,7 +99,7 @@
|
||||
<div class="intro">用来打印客户（收银）小票的打印机。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" @click="router.push({ name: 'add_label' })">
|
||||
<div class="icon" style="background-color: #79c3d5">
|
||||
<el-image
|
||||
:src="icons.label"
|
||||
@@ -161,6 +161,11 @@ const list = ref([]);
|
||||
const dialogVisible = ref(false);
|
||||
const deleteId = ref("");
|
||||
const delLoading = ref(false);
|
||||
const deviceRoute = ref({
|
||||
cash: "add_device",
|
||||
label: "add_label",
|
||||
kitchen: "add_kitchen",
|
||||
});
|
||||
|
||||
async function statusChange(e, item) {
|
||||
console.log(e, item);
|
||||
|
||||
@@ -151,47 +151,47 @@ async function bySubTypeAjax() {
|
||||
}
|
||||
|
||||
async function printHandle() {
|
||||
// try {
|
||||
// if (!isPrint.value) return;
|
||||
// if (printList.value.length) {
|
||||
// const data = {
|
||||
// shop_name: store.userInfo.merchantName,
|
||||
// carts: props.cart,
|
||||
// amount: props.amount,
|
||||
// remark: props.remark,
|
||||
// orderInfo: props.orderInfo,
|
||||
// deviceName: printList.value[0].config.deviceName,
|
||||
// createdAt: dayjs(props.orderInfo.createdAt).format(
|
||||
// "YYYY-MM-DD HH:mm:ss"
|
||||
// ),
|
||||
// printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||||
// };
|
||||
// ipcRenderer.send("printerInfoSync", JSON.stringify(data));
|
||||
// } else {
|
||||
// ElMessage.error("您还没有添加打印设备");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
try {
|
||||
printLoading.value = true;
|
||||
await print({
|
||||
type: "normal",
|
||||
ispre: true,
|
||||
orderId: props.orderInfo.id,
|
||||
});
|
||||
printLoading.value = false;
|
||||
ElMessage.success("打印成功");
|
||||
if (!isPrint.value) return;
|
||||
if (printList.value.length) {
|
||||
const data = {
|
||||
shop_name: store.userInfo.merchantName,
|
||||
carts: props.cart,
|
||||
amount: props.amount,
|
||||
remark: props.remark,
|
||||
orderInfo: props.orderInfo,
|
||||
deviceName: printList.value[0].config.deviceName,
|
||||
createdAt: dayjs(props.orderInfo.createdAt).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
),
|
||||
printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||||
};
|
||||
ipcRenderer.send("printerInfoSync", JSON.stringify(data));
|
||||
} else {
|
||||
ElMessage.error("您还没有添加打印设备");
|
||||
}
|
||||
} catch (error) {
|
||||
printLoading.value = false;
|
||||
console.log(error);
|
||||
}
|
||||
// try {
|
||||
// printLoading.value = true;
|
||||
// await print({
|
||||
// type: "normal",
|
||||
// ispre: true,
|
||||
// orderId: props.orderInfo.id,
|
||||
// });
|
||||
// printLoading.value = false;
|
||||
// ElMessage.success("打印成功");
|
||||
// } catch (error) {
|
||||
// printLoading.value = false;
|
||||
// console.log(error);
|
||||
// }
|
||||
}
|
||||
|
||||
// 订单已支付
|
||||
function paySuccess() {
|
||||
dialogVisible.value = false;
|
||||
// printHandle();
|
||||
printHandle();
|
||||
emit("paySuccess");
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user