xuan-pay-cweb/subpackages/groupBuyingConfiguration/tableMessage/tableMessage.vue

<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>