收银台

收银台/cashier/src/pages/table/index.vue

@@ -187,12 +187,12 @@
         <div class="body">
           <ul class="list">
             <li
-                @click="tiaozhuan(qrcode.id,qrcode.is_use,qrcode.table_number)"
-              v-for="qrcode in item.tableQrcode"
-              :key="qrcode.id"
-              :class="{ 'active': qrcode.is_use === 1, 'active2': qrcode.is_use === 2 }"
+                @click="tiaozhuan(qrcode.id,qrcode.is_use,qrcode.table_number,qrcode.kaibao,qrcode)"
+                v-for="qrcode in item.tableQrcode"
+                :key="qrcode.id"
+                :class="{ 'active3': qrcode.is_use === 1 , 'active2': (qrcode.is_use === 2  && !qrcode.kaibao) , 'active': (qrcode.is_use === 2  && qrcode.kaibao)}"
                 
-              class="item"
+                class="item"
             >
               <div class="code">{{ qrcode.table_number }}</div>
               <template v-if="qrcode.is_use == 1">
@@ -526,12 +526,57 @@
         </FormItem>
 
       </Form>
-      <div slot="footer">
-        <Button type="primary" size="large" long @click="orderRefund2">提交</Button>
-      </div>
+     <div slot="footer" style="text-align: center;">
+       <Button type="primary" style="width:40%" size="large" long @click="orderRefund2">提交预定</Button>
+     		<Button type="primary" style="width:40%"  size="large" long @click="orderRefund3">直接开包</Button> 
+     </div>
     </Modal>
-
-
+	<Modal v-model="kaibao" title="开包" class-name="refund-modal">
+	  <Form :model="kaibaodata" :label-width="90">
+	    <FormItem label="桌码：">
+	      <Input v-model="kaibaodata.table_number" disabled></Input>
+	    </FormItem>
+		<FormItem label="预营销经理：" label-for="yuding_date" prop="yuding_date">
+			<Input v-model="kaibaodata.yingxiaojingli" disabled></Input>
+		</FormItem>
+	    <FormItem label="手机号：" required>
+	      <InputNumber v-model="kaibaodata.phone" disabled></InputNumber>
+	    </FormItem>
+	    <FormItem label="预定时间：" label-for="yuding_date" prop="yuding_date">
+			<Input v-model="kaibaodata.yuyueshijian" disabled></Input>
+	    </FormItem>
+	    <FormItem label="备注：" required>
+	      <Input v-model="kaibaodata.remarks" disabled></Input>
+	    </FormItem>
+	
+	  </Form>
+	  <div slot="footer">
+	    <Button type="primary" size="large" long @click="orderRefund3">确认开台</Button>
+	  </div>
+	</Modal>
+	<Modal v-model="qingtai" title="取消开台" class-name="refund-modal">
+	  <Form :model="kaibaodata" :label-width="90">
+	    <FormItem label="桌码：">
+	      <Input v-model="kaibaodata.table_number" disabled></Input>
+	    </FormItem>
+		<FormItem label="预营销经理：" label-for="yuding_date" prop="yuding_date">
+			<Input v-model="kaibaodata.yingxiaojingli" disabled></Input>
+		</FormItem>
+	    <FormItem label="手机号：" required>
+	      <InputNumber v-model="kaibaodata.phone" disabled></InputNumber>
+	    </FormItem>
+	    <FormItem label="预定时间：" label-for="yuding_date" prop="yuding_date">
+			<Input v-model="kaibaodata.yuyueshijian" disabled></Input>
+	    </FormItem>
+	    <FormItem label="备注：" required>
+	      <Input v-model="kaibaodata.remarks" disabled></Input>
+	    </FormItem>
+	
+	  </Form>
+	  <div slot="footer">
+	    <Button type="primary" size="large" long @click="orderRefund4">取消开台</Button>
+	  </div>
+	</Modal>
   </div>
 </template>
 
@@ -588,6 +633,8 @@ export default {
       optionsList:[],
       businessHoursOptions:[],
       yudingtankuang:false,
+	  kaibao:false,
+	  kaibaodata:[],
       yudingData:[
 
       ],
@@ -603,6 +650,7 @@ export default {
       tabs: ['商品信息', '订单详情', '订单记录'],
       sle: 0,
       filterModal: false,
+	  qingtai:false,
       userFrom: {
         keyword: '',
         page: 1,
@@ -1437,16 +1485,27 @@ export default {
           this.selectOrderData.payPrice;
       });
     },
-    tiaozhuan(table_id,is_use,table_number) {
-      if(is_use > 0){
+    tiaozhuan(table_id,is_use,table_number,kaibao,table) {
+      if(is_use == 1){
         var table_id = table_id
-        const url = window.location.origin + '/cashier/table/index2?tiaozhuan_table_id='+table_id;
-        window.open(url, '_blank');
-      }else{
+       this.$router.push({
+         path:'/cashier/table/index2?tiaozhuan_table_id='+table_id
+       })
+    	
+      }else if(is_use == 0){
         //空桌预定
         this.yudingtankuang = true
         this.wtable_id = table_id
         this.wtable_number = table_number
+      }else if(is_use == 2 && !kaibao){
+        //空桌预定
+        this.kaibao = true
+    	this.wtable_id = table_id
+        this.kaibaodata = table
+      }else{
+		  this.qingtai = true
+		  this.wtable_id = table_id
+		  this.kaibaodata = table
       }
     
       // this.$router.push({
@@ -1762,7 +1821,50 @@ export default {
       }).catch(err => {
         this.$Message.error(err.msg);
       });
-    }
+    },
+	orderRefund3() {
+		this.$Modal.confirm({
+		  title: '确定开台',
+		  content:
+		    '<p>确定要开通此台吗？</p><p>开台成功后，用户即可扫码点单！</p>',
+		  onOk: () => {
+		    swithUser({
+		      wtable_id:this.wtable_id,
+				kaibao:1
+		    }).then(res => {
+		      this.kaibao = false;
+			  this.yudingtankuang = false;
+		      this.$Message.success(res.msg);
+		          this.wtable_id = ''
+		    			this.getCodeList()
+		    	
+		    }).catch(err => {
+		      this.$Message.error(err.msg);
+		    });
+		  },
+		});
+	},
+	orderRefund4() {
+		this.$Modal.confirm({
+		  title: '确定取消',
+		  content:
+		    '<p>确定要取消此台信息吗？</p><p>取消成功以后，需要预定或者收银台开台！</p>',
+		  onOk: () => {
+		    swithUser({
+		      wtable_id:this.wtable_id,
+			  kaibao:2
+		    }).then(res => {
+		      this.qingtai = false;
+		      this.$Message.success(res.msg);
+		          this.wtable_id = ''
+		    			this.getCodeList()
+		    	
+		    }).catch(err => {
+		      this.$Message.error(err.msg);
+		    });
+		  },
+		});
+	}
   },
 };
 </script>
@@ -2038,7 +2140,11 @@ export default {
        background: deepskyblue;
        color: #FFFFFF;
      }
-
+	&.active3 {
+       border-color: darkred;
+       background: darkred;
+       color: #FFFFFF;
+     }
       .code {
         margin-bottom: 17px;
         font-weight: 600;

收银台/cashier/src/pages/table/index2.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="order-wrapper">
+	  <button @click="backtable" style="color: #ffffff;background-color: #1890ff;font-size: 20px;border:unset; border-radius: 20px;writing-mode: vertical-rl;width:50px">返回桌码管理</button>
     <div v-show="active == 1" class="order" >
 
       <div class="order-data">
@@ -58,7 +59,9 @@
             <span class="trip">噢～目前暂无挂单记录</span>
           </div>
         </div>
+		
         <div v-if="selectOrderData.id && (selectOrderData.status != 2 || (selectOrderData.orderId && !selectOrderData.orderId.is_del))" class="footer">
+		  
           <Button v-if="staff_id" @click="storeTap">{{ storeInfos.staff_name }}</Button>
           <div v-if="selectOrderData.orderId && selectOrderData.orderId.paid">
             <Button class="btn grey" @click="remarks">订单备注</Button>
@@ -75,6 +78,7 @@
             >
           </div>
           <div v-else-if="selectOrderData.status != 3 && (!selectOrderData.orderId || !selectOrderData.orderId.paid)">
+			<Button class="btn red" @click="cancelTable">清理桌台</Button>
             <Button class="btn red" @click="cancelTable">取消</Button>
             <Button v-if="selectOrderData.orderId && selectOrderData.orderId.pay_type == 'offline'" class="btn blue" @click="payOffline">立即支付</Button>
             <template v-else-if="selectOrderData.orderId && !selectOrderData.orderId.paid">
@@ -94,6 +98,9 @@
             </template>
           </div>
         </div>
+		<div v-else class="footer" >
+		   <Button class="btn red" @click="cancelTable">清理桌台</Button>
+		</div>
       </div>
       <!-- 备注 -->
       <order-remark
@@ -1092,7 +1099,11 @@ export default {
     yuding() {
       this.modal4 = true;
     },
-
+	backtable(){
+		this.$router.push({
+		  path:'/cashier/table/index?active=2'
+		})
+	},
     // 计算金额
     cartCompute() {
       if (!this.cartList.length) {