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

对接订单打印小票

Browse Source
This commit is contained in:
gyq
2025-03-05 09:35:34 +08:00
parent 573dd88b24
commit db3fc1f6dc
22 changed files with 838 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/views/order/components/printDrawer.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<el-drawer v-model="showDrawer" direction="rtl" size="300px">
<template #header>
<h4>订单打印</h4>
</template>
<template #default>
<div class="prinr_wrap" v-loading="loading">
<div class="header center">{{ userStore.shopInfo.shopName }}</div>
<div class="row center">结算单：【{{ orderInfo.tableCode }}】</div>
<div class="row center">桌号：{{ orderInfo.tableName }}</div>
<div class="row" style="margin-top: 20px">
订单号：{{ orderInfo.orderNo }}
</div>
<div class="row">交易时间：{{ orderInfo.paidTime }}</div>
<div class="row">收银员：{{ userStore.userInfo.name }}</div>
<div class="line"></div>
<div class="row" style="margin-top: 10px">
<div class="table">
<div class="table_head">
<div class="item">品名</div>
<div class="item">单价</div>
<div class="item">数量</div>
<div class="item">小计</div>
</div>
<div class="table_content">
<div
class="table_row"
v-for="item in orderInfo.cartList"
:key="item.id"
>
<div v-if="item.productType == 'package'">
<div class="flex">
<div class="item">
{{ item.productName }}
</div>
<div class="item">
{{ formatDecimal(item.payAmount) }}
</div>
</div>
<div
class="flex"
v-for="val in item.proGroupInfo"
:key="val.proId"
>
<div class="item">>{{ val.proName }}</div>
<div class="item">0.00</div>
<div class="item">{{ val.number }}</div>
<div class="item">0.00</div>
</div>
</div>
<div class="flex" v-else>
<div class="item">
<div>{{ item.productName }}</div>
<div v-if="item.skuName">规格：{{ item.skuName }}</div>
</div>
<div class="item">{{ formatDecimal(item.price) }}</div>
<div class="item">{{ item.num }}</div>
<div class="item">{{ formatDecimal(item.payAmount) }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="row between">
<span>原价</span>
<span>{{ formatDecimal(+orderInfo.originAmount) }}</span>
</div>
<div class="row between">
<span>折扣</span>
<span>
{{ formatDecimal(orderInfo.originAmount - orderInfo.orderAmount) }}
</span>
</div>
<div class="line"></div>
<div class="row between blod">
<span>实付</span>
<span> ￥{{ formatDecimal(+orderInfo.payAmount) }} </span>
</div>
<div class="line"></div>
<div class="row">备注：{{ orderInfo.remark }}</div>
</div>
</template>
<template #footer>
<div class="drawer_footer">
<div class="btn">
<el-button
style="width: 100%"
:loading="printLoading"
@click="printHandle('label')"
>
打印标签
</el-button>
</div>
<div class="btn">
<el-button
type="primary"
style="width: 100%"
:loading="printLoading"
@click="printHandle('normal')"
>
打印小票
</el-button>
</div>
</div>
</template>
</el-drawer>
</template>
<script setup>
import { ref } from "vue";
import { usePrint } from "@/store/print.js";
import { useUser } from "@/store/user.js";
import { getOrderById } from "@/api/order.js";
import {
formatDecimal,
getOrderByIdAjax,
commOrderPrintData,
} from "@/utils/index.js";
import dayjs from "dayjs";
const userStore = useUser();
const printStore = usePrint();
const showDrawer = ref(false);
const orderInfo = ref({});
const loading = ref(false);
const printLoading = ref(false);
// 打印操作
function printHandle(type) {
printLoading.value = true;
switch (type) {
case "normal":
// 打印订单小票
printStore.pushReceiptData(commOrderPrintData(orderInfo.value));
break;
default:
break;
}
setTimeout(() => {
printLoading.value = false;
}, 1500);
}
async function show(row) {
try {
showDrawer.value = true;
loading.value = true;
orderInfo.value = await getOrderByIdAjax(row.id);
} catch (error) {
console.log(error);
}
loading.value = false;
}
defineExpose({
show,
});
</script>
<style scoped lang="scss">
.prinr_wrap {
padding-top: 20px;
padding-bottom: 50px;
color: #333;
.header {
font-size: 24px;
}
.center {
display: flex;
justify-content: center;
}
.line {
margin: 14px 0;
border-bottom: 1px dashed #666;
}
.blod {
font-size: 20px;
font-weight: bold;
}
.row {
margin-top: 4px;
font-size: 14px;
}
.between {
display: flex;
justify-content: space-between;
}
.table {
--itemWidth: 45px;
.flex {
display: flex;
margin-top: 2px;
}
.item {
&:nth-child(1) {
flex: 1;
}
&:nth-child(2) {
width: var(--itemWidth);
}
&:nth-child(3) {
width: var(--itemWidth);
}
&:nth-child(4) {
width: var(--itemWidth);
}
}
.table_head {
display: flex;
}
.table_row {
margin-top: 8px;
}
}
}
.drawer_footer {
display: flex;
gap: var(--el-font-size-base);
.btn {
flex: 1;
}
}
</style>

17
src/views/order/components/refundDrawer.vue
View File

@@ -44,7 +44,7 @@
<span>{{ scope.row.productName }}</span>
</div>
<div class="sku" v-if="scope.row.skuName">{{ scope.row.skuName }}</div>
<div class="sku">￥{{ formatDecimal(+scope.row.price) }}</div>
<div class="sku">￥{{ formatDecimal(+scope.row.payAmount) }}</div>
</div>
</div>
</template>
@@ -76,7 +76,7 @@
<template #footer>
<div class="drawer_footer">
<div class="btn">
<el-button style="width: 100%;" @click="refundHandle(true)">手动退款</el-button>
<el-button style="width: 100%;" @click="handleRefund">手动退款</el-button>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;" @click="refundHandle()">原路退回</el-button>
@@ -91,7 +91,7 @@ import { ref, onMounted } from 'vue'
import { useGlobal } from '@/store/global.js'
import { formatDecimal, inputFilterFloat } from "@/utils/index.js";
import { refundOrder } from '@/api/order.js'
import { ElNotification } from 'element-plus'
import { ElNotification, ElMessageBox } from 'element-plus'
const emits = defineEmits(['success'])
@@ -112,6 +112,15 @@ const remarkTagList = ref([
'服务态度不满意'
])
// 显示手动退款
function handleRefund() {
ElMessageBox.confirm('请线下手动转账给客户或现金，一旦操作完成无法修改订单状态，请慎重操作！', '注意', {
confirmButtonText: '已在线下完成退款'
}).then(() => {
refundHandle(true)
}).catch(() => { })
}
// 开始退款
async function refundHandle(cash = false) {
try {
@@ -200,7 +209,7 @@ function numberChange() {
function tabSelectChange(val) {
amount.value = 0
val.map(item => {
amount.value += item.refundNum * item.price
amount.value += item.refundNum * item.payAmount
})
}

194
src/views/order/index.vue
View File

@@ -1,12 +1,25 @@
<template>
<div class="container">
<div class="query_wrap">
<el-input v-model="queryForm.orderNo" placeholder="请输入订单编号" style="width: 240px;"></el-input>
<el-input
v-model="queryForm.orderNo"
placeholder="请输入订单编号"
style="width: 240px"
></el-input>
<!-- <el-input v-model="queryForm.productName" placeholder="请输入商品名称" style="width: 200px;"></el-input> -->
<el-select v-model="queryForm.status" placeholder="订单状态" style="width: 140px;" @change="queryFormHandle">
<el-select
v-model="queryForm.status"
placeholder="订单状态"
style="width: 140px"
@change="queryFormHandle"
>
<el-option label="全部" value=""></el-option>
<el-option :label="item.label" :value="item.type" v-for="item in globalStore.orderStatus"
:key="item.type"></el-option>
<el-option
:label="item.label"
:value="item.type"
v-for="item in globalStore.orderStatus"
:key="item.type"
></el-option>
</el-select>
<DateRange ref="DateRangeRef" @success="dateSucess" />
<div class="flex">
@@ -16,15 +29,33 @@
</div>
<div class="table_wrap">
<div class="table">
<el-table :data="tableData.list" v-loading="tableData.loading" border strip height="100%">
<el-table-column label="台桌" prop="tableName" width="80"></el-table-column>
<el-table
:data="tableData.list"
v-loading="tableData.loading"
border
strip
height="100%"
>
<el-table-column
label="台桌"
prop="tableName"
width="80"
></el-table-column>
<el-table-column label="订单信息" width="240">
<template v-slot="scope">
<div class="column">
<div class="row">订单号：{{ scope.row.orderNo }}</div>
<div class="row">订单类型：{{ filterLable('orderType', scope.row.orderType) }}</div>
<div class="row">平台类型：{{ filterLable('platformType', scope.row.platformType) }}</div>
<div class="row">用餐模式：{{ filterLable('dineMode', scope.row.dineMode) }}</div>
<div class="row">
订单类型：{{ filterLable("orderType", scope.row.orderType) }}
</div>
<div class="row">
平台类型：{{
filterLable("platformType", scope.row.platformType)
}}
</div>
<div class="row">
用餐模式：{{ filterLable("dineMode", scope.row.dineMode) }}
</div>
<div class="row">订单备注：{{ scope.row.remark }}</div>
</div>
</template>
@@ -32,12 +63,18 @@
<el-table-column label="支付信息" width="280">
<template v-slot="scope">
<div class="column">
<div class="row">支付类型：{{ filterLable('payType', scope.row.payType) }}</div>
<div class="row">
支付类型：{{ filterLable("payType", scope.row.payType) }}
</div>
<div class="row">支付单号：{{ scope.row.payOrderNo }}</div>
<div class="row">支付金额：￥{{ scope.row.payAmount }}</div>
<div class="row">支付时间：{{ scope.row.paidTime }}</div>
<div class="row">订单金额（含折扣）：￥{{ scope.row.orderAmount }}</div>
<div class="row">订单原金额（含折扣）：￥{{ scope.row.originAmount }}</div>
<div class="row">
订单金额（含折扣）：￥{{ scope.row.orderAmount }}
</div>
<div class="row">
订单原金额（含折扣）：￥{{ scope.row.originAmount }}
</div>
</div>
</template>
</el-table-column>
@@ -48,17 +85,31 @@
</el-table-column>
<el-table-column label="状态" width="100">
<template v-slot="scope">
{{ filterLable('orderStatus', scope.row.status) }}
{{ filterLable("orderStatus", scope.row.status) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<el-table-column
label="操作"
width="150"
align="center"
fixed="right"
>
<template v-slot="scope">
<div class="column">
<div class="row">
<el-button type="primary" @click="RefundDrawerRef.show(scope.row)">订单退款</el-button>
<el-button
type="primary"
@click="RefundDrawerRef.show(scope.row)"
>订单退款</el-button
>
</div>
<div class="row" style="margin-top: 10px;">
<el-button type="success">订单打印</el-button>
<div class="row" style="margin-top: 10px">
<el-button
type="success"
@click="PrintDrawerRef.show(scope.row)"
>
订单打印
</el-button>
</div>
</div>
</template>
@@ -66,104 +117,115 @@
</el-table>
</div>
<div class="pagination">
<el-pagination background v-model:current-page="queryForm.page" v-model:page-size="queryForm.size"
:page-sizes="[10, 30, 50, 100]" layout="sizes, pager, jumper, total" :total="tableData.total"
@size-change="orderListAjax" @current-change="orderListAjax"></el-pagination>
<el-pagination
background
v-model:current-page="queryForm.page"
v-model:page-size="queryForm.size"
:page-sizes="[10, 30, 50, 100]"
layout="sizes, pager, jumper, total"
:total="tableData.total"
@size-change="orderListAjax"
@current-change="orderListAjax"
></el-pagination>
</div>
</div>
</div>
<!-- 退款操作 -->
<RefundDrawer ref="RefundDrawerRef" @success="queryFormHandle" />
<!-- 打印操作 -->
<PrintDrawer ref="PrintDrawerRef" />
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { orderList } from '@/api/order.js'
import { useGlobal } from '@/store/global.js'
import DateRange from './components/dateRange.vue'
import RefundDrawer from './components/refundDrawer.vue'
import { onMounted, ref, reactive } from "vue";
import { orderList } from "@/api/order.js";
import { useGlobal } from "@/store/global.js";
import DateRange from "./components/dateRange.vue";
import RefundDrawer from "./components/refundDrawer.vue";
import PrintDrawer from "./components/printDrawer.vue";
const RefundDrawerRef = ref(null)
const DateRangeRef = ref(null)
const globalStore = useGlobal()
const RefundDrawerRef = ref(null);
const PrintDrawerRef = ref(null);
const DateRangeRef = ref(null);
const globalStore = useGlobal();
const queryForm = ref({
orderNo: '', // 订单编号
userId: '', // 用户Id
tableCode: '', // 台桌台桌编号
tableName: '', // 台桌名称
orderType: '', // 订单类型-cash收银-miniapp小程序-offline线下
platformType: '', // 平台类型
sendType: '', // 发货类型post快递，takeaway外卖,takeself,自提table---堂食
payType: '', // 支付类型
status: '', // 状态: unpaid-待支付;in-production 制作中;wait-out 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
orderNo: "", // 订单编号
userId: "", // 用户Id
tableCode: "", // 台桌台桌编号
tableName: "", // 台桌名称
orderType: "", // 订单类型-cash收银-miniapp小程序-offline线下
platformType: "", // 平台类型
sendType: "", // 发货类型post快递，takeaway外卖,takeself,自提table---堂食
payType: "", // 支付类型
status: "", // 状态: unpaid-待支付;in-production 制作中;wait-out 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
isDel: 0, // 是否回收站 0-否，1回收站 默认查未删除,
productName: '', // 查询包含该商品的 所有订单
startTime: '',
endTime: '',
productName: "", // 查询包含该商品的 所有订单
startTime: "",
endTime: "",
page: 1,
size: 10,
})
});
const resetQueryForm = ref('')
const resetQueryForm = ref("");
// 重置筛选条件
function resetHandle() {
queryForm.value = { ...resetQueryForm.value }
DateRangeRef.value.reset()
orderListAjax()
queryForm.value = { ...resetQueryForm.value };
DateRangeRef.value.reset();
orderListAjax();
}
function queryFormHandle() {
queryForm.value.page = 1
orderListAjax()
queryForm.value.page = 1;
orderListAjax();
}
const tableData = reactive({
total: 0,
loading: false,
list: []
})
list: [],
});
// 筛选类型
function filterLable(key, type) {
let item = globalStore[key].find(item => item.type == type)
let item = globalStore[key].find((item) => item.type == type);
if (item && item.type) {
return item.label
return item.label;
} else {
return type
return type;
}
}
// 获取订单列表
async function orderListAjax() {
try {
tableData.loading = true
const res = await orderList(queryForm.value)
tableData.list = []
tableData.list = res.records
tableData.total = +res.totalRow
tableData.loading = true;
const res = await orderList(queryForm.value);
tableData.list = [];
tableData.list = res.records;
tableData.total = +res.totalRow;
} catch (error) {
console.log(error);
}
tableData.loading = false
tableData.loading = false;
}
// 时间筛选
function dateSucess(e) {
queryForm.value.startTime = e[0]
queryForm.value.endTime = e[1]
queryFormHandle()
queryForm.value.startTime = e[0];
queryForm.value.endTime = e[1];
queryFormHandle();
}
// 精简订单商品名字
function goodsNameFilter(goods) {
return goods.map(item => item.productName).join('、')
return goods.map((item) => item.productName).join("、");
}
onMounted(() => {
resetQueryForm.value = { ...queryForm.value }
queryFormHandle()
})
resetQueryForm.value = { ...queryForm.value };
queryFormHandle();
});
</script>
<style scoped lang="scss">
@@ -211,4 +273,4 @@ onMounted(() => {
justify-content: flex-end;
padding-top: var(--el-font-size-base);
}
</style>
</style>