修改页面布局，增加全屏退出全屏功能

src/views/table/components/table-diancan.vue

@@ -7,7 +7,58 @@
       :visible.sync="informationdialogshow"
       @close="onclose"
     >
-      <div class="head-container search-box flex row-between">
+      <div slot="title" class="flex row-between flex-y-center">
+        <div class="flex" style="width: 500px">
+          <div class="el-dialog__title" style="margin-right: 10px">
+            {{ title }}
+          </div>
+          <el-dropdown @command="changePostPay">
+            <el-button plain type="success" size="mini">
+              {{ postPay ? "后付费" : "先付费" }}
+              <i class="el-icon-caret-bottom"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="false">先付费</el-dropdown-item>
+              <el-dropdown-item :command="true">后付费</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <span @click="toggleFullScreen" class="flex flex-xy-center cur-pointer full-screen" >
+            <svg  v-if="!isFullScreen" t="1724396447139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8943" width="128" height="128"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#666666" p-id="8944"></path></svg>
+            <svg v-else  t="1724396479520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9141" width="128" height="128"><path d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z" fill="#666666" p-id="9142"></path></svg>
+          </span>
+        </div>
+
+        <div class="flex flex-1" style="padding-right: 50px">
+          <div class="flex-1">
+            <el-input
+              v-model="goods.query.productId"
+              size="small"
+              clearable
+              placeholder="请输入商品名称"
+              style="width: 100%"
+              class="filter-item"
+              suffix-icon="el-icon-search"
+            />
+          </div>
+          <div
+            style="display: flex; justify-content: flex-end; margin-left: 10px"
+          >
+            <div style="width: 100px; margin-left: 20px">
+              <el-select v-model="layout.sel" placeholder="请选择">
+                <el-option
+                  v-for="item in layout.list"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="head-container search-box flex row-between" v-if="false">
         <div>
           <el-dropdown @command="changePostPay">
             <el-button plain type="success" size="mini">
@@ -69,8 +120,12 @@
                 >
                 <template v-else>
                   <div class="flex cur-pointer" @click="refChooseUserOpen">
-
+                    <img
-                    <img v-if="vipUser.headImg" class="headimg" :src="vipUser.headImg" alt="" />
+                      v-if="vipUser.headImg"
+                      class="headimg"
+                      :src="vipUser.headImg"
+                      alt=""
+                    />
                     <div v-else class="headimg flex flex-x-y-center">
                       <i-icon class="el-icon-user"></i-icon>
                     </div>
@@ -899,9 +954,8 @@
     <order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
 
     <!-- 支付时的键盘弹窗 -->
-      <money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
+    <money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
-
+    </money-keyboard>
-      </money-keyboard>
   </div>
 </template>
 
@@ -983,13 +1037,15 @@ export default {
     chooseTable,
     payType,
     orderNote,
-    moneyKeyboard
+    moneyKeyboard,
   },
   data() {
     return {
-      moneyKeyboard:{
+      //是否全屏
-        show:true,
+      isFullScreen:false,
-        title:'支付'
+      moneyKeyboard: {
+        show: true,
+        title: "支付",
       },
       //true后付款false先付款
       postPay: true,
@@ -1339,9 +1395,42 @@ export default {
     this.getCategory();
   },
   methods: {
+    toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        this.enterFullScreen();
+      } else {
+        this.exitFullScreen();
+      }
+    },
+    enterFullScreen() {
+      let element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) { /* Firefox */
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) { /* IE/Edge */
+        element.msRequestFullscreen();
+      }
+      this.isFullScreen=true
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) { /* Firefox */
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) { /* IE/Edge */
+        document.msExitFullscreen();
+      }
+      this.isFullScreen=false
+
+    },
     //打开输入钱的键盘
-    openMoneyKeyboard(){
+    openMoneyKeyboard() {
-      this.$refs.refMoneyKeyboard.open()
+      this.$refs.refMoneyKeyboard.open();
     },
     changePostPay(val) {
       this.postPay = val;
@@ -1368,7 +1457,7 @@ export default {
         masterId: this.masterId,
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
-        vipUserId:this.vipUser.id
+        vipUserId: this.vipUser.id,
       });
       this.payOrderSuccess();
     },
@@ -1607,7 +1696,7 @@ export default {
     },
     //获取挂起订单
     async getCacheOrder() {
-      const res = await $getCacheOrder({tableId:this.table.tableId});
+      const res = await $getCacheOrder({ tableId: this.table.tableId });
       console.log(res);
       this.prveOrder.list = res;
     },
@@ -2236,6 +2325,18 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+.full-screen{
+  margin-left: 10px;
+  svg{
+    width: 24px;
+    height: 24px;
+  }
+  &:hover{
+      path{
+        fill: #1890ff;
+    }
+  }
+}
 
 .icon-add {
   color: rgb(34, 191, 100);
@@ -2385,13 +2486,15 @@ input[type="number"]::-webkit-outer-spin-button {
 .col-baseline {
   align-items: baseline;
 }
-.flex-x-y-center{
+.flex-x-y-center {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #efefef;
 }
-
+::v-deep .el-dialog__body{
+  padding: 0 20px;
+}
 .absolute {
   position: absolute;
 }
@@ -2856,8 +2959,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .diancan {
   display: flex;
-  height: 80vh;
+  height: calc(100vh - 75px) ;
-
   .choose-user {
     padding: 10px 0;
     border-bottom: 1px solid #ebebeb;
@@ -3087,9 +3189,8 @@ input[type="number"]::-webkit-outer-spin-button {
           display: flex;
           flex-direction: column;
           box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07);
-          .img-box{
+          .img-box {
             width: 136px;
-
           }
           img {
             width: 136px;
@@ -3148,15 +3249,13 @@ input[type="number"]::-webkit-outer-spin-button {
             display: none;
           }
         }
-        &.layout-text.sell-out{
+        &.layout-text.sell-out {
           .info {
             color: #c8c8c8;
 
             .name {
-            color: #c8c8c8;
+              color: #c8c8c8;
-
             }
-            
           }
         }
       }