优化
This commit is contained in:
79
public/work_print.css
Normal file
79
public/work_print.css
Normal file
@@ -0,0 +1,79 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 8mm;
|
||||
}
|
||||
|
||||
.print_view {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.print_view .title {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.print_view .title.t1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.print_view .title.t2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.print_view .row {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.print_view .row.between {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.print_view .line {
|
||||
margin: 10px 0;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.print_view .table {
|
||||
width: 100%;
|
||||
}
|
||||
.print_view .table tr {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.print_view .table tr:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.print_view .table tr td {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.print_view .table tr td:nth-child(1) {
|
||||
-webkit-box-flex: 2;
|
||||
-ms-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
.print_view .table tr td:not(:first-child) {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.print_view .table tr td .sku {
|
||||
font-size: 10px;
|
||||
}
|
||||
97
public/work_print.html
Normal file
97
public/work_print.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!--
|
||||
~ Copyright (c) 2023. Author Hubert Formin <2399270194@qq.com>
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Print preview</title>
|
||||
<link rel="stylesheet" href="./work_print.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="print_view">
|
||||
<div class="title t1">{{data.shop_name}}</div>
|
||||
<div class="title t2">
|
||||
交班小票
|
||||
</div>
|
||||
<div class="row">
|
||||
交班时间:{{data.orderInfo && data.orderInfo.orderNo}}
|
||||
</div>
|
||||
<div class="row">收银员:【POS-1】1</div>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>品名</td>
|
||||
<td>单价</td>
|
||||
<td>数量</td>
|
||||
<td>小计</td>
|
||||
</tr>
|
||||
<tr v-for="item in data.carts" :key="item.id">
|
||||
<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="row between">
|
||||
<span>合计:</span>
|
||||
<span>{{data.amount}}</span>
|
||||
</div>
|
||||
<!-- <div class="row between">
|
||||
<span>合计:</span>
|
||||
<span>30.00</span>
|
||||
</div> -->
|
||||
<div class="row between">
|
||||
<span>原价:{{data.amount}},节省了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="row">备注:</div>
|
||||
<div class="row">打印时间:{{data.printTime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module">
|
||||
const { ipcRenderer } = require("electron");
|
||||
import {
|
||||
createApp,
|
||||
ref,
|
||||
onMounted,
|
||||
} from "../node_modules/vue/dist/vue.esm-browser.js";
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const data = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
ipcRenderer.on("getParams", (event, arg) => {
|
||||
data.value = JSON.parse(arg);
|
||||
console.log(data.value);
|
||||
|
||||
setTimeout(() => {
|
||||
ipcRenderer.send(
|
||||
"printStart",
|
||||
JSON.stringify({ deviceName: data.value.deviceName })
|
||||
);
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
data,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
71
public/work_print.scss
Normal file
71
public/work_print.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
padding: 0 8mm;
|
||||
}
|
||||
.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;
|
||||
font-size: 12px;
|
||||
|
||||
&.between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 10px 0;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
td {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
|
||||
&:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sku {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user