新增标签打印
This commit is contained in:
245
src/components/callNumber.vue
Normal file
245
src/components/callNumber.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<!-- 取餐号组件 -->
|
||||
<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">
|
||||
{{ item.outCode }} - {{ item.productName }}
|
||||
</div>
|
||||
<div class="state s1" v-if="item.status == 0">
|
||||
叫号成功
|
||||
</div>
|
||||
<div class="state s2" v-if="item.status == 1">
|
||||
叫号失败
|
||||
</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 { 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 show() {
|
||||
dialogVisible.value = true
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 确认
|
||||
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
|
||||
})
|
||||
loading.value = false
|
||||
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
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getsendMessageAjax()
|
||||
})
|
||||
</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;
|
||||
}
|
||||
|
||||
.state {
|
||||
&.s1 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&.s2 {
|
||||
color: var(--el-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 4px;
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user