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

35
src/views/home/components/cartItem.vue
View File

@@ -9,7 +9,8 @@
￥{{ formatDecimal(+props.item.discount_sale_amount, 2, true) }}
</span>
<span class="dis" v-else>
￥{{ formatDecimal(+props.item.lowPrice, 2, true) }}
￥{{ formatDecimal(goodsStore.showVipPrice ? +props.item.memberPrice : +props.item.lowPrice, 2,
true) }}
</span>
<span v-if="props.item.discount_sale_amount">
￥0.00
@@ -25,15 +26,25 @@
<div class="price" v-else>
<template v-if="+props.item.discount_sale_amount">
<span class="dis">
￥{{ formatDecimal(props.item.lowPrice, 2, true) }}
￥{{ formatDecimal(goodsStore.showVipPrice ? +props.item.memberPrice : +props.item.lowPrice,
2, true) }}
</span>
<span>
￥{{ formatDecimal(+props.item.discount_sale_amount, 2, true) }}
</span>
</template>
<span v-else>
￥{{ formatDecimal(+props.item.lowPrice, 2, true) }}
</span>
<div class="flex" v-else>
<template v-if="goodsStore.showVipPrice">
<span class="dis">
￥{{ formatDecimal(+props.item.lowPrice, 2, true) }}
</span>
</template>
<span>
￥{{ formatDecimal(goodsStore.showVipPrice ? +props.item.memberPrice : +props.item.lowPrice,
2,
true) }}
</span>
</div>
</div>
</template>
</div>
@@ -121,9 +132,7 @@ function selectCartItemHandle() {
}
&.border {
&:not(:last-child) {
border-bottom: 1px solid #ececec;
}
border-bottom: 1px solid #ececec;
}
.name_wrap {
@@ -137,6 +146,16 @@ function selectCartItemHandle() {
text-decoration: line-through;
margin-right: 4px;
}
.flex {
display: flex;
align-items: center;
}
.vip {
color: var(--el-color-danger);
margin-left: 4px;
}
}
.sku_list {

30
src/views/home/components/cartOperation.vue
View File

@@ -31,7 +31,7 @@
<el-text class="t">规格</el-text>
</div>
<div class="item"
:class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary }"
:class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary || goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
@click="showDiscountModalHandle">
<el-icon class="icon">
<PriceTag />
@@ -96,13 +96,12 @@
<el-form ref="discountFormRef" :model="discountForm" :rules="discountFormRules" label-width="100px"
label-position="left">
<el-form-item label="价格更改" prop="discount_sale_amount">
<el-input v-model="discountForm.discount_sale_amount" placeholder="减8.88元请输入8.88"
@input="priceInput">
<el-input v-model="discountForm.discount_sale_amount" placeholder="请输入改价金额" @input="priceInput">
<template #append>元</template>
</el-input>
</el-form-item>
<el-form-item label="更改原因">
<el-input v-model="discountForm.note" type="textarea" placeholder="请输入自定义备注" />
<el-input v-model="discountForm.note" type="textarea" placeholder="请输入更改原因" />
<div class="remark_list">
<div class="item" v-for="item in noteList" :key="item" @click="addNote(item)">
{{ item }}
@@ -267,7 +266,7 @@ function skuConfirm(e) {
}
}
/**单品打折 start */
/**单品改价 start */
const showDiscountModal = ref(false)
const resetDiscountForm = ref({})
const discountFormRef = ref(null)
@@ -278,10 +277,17 @@ const discountForm = ref({
})
function validateAmount(rule, value, callback) {
let item = goodsStore.cartList[goodsStore.cartActiveIndex]
let lowPrice = 0
if (goodsStore.showVipPrice) {
lowPrice = +item.memberPrice
} else {
lowPrice = +item.discount_sale_amount || +item.lowPrice
}
if (value == '') {
callback(new Error('请输入折扣价格'))
} else if (value <= 0) {
callback(new Error('输入价格有误'))
} else if (value <= 0 || value >= lowPrice) {
callback(new Error(`输入大于0小于${lowPrice}的数字`))
} else {
callback()
}
@@ -304,10 +310,10 @@ const noteList = ref([
// 显示
function showDiscountModalHandle() {
if (goodsStore.cartList[goodsStore.cartActiveIndex].id && !goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary) {
// 存在商品并且不能为临时菜
showDiscountModal.value = true
}
let item = goodsStore.cartList[goodsStore.cartActiveIndex]
if ((item && !item.id) || item.is_temporary || item.is_gift) return
// 存在商品并且不能为临时菜
showDiscountModal.value = true
}
// 过滤价格输入
@@ -341,7 +347,7 @@ function discountFormSubmit() {
goodsStore.operateCart({
...goodsStore.cartList[goodsStore.cartActiveIndex],
discount_sale_amount: goodsStore.cartList[goodsStore.cartActiveIndex].lowPrice - discountForm.value.discount_sale_amount,
discount_sale_amount: discountForm.value.discount_sale_amount,
discount_sale_note: discountForm.value.note
}, 'edit')

20
src/views/home/components/goods.vue
View File

@@ -77,7 +77,15 @@
<div class="name"><el-text line-clamp="1">{{ item.name }}</el-text></div>
<div class="item_empty" v-if="shopListType == 'text'"></div>
<div class="price">
<el-text>￥{{ item.lowPrice }}</el-text>
<div class="price_warp">
<template v-if="!goodsStore.showVipPrice">
<el-text>￥{{ item.skuList[0].salePrice }}</el-text>
</template>
<template v-else>
<el-text tag="del" class="del" size="small">￥{{ item.skuList[0].salePrice }}</el-text>
<el-text>￥{{ item.skuList[0].memberPrice }}</el-text>
</template>
</div>
<div class="show_more_btn" v-if="showEditor">
<el-icon>
<MoreFilled />
@@ -1020,6 +1028,16 @@ defineExpose({
padding: 6px 10px;
background-color: var(--primary-color);
position: relative;
.price_warp {
display: flex;
align-items: center;
.del {
color: #fff;
position: relative;
top: 2px;
margin-right: 4px;
}
}
span {
color: #fff;

60
src/views/home/components/settleAccount.vue
View File

@@ -9,25 +9,25 @@
<ArrowLeftBold />
</el-icon>
</div>
<!-- <div class="info">
<div class="info">
<div class="master_id">
<span>{{ props.masterId }}</span>
<span class="member_info" v-if="global.orderMemberInfo.telephone">
会员：{{ global.orderMemberInfo.telephone }}
<span>{{ goodsStore.orderListInfo.tableCode }}</span>
<span class="member_info" v-if="goodsStore.vipUserInfo.id">
会员：{{ formatPhoneNumber(goodsStore.vipUserInfo.phone) }}
</span>
</div>
<div class="btm">
<span class="p">服务员：{{ store.userInfo.loginAccount || "暂无" }}</span>
<span class="t">{{
<span class="p">服务员：{{ store.userInfo.name || "暂无" }}</span>
<!-- <span class="t">{{
props.orderInfo.createdAt &&
dayjs(props.orderInfo.createdAt).format("MM-DD HH:mm")
}}</span>
}}</span> -->
</div>
</div> -->
</div>
</div>
<div class="list_wrap card" style="margin-top: var(--el-font-size-base)">
<SettleItem :list="cartList" />
<SettleItem :list="goodsStore.orderList.map(item => item.goods).flat()" />
<SettleItem :list="orderList" />
</div>
<div class="footer">
<!-- <el-button icon="Edit"></el-button> -->
@@ -43,8 +43,8 @@
</div>
</div>
<div class="pay_wrap">
<payCard :amount="goodsStore.orderListInfo.orderAmount" :discount="propsDiscount"
:orderId="goodsStore.orderListInfo.id" @paySuccess="paySuccess" @cancelDiscount="propsDiscount = 0" />
<payCard :amount="cartInfo.totalAmount" :discount="propsDiscount" :orderId="goodsStore.orderListInfo.id"
@paySuccess="paySuccess" @cancelDiscount="propsDiscount = 0" />
</div>
</div>
<el-dialog v-model="showStaffDiscount" title="员工折扣" @close="global.updateData(true)">
@@ -56,6 +56,13 @@
<div class="tips">最低折扣比例：{{ staffDiscount }}</div>
</div>
</el-form-item>
<el-form-item label="优惠金额">
<div>
<el-input-number v-model="discount" :min="staffDiscount" :max="0.99" :step="0.1"
:disabled="staffDiscount == 0" />
<div class="tips">最低折扣比例：{{ staffDiscount }}</div>
</div>
</el-form-item>
</el-form>
<div class="footer_wrap">
<div class="btn">
@@ -77,11 +84,12 @@ import payCard from "@/components/payCard/payCard.vue";
import SettleItem from './settleItem.vue'
import { print } from "@/api/pay";
import { orderfindOrder, getStaffDiscount } from '@/api/order/index.js'
import { shopStaffInfo } from '@/api/account.js'
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import useStorage from '@/utils/useStorage'
import { ipcRenderer } from "electron";
import { formatDecimal } from '@/utils/index.js'
import { formatDecimal, formatPhoneNumber } from '@/utils/index.js'
import receiptPrint from "@/components/lodop/receiptPrint.js";
import { useGlobal } from '@/store/global.js'
import { usePrint } from '@/store/print.js'
@@ -98,10 +106,11 @@ const store = useUser();
const emit = defineEmits("paySuccess");
const printLoading = ref(false);
const cartInfo = ref('')
const printLoading = ref(false);
const showStaffDiscount = ref(false)
const staffDiscount = ref(0)
const staffDiscount = ref('')
const discount = ref(0)
const propsDiscount = ref(0)
@@ -130,6 +139,7 @@ const props = defineProps({
});
const cartList = ref([])
const orderList = ref([])
const isPrint = ref(true);
const discountLoading = ref(false)
@@ -137,7 +147,7 @@ const discountLoading = ref(false)
async function showStaffDiscountHandle() {
try {
discountLoading.value = true
await staffPermission('yun_xu_da_zhe')
// await staffPermission('yun_xu_da_zhe')
await getStaffDiscountAjax()
discountLoading.value = false
if (staffDiscount.value <= 0) {
@@ -145,7 +155,7 @@ async function showStaffDiscountHandle() {
} else {
showStaffDiscount.value = true
discountLoading.value = false
global.updateData(false)
// global.updateData(false)
}
} catch (error) {
discountLoading.value = false
@@ -156,12 +166,13 @@ async function showStaffDiscountHandle() {
// 获取员工折扣
async function getStaffDiscountAjax() {
try {
const res = await getStaffDiscount({
orderId: props.orderInfo.id,
staffId: store.userInfo.staffId
})
staffDiscount.value = res
discount.value = res
const res = await shopStaffInfo()
if (res.data) {
staffDiscount.value = res
discount.value = res
} else {
Promise.reject()
}
} catch (error) {
console.log(error);
}
@@ -284,12 +295,17 @@ async function printOrderLable() {
function paySuccess() {
propsDiscount.value = 0
dialogVisible.value = false;
ElMessage.success('支付成功')
goodsStore.successClearCart()
// printOrderLable()
// emit("paySuccess");
}
function show(t) {
dialogVisible.value = true;
cartInfo.value = { ...goodsStore.cartInfo }
orderList.value = [...goodsStore.orderList.map(item => item.goods).flat()]
if (t = 1) cartList.value = [...goodsStore.cartList];
}

6
src/views/home/components/settleItem.vue
View File

@@ -50,9 +50,9 @@
<div class="p">
<span>
-￥<template v-if="item.is_temporary || +item.discount_sale_amount">
{{ formatDecimal(+item.discount_sale_amount) }}
{{ formatDecimal(item.discount_sale_amount * item.number) }}
</template>
<template v-else>{{ formatDecimal(+item.lowPrice) }}</template>
<template v-else>{{ formatDecimal(item.lowPrice * item.number) }}</template>
</span>
</div>
</div>
@@ -63,7 +63,7 @@
<div class="n"></div>
<div class="p">
<span>
-￥{{ formatDecimal(item.lowPrice - item.discount_sale_amount) }}
-￥{{ formatDecimal((item.lowPrice - item.discount_sale_amount) * item.number) }}
</span>
</div>
</div>

114
src/views/home/index.vue
View File

@@ -9,19 +9,41 @@
<el-text class="t">({{ pendingCartNum }})</el-text>
</div>
<div class="number" @click="SelectVipUserRef.show()">
<el-icon class="icon">
<UserFilled />
</el-icon>
<el-text class="t">选择会员</el-text>
<div class="left">
<el-icon class="icon">
<UserFilled />
</el-icon>
<template v-if="!goodsStore.vipUserInfo.id">
<el-text class="t">选择会员</el-text>
</template>
<template v-else>
<div class="user_info" @click="goodsStore.vipUserInfo = ''">
<!-- <el-text class="n">{{ goodsStore.vipUserInfo.nickName }}</el-text> -->
<el-text class="p">{{ formatPhoneNumber(goodsStore.vipUserInfo.phone) }}</el-text>
</div>
</template>
</div>
<div class="icon_wrap">
<div class="u_icon" v-if="!goodsStore.vipUserInfo.id">
<el-icon class="i">
<ArrowRight />
</el-icon>
</div>
<div class="u_icon" v-else @click.stop="clearVipUserHandle">
<el-icon class="i">
<Close />
</el-icon>
</div>
</div>
</div>
<div class="select_user" @click="quickCashHandle">
<!-- <div class="select_user" @click="quickCashHandle">
<div class="left">
<el-icon class="icon" style="color: var(--el-color-warning);">
<WalletFilled />
</el-icon>
<el-text class="t">快捷收银</el-text>
</div>
</div>
</div> -->
<!-- <div class="select_user">
<div class="left">
<el-icon class="icon">
@@ -62,7 +84,10 @@
<el-empty description="请选择商品" />
</div>
<div class="order_list_wrap">
<div class="order_title" v-if="goodsStore.orderList.length">历史下单</div>
<div class="order_title" :class="{ border: !goodsStore.cartList.length }"
v-if="goodsStore.orderList.length">
历史下单
</div>
<div class="order_list_item" v-for="(arr, index) in goodsStore.orderList" :key="index">
<div class="order_num">{{ `第${arr.orderNum}次下单` }}</div>
<CartItem type="order" :border="false" :item="item" :index="index" :i="i" :key="item.id"
@@ -105,18 +130,14 @@
<div class="btn" v-if="store.shopInfo.registerType == 'after'">
<el-button type="primary" style="width: 100%;" :disabled="!goodsStore.cartList.length"
v-loading="createOrderLoading" @click="createOrderHandle(0)">
<template v-if="!createOrderLoading">
仅下单</template>
<template v-else>下单中...</template>
仅下单
</el-button>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;"
:disabled="!goodsStore.cartList.length && !goodsStore.orderList.length" v-loading="createOrderLoading"
@click="createOrderHandle(1)">
<template v-if="!createOrderLoading">
去结算</template>
<template v-else>下单中...</template>
去结算
</el-button>
</div>
</div>
@@ -171,7 +192,7 @@ import pendingCartModal from "@/views/home/components/pendingCartModal.vue";
import tableMerging from '@/views/home/components/tableMerging.vue'
import CartItem from './components/cartItem.vue'
import useStorage from '@/utils/useStorage'
import { formatDecimal } from '@/utils/index.js'
import { formatDecimal, formatPhoneNumber } from '@/utils/index.js'
import { useGoods } from '@/store/goods.js'
import { queryShopInfo, staffPermission } from '@/api/user.js'
@@ -253,13 +274,12 @@ async function createOrderHandle(t = 0) {
if (t == 1) {
settleAccountRef.value.show(t)
} else {
goodsStore.historyOrderAjax(res.tableCode)
}
// 订单已生成，清除购物车
goodsStore.clearCart()
// 清除购物车，更新历史订单
goodsStore.updateOrderList()
} else {
goodsStore.calcCartInfo()
settleAccountRef.value.show(t)
}
} catch (error) {
@@ -320,6 +340,13 @@ function showTableMerging() {
let data = cartList.value.filter(item => item.placeNum)
tableMergingRef.value.show(data)
}
// 清除会员与会员价
function clearVipUserHandle() {
goodsStore.vipUserInfo = ''
goodsStore.showVipPrice = false
goodsStore.calcCartInfo()
}
</script>
<style scoped lang="scss">
@@ -336,7 +363,10 @@ function showTableMerging() {
font-size: 14px;
color: #999;
padding: 10px 0;
border-top: 1px solid #ececec;
&.border {
border-top: 1px solid #ececec;
}
}
.order_num {
@@ -383,8 +413,31 @@ function showTableMerging() {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
background-color: var(--el-color-info-light-7);
padding: 0 10px;
.left {
display: flex;
align-items: center;
}
.icon_wrap {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
.u_icon {
font-size: 20px;
color: #999;
.i {
display: flex;
}
}
}
.icon {
color: var(--el-color-primary);
@@ -395,6 +448,27 @@ function showTableMerging() {
font-size: var(--el-font-size-base);
margin-left: 4px;
}
.user_info {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
.n {
width: 100%;
flex: 1;
font-size: 14px;
}
.p {
width: 83px;
flex: 1;
color: #999;
font-size: 14px;
}
}
}
.select_user {

11
src/views/login.vue
View File

@@ -21,8 +21,11 @@
<el-radio-button label="员工" :value="1"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
<el-form-item label="商户号" prop="username">
<el-input v-model="form.username" placeholder="请输入商户号"></el-input>
</el-form-item>
<el-form-item label="用户号" prop="username" v-if="form.loginType == 1">
<el-input v-model="form.staffUserName" placeholder="请输入用户号"></el-input>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" :type="passwordType" placeholder="请输入登录密码">
@@ -104,10 +107,11 @@ const codeUrlLoading = ref(false)
const form = reactive({
username: "18888888888",
staffUserName: '18821670757',
password: "123456",
code: "",
uuid: "",
loginType: 0, // 0: 商户 1: 员工
loginType: 1, // 0: 商户 1: 员工
});
const rules = reactive({
@@ -256,7 +260,6 @@ onMounted(() => {
}
.version {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;

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>