|
|
@@ -1,137 +1,122 @@
|
|
|
<template>
|
|
|
<ContentWrap>
|
|
|
<!-- 搜索工作栏 -->
|
|
|
- <el-form
|
|
|
- class="-mb-15px"
|
|
|
- :model="queryParams"
|
|
|
- ref="queryFormRef"
|
|
|
- :inline="true"
|
|
|
- label-width="68px"
|
|
|
- >
|
|
|
- <el-form-item :label="t('work.selectStore')" prop="orderId">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.shopId"
|
|
|
- class="!w-240px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in shopList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
+ <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
|
|
+ <el-form-item :label="t('work.selectStore')" prop="orderId">
|
|
|
+ <el-select v-model="queryParams.shopId" class="!w-240px">
|
|
|
+ <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{t('common.search')}}</el-button>
|
|
|
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{t('common.reset')}}</el-button>
|
|
|
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.search') }}</el-button>
|
|
|
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="">
|
|
|
<el-switch v-model="isNotice" :active-text="t('work.orderReminderOn')" :inactive-text="t('work.orderReminderOff')" />
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
</ContentWrap>
|
|
|
|
|
|
<!-- 列表 -->
|
|
|
<ContentWrap>
|
|
|
- <audio id="buttonAudio" src="/voice_new_order.mp3" v-show="false" controls></audio>
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane :label="t('work.recentOrders')" name="first">
|
|
|
- <el-row :gutter="24" v-if="list.length > 0">
|
|
|
- <el-col :span="6" v-for="(order,k) in list" :key="k">
|
|
|
- <div >
|
|
|
- <el-card class="box-card" :body-style="{ background:'#0a5ba6' }">
|
|
|
- <template #header>
|
|
|
- <div class="card-header" style="text-align:center">
|
|
|
- {{t('work.orderId')}}:{{ order.orderId }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div style="color:#ffffff;text-align:center;">
|
|
|
- <div v-if="order.orderType == 'takeout'">
|
|
|
- <div style="font-size:20px;font-weight: bolder;">{{t('work.takeout')}}</div>
|
|
|
- <div style="margin-top:5px">{{t('work.contactNumber')}}:{{ order.userPhone }}</div>
|
|
|
- </div>
|
|
|
- <div v-else-if="order.orderType == 'takein'">
|
|
|
- <div style="font-size:20px;font-weight: bolder;">{{t('work.pickUp')}}</div>
|
|
|
- <div style="margin-top:5px">{{t('work.pickUpNumber')}}:{{ order.numberId }}</div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <div style="font-size:20px;font-weight: bolder;">{{t('work.dineIn')}}</div>
|
|
|
- <div style="margin-top:5px">{{t('work.tableNumber')}}:{{ order.deskNumber }},{{t('work.numberPeople')}}:{{ order.deskPeople }}</div>
|
|
|
- </div>
|
|
|
- <div style="font-size:20px;font-weight: bolder;">
|
|
|
- <span v-if="order.storeOrderCartInfoDOList.length > 1">
|
|
|
- {{t('work.multipleDishesPleaseCheckDetails')}}
|
|
|
- </span>
|
|
|
- <span v-else>{{ order.storeOrderCartInfoDOList[0].title }}×{{ order.storeOrderCartInfoDOList[0].number }}
|
|
|
- {{ order.storeOrderCartInfoDOList[0].spec }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin-top:30px;">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="openForm('orderDetail', order.id)"
|
|
|
- v-hasPermi="['order:store-order:update']"
|
|
|
- >{{t('common.detail')}}</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="openForm('orderSend', order.id)"
|
|
|
- v-hasPermi="['order:store-order:update']"
|
|
|
- >{{t('work.order')}}</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #footer>
|
|
|
- <div style="text-align:center">{{t('work.orderTime')}}:{{ formatDate(order.createTime) }}</div>
|
|
|
- </template>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-empty :description="t('work.noOrderData')" v-else />
|
|
|
- </el-tab-pane>
|
|
|
- <!-- <el-tab-pane label="桌台数据" name="second">
|
|
|
- <el-form-item label="桌面状态：" >
|
|
|
- <el-radio-group v-model="queryParams.deskStatus" size="large" fill="#FF1493" @change="queryStatus">
|
|
|
- <el-radio-button label="empty">空闲中</el-radio-button>
|
|
|
- <el-radio-button label="ing">就餐中</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-row :gutter="24">
|
|
|
- <el-col :span="4" v-for="(desk,k) in deskList" :key="k">
|
|
|
- <div >
|
|
|
- <el-card class="box-card" :body-style="queryParams.deskStatus == 'empty' ? {background:'#8D9095'} : {background:'#F56C6C'}">
|
|
|
- <template #header>
|
|
|
- <div class="card-header" style="text-align:center;display:flex;justify-content:space-between;">
|
|
|
- <span style="font-size:14px">{{ desk.shopName}}</span>
|
|
|
- <span style="cursor:pointer;"> <Icon icon="ep:calendar" :size="20" @click="openForm('order', desk.id)" /></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div style="color:#ffffff;text-align:center;">
|
|
|
- <div>
|
|
|
- <div style="font-size:36px;font-weight: bolder;">{{ desk.number }}</div>
|
|
|
- <div style="font-size:20px;font-weight: bolder;" v-if="queryParams.deskStatus == 'empty'">空闲中</div>
|
|
|
- <div style="font-size:20px;font-weight: bolder;" v-else>就餐中</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #footer>
|
|
|
- <div style="text-align:center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + '下单' : '从未下单' }}</div>
|
|
|
- </template>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-tab-pane> -->
|
|
|
- </el-tabs>
|
|
|
+ <audio id="buttonAudio" src="/voice_new_order.mp3" v-show="false" controls></audio>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane :label="t('work.recentOrders')" name="first">
|
|
|
+ <el-row :gutter="24" v-if="list.length > 0">
|
|
|
+ <el-col :span="6" v-for="(order, k) in list" :key="k">
|
|
|
+ <div>
|
|
|
+ <el-card class="box-card" :body-style="{ background: '#0a5ba6' }">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header" style="text-align: center"> {{ t('work.orderId') }}:{{ order.orderId }} </div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div style="color: #ffffff; text-align: center">
|
|
|
+ <div v-if="order.orderType == 'takeout'">
|
|
|
+ <div style="font-size: 20px; font-weight: bolder">{{ t('work.takeout') }}</div>
|
|
|
+ <div style="margin-top: 5px">{{ t('work.contactNumber') }}:{{ order.userPhone }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="order.orderType == 'takein'">
|
|
|
+ <div style="font-size: 20px; font-weight: bolder">{{ t('work.pickUp') }}</div>
|
|
|
+ <div style="margin-top: 5px">{{ t('work.pickUpNumber') }}:{{ order.numberId }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div style="font-size: 20px; font-weight: bolder">{{ t('work.dineIn') }}</div>
|
|
|
+ <div style="margin-top: 5px"
|
|
|
+ >{{ t('work.tableNumber') }}:{{ order.deskNumber }},{{ t('work.numberPeople') }}:{{ order.deskPeople }}</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 20px; font-weight: bolder">
|
|
|
+ <span v-if="order.storeOrderCartInfoDOList.length > 1">
|
|
|
+ {{ t('work.multipleDishesPleaseCheckDetails') }}
|
|
|
+ </span>
|
|
|
+ <span v-else
|
|
|
+ >{{ order.storeOrderCartInfoDOList[0].title }}×{{ order.storeOrderCartInfoDOList[0].number }}
|
|
|
+ {{ order.storeOrderCartInfoDOList[0].spec }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top: 30px">
|
|
|
+ <el-button type="primary" @click="openForm('orderDetail', order.id)" v-hasPermi="['order:store-order:update']">{{
|
|
|
+ t('common.detail')
|
|
|
+ }}</el-button>
|
|
|
+ <el-button type="primary" @click="openForm('orderSend', order.id)" v-hasPermi="['order:store-order:update']">{{
|
|
|
+ t('work.order')
|
|
|
+ }}</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div style="text-align: center">{{ t('work.orderTime') }}:{{ formatDate(order.createTime) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-empty :description="t('work.noOrderData')" v-else />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="桌台数据" name="second">
|
|
|
+ <el-form-item label="桌面状态：">
|
|
|
+ <el-radio-group v-model="queryParams.deskStatus" size="large" fill="#FF1493" @change="queryStatus">
|
|
|
+ <el-radio-button label="empty">空闲中</el-radio-button>
|
|
|
+ <el-radio-button label="ing">就餐中</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="4" v-for="(desk, k) in deskList" :key="k">
|
|
|
+ <div>
|
|
|
+ <el-card
|
|
|
+ class="box-card"
|
|
|
+ :body-style="queryParams.deskStatus == 'empty' ? { background: '#8D9095' } : { background: '#F56C6C' }"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header" style="text-align: center; display: flex; justify-content: space-between">
|
|
|
+ <span style="font-size: 14px">{{ desk.shopName }}</span>
|
|
|
+ <span style="cursor: pointer"> <Icon icon="ep:calendar" :size="20" @click="openForm('order', desk.id)" /></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div style="color: #ffffff; text-align: center">
|
|
|
+ <div>
|
|
|
+ <div style="font-size: 36px; font-weight: bolder">{{ desk.number }}</div>
|
|
|
+ <div style="font-size: 20px; font-weight: bolder" v-if="queryParams.deskStatus == 'empty'">空闲中</div>
|
|
|
+ <div style="font-size: 20px; font-weight: bolder" v-else>就餐中</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div style="text-align: center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + '下单' : '从未下单' }}</div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</ContentWrap>
|
|
|
|
|
|
<OrderSend ref="formRef1" @success="getList" />
|
|
|
<OrderDetail ref="formRef4" />
|
|
|
- <Order ref="order" />
|
|
|
+ <Order ref="order" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="StoreOrder">
|
|
|
@@ -142,7 +127,7 @@ import OrderSend from './OrderSend.vue'
|
|
|
import OrderDetail from './OrderDetail.vue'
|
|
|
import Order from '@/views/mall/desk/shopDesk/Order.vue'
|
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
|
-import { formatPast,formatDate } from '@/utils/formatTime'
|
|
|
+import { formatPast, formatDate } from '@/utils/formatTime'
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
@@ -152,7 +137,7 @@ const queryParams = reactive({
|
|
|
pageNo: 1,
|
|
|
pageSize: 50,
|
|
|
orderStatus: 1,
|
|
|
- deskStatus: "empty",
|
|
|
+ deskStatus: 'empty',
|
|
|
type: 'work',
|
|
|
shopId: undefined
|
|
|
})
|
|
|
@@ -163,19 +148,16 @@ const isNotice = ref(true)
|
|
|
const shopList = ref([])
|
|
|
const deskList = ref([])
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-const getUrlValue = () => {
|
|
|
+const getUrlValue = () => {
|
|
|
const url = new URL(decodeURIComponent(location.href))
|
|
|
- let urlArr = url.pathname.split("=")
|
|
|
- if(urlArr.length == 2){
|
|
|
+ let urlArr = url.pathname.split('=')
|
|
|
+ if (urlArr.length == 2) {
|
|
|
activeName.value = 'second'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
getUrlValue()
|
|
|
|
|
|
-
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
console.log(tab.paneName, event)
|
|
|
}
|
|
|
@@ -184,9 +166,7 @@ const getShopList = async () => {
|
|
|
try {
|
|
|
const data = await ShopApi.getShopList()
|
|
|
shopList.value = data
|
|
|
-
|
|
|
} finally {
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -214,18 +194,17 @@ const getDeskList = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-let interval01 = setInterval(function() {
|
|
|
+let interval01 = setInterval(function () {
|
|
|
orderNotice()
|
|
|
-},4000);
|
|
|
+}, 4000)
|
|
|
|
|
|
-let interval02 = setInterval(function() {
|
|
|
+let interval02 = setInterval(function () {
|
|
|
getList()
|
|
|
//getDeskList()
|
|
|
-},5000);
|
|
|
-
|
|
|
+}, 5000)
|
|
|
|
|
|
const orderNoticeVoice = () => {
|
|
|
- if(isNotice.value){
|
|
|
+ if (isNotice.value) {
|
|
|
ElNotification({
|
|
|
title: t('work.newOrderNotification'),
|
|
|
message: t('work.youHaveNewOrderPleaseCheckOut'),
|
|
|
@@ -233,16 +212,15 @@ const orderNoticeVoice = () => {
|
|
|
duration: 1000
|
|
|
})
|
|
|
let buttonAudio = document.getElementById('buttonAudio')
|
|
|
- buttonAudio.play().catch((err)=>{
|
|
|
+ buttonAudio.play().catch((err) => {
|
|
|
console.log(err)
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-const orderNotice = async() => {
|
|
|
+const orderNotice = async () => {
|
|
|
const data = await StoreOrderApi.orderNoticeUrl()
|
|
|
- if(data > 0){
|
|
|
+ if (data > 0) {
|
|
|
orderNoticeVoice()
|
|
|
}
|
|
|
}
|
|
|
@@ -267,72 +245,67 @@ const order = ref()
|
|
|
const openForm = (type: string, id?: number) => {
|
|
|
if (type == 'orderSend') {
|
|
|
formRef1.value.open(type, id)
|
|
|
- }else if (type == 'orderDetail') {
|
|
|
+ } else if (type == 'orderDetail') {
|
|
|
formRef4.value.open(type, id)
|
|
|
- }else if(type == 'order'){
|
|
|
+ } else if (type == 'order') {
|
|
|
order.value.open(type, id)
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
|
|
|
const queryStatus = (value) => {
|
|
|
queryParams.deskStatus = value
|
|
|
- //queryParams.deskStatus = tab.paneName
|
|
|
+ //queryParams.deskStatus = tab.paneName
|
|
|
getDeskList()
|
|
|
-
|
|
|
}
|
|
|
|
|
|
/** 初始化 **/
|
|
|
onMounted(() => {
|
|
|
getList()
|
|
|
getShopList()
|
|
|
- // getDeskList()
|
|
|
-
|
|
|
+ // getDeskList()
|
|
|
})
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
clearInterval(interval01)
|
|
|
- clearInterval(interval02);
|
|
|
+ clearInterval(interval02)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style scoped >
|
|
|
- img {
|
|
|
- height: 36px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-.tabBox{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center
|
|
|
- }
|
|
|
-.tabBox_img{
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
-.tabBox_img img{
|
|
|
+<style scoped>
|
|
|
+img {
|
|
|
+ height: 36px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.tabBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
-.tabBox_tit{
|
|
|
- width :60%;
|
|
|
- font-size: 12px !important;
|
|
|
- margin: 0 2px 0 10px;
|
|
|
- letter-spacing: 1px;
|
|
|
- padding: 5px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .tabBox_pice{
|
|
|
- width :30%;
|
|
|
- font-size: 12px !important;
|
|
|
- margin: 0 2px 0 10px;
|
|
|
- letter-spacing: 1px;
|
|
|
- padding: 5px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|
|
|
+.tabBox_img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+}
|
|
|
+.tabBox_img img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.tabBox_tit {
|
|
|
+ width: 60%;
|
|
|
+ font-size: 12px !important;
|
|
|
+ margin: 0 2px 0 10px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.tabBox_pice {
|
|
|
+ width: 30%;
|
|
|
+ font-size: 12px !important;
|
|
|
+ margin: 0 2px 0 10px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|
