cashierdesktop/src/components/callNumber.vue

<!-- 取餐号组件 -->
<template>
    <el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
        <!-- <el-input v-model="number" :placeholder="props.placeholder" readonly></el-input> -->
        <el-input ref="inputRef" v-model="number" :placeholder="props.placeholder" clearable
            @change="inputChange"></el-input>
        <div class="tips">注意：扫码请确保输入口获得焦点</div>
        <!-- <div class="keybord_wrap">
            <div v-for="item in 9" :key="item">
                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
            </div>
            <div>
                <el-button plain type="info" disabled style="width: 100%;">.</el-button>
            </div>
            <div>
                <el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
            </div>
            <div>
                <el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
            </div>
        </div> -->
        <div class="list" v-loading="tableData.loading">
            <div class="item" v-for="item in tableData.list" :key="item.id">
                <div class="top">
                    <div class="left">
                        <div class="title">取餐号：{{ filterCode(item.outCode) }}</div>
                        <div class="shop">商品：{{ item.productName }}</div>
                    </div>
                    <div class="state s1" v-if="item.status == 0">
                        <div class="dot"></div> 叫号成功
                    </div>
                    <div class="state s2" v-if="item.status == 1">
                        <div class="dot"></div> 叫号失败
                    </div>
                </div>
                <div class="btm">
                    <div class="time">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    <div class="info" v-if="item.status == 1">
                        {{ item.remark }}
                    </div>
                </div>
            </div>
            <el-empty description="暂无记录" :image-size="60" v-if="!tableData.list.length" />
        </div>
        <div class="page">
            <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.pageSize" background
                layout="total, prev, pager, next" :total="tableData.total" @current-change="handleCurrentChange" />
        </div>
        <div class="footer">
            <el-button type="primary" style="width: 100%;" :loading="loading" @click="confirmHandle">确认</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import _ from "lodash";
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import { useUser } from "@/store/user.js";
import { scanSendMessage, getsendMessage } from '@/api/order/index'
const store = useUser();

const props = defineProps({
    title: {
        type: String,
        default: '叫号取餐'
    },
    placeholder: {
        type: String,
        default: '请扫描取餐号'
    }
})

const inputRef = ref(null)
const loading = ref(false)
const dialogVisible = ref(false)
const number = ref('')

const tableData = reactive({
    loading: false,
    page: 1,
    pageSize: 10,
    total: 0,
    list: []
})

const emit = defineEmits(['success'])

// 截取字符串
function filterCode(t, c = '#') {
    let n = t.split(c)
    return n[1]
}

function show() {
    dialogVisible.value = true
    getsendMessageAjax()
    setTimeout(() => {
        inputRef.value.focus();
    }, 500);
}

function opne() {
    number.value = ''
}

// 输入
function inputHandle(n) {
    number.value += n
}

// 删除
function delHandle() {
    if (!number.value) return
    number.value = number.value.substring(0, number.value.length - 1)
}

const inputChange = _.debounce(function (e) {
    // console.log(e);
    confirmHandle();
}, 500);

// 页码改变
function handleCurrentChange() {
    getsendMessageAjax()
}

// 获取叫号记录
async function getsendMessageAjax() {
    try {
        if (!store.userInfo.shopId) return
        tableData.loading = true
        const res = await getsendMessage({
            page: tableData.page,
            pageSize: tableData.pageSize,
            shopId: store.userInfo.shopId,
            // shopId: 4,
        })
        tableData.loading = false
        tableData.list = res.list
        tableData.total = res.total
    } catch (error) {
        console.log(error);
        tableData.loading = false
    }
}

// 确认
const confirmHandle = _.throttle(async function () {
    try {
        if (!number.value) return
        loading.value = true
        const res = await scanSendMessage({
            outNumber: number.value,
            shopId: store.userInfo.shopId,
            // shopId: 4
        })
        ElMessage.success('叫号成功')

        loading.value = false
        number.value = ''
        getsendMessageAjax()
        setTimeout(() => {
            inputRef.value.focus();
        }, 500);
    } catch (error) {
        getsendMessageAjax()
        loading.value = false
        console.log(error);
        setTimeout(() => {
            inputRef.value.focus();
        }, 500);
    }
}, 800, { leading: true, trailing: false })

defineExpose({
    show
})
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
    height: 60px;
    font-size: 36px;
}

.page {
    display: flex;
    padding-bottom: 20px;
}

.tips {
    padding-top: 4px;
}

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

    :deep(.el-button--large) {
        height: 60px;
    }
}

.list {
    height: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    padding: 0 14px;

    .item {
        padding: 16px 0;

        &:not(:last-child) {
            border-bottom: 1px solid #ececec;
        }

        .top {
            display: flex;
            justify-content: space-between;

            .left {
                color: #000;

                .title {
                    font-weight: bold;
                }

                .shop {
                    color: #555;
                }
            }

            .state {
                display: flex;
                align-items: center;

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

                &.s1 {
                    color: var(--primary-color);

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

                &.s2 {
                    color: var(--el-color-error);

                    .dot {
                        background-color: var(--el-color-error);
                    }
                }
            }
        }

        .btm {
            display: flex;
            justify-content: space-between;
            padding-top: 4px;

            .time,
            .info {
                color: #999;
            }
        }
    }
}
</style>