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