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

Merge branch 'prod' of https://newgitea.sxczgkj.cn/czg_team/cashier_desktop into test

Browse Source
This commit is contained in:
gyq
2026-04-03 15:36:16 +08:00
parent 78e88b8eb7 7e03547798
commit 8655757dd6
11 changed files with 811 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
dist-electron/main.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "vite-electron",
"private": true,
"version": "2.0.15",
"version": "2.0.21",
"main": "dist-electron/main.js",
"scripts": {
"dev": "chcp 65001 && vite",

111
src/components/payCard/payCard.vue
View File

@@ -48,6 +48,7 @@
<div class="input_wrap">
<div class="input" style="flex: 1">付款：￥{{ formatDecimal(goodsStore.cartInfo.costSummary.finalPayAmount
|| 0) }}</div>
<!-- <el-button type="warning" style="width: 80px;border-radius: 6px; height: 60px;" @click="applyRounding">抹零</el-button> -->
<el-button type="primary" style="width: 120px;border-radius: 6px; height: 60px;"
@click="showCouponHandle">添加优惠</el-button>
</div>
@@ -139,11 +140,25 @@
<el-button type="danger" @click="clearCouponUser">清除</el-button>
</div>
</el-form-item>
<el-form-item label="整单折扣">
<el-input v-model="couponForm.discountRatio" placeholder="请输入折扣" style="width: 180px;"
@input="discountInput">
<template #append>折</template>
</el-input>
<el-form-item label="优惠金额">
<div class="column">
<div>
<el-radio-group v-model="discountType" @change="clearDiscountChange">
<el-radio-button label="按金额优惠" :value="1"></el-radio-button>
<el-radio-button label="按折扣优惠" :value="2"></el-radio-button>
</el-radio-group>
</div>
<div>
<el-input v-model="couponForm.discountAmount" placeholder="请输入金额" style="width: 239px;"
@input="amountDiscountInput" v-if="discountType == 1">
<template #append>元</template>
</el-input>
<el-input v-model="couponForm.discountRatio" placeholder="请输入折扣" style="width: 239px;"
@input="discountInput" v-if="discountType == 2">
<template #append>折</template>
</el-input>
</div>
</div>
</el-form-item>
<el-form-item label="优惠券">
<div style="width: 100%;">
@@ -258,6 +273,7 @@ import { staffPermission } from "@/api/user.js";
import { cashPay, buyerPage, creditPay, vipPay } from "@/api/order.js";
import { calcUsablePoints } from '@/api/account.js'
import { useGoods } from "@/store/goods.js";
import { createOrder } from '@/api/order.js';
const emit = defineEmits(["paySuccess", 'orderExpired', 'reset']);
@@ -475,8 +491,44 @@ function upadatePayData() {
}
// 结算支付
async function confirmOrder() {
async function confirmOrder(t = 1) {
try {
// if (goodsStore.cartList.length >= 0) {
// // 如果购物还存在商品，先下单后进行支付操作
// const data = {
// orderId: goodsStore.orderListInfo.id || '', // 订单id
// shopId: store.shopInfo.id, // 店铺id
// seatNum: goodsStore.tableInfo.num || 0, // 用餐人数
// packFee: goodsStore.cartInfo.packFee, // 打包费
// originAmount: goodsStore.cartInfo.costSummary.goodsOriginalAmount,
// tableCode: goodsStore.cartList[0].table_code, // 台桌号
// dineMode: goodsStore.allSelected ? store.shopInfo.eatModel.split(',')[1] : store.shopInfo.eatModel.split(',')[0], // 用餐方式
// remark: goodsStore.remark, // 备注
// placeNum: (goodsStore.orderListInfo.placeNum || 0) + 1, // 下单次数
// waitCall: 0, // 是否叫号
// userId: goodsStore.vipUserInfo.userId || '', // 会员用户id
// limitRate: goodsStore.limitDiscountRes
// }
// // goodsStore.calcCartInfo()
// const res = await createOrder(data)
// if (res.id) {
// // 设置订单信息
// // goodsStore.orderListInfo = res
// // if (t == 1) {
// // // 向其他端发送清空购物车消息
// // goodsStore.operateCart({ table_code: goodsStore.orderListInfo.tableCode }, "cleanup");
// // console.log('生成订单===', res);
// // } else {
// // goodsStore.clearCart()
// // }
// // 清除购物车，更新历史订单
// // goodsStore.updateOrderList()
// } else {
// ElMessage.error('订单成功失败，请重新下单')
// }
// }
// 判断订单是否锁定
await goodsStore.isOrderLock({
table_code: goodsStore.orderListInfo.tableCode
@@ -486,7 +538,6 @@ async function confirmOrder() {
upadatePayData()
payType.value = payList.value[payActive.value].payType
if (payList.value[payActive.value].payType == "arrears") {
showBuyerHandle();
@@ -576,6 +627,20 @@ function amountInput(num) {
payData.value.checkOrderPay.orderAmount = money.value;
}
// 应用抹零
function applyRounding() {
if (discountAmount.value !== null) {
money.value = formatDecimal(discountAmount.value)
roundAmount.value = 0
} else {
money.value = formatDecimal(props.amount)
roundAmount.value = 0
}
payData.value.checkOrderPay.roundAmount = roundAmount.value;
payData.value.checkOrderPay.orderAmount = money.value;
}
// 删除
function delHandle() {
if (!money.value) return; money.value = money.value.substring(0, money.value.length - 1);
@@ -718,6 +783,32 @@ function clearCouponUser() {
// resetCouponFormHandle()
}
// 按照金额优惠
const discountType = ref(1)
// 清除优惠方式变更时的优惠数据
function clearDiscountChange() {
couponForm.value.discountRatio = ''
couponForm.value.discountAmount = ''
discountRateNumber.value = 0
updateCartCalc()
}
const amountDiscountInput = _.debounce(function (e) {
couponForm.value.discountAmount = inputFilterFloat(e)
if (couponForm.value.discountAmount > goodsStore.cartInfo.costSummary.goodsRealAmount) {
couponForm.value.discountAmount = goodsStore.cartInfo.costSummary.goodsRealAmount
}
if (couponForm.value.discountAmount < 0) {
couponForm.value.discountAmount = 0
}
discountRateNumber.value = couponForm.value.discountAmount
updateCartCalc()
}, 500)
// 折扣格式化
const discountRateNumber = ref(0)
const discountInput = _.debounce(function (e) {
@@ -1251,6 +1342,12 @@ defineExpose({
</script>
<style scoped lang="scss">
.column {
display: flex;
flex-direction: column;
gap: 10px;
}
.point_tips {
&.err {
color: var(--el-color-danger);

7
src/store/goods.js
View File

@@ -46,6 +46,7 @@ export const useGoods = defineStore("goods", {
}, // 台桌信息
cartActiveIndex: 0, // 购物车激活索引,
isCartInit: false,
payType: "cart", // 结算类型，cart 购物车结算 table 桌台结算 order 订单结算,
cartList: [], // 购物车列表
// 购物车信息,
cartInfo: {
@@ -889,7 +890,11 @@ export const useGoods = defineStore("goods", {
.map((item) => item.goods)
.flat()
.map(this.comleteOrderInfo);
return [...currentGoods, ...giftGoods, ...oldOrderGoods];
if (this.payType == 'table' || this.payType == 'order') {
return [...giftGoods, ...oldOrderGoods];
} else {
return [...currentGoods, ...giftGoods, ...oldOrderGoods];
}
}
// 合并所有商品列表

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

@@ -55,7 +55,13 @@
</div>
<div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
<!-- <swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange"> -->
<swiper ref="swiperRef" :loop="false" class="swiper_box" direction="vertical">
<swiper ref="swiperRef" :loop="false" class="swiper_box" direction="vertical" :modules="[Mousewheel]"
:simulate-touch="true" :allow-touch-move="true" :mousewheel="{
enabled: true,
forceToAxis: true,
releaseOnEdges: true,
invert: false,
}">
<swiper-slide class="slide_item" v-for="(goods, index) in goodsStore.goodsList" :key="index">
<div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
<div class="item">
@@ -294,6 +300,8 @@ import { staffPermission } from '@/api/user.js'
import { clearNoNum } from '@/utils/index.js'
import { productOnOff, markIsSoldOut } from '@/api/product_new.js'
import { Mousewheel } from 'swiper/modules'
const swiperRef = ref(null)
const store = useUser()

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

@@ -144,6 +144,10 @@ const props = defineProps({
member: {
type: Object,
default: {}
},
type: {
type: String,
default: 'cart' // cart 代客下单 table 桌台结算 order 订单结算
}
});
@@ -227,11 +231,11 @@ async function printOrderLable(isBefore = false) {
printStore.pushReceiptData(commOrderPrintData({ ...data, isBefore: isBefore }));
} else {
// 本地没有可用打印机使用云打印机
// await orderPrint({
// type: isBefore ? 1 : 0,
// id: orderId,
// });
// ElMessage.success(`云打印${isBefore ? '预' : ''}结算单成功`);
await orderPrint({
type: isBefore ? 1 : 0,
id: orderId,
});
ElMessage.success(`云打印${isBefore ? '预' : ''}结算单成功`);
}
}
} catch (error) {
@@ -244,7 +248,7 @@ async function printOrderLable(isBefore = false) {
// 订单已支付
function paySuccess() {
if (isPrint.value) printOrderLable()
// if (isPrint.value) printOrderLable()
emits('success')
dialogVisible.value = false;
ElMessage.success('支付成功')
@@ -258,9 +262,14 @@ function paySuccess() {
const payCardRef = ref(null)
function show(t) {
goodsStore.payType = props.type
dialogVisible.value = true;
cartInfo.value = { ...goodsStore.cartInfo }
orderList.value = [...goodsStore.cartList, ...goodsStore.orderList.map(item => item.goods).flat()]
if (props.type === 'table' || props.type === 'order') {
orderList.value = goodsStore.orderList.map(item => item.goods).flat()
} else {
orderList.value = [...goodsStore.cartList, ...goodsStore.orderList.map(item => item.goods).flat()]
}
console.log('orderListInfo===================', { ...goodsStore.orderListInfo });

2
src/views/home/components/tableMerging.vue
View File

@@ -204,7 +204,7 @@ function confirmHandle() {
goodsStore.operateCart({
table_code: table_code,
new_table_code: new_table_code,
cart_ids: cart_ids
cart_id: cart_ids
}, 'rottable')
}

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

@@ -168,7 +168,7 @@
<!-- 打印操作 -->
<PrintDrawer ref="PrintDrawerRef" />
<!-- 结算订单 -->
<SettleAccount ref="SettleAccountRef" @success="orderListAjax" />
<SettleAccount ref="SettleAccountRef" type="order" @success="orderListAjax" />
<!-- 全部商品 -->
<allGoodsDialog ref="allGoodsDialogRef" />
</template>

40
src/views/table/components/tableInfo.vue
View File

@@ -1,7 +1,7 @@
<!-- 空闲台桌 -->
<template>
<div class="table_wrap">
<div class="header">
<!-- <div class="header">
<span class="t">{{ props.tableInfo.name }}</span>
<div class="close" @click="close">
<el-icon class="icon">
@@ -14,14 +14,29 @@
<Clock />
</el-icon>
<span class="t">{{tableStatusList.find(val => val.type == props.tableInfo.status).label}}</span>
</div>
</div> -->
<div class="cart" v-loading="payLoading" v-if="props.tableInfo.status == 'unsettled'">
<div class="cart_list">
<div class="item" v-for="item in cartList" :key="item.id">
<div class="top">
<span class="name">{{ item.productName }}</span>
<span class="n">x{{ item.num }}</span>
<span class="p">￥{{ item.price }}</span>
<span class="name">
<span v-if="item.isTemporary" style="color: #999;">[临时菜]</span>
<span v-if="item.isGift" style="color: #999;">[赠]</span>
{{ item.productName }}
</span>
<span class="n">x{{ item.num - item.returnNum }}</span>
<span class="p">￥{{ item.unitPrice }}</span>
</div>
<div class="top" v-if="item.returnNum > 0" style="font-size: 12px;color: #999;">
<span class="name">[退菜]</span>
<span class="n">x{{ item.returnNum }}</span>
<span class="p">-￥{{ item.returnNum * item.price }}</span>
</div>
<div class="top" v-if="item.discountSaleAmount > 0 && item.isTemporary == 0"
style="font-size: 12px;color: #999;">
<span class="name">[改价优惠]</span>
<span class="n"></span>
<span class="p">-￥{{ item.price - item.unitPrice }}</span>
</div>
<div class="tag_wrap" v-if="item.skuName">
<div class="tag" v-for="item in item.skuName.split(',')">
@@ -56,6 +71,9 @@
<div class="btn_wrap" v-if="props.tableInfo.status == 'settled'">
<el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
</div>
<div class="btn_wrap" v-if="props.tableInfo.status == 'unbound'">
<el-button type="default" disabled style="width: 100%;">{{ props.tableInfo.statusMsg }}</el-button>
</div>
</div>
<transition name="el-fade-in">
<div class="people_num_wrap" v-show="showPeopleNum">
@@ -77,7 +95,7 @@
</transition>
</div>
<!-- 结算订单 -->
<SettleAccount ref="SettleAccountRef" @success="emits('success')" />
<SettleAccount ref="SettleAccountRef" type="table" @success="emits('success')" />
</div>
</template>
@@ -182,9 +200,8 @@ async function getOrderDetail() {
let total = 0
res.cartList.forEach(item => {
total += item.payAmount * item.num
total += +item.payAmount - (item.returnNum * item.price)
})
orderInfo.value.orderAmount = formatDecimal(total)
}
} catch (error) {
@@ -257,7 +274,8 @@ onMounted(() => {
<style scoped lang="scss">
.table_wrap {
padding: 20px;
// padding: 20px;
padding-top: 14px;
.header {
display: flex;
@@ -299,14 +317,14 @@ onMounted(() => {
}
.cart {
height: calc(100vh - 160px);
height: calc(100vh - 75px);
display: flex;
flex-direction: column;
.cart_list {
flex: 1;
border-radius: 6px;
background-color: #efefef;
background-color: #fff;
padding: 0 var(--el-font-size-base);
overflow-y: auto;

348
src/views/table/index.vue
View File

@@ -5,42 +5,57 @@
<div class="menus">
<div class="item" :class="{ active: tabActive == index }" v-for="(item, index) in tabAreas"
:key="item.id" @click="tabChange(item, index)">
<div class="dot" :style="{ backgroundColor: item.color }" v-if="item.color"></div>
<el-text>{{ item.label }}</el-text>
</div>
</div>
<!-- <div class="all">
<el-button type="link" icon="Clock">预定管理</el-button>
</div> -->
<div class="order_info">
<div class="title">
<el-icon>
<Tickets />
</el-icon>
<el-text>未结账：</el-text>
</div>
<el-text type="primary">
{{ orderInfo.num }}笔 | {{ orderInfo.personNum }}人 | ￥{{ formatDecimal(orderInfo.amount) }}
</el-text>
</div>
</div>
<div class="tab_container">
<div class="tab_head">
<el-radio-group v-model="area" @change="shopTableAjax">
<el-radio-button label="全部" value=""></el-radio-button>
<el-radio-button :label="item.name" :value="item.id" v-for="item in areaList"
:key="item.id"></el-radio-button>
</el-radio-group>
<div class="tab_head" ref="tabHeadRef">
<div class="item" :class="{ active: tabItemActive == -1 }" @click="tabItemChange('', -1)">全部</div>
<div class="item" :class="{ active: index == tabItemActive }" v-for="(item, index) in areaList"
:key="item.id" @click="tabItemChange(item, index)">
{{ item.name }}
</div>
</div>
<div class="overflow_y" v-loading="loading">
<div class="tab_list">
<div class="item" :class="{ active: tableItemActive == index }"
<div class="item"
:style="{ '--color': tableStatusList.find(val => val.type == item.status).color }"
v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
<div class="tab_title" :class="`${item.status}`">
<span>{{ item.name }}</span>
<span>0/{{ item.maxCapacity }}</span>
<span>{{ item.areaName }} | {{ item.name }}</span>
<span>{{ item.personNum || 0 }}/{{ item.maxCapacity }}</span>
</div>
<div class="tab_cont">
<el-icon class="icon" v-if="item.status != 'using'">
<CircleClose />
</el-icon>
<div class="using" v-else>
<div class="t1">开台中</div>
<!-- <div class="t2">
<el-icon>
<div class="using"
v-if="item.status == 'unsettled' || item.status == 'unsettled' || item.status == 'paying' || item.status == 'settled' || item.status == 'unpaid'">
<div class="t1">￥{{ formatDecimal(+item.orderAmount) }}</div>
<div class="t2">
<el-icon color="#333">
<Timer />
</el-icon>
<span>{{ countTime(item.updatedAt) }}</span>
</div> -->
<span :key="refreshKey">{{ countTime(item.orderCreateTime) }}</span>
</div>
</div>
<div class="icon_wrap" v-else>
<el-icon class="icon">
<CircleClose />
</el-icon>
</div>
</div>
</div>
@@ -49,19 +64,22 @@
<el-empty description="空空如也~" />
</div>
</div>
<div class="pagination">
<!-- <div class="pagination">
<el-pagination background v-model:current-page="query.page" :pager-count="5"
layout=" pager, jumper, total" :total="query.total"
@current-change="shopTableAjax"></el-pagination>
</div>
</div> -->
</div>
</div>
<div class="right_card card">
<!-- 台桌统计 -->
<el-drawer v-model="drawerVisible"
:title="`${tableList[tableItemActive].areaName} | ${tableList[tableItemActive].name} （${tableList[tableItemActive].personNum || 0}/${tableList[tableItemActive].maxCapacity}）`"
size="35%" v-if="tableList.length">
<tableInfo :tableInfo="tableList[tableItemActive]" @success="paySuccess" />
</el-drawer>
<!-- <div class="right_card card">
<countCard v-if="!slectTable.id" />
<!-- 台桌信息 -->
<tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
</div>
</div> -->
</div>
</template>
@@ -69,9 +87,16 @@
import { shopArea, shopTable } from "@/api/account.js";
import countCard from '@/views/table/components/countCard.vue'
import tableInfo from '@/views/table/components/tableInfo.vue'
import { ref, onMounted } from 'vue'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { dayjs } from 'element-plus'
import tableStatusList from './statusList.js'
import { formatDecimal } from '@/utils/index.js'
const orderInfo = ref({
num: 0,
personNum: 0,
amount: 0
})
const tabActive = ref(0)
const tabAreas = ref([
@@ -82,18 +107,22 @@ const tabAreas = ref([
{
label: '空闲',
type: 'idle',
color: "#187CAA",
},
{
label: '使用中',
type: 'unsettled'
type: 'unsettled',
color: "#DD3F41",
},
{
label: '待清理',
type: 'settled',
color: "#FF9500",
},
{
label: '已预订',
type: 'subscribe',
color: "#58B22C",
}
])
@@ -110,7 +139,7 @@ const tableList = ref([])
// 所选区域
const area = ref('')
// 选择台桌索引
const tableItemActive = ref(-1)
const tableItemActive = ref(0)
// 选择台桌信息
const slectTable = ref('')
@@ -120,33 +149,89 @@ function tabChange(item, index) {
shopTableAjax()
}
const tabItemActive = ref(-1)
function tabItemChange(item, index) {
tabItemActive.value = index
if (index == -1) {
area.value = ''
} else {
area.value = item.id
}
shopTableAjax()
nextTick(() => {
scrollTabToCenter()
})
}
// 自动居中滚动
const tabHeadRef = ref(null)
function scrollTabToCenter() {
const container = tabHeadRef.value
if (!container) return
// 获取当前激活的 item
const activeItem = container.querySelector('.item.active')
if (!activeItem) return
// 计算居中位置
const containerWidth = container.offsetWidth
const itemWidth = activeItem.offsetWidth
const itemLeft = activeItem.offsetLeft
// 滚动到中间（核心公式）
container.scrollTo({
left: itemLeft - containerWidth / 2 + itemWidth / 2,
behavior: 'smooth' // 丝滑滚动
})
}
// 计算当前的时间差
function countTime(t) {
let ctime = dayjs().valueOf()
return dayjs(ctime - t).format('H小时m分')
if (!t) return '0小时1分'
const now = dayjs().valueOf()
const createTime = dayjs(t).valueOf()
let diff = now - createTime
// 负数 或 小于1分钟，都强制显示 0小时1分
if (diff < 0 || diff < 60 * 1000) {
return '0小时1分'
}
const h = Math.floor(diff / 3600000)
const m = Math.floor((diff % 3600000) / 60000)
return `${h}小时${m}分`
}
// 支付成功，刷新状态
async function paySuccess() {
drawerVisible.value = false
await shopTableAjax()
slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
// slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
}
// 选择台桌
const drawerVisible = ref(false)
function slectTableHandle(index, item) {
if (tableItemActive.value == index) {
tableItemActive.value = -1
slectTable.value = ''
} else {
tableItemActive.value = index
slectTable.value = item
}
tableItemActive.value = index
drawerVisible.value = true
// if (tableItemActive.value == index) {
// tableItemActive.value = -1
// slectTable.value = ''
// } else {
// tableItemActive.value = index
// slectTable.value = item
// }
}
// 关闭台桌
function slectTableClose() {
tableItemActive.value = -1
slectTable.value = ''
drawerVisible.value = false
}
// 获取台桌区域
@@ -163,12 +248,21 @@ async function shopAreaAjax() {
}
// 获取台桌列表
async function shopTableAjax() {
async function shopTableAjax(isLoading = true) {
try {
loading.value = true
orderInfo.value = {
num: 0,
personNum: 0,
amount: 0
}
if (isLoading) {
loading.value = true
}
const res = await shopTable({
page: query.value.page,
size: query.value.size,
// page: query.value.page,
// size: query.value.size,
page: 1,
size: 999,
areaId: area.value,
tableCode: '',
name: '',
@@ -176,19 +270,60 @@ async function shopTableAjax() {
})
tableList.value = res.records
query.value.total = +res.totalRow
setTimeout(() => {
loading.value = false
}, 500)
tableList.value.forEach(item => {
if (item.status == 'unsettled') {
orderInfo.value.num += 1
orderInfo.value.personNum += item.personNum || 0
orderInfo.value.amount += item.orderAmount || 0
}
})
if (isLoading) {
setTimeout(() => {
loading.value = false
}, 500)
}
} catch (error) {
loading.value = false
if (isLoading) {
loading.value = false
}
console.log(error)
}
}
const refreshKey = ref(0)
// 精准【每分钟 00 秒】自动刷新时间（和时钟完全同步）
let timeTimer = null
function syncMinuteRefresh() {
// 1. 计算当前时间距离下一个 00 秒还剩多少毫秒
const now = new Date()
const seconds = now.getSeconds()
const delay = (60 - seconds) * 1000 // 等到下一个整分钟
// 2. 等到整分钟时，执行一次刷新
setTimeout(() => {
refreshKey.value++ // 刷新时间
// 3. 之后每 60 秒执行一次（永远在 00 秒刷新）
timeTimer = setInterval(() => {
refreshKey.value++
}, 60000)
}, delay)
}
onMounted(() => {
shopAreaAjax()
shopTableAjax()
syncMinuteRefresh()
})
// 销毁清理
onUnmounted(() => {
clearInterval(timeTimer)
})
</script>
<style scoped lang="scss">
@@ -219,7 +354,7 @@ onMounted(() => {
padding: 0 10px;
.item {
padding: 0 10px;
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
@@ -228,6 +363,13 @@ onMounted(() => {
font-size: var(--el-font-size-base);
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
&.active {
&::after {
@@ -252,35 +394,82 @@ onMounted(() => {
display: flex;
align-items: center;
}
.order_info {
display: flex;
padding-right: 14px;
.title {
display: flex;
align-items: center;
gap: 4px;
}
}
}
.tab_container {
padding: var(--el-font-size-base);
.tab_head {
width: calc(100vw - 125px);
padding-bottom: var(--el-font-size-base);
overflow-x: auto;
white-space: nowrap;
/* 隐藏滚动条（通用） */
scrollbar-width: none;
-ms-overflow-style: none;
.item {
height: 42px;
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 4px;
background-color: #f5f5f5;
margin-right: 10px;
&.active {
background-color: var(--primary-color);
color: #fff;
}
&:hover {
cursor: pointer;
background-color: var(--primary-color);
color: #fff;
}
}
}
/* 隐藏滚动条（Chrome / Electron / Edge） */
.tab_head::-webkit-scrollbar {
display: none !important;
}
.overflow_y {
height: calc(100vh - 220px);
// height: calc(100vh - 220px);
height: calc(100vh - 162px);
overflow-y: auto;
}
.tab_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
.item {
border-radius: 6px;
overflow: hidden;
padding: 2px;
padding: 4px;
background-color: var(--color);
&.active {
.tab_cont {
position: relative;
&::before {
content: "";
width: 100%;
@@ -306,23 +495,66 @@ onMounted(() => {
justify-content: space-between;
padding: 0 10px;
color: #fff;
gap: 4px;
span:nth-child(1) {
/* 核心：最多两行，超出... */
display: -webkit-box;
-webkit-line-clamp: 2;
/* 最多2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 保证换行正常 */
white-space: normal;
word-break: break-all;
}
}
.tab_cont {
height: 112px;
height: 108px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 4px;
position: relative;
.icon {
color: var(--color);
font-size: 30px;
transform: rotate(45deg);
position: relative;
z-index: 2
.icon_wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.icon {
color: var(--color);
font-size: 30px;
transform: rotate(45deg);
position: relative;
z-index: 2
}
}
.using {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
padding-left: 14px;
.t1 {
color: #333;
}
.t2 {
display: flex;
align-items: center;
gap: 4px;
span {
color: #555;
}
}
}
}
}

331
src/views/table/index20260328.vue Normal file
View File

@@ -0,0 +1,331 @@
<template>
<div class="content">
<div class="cart_wrap card">
<div class="header">
<div class="menus">
<div class="item" :class="{ active: tabActive == index }" v-for="(item, index) in tabAreas"
:key="item.id" @click="tabChange(item, index)">
<el-text>{{ item.label }}</el-text>
</div>
</div>
<!-- <div class="all">
<el-button type="link" icon="Clock">预定管理</el-button>
</div> -->
</div>
<div class="tab_container">
<div class="tab_head">
<el-radio-group v-model="area" @change="shopTableAjax">
<el-radio-button label="全部" value=""></el-radio-button>
<el-radio-button :label="item.name" :value="item.id" v-for="item in areaList"
:key="item.id"></el-radio-button>
</el-radio-group>
</div>
<div class="overflow_y" v-loading="loading">
<div class="tab_list">
<div class="item" :class="{ active: tableItemActive == index }"
:style="{ '--color': tableStatusList.find(val => val.type == item.status).color }"
v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
<div class="tab_title" :class="`${item.status}`">
<span>{{ item.name }}</span>
<span>0/{{ item.maxCapacity }}</span>
</div>
<div class="tab_cont">
<el-icon class="icon" v-if="item.status != 'using'">
<CircleClose />
</el-icon>
<div class="using" v-else>
<div class="t1">开台中</div>
<!-- <div class="t2">
<el-icon>
<Timer />
</el-icon>
<span>{{ countTime(item.updatedAt) }}</span>
</div> -->
</div>
</div>
</div>
</div>
<div class="empty" v-if="!tableList.length">
<el-empty description="空空如也~" />
</div>
</div>
<div class="pagination">
<el-pagination background v-model:current-page="query.page" :pager-count="5"
layout=" pager, jumper, total" :total="query.total"
@current-change="shopTableAjax"></el-pagination>
</div>
</div>
</div>
<div class="right_card card">
<!-- 台桌统计 -->
<countCard v-if="!slectTable.id" />
<!-- 台桌信息 -->
<tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
</div>
</div>
</template>
<script setup>
import { shopArea, shopTable } from "@/api/account.js";
import countCard from '@/views/table/components/countCard.vue'
import tableInfo from '@/views/table/components/tableInfo.vue'
import { ref, onMounted } from 'vue'
import { dayjs } from 'element-plus'
import tableStatusList from './statusList.js'
const tabActive = ref(0)
const tabAreas = ref([
{
label: '全部',
type: '',
},
{
label: '空闲',
type: 'idle',
},
{
label: '使用中',
type: 'unsettled'
},
{
label: '待清理',
type: 'settled',
},
{
label: '已预订',
type: 'subscribe',
}
])
const query = ref({
page: 1,
size: 12,
total: 0
})
const loading = ref(false)
// 区域列表
const areaList = ref([])
// 台桌列表
const tableList = ref([])
// 所选区域
const area = ref('')
// 选择台桌索引
const tableItemActive = ref(-1)
// 选择台桌信息
const slectTable = ref('')
// 切换类型
function tabChange(item, index) {
tabActive.value = index
shopTableAjax()
}
// 计算当前的时间差
function countTime(t) {
let ctime = dayjs().valueOf()
return dayjs(ctime - t).format('H小时m分')
}
// 支付成功，刷新状态
async function paySuccess() {
await shopTableAjax()
slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
}
// 选择台桌
function slectTableHandle(index, item) {
if (tableItemActive.value == index) {
tableItemActive.value = -1
slectTable.value = ''
} else {
tableItemActive.value = index
slectTable.value = item
}
}
// 关闭台桌
function slectTableClose() {
tableItemActive.value = -1
slectTable.value = ''
}
// 获取台桌区域
async function shopAreaAjax() {
try {
const res = await shopArea({
page: 1,
size: 500
})
areaList.value = res.records
} catch (error) {
console.log(error)
}
}
// 获取台桌列表
async function shopTableAjax() {
try {
loading.value = true
const res = await shopTable({
page: query.value.page,
size: query.value.size,
areaId: area.value,
tableCode: '',
name: '',
status: tabAreas.value[tabActive.value].type,
})
tableList.value = res.records
query.value.total = +res.totalRow
setTimeout(() => {
loading.value = false
}, 500)
} catch (error) {
loading.value = false
console.log(error)
}
}
onMounted(() => {
shopAreaAjax()
shopTableAjax()
})
</script>
<style scoped lang="scss">
.pagination {
display: flex;
justify-content: flex-end;
padding-top: var(--el-font-size-base);
}
.cart_wrap {
flex: 2;
}
.right_card {
flex: 1;
height: 100%;
margin-left: var(--el-font-size-base);
}
.header {
display: flex;
height: var(--el-component-size-large);
justify-content: space-between;
border-bottom: 1px solid #ececec;
.menus {
display: flex;
padding: 0 10px;
.item {
padding: 0 10px;
display: flex;
align-items: center;
position: relative;
span {
font-size: var(--el-font-size-base);
}
&.active {
&::after {
content: "";
width: 70%;
height: 4px;
border-radius: 4px;
position: absolute;
bottom: 0;
left: 15%;
background-color: var(--primary-color);
}
span {
color: var(--primary-color);
}
}
}
}
.all {
display: flex;
align-items: center;
}
}
.tab_container {
padding: var(--el-font-size-base);
.tab_head {
padding-bottom: var(--el-font-size-base);
}
.overflow_y {
height: calc(100vh - 220px);
overflow-y: auto;
}
.tab_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
.item {
border-radius: 6px;
overflow: hidden;
padding: 2px;
background-color: var(--color);
&.active {
.tab_cont {
position: relative;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--color);
opacity: .2;
z-index: 1;
}
}
}
&:hover {
cursor: pointer;
}
.tab_title {
height: var(--el-component-size-large);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
color: #fff;
}
.tab_cont {
height: 112px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 4px;
position: relative;
.icon {
color: var(--color);
font-size: 30px;
transform: rotate(45deg);
position: relative;
z-index: 2
}
}
}
}
}
</style>