cashierdesktop/src/views/table/index.vue

<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="text" icon="Clock">预定管理</el-button>
                </div>
            </div>
            <div class="tab_container">
                <div class="tab_head">
                    <el-radio-group v-model="area" @change="queryShopTableAjax">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button :label="item.id" v-for="item in areaList" :key="item.id">{{ item.name
                            }}</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 }"
                            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">
                                    <CircleClose />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="empty">
                        <el-empty description="空空如也~" v-if="!tableList.length" />
                    </div>
                </div>
            </div>
        </div>
        <div class="right_card card">
            <!-- 台桌统计 -->
            <countCard v-if="!slectTable.id" />
            <!-- 台桌信息 -->
            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" />
        </div>
    </div>
</template>

<script setup>
import { queryShopArea, queryShopTable } from '@/api/table'

import countCard from '@/views/table/components/countCard.vue'
import tableInfo from '@/views/table/components/tableInfo.vue'

import { ref, onMounted } from 'vue'
import { useUser } from "@/store/user.js"
const store = useUser()


const tabActive = ref(0)
const tabAreas = ref([
    {
        label: '全部',
        type: 0,
    },
    {
        label: '空闲',
        type: 1,
    },
    {
        label: '使用中',
        type: 2,
    },
    {
        label: '已预订',
        type: 3,
    }
])

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
}

// 选择台桌
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 queryShopAreaAjax() {
    try {
        const res = await queryShopArea({
            shopId: store.userInfo.shopId
        })
        areaList.value = res
    } catch (error) {
        console.log(error)
    }
}

// 获取台桌列表
async function queryShopTableAjax() {
    try {
        loading.value = true
        const res = await queryShopTable({
            shopId: store.userInfo.shopId,
            areaId: area.value,
            status: '',
            page: 1,
            pageSize: 500
        })
        tableList.value = res.list
        setTimeout(() => {
            loading.value = false
        }, 500)
    } catch (error) {
        loading.value = false
        console.log(error)
    }
}

onMounted(() => {
    queryShopAreaAjax()
    queryShopTableAjax()
})
</script>

<style scoped lang="scss">
.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 - 225px);
        overflow-y: auto;
    }

    .tab_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: var(--el-font-size-base);

        .item {
            background-color: #efefef;
            border-radius: 6px;
            overflow: hidden;
            border: 2px solid #fff;

            &.active {
                border-color: var(--primary-color);
            }

            &: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;

                &.subscribe {
                    background-color: var(--el-color-success);
                }

                &.closed {
                    background-color: #999;
                }

                &.opening {
                    background-color: var(--primary-color);
                }

                &.cleaning {
                    background-color: var(--el-color-danger);
                }
            }

            .tab_cont {
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    color: #555;
                    font-size: 30px;
                    transform: rotate(45deg);
                }
            }
        }
    }
}
</style>