cashier-admin/src/views/table/table_list.vue

<template>
    <div class="app-container">
        <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
                <div slot="label">
                    {{ item.name }}
                    <i class="icon el-icon-edit" @click.stop="$refs.addEara.show(item)"></i>
                    <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
                        <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
                    </el-popconfirm>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="head-container">
            <div class="filter_wrap">
                <el-button icon="el-icon-plus" @click="$refs.addEara.show()">添加区域</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="$refs.addTable.show()">添加台桌</el-button>
                <el-button type="primary" icon="el-icon-download">下载台桌码</el-button>
                <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
            </div>
        </div>
        <div class="head-container">
            <div class="table_list" v-loading="loading">
                <div class="item" v-for="item in tableList" :key="item.id">
                    <div class="top">
                        <div class="row row1">
                            <span>{{ item.name }}</span>
                            <div class="state">
                                <span class="dot" :style="{ backgroundColor: status[item.status].type }"></span>
                                {{ status[item.status].label }}
                            </div>
                        </div>
                        <div class="row">
                            <el-tag type="warning" size="mini">{{ item.type == 0 ? '低消' : '计时' }}</el-tag>
                            <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{ item.isPredate == 1 ? '可预约' : '不可预约' }}</el-tag>
                        </div>
                        <div class="row">
                            <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
                        </div>
                    </div>
                    <div class="btm">
                        <!-- <div class="btm_item">
                            <i class="i el-icon-edit"></i>
                        </div> -->
                        <div class="btm_item" @click="$refs.addTable.show(item)">
                            <i class="i el-icon-edit"></i>
                        </div>
                        <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([item.id])" style="flex: 1;">
                            <div class="btm_item" slot="reference">
                                <i class="i el-icon-delete"></i>
                            </div>
                        </el-popconfirm>
                    </div>
                </div>
                <div class="empty_wrap">
                    <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
                </div>
            </div>
        </div>
        <addEara ref="addEara" @success="tbShopAreaGet" />
        <addTable ref="addTable" @success="tbShopTableGet" />
    </div>
</template>

<script>
import addEara from './components/addEara'
import addTable from './components/addTable'
import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete, tbShopTableDelete } from '@/api/table'
export default {
    components: {
        addEara,
        addTable
    },
    data() {
        return {
            tabVlaue: '',
            tabs: [],
            loading: false,
            tableList: [],
            status: {
                subscribe: {
                    label: '预定',
                    type: '#E6A23C'
                },
                closed: {
                    label: '关台',
                    type: '#F56C6C'
                },
                opening: {
                    label: '开台中',
                    type: '#67C23A'
                },
                cleaning: {
                    label: '台桌清理中',
                    type: '#909399'
                }
            }
        }
    },
    mounted() {
        this.tbShopAreaGet()
    },
    methods: {
        tabClick() {
            this.tbShopTableGet()
        },
        // 删除桌台
        async delTableHandle(ids) {
            try {
                await tbShopTableDelete(ids)
                this.tbShopTableGet()
            } catch (error) {
                console.log(error)
            }
        },
        // 删除区域
        async delHandle(ids) {
            try {
                await tbShopAreaDelete(ids)
                this.tabVlaue = ''
                this.tbShopAreaGet()
            } catch (error) {
                console.log(error)
            }
        },
        // 台桌列表
        async tbShopTableGet() {
            this.loading = true
            try {
                const { content } = await tbShopTableGet({
                    shopId: localStorage.getItem('shopId'),
                    areaId: this.tabVlaue
                })
                this.tableList = content
                setTimeout(() => {
                    this.loading = false
                }, 300)
            } catch (error) {
                this.loading = false
                console.log(error)
            }
        },
        // 获取区域
        async tbShopAreaGet() {
            try {
                const { content } = await tbShopAreaGet({
                    shopId: localStorage.getItem('shopId')
                })
                this.tabs = content
                this.tbShopTableGet()
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>

<style>
.el-tabs {
    margin-bottom: 0;
}
</style>
<style scoped lang="scss">
.icon {
    margin-left: 10px;
}

.table_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 150px;

    .empty_wrap {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .item {
        border: 1px solid #ddd;

        .top {
            padding: 20px;

            .row {
                display: flex;
                gap: 10px;

                .tips {
                    font-size: 12px;
                }

                &:not(:first-child) {
                    margin-top: 20px;
                }

                &.row1 {
                    justify-content: space-between;
                    font-size: 14px;

                    .state {
                        display: flex;
                        align-items: center;
                        margin-left: 80px;

                        .dot {
                            $size: 6px;
                            width: $size;
                            height: $size;
                            border-radius: 50%;
                            margin-right: $size;
                        }
                    }
                }
            }
        }

        .btm {
            border-top: 1px solid #ddd;
            background-color: #efefef;
            display: flex;

            .btm_item {
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                &:hover {
                    cursor: pointer;
                }

                &:nth-child(1) {
                    &::before {
                        content: '';
                        height: 50%;
                        border-right: 1px solid #ddd;
                        position: absolute;
                        top: 25%;
                        right: 0;
                    }
                }

                .i {
                    color: #666;
                }
            }
        }
    }
}
</style>