453 lines
12 KiB
Vue
453 lines
12 KiB
Vue
<template>
|
|
<div class="lineUpBox">
|
|
<div class="lineUpBoxTop">
|
|
<ul class="lineUpBoxUl">
|
|
<li :class="[[selecttopType == '' ? 'active' : '']]" @click="gettypeevent('')">
|
|
<div>全部</div>
|
|
<div>{{ tableData.totalCount }}桌</div>
|
|
<div class="postionStyle" v-if="selecttopType == ''">
|
|
<i class="el-icon-check postionStyleI"></i>
|
|
</div>
|
|
</li>
|
|
<li v-for="item in tableData.records" :key="item.id" @click="gettypeevent(item.id)"
|
|
:class="[[selecttopType == item.id ? 'active' : '']]">
|
|
<div>{{ item.name }}</div>
|
|
<div>{{ item.totalCount }}桌</div>
|
|
<div class="postionStyle" v-if="selecttopType == item.id">
|
|
<i class="el-icon-check postionStyleI"></i>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="buttonstyle">
|
|
<el-button type="primary" @click="dialogVisibles = true; phone = ''">取号</el-button>
|
|
<el-button plain type="primary" @click="toUrl">叫号记录</el-button>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;align-items: center;flex-wrap: wrap; ">
|
|
<div class="lineUpBoxList" v-for="item in list.records" style="margin-right: 20px;" :key="item.id">
|
|
<ul>
|
|
<li>
|
|
<div>用户</div>
|
|
<div>{{ item.phone }}</div>
|
|
</li>
|
|
<li>
|
|
<div>号码</div>
|
|
<div>{{ item.callNum }}</div>
|
|
</li>
|
|
<li>
|
|
<div>桌型</div>
|
|
<div>{{ item.name }}{{ item.note }}</div>
|
|
</li>
|
|
<li>
|
|
<div>等待</div>
|
|
<div>{{ item.waitingCount }}桌</div>
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<el-button type="primary" @click="dialogConfirm(1, item)">取消</el-button>
|
|
<el-button type="primary" @click="profilepicture(item)">播报</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 播报弹窗 -->
|
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
|
|
<span>通知消息已发送</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button style="" @click="dialogConfirm(2)">完成</el-button>
|
|
<el-button type="primary" @click="dialogConfirm(3)">过号</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 取号 -->
|
|
<el-dialog title="取号" :visible.sync="dialogVisibles" width="30%">
|
|
<div>
|
|
<div style="color: #000;">选择桌型</div>
|
|
<ul class="lineUpBoxUl" style="margin-top: 10px;">
|
|
<li v-for="item in tableData.records" :key="item.id" @click="selectTabletype = item"
|
|
:class="[[selectTabletype.id == item.id ? 'active' : '']]">
|
|
<div>{{ item.name }}</div>
|
|
<div>{{ item.totalCount }}桌</div>
|
|
<div class="postionStyle" v-if="selectTabletype.id == item.id">
|
|
<i class="el-icon-check postionStyleI"></i>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;color: #000;">手机号码</div>
|
|
<div style="margin-top: 10px;">
|
|
<input v-model="phone" style="height: 30px;" type="text" placeholder="填写号码" />
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="callTabletakeNumberEvent">确认取号</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { callTable, callTablequeue, callTableput, callTabletakeNumber ,callTablecall} from '@/api/shop'
|
|
export default {
|
|
data() {
|
|
return {
|
|
query: {
|
|
productId: '',
|
|
name: '',
|
|
categoryId: '',
|
|
typeEnum: ''
|
|
},
|
|
tableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 30,
|
|
loading: false,
|
|
total: 0
|
|
},
|
|
selecttopType: "",
|
|
list: "",
|
|
dialogVisible: false,
|
|
dialogVisibles: false,
|
|
profilepictureInfo: "",
|
|
phone: "",
|
|
selectTabletype: ""
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.getlist()
|
|
await this.getTableData()
|
|
},
|
|
methods: {
|
|
async callTabletakeNumberEvent() {
|
|
const res = await callTabletakeNumber({
|
|
callTableId: this.selectTabletype.id,
|
|
shopId: localStorage.getItem('shopId'),
|
|
|
|
phone: this.phone,
|
|
note: this.selectTabletype.note,
|
|
name: this.selectTabletype.name,
|
|
})
|
|
if (res.callNum) {
|
|
this.getTableData()
|
|
this.getlist()
|
|
this.dialogVisibles = false
|
|
|
|
}
|
|
},
|
|
async profilepicture(d) {
|
|
let res = await callTablecall({
|
|
shopId: localStorage.getItem('shopId'),
|
|
callQueueId: d.id
|
|
})
|
|
if (res) {
|
|
this.dialogVisible = true
|
|
this.profilepictureInfo = d
|
|
}
|
|
},
|
|
gettypeevent(d) {
|
|
this.selecttopType = d
|
|
this.getTableData()
|
|
this.getlist()
|
|
|
|
},
|
|
async dialogConfirm(value, item) {
|
|
if (value == 1) {
|
|
const res = await callTableput({
|
|
shopId: localStorage.getItem('shopId'),
|
|
state: -1,
|
|
callQueueId: item.id
|
|
})
|
|
if (res) {
|
|
this.getTableData()
|
|
this.getlist()
|
|
}
|
|
} else if (value == 2) {
|
|
const res = await callTableput({
|
|
shopId: localStorage.getItem('shopId'),
|
|
state: 2,
|
|
callQueueId: this.profilepictureInfo.id
|
|
})
|
|
if (res) {
|
|
this.getTableData()
|
|
this.getlist()
|
|
this.dialogVisible = false
|
|
}
|
|
|
|
|
|
} else if (value == 3) {
|
|
const res = await callTableput({
|
|
shopId: localStorage.getItem('shopId'),
|
|
|
|
state: 3,
|
|
callQueueId: this.profilepictureInfo.id
|
|
})
|
|
if (res) {
|
|
this.getTableData()
|
|
this.getlist()
|
|
this.dialogVisible = false
|
|
}
|
|
}
|
|
}
|
|
,
|
|
toUrl() {
|
|
this.$router.push({ path: '/lineUp/record' })
|
|
},
|
|
// 获取商品列表
|
|
async getTableData() {
|
|
try {
|
|
|
|
const res = await callTable({
|
|
shopId: localStorage.getItem('shopId'),
|
|
page: 1,
|
|
size: 10,
|
|
})
|
|
// this.tableData.loading = false
|
|
this.tableData = res
|
|
this.selectTabletype = res.records[0]
|
|
// this.tableData.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
async getlist() {
|
|
const res = await callTablequeue({
|
|
shopId: localStorage.getItem('shopId'),
|
|
|
|
page: 1,
|
|
size: 9999,
|
|
callTableId: this.selecttopType,
|
|
state: 0
|
|
})
|
|
this.list = res
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
* {
|
|
margin: 0;
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.show {
|
|
display: none !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: block !important;
|
|
}
|
|
|
|
.lineUpBox {
|
|
padding: 20px;
|
|
}
|
|
|
|
.lineUpBoxTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.lineUpBoxUl {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
>li {
|
|
border-radius: 4px 4px 4px 4px;
|
|
border: 1px solid #DDDFE6;
|
|
width: 112px;
|
|
height: 55px;
|
|
text-align: center;
|
|
margin-right: 52px;
|
|
position: relative;
|
|
|
|
>div {
|
|
margin-top: 8px;
|
|
color: #999;
|
|
}
|
|
|
|
>div:first-child {
|
|
color: #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.postionStyle {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: -9px;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
border: 14px solid;
|
|
border-color: #318AFE #318AFE #fff #fff;
|
|
|
|
}
|
|
|
|
.postionStyleI {
|
|
position: absolute;
|
|
right: -13px;
|
|
top: -13px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid #318AFE;
|
|
|
|
>view:first-child {
|
|
color: #318AFE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttonstyle {
|
|
>button {
|
|
height: 31px;
|
|
|
|
padding: 5px 16px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lineUpBoxList {
|
|
width: 507px;
|
|
// flex: 0 0 50%;
|
|
height: 148px;
|
|
background: #FFFFFF;
|
|
border-radius: 6px 6px 6px 6px;
|
|
border: 1px solid #DDDFE6;
|
|
margin-top: 30px;
|
|
|
|
|
|
>ul {
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
>li {
|
|
>div:nth-child(2) {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
>div {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
>button {
|
|
width: 169px;
|
|
height: 32px;
|
|
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
|
|
border-radius: 1px 1px 1px 1px;
|
|
border: 1px solid #D9D9D9;
|
|
}
|
|
|
|
>button:first-child {
|
|
background: #FFFFFF;
|
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.lineUpBoxUl {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
>li {
|
|
border-radius: 4px 4px 4px 4px;
|
|
border: 1px solid #DDDFE6;
|
|
width: 112px;
|
|
height: 55px;
|
|
text-align: center;
|
|
margin-right: 52px;
|
|
position: relative;
|
|
|
|
>div {
|
|
margin-top: 8px;
|
|
color: #999;
|
|
}
|
|
|
|
>div:first-child {
|
|
color: #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.postionStyle {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: -9px;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
border: 14px solid;
|
|
border-color: #318AFE #318AFE #fff #fff;
|
|
|
|
}
|
|
|
|
.postionStyleI {
|
|
position: absolute;
|
|
right: -13px;
|
|
top: -13px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid #318AFE;
|
|
|
|
>view:first-child {
|
|
color: #318AFE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.handle {
|
|
font-size: 18px;
|
|
color: #999;
|
|
|
|
&:hover {
|
|
cursor: grab;
|
|
}
|
|
}
|
|
|
|
.shop_info {
|
|
display: flex;
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tag_wrap {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
</style> |