czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

排队

This commit is contained in:
duan 2024-09-20 11:26:51 +08:00
parent 69d758ab68
commit 14395401db
4 changed files with 1034 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/api/shop.js
View File

@ -595,7 +595,86 @@ export function updateStatus(data) {
data
});
}
// 叫号记录
export function callRecord(params) {
return request({
url: `/callTable/callRecord`,
method: "get",
params
});
}
// 删除桌型
export function callTabledelete(data) {
return request({
url: `/callTable`,
method: "delete",
data
});
}
export function callTablepost(data) {
return request({
url: '/callTable',
method: 'post',
data
})
}
// 桌型列表
export function callTable(params) {
return request({
url: `/callTable`,
method: "get",
params
});
}
// 修改桌号
export function callTabledataput(data) {
return request({
url: `/callTable`,
method: "put",
data
});
}
// 叫号列表
export function callTablequeue(params) {
return request({
url: '/callTable/queue',
method: 'get',
params
})
}
// 取消叫号
export function callTableput(data) {
return request({
url: `/callTable/updateState`,
method: "put",
data
});
}
export function callTabletakeNumber(data) {
return request({
url: '/callTable/takeNumber',
method: 'post',
data: {
...data
}
})
}
// 叫号配置获取
export function callTableconfig(params) {
return request({
url: '/callTable/config',
method: 'get',
params
})
}
// 叫号配置修改
export function callTableconfigput(data) {
return request({
url: `/callTable/config`,
method: "put",
data
});
}
/**
* 员工删除
* @returns

383
src/views/lineUp/basic.vue Normal file
View File

@ -0,0 +1,383 @@
<template>
<div class="basicStyle">
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
<el-form-item label="排队页地址">
<span style="color: #999999;">{{ form.pageAddress }}</span>
<span @click="copydata">复制</span>
</el-form-item>
<el-form-item label="线上取号">
<el-switch v-model="form.isOnline" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="背景图片">
<el-image :src="form.bgCover || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 1;
"></el-image>
</el-form-item>
<el-form-item label="桌型">
<el-button type="primary" @click="showLocation = true; title = '新增'">添加</el-button>
<el-table :data="formtable.records" border style="width:50%;margin-top: 20px;">
<el-table-column prop="name" label="名称">
</el-table-column>
<el-table-column prop="note" label="描述">
</el-table-column>
<el-table-column prop="waitTime" label="等待时间「桌」">
</el-table-column>
<el-table-column prop="prefix" label="号码前缀">
</el-table-column>
<el-table-column prop="start" label="开始号码">
</el-table-column>
<el-table-column prop="name" label="操作">
<template v-slot="scope">
<div style="display: flex;gap: 10px;">
<el-button type="text" @click="editPop(scope.row)">编辑</el-button>
<el-button type="text" style="color: #FF4D4F;"
@click="deleteevnt(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<h2>通知模板</h2>
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
<el-form-item label="排队成功提醒">
<el-input v-model="form.successMsg" placeholder="请输入排队成功提醒" disabled
style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="排队即将排到通知">
<el-input v-model="form.nearMsg" placeholder="请输入排队成功提醒" disabled style="width: 500px;"></el-input>
<div class="duoshaozhuo">
<div>前面等待</div>
<el-input v-model="form.nearNum" placeholder="" disabled></el-input>
<div>桌时提醒</div>
</div>
</el-form-item>
<el-form-item label="排队到号提醒">
<el-input v-model="form.callingMsg" placeholder="请输入排队到号提醒" disabled
style="width: 500px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandle" :loading="formLoading">
<span v-if="!formLoading">保存</span>
<span v-else>保存中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog :title="title" :visible.sync="showLocation" width="500px">
<el-form :model="forms" label-width="140px" label-position="left">
<el-form-item label="名称">
<el-input v-model="forms.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="forms.note" placeholder="如：1-2人"></el-input>
</el-form-item>
<el-form-item label="等待时间">
<el-input v-model="forms.waitTime" placeholder="0">
<template slot="append">分钟/1桌</template>
</el-input>
</el-form-item>
<el-form-item label="号码前缀">
<el-input v-model="forms.prefix" placeholder="请输入英文字母「不支持中文」"></el-input>
</el-form-item>
<el-form-item label="开始号码">
<el-input v-model="forms.start" placeholder="请输入开始号码"></el-input>
</el-form-item>
<el-form-item label="过号保留">
<el-input v-model="forms.postponeNum" :disabled="!forms.isPostpone" placeholder="请输入名称">
<template slot="append">桌</template>
<div slot="prepend">
<span> <el-checkbox v-model="forms.isPostpone">开启顺延</el-checkbox></span>
</div>
</el-input>
</el-form-item>
<el-form-item label="" width="120">
<template v-slot="scope">
<div style="display: flex;gap: 10px;">
<el-button plain @click="showLocation = false; forms = {}">取消</el-button>
<el-button type="primary" @click="submitE">确定</el-button>
</div>
</template>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
@close="showUpload = false">
<el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" style="display: block;" class="el-upload__tip">
请勿上传违法文件，且文件不超过15M
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import crudQiNiu from "@/api/tools/qiniu";
import { callTableconfig, callTable, callTableconfigput, callTablepost,callTabledataput, callTabledelete } from "@/api/shop";
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["qiNiuUploadApi"])
},
data() {
return {
showLocation: false,
showUpload: false,
uploadIndex: 1,
startTime: "",
endTime: "",
formLoading: false,
form: {},
forms: {},
formtable: "",
rules: {
shopName: [
{
required: true,
message: " ",
trigger: "blur"
}
],
phone: [
{
required: true,
message: " ",
trigger: "blur"
}
],
settleTime: [
{
required: true,
message: " ",
trigger: "blur"
}
]
},
fileList: [],
files: [],
headers: {
Authorization: getToken()
},
title: ""
};
},
mounted() {
this.tbShopInfo();
},
methods: {
async editPop(item) {
this.forms = item
console.log(item, '调试131')
console.log(item.isPostpone, '调试131')
this.showLocation = true
this.title = '编辑'
},
async deleteevnt(item) {
const res = await callTabledelete({
shopId: localStorage.getItem("shopId"),
callTableId: item.id
});
this.tbShopInfo()
},
async submitE() {
if (this.title == '新增') {
const res = await callTablepost({
shopId: localStorage.getItem("shopId"),
...this.forms
});
if (res) {
this.showLocation = false
this.tbShopInfo()
}
} else {
console.log(this.forms.nearNum,'调试121')
const res = await callTabledataput({
shopId: localStorage.getItem("shopId"),
...this.forms,
callTableId:this.forms.id
});
if (res) {
this.showLocation = false
this.tbShopInfo()
}
}
},
// 获取用户详情
async tbShopInfo() {
try {
const res = await callTableconfig({ shopId: localStorage.getItem("shopId") });
this.form = res;
const data = await callTable({
shopId: localStorage.getItem("shopId"),
page: 1,
size: 10,
});
this.formtable = data
} catch (error) { }
},
// 保存
submitHandle() {
this.$refs.form.validate(async valid => {
if (valid) {
this.formLoading = true;
try {
// if (this.startTime && this.endTime) {
// this.form.businessTime = `${this.startTime}-${this.endTime}`;
// }
const res = await callTableconfigput(this.form);
this.formLoading = false;
this.forms = {}
this.$notify({
title: "成功",
message: "提交成功",
type: "success"
});
} catch (error) { }
}
});
},
handleSuccess(response, file, fileList) {
// const uid = file.uid
// const id = response.id
// this.files.push({ uid, id })
console.log("上传成功", response);
this.files = response.data;
this.form.bgCover = response.data[0]
},
handleBeforeRemove(file, fileList) {
for (let i = 0; i < this.files.length; i++) {
if (this.files[i].uid === file.uid) {
crudQiNiu.del([this.files[i].id]).then(res => { });
return true;
}
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message);
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR);
},
async copydata(content) {
let copyResult = true
// 设置想要复制的文本内容
const text = this.form.pageAddress || '复制内容为空哦~';
// 判断是否支持clipboard方式
if (!!window.navigator.clipboard) {
// 利用clipboard将文本写入剪贴板（这是一个异步promise）
await window.navigator.clipboard.writeText(text).then((res) => {
console.log('复制成功');
}).catch((err) => {
console.log('复制失败--采取第二种复制方案', err);
// clipboard方式复制失败 则采用document.execCommand()方式进行尝试
copyResult = copyContent2(text)
})
} else {
// 不支持clipboard方式 则采用document.execCommand()方式
copyResult = copyContent2(text)
}
// 返回复制操作的最终结果
// return copyResult;
},
// 刷新列表数据
doSubmit() {
this.fileList = [];
this.showUpload = false;
switch (this.uploadIndex) {
case 1:
this.form.bgCover = this.files[0];
break;
case 2:
this.form.coverImg = this.files[0];
break;
case 3:
this.form.shopQrcode = this.files[0];
break;
default:
break;
}
}
}
};
</script>
<style scoped lang="scss">
.basicStyle {
padding: 20px;
}
.map_box {
width: 100%;
position: relative;
.map {
height: 300px;
}
.search_box {
position: absolute;
top: 10px;
left: 10px;
}
.search_wrap {
padding: 6px 0;
.item {
display: flex;
padding: 12px 0;
.left {
flex: 1;
display: flex;
flex-direction: column;
padding-right: 20px;
.location {
color: #999;
padding-top: 4px;
}
}
}
}
}
.duoshaozhuo {
display: flex;
align-items: center;
>input {
width: 120px;
border: none !important;
}
>div {
color: #999;
width: 118px;
height: 33px;
line-height: 33px;
text-align: center;
border: 1px solid #DDDFE6;
background-color: #f5f7fa;
margin-top: 9px;
}
}
</style>

447
src/views/lineUp/index.vue Normal file
View File

@ -0,0 +1,447 @@
<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">取号</el-button>
<el-button plain type="primary" @click="toUrl">叫号记录</el-button>
</div>
</div>
<div style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between; ">
<div class="lineUpBoxList" v-for="item in list.records" :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 } 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
}
},
profilepicture(d) {
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: 1,
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>

124
src/views/lineUp/record.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="app-container">
<div class="head-container">
叫号记录
</div>
<div class="head-container" id="table_drag">
<el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
<el-table-column label="桌号" prop="callNum"> </el-table-column>
<el-table-column label="桌型" prop="typeEnum">
<template v-slot="scope">
{{ scope.row.name }}({{ scope.row.note }})
</template>
</el-table-column>
<el-table-column label="手机号" prop="phone"> </el-table-column>
<el-table-column label="状态">
<template v-slot="scope">
<span>{{ scope.row.state | stateFilter }}</span>
</template>
</el-table-column>
<el-table-column label="时间" prop="callTime"> </el-table-column>
</el-table>
</div>
<!-- <div class="head-container">
<el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
:page-size="tableData.size" @current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div> -->
</div>
</template>
<script>
import { callRecord, } from '@/api/shop'
export default {
data() {
return {
query: {
productId: '',
name: '',
categoryId: '',
typeEnum: ''
},
tableData: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0
}
}
},
async mounted() {
await this.getTableData()
},
methods: {
// 分页回调
// paginationChange(e) {
// this.tableData.page = e - 1
// this.getTableData()
// },
// 获取商品列表
async getTableData() {
try {
const res = await callRecord({
shopId: localStorage.getItem('shopId'),
page: 1,
size: 9999
})
this.tableData.data = res.records
} catch (error) {
console.log(error)
}
},
// handleSizeChange(val) {
// this.tableData.size = val
// this.getTableData()
// },
},
filters: {
stateFilter(i) {
if (i == -1) {
return '已取消'
} else if (i == 0) {
return '排队中'
} else if (i == 1) {
return '叫号中'
} else if (i == 2) {
return '已入座'
} else if (i == 3) {
return '已过号 '
}
}
}
}
</script>
<style scoped lang="scss">
.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>