99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<!-- 叫号记录 -->
|
|
<template>
|
|
<el-dialog v-model="dialogVisible" title="叫号记录" @closed="reset" width="80vw">
|
|
<el-table :data="tableData.list" border style="height: 84%;" height="50vh">
|
|
<el-table-column label="桌号" prop="name"></el-table-column>
|
|
<el-table-column label="桌型" prop="note"></el-table-column>
|
|
<el-table-column label="手机号" prop="phone"></el-table-column>
|
|
<el-table-column label="状态" prop="state">
|
|
<template v-slot="scope">
|
|
{{ statusList[scope.row.state].text }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="时间" prop="callTime" width="200">
|
|
<template v-slot="scope">{{ dayjs(scope.row.callTime).format('YYYY-MM-DD HH:mm:ss') }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination" style="padding-top:15px;display: flex;justify-content: flex-end;">
|
|
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
|
layout="total, prev, pager, next" :total="tableData.total" background @current-change="paginationChange"
|
|
@size-change="paginationChange">
|
|
</el-pagination>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { dayjs } from 'element-plus'
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { callRecord } from '@/api/queue.js'
|
|
import { useUser } from "@/store/user.js"
|
|
const store = useUser()
|
|
|
|
const dialogVisible = ref(false)
|
|
const tableData = reactive({
|
|
loading: false,
|
|
list: [],
|
|
page: 1,
|
|
size: 20,
|
|
total: 0
|
|
})
|
|
const statusList = {
|
|
'-1': {
|
|
type: 'warning',
|
|
text: '已取消'
|
|
},
|
|
0: {
|
|
type: 'danger',
|
|
text: '排队中'
|
|
},
|
|
1: {
|
|
type: 'success',
|
|
text: '叫号中'
|
|
},
|
|
2: {
|
|
type: 'success',
|
|
text: '已入座'
|
|
},
|
|
3: {
|
|
type: 'success',
|
|
text: '已过号'
|
|
}
|
|
}
|
|
|
|
// 分页变化
|
|
function paginationChange(e) {
|
|
callRecordAjax()
|
|
}
|
|
|
|
// 记录数据
|
|
async function callRecordAjax() {
|
|
try {
|
|
tableData.loading = true
|
|
const res = await callRecord({
|
|
callTableId: '',
|
|
shopId: store.userInfo.shopId,
|
|
page: tableData.page,
|
|
size: tableData.size
|
|
})
|
|
tableData.loading = false
|
|
tableData.list = res.records
|
|
tableData.total = res.total
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
tableData.page = 1
|
|
}
|
|
|
|
function show() {
|
|
dialogVisible.value = true
|
|
callRecordAjax()
|
|
}
|
|
|
|
defineExpose({
|
|
show
|
|
})
|
|
</script> |