You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
599 lines
15 KiB
599 lines
15 KiB
<template>
|
|
<view class="all-container pd-main backcor6 font15">
|
|
<view class=" width100 mart10">
|
|
<button class="btns icon tianjia" @click.stop="clickToAdd()">生成桌台</button>
|
|
</view>
|
|
|
|
<view class="mart20 backcorfff marb20">
|
|
<view class="backcor6 paddbotm5 font13 fcor089">(长按二维码图片可保存至手机相册)</view>
|
|
<view class="dis-flex height40 bor-botm1">
|
|
<view class="flex-1 fotct fontwig6 ">二维码</view>
|
|
<view class="flex-1 fotct fontwig6">桌号</view>
|
|
<view class="flex-1 fotct fontwig6">桌名</view>
|
|
<view class="flex-1 fotct fontwig6">状态</view>
|
|
<view class="flex-1 fotct fontwig6">操作</view>
|
|
</view>
|
|
|
|
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " @click="openTableDetail(item)"
|
|
v-for="(item,index) in tableList" :key="index">
|
|
|
|
<view class="flex-1 fotct" @click.stop>
|
|
<image :src="item.qrCodeImgUrl" mode="aspectFit" class="width100 height60 verc"></image>
|
|
</view>
|
|
<view class="flex-1 fotct text1">
|
|
{{item.tableNumber}}
|
|
</view>
|
|
<view class="flex-1 fotct text1">
|
|
{{item.tableName}}
|
|
</view>
|
|
<view class="flex-1 fotct text1" :class="{'fcorred':item.status==2}">
|
|
{{item.status | filterStatus}}
|
|
</view>
|
|
<next-bubble-menu class="flex-1" :d-width="150" :dataList="item.status |filterDataList"
|
|
bingEleId="moreType" @change="getItem($event,item)">
|
|
<view class="marglerig font15 fotct" id="moreType">更多<text class="icon xia font14"></text></view>
|
|
</next-bubble-menu>
|
|
<!-- <view class="flex-1 fotct dis-flex flex-center">
|
|
|
|
<view class="marglerig fcorred font13" @click.stop="toDeleteTable(item)"><text
|
|
class="icon shanchu font14 fcorred"></text>删除</view>
|
|
<view class="marglerig fcor41c font13" @click.stop="editTable(item)"><text
|
|
class="icon bianji font14 fcor41c"></text>编辑</view>
|
|
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开台 -->
|
|
<uni-popup ref="openTableDialog" type="dialog">
|
|
<uni-popup-dialog mode="input" :title="openTableName" :before-close="true" :value="peopleNum"
|
|
placeholder="请输入就餐人数" @confirm="dialogOpenTableConfirm" @close="closeOpenTable"></uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
<!-- 编辑桌台 -->
|
|
<uni-popup ref="popupEditTable" type="center">
|
|
<view style="width: 80vw;" class="backcorfff border-10r pd-main font16">
|
|
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">桌台编号:
|
|
</view>
|
|
<input type="number" name="name" v-model.trim="tableEditData.tableNumber" placeholder-class="corf6"
|
|
class=" flex-1 " placeholder="请输入桌台编号">
|
|
</view>
|
|
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">桌台名称:
|
|
</view>
|
|
<input type="text" name="name" v-model.trim="tableEditData.tableName" placeholder-class="corf6"
|
|
class=" flex-1 " placeholder="请输入桌台名称">
|
|
</view>
|
|
<button class="btnw50 " @click.stop="saveEditTable()">保存</button>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 生成桌台弹窗 -->
|
|
<uni-popup ref="inputDialog" type="dialog">
|
|
<uni-popup-dialog mode="input" title="输入生产数量" :before-close="true" :value="generateNum"
|
|
placeholder="请输入生产数量" @confirm="dialogInputConfirm" @close="close"></uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
<!-- 查看详情 -->
|
|
<uni-popup ref="popupDetail" type="bottom" background-color="#ffffff">
|
|
<view style="height: 60vh;overflow-y: auto;" class="backcorfff border-10r-lr pd-main font16">
|
|
<view class="pop-contain pd-main">
|
|
<view class="pop-title fontwig6"><text>详情</text></view>
|
|
<view class="" v-if="tableDetail">
|
|
<view class="width100 dis-flex bor-botm1 ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">门店名称</view>
|
|
<view class="flex-1 fotct ">{{tableDetail.storeName}}</view>
|
|
</view>
|
|
<view class="width100 dis-flex bor-botm1 ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台编号</view>
|
|
<view class="flex-1 fotct ">{{tableDetail.tableNumber}}</view>
|
|
</view>
|
|
<view class="width100 dis-flex bor-botm1 ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台名称</view>
|
|
<view class="flex-1 fotct ">{{tableDetail.tableName}}</view>
|
|
</view>
|
|
<view class="width100 dis-flex bor-botm1 ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台状态</view>
|
|
<view class="flex-1 fotct ">{{tableDetail.status | filterStatus}}</view>
|
|
</view>
|
|
<view class="width100 dis-flex bor-botm1 ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view>
|
|
<view class="flex-1 fotct ">{{tableDetail.createTime | timeFormat}}</view>
|
|
</view>
|
|
<view class="width100 dis-flex ">
|
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight80">二维码</view>
|
|
<view class="flex-1 fotct ">
|
|
<image :src="tableDetail.qrCodeImgUrl"
|
|
@click.stop="previewImage(tableDetail.qrCodeImgUrl)" mode="aspectFit"
|
|
class="width100 height60 verc"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
generateTable,
|
|
getTableList,
|
|
editTable,
|
|
delTable,
|
|
getTable,
|
|
startTable,
|
|
endTable
|
|
|
|
} from '@/Utils/groupBuying.js';
|
|
|
|
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue";
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
storeId: '', //门店id
|
|
generateNum: '', //生产数量
|
|
tableList: [], //列表
|
|
pageNum: 1,
|
|
pageSize: 99999,
|
|
tableEditData: {
|
|
serialNumber: '', //桌台唯一编号
|
|
tableNumber: '', //桌台编号
|
|
tableName: '', //桌台名称
|
|
},
|
|
tableDetail: null, //详情
|
|
|
|
/* 开台 */
|
|
openTableName:'',//开台桌名
|
|
peopleNum:'',//就餐人数
|
|
serialNumber:'',//桌号
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.storeId = options.storeId;
|
|
this.getTableList(true);
|
|
},
|
|
components: {
|
|
nextBubleMenu
|
|
},
|
|
filters: {
|
|
/* type:桌台状态 0：不可用 1：未开台 2：已开台 */
|
|
/* 1:编辑，2:开台，3：关台，4：删除， */
|
|
filterDataList(type) {
|
|
switch (type) {
|
|
case 0:
|
|
return [{
|
|
id: 1,
|
|
text: '编辑',
|
|
}, {
|
|
id: 4,
|
|
text: '删除',
|
|
}, ];
|
|
case 1:
|
|
return [{
|
|
id: 1,
|
|
text: '编辑',
|
|
}, {
|
|
id: 2,
|
|
text: '开台',
|
|
}, {
|
|
id: 4,
|
|
text: '删除',
|
|
}, ];
|
|
case 2:
|
|
return [{
|
|
id: 1,
|
|
text: '编辑',
|
|
}, {
|
|
id: 3,
|
|
text: '关台',
|
|
}, {
|
|
id: 4,
|
|
text: '删除',
|
|
} ];
|
|
default:
|
|
return [{
|
|
id: 1,
|
|
text: '编辑',
|
|
}, {
|
|
id: 4,
|
|
text: '删除',
|
|
}, ];
|
|
}
|
|
|
|
},
|
|
filterStatus(type){
|
|
switch (type) {
|
|
case 0:
|
|
return '不可用';
|
|
case 1:
|
|
return '未开台';
|
|
case 2:
|
|
return '已开台';
|
|
default:
|
|
return '未知';
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
/* 更多操作的回调函数 */
|
|
getItem(data, item) {
|
|
if (data.id == 1) { //编辑
|
|
this.editTable(item)
|
|
} else if (data.id == 2) {
|
|
//开台
|
|
this.serialNumber = item.serialNumber;
|
|
this.openTableName = item.tableName;
|
|
this.peopleNum = ''; //重置就餐人数
|
|
this.$refs.openTableDialog.open();
|
|
|
|
}else if (data.id == 3) { //关台
|
|
this.endTableMethod(item)
|
|
}else if (data.id == 4) { //删除
|
|
this.toDeleteTable(item)
|
|
}
|
|
console.log(data, item)
|
|
},
|
|
|
|
/* 开台 -确认 pupup-回调 */
|
|
dialogOpenTableConfirm(e){
|
|
let reg = /^\+?[1-9][0-9]*$/;
|
|
if (!reg.test(e)) {
|
|
uni.showToast({
|
|
title: '请输入大于0的数字哦!',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
this.peopleNum = e;
|
|
this.startTableMethod()
|
|
},
|
|
/* 开台 -取消 pupup-回调 */
|
|
closeOpenTable(){
|
|
this.$refs.openTableDialog.close();
|
|
},
|
|
//开台
|
|
startTableMethod(){
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
let params={
|
|
serialNumber:this.serialNumber,
|
|
peopleNum:this.peopleNum
|
|
}
|
|
console.log(params,"params")
|
|
startTable(params).then(res=>{
|
|
uni.hideLoading();
|
|
this.$refs.openTableDialog.close();
|
|
if (res.return_code == '000000') {
|
|
this.getTableList();
|
|
uni.showToast({
|
|
title: res.return_data,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}).catch(() => {
|
|
uni.hideLoading();
|
|
this.$refs.openTableDialog.close();
|
|
})
|
|
},
|
|
|
|
/* 关台 */
|
|
endTableMethod(item){
|
|
let _this = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定把‘${item.tableName}’关台吗?`,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
let params = {
|
|
serialNumber: item.serialNumber
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
endTable(params).then(res => {
|
|
uni.hideLoading();
|
|
let title;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
_this.getTableList();
|
|
} else {
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}).catch(() => {
|
|
uni.hideLoading();
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
// console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
/* 生成桌台 */
|
|
clickToAdd() {
|
|
this.generateNum = '';
|
|
this.$refs.inputDialog.open()
|
|
},
|
|
dialogInputConfirm(e) {
|
|
let reg = /^\+?[1-9][0-9]*$/;
|
|
if (!reg.test(e)) {
|
|
uni.showToast({
|
|
title: '请输入大于0的数字哦!',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
this.generateNum = e;
|
|
this.generateTable();
|
|
},
|
|
/* 生成桌台 */
|
|
generateTable() {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
let params = {
|
|
"storeId": this.storeId,
|
|
"generateNum": this.generateNum
|
|
}
|
|
generateTable(params).then(res => {
|
|
uni.hideLoading();
|
|
this.$refs.inputDialog.close();
|
|
if (res.return_code == '000000') {
|
|
this.generateNum = '';
|
|
this.getTableList();
|
|
uni.showToast({
|
|
title: res.return_data,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}).catch(() => {
|
|
this.$refs.inputDialog.close();
|
|
})
|
|
},
|
|
close() {
|
|
this.generateNum = '';
|
|
this.$refs.inputDialog.close();
|
|
},
|
|
/* 查询桌台列表 */
|
|
getTableList(flag) {
|
|
if (flag) {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
}
|
|
let params = {
|
|
storeId: this.storeId,
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
|
|
}
|
|
getTableList(params).then(res => {
|
|
if (flag) {
|
|
uni.hideLoading()
|
|
}
|
|
if (res.return_code == '000000') {
|
|
this.tableList = res.return_data.list;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/* 点击打开详情 */
|
|
openTableDetail(item) {
|
|
this.tableDetail = null;
|
|
this.getTableDetail(item, (res) => {
|
|
this.tableDetail = res.return_data;
|
|
this.$refs.popupDetail.open('bottom');
|
|
})
|
|
},
|
|
/* 查询桌台详情 */
|
|
getTableDetail(item, callback) {
|
|
let params = {
|
|
serialNumber: item.serialNumber
|
|
}
|
|
getTable(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
callback(res);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/* 删除桌台 */
|
|
toDeleteTable(item) {
|
|
|
|
let _this = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定删除‘${item.tableName}’吗?`,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
let params = {
|
|
serialNumber: item.serialNumber
|
|
}
|
|
uni.showLoading({
|
|
title: '删除中'
|
|
})
|
|
delTable(params).then(res => {
|
|
uni.hideLoading();
|
|
let title;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
_this.getTableList();
|
|
} else {
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}).catch(() => {
|
|
uni.hideLoading();
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
// console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/* 点击编辑桌台 */
|
|
editTable(item) {
|
|
this.formatTableEditData();
|
|
this.getTableDetail(item, (res) => {
|
|
this.tableEditData.serialNumber = res.return_data.serialNumber; //桌台唯一编号
|
|
this.tableEditData.tableNumber = res.return_data.tableNumber; //桌台编号
|
|
this.tableEditData.tableName = res.return_data.tableName; //桌台名称
|
|
this.$refs.popupEditTable.open('center');
|
|
})
|
|
},
|
|
formatTableEditData() {
|
|
this.tableEditData.serialNumber = ''; //桌台唯一编号
|
|
this.tableEditData.tableNumber = ''; //桌台编号
|
|
this.tableEditData.tableName = ''; //桌台名称
|
|
},
|
|
//保存编辑桌台信息
|
|
saveEditTable() {
|
|
|
|
if (!this.tableEditData.tableNumber || !this.tableEditData.tableName) {
|
|
uni.showToast({
|
|
title: '请填写完整哦!',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
uni.showLoading({
|
|
title: '保存中...'
|
|
})
|
|
editTable(this.tableEditData).then(res => {
|
|
uni.hideLoading();
|
|
this.$refs.popupEditTable.close();
|
|
this.formatTableEditData();
|
|
if (res.return_code == '000000') {
|
|
this.getTableList();
|
|
uni.showToast({
|
|
title: res.return_data,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}).catch(() => {
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
|
|
// 预览
|
|
previewImage(img) {
|
|
uni.previewImage({
|
|
current: 0,
|
|
indicator: "number",
|
|
loop: "true",
|
|
urls: [img]
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btns {
|
|
width: 21%;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background-color: #0083f5;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
padding: 0px;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
|
|
.border-10r {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.border-10r-lr {
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
/* 详情弹窗 */
|
|
.pop-contain {
|
|
text-align: center;
|
|
padding-top: 50px;
|
|
background-color: #ffffff;
|
|
|
|
.pop-title {
|
|
text-align: center;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #ffffff;
|
|
|
|
}
|
|
|
|
.titleWidth {
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.minheight40 {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.minheight80 {
|
|
min-height: 80px;
|
|
line-height: 80px;
|
|
}
|
|
}
|
|
</style> |