czg_team/kitchen-desktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化台桌显示效果，修复出菜待出菜数量不更新问题

Browse Source
This commit is contained in:
gyq
2025-12-02 14:30:06 +08:00
parent f514b75128
commit 9b7290f019
1 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/renderer/src/views/home.vue
View File

@@ -48,35 +48,38 @@
</div> -->
</div>
<div class="table_list_wrap" v-if="checkType == 1">
<div class="item list" :class="{ empty: tableList.length <= 0 }">
<div class="tab_item" :class="{ active: selectItem.orderId === item.orderId }" v-for="item in tableList"
:key="item.orderId" @click="changeTableItem(item)">
<div class="tab_header_wrap">
{{ item.tableName }} | {{ item.areaName }}
</div>
<div class="content">
<div class="btn_wrap">
<div class="btn">
<el-button :type="selectItem.orderId === item.orderId ? 'danger' : 'primary'"
style="width: 100%;">待出菜（{{ item.pendingDishCount
}}）</el-button>
</div>
<div class="item" :class="{ empty: tableList.length <= 0 }">
<div class="list">
<div class="tab_item" :class="{ active: index === selectItemIndex }"
v-for="(item, index) in tableList" :key="item.orderId" @click="changeTableItem(index)">
<div class="tab_header_wrap">
{{ item.tableName }} | {{ item.areaName }}
</div>
<!-- <div class="people_wrap">
<div class="content">
<div class="btn_wrap">
<div class="btn">
<el-button :type="index === selectItemIndex ? 'danger' : 'primary'"
style="width: 100%;">待出菜（{{ item.pendingDishCount
}}）</el-button>
</div>
</div>
<!-- <div class="people_wrap">
<peopleIcon />
<span>1人</span>
</div> -->
</div>
</div>
<el-empty v-if="tableList.length <= 0"></el-empty>
</div>
<el-empty v-if="tableList.length <= 0"></el-empty>
</div>
<div class="item table_info">
<div class="item table_info" v-if="tableList.length">
<div class="table_info_wrap">
<el-button type="primary">{{ selectItem.tableName || '-' }} | {{ selectItem.areaName || '-'
<el-button type="primary">{{ tableList[selectItemIndex].tableName || '-' }} | {{
tableList[selectItemIndex].areaName || '-'
}}</el-button>
<el-text>待出菜（{{ selectItem.pendingDishCount }}）</el-text>
<el-text>员工名称：{{ selectItem.staffName || notStaff }}</el-text>
<el-text>下单时间：{{ selectItem.orderTime || '-' }}</el-text>
<el-text>待出菜（{{ tableList[selectItemIndex].pendingDishCount }}）</el-text>
<el-text>员工名称：{{ tableList[selectItemIndex].staffName || notStaff }}</el-text>
<el-text>下单时间：{{ tableList[selectItemIndex].orderTime || '-' }}</el-text>
</div>
<div class="table_wrap">
<el-table :data="tableData.list" border stripe>
@@ -118,7 +121,7 @@
<div class="table" v-for="(item, index) in goodsTableData" :key="index">
<div class="goods_table_title">
<span>{{ item.productName }} 待出菜（{{ item.total
}}）</span>
}}）</span>
</div>
<el-table :data="item.foodItems" border stripe>
<el-table-column label="下单台桌" prop="areaName">
@@ -216,6 +219,7 @@ const checkType = ref(1)
// 清除搜索内容
function inputClear() {
selectItemIndex.value = 0
goodsListActive.value = -1
checkTypeHandle({ value: checkType.value })
}
@@ -257,7 +261,7 @@ const queryForm = reactive({
// 按台桌查看
const tableList = ref([])
const selectItem = ref({})
const selectItemIndex = ref(0)
async function getKitchenTableAjax() {
try {
const res = await getKitchenTable({
@@ -265,14 +269,9 @@ async function getKitchenTableAjax() {
})
tableList.value = res
if (res.length > 0) {
if (!selectItem.value.orderId) {
selectItem.value = res[0]
}
getKitchenTableFoodsAjax()
console.log(selectItem.value);
} else {
selectItem.value = {}
selectItemIndex.value = 0
tableData.list = []
}
} catch (error) {
@@ -281,8 +280,8 @@ async function getKitchenTableAjax() {
}
// 切换台桌
function changeTableItem(item) {
selectItem.value = item
function changeTableItem(index) {
selectItemIndex.value = index
getKitchenTableFoodsAjax()
}
@@ -293,9 +292,9 @@ const tableData = reactive({
async function getKitchenTableFoodsAjax() {
try {
const res = await getKitchenTableFoods({
orderId: selectItem.value.orderId,
tableCode: selectItem.value.tableCode,
isNoTable: selectItem.value.tableCode ? '' : 1
orderId: tableList.value[selectItemIndex.value].orderId,
tableCode: tableList.value[selectItemIndex.value].tableCode,
isNoTable: tableList.value[selectItemIndex.value].tableCode ? '' : 1
})
res.forEach(item => {
@@ -596,12 +595,10 @@ onUnmounted(() => {
.item {
flex: 1;
&.list {
.list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(auto, 1fr);
grid-column-gap: var(--padding);
grid-row-gap: var(--padding);
gap: var(--padding);
&.empty {
display: flex;