市配详情添加是否全屏

src/views/distribution/deliverylist/distributionDeliveryListedt.vue

@@ -392,10 +392,35 @@
       <el-dialog
         :title="title"
         v-model="box"
-        width="70%"
+        width="80%"
+        class="el-dialog-view"
+        :fullscreen="wrapoption.fullscreen"
         :before-close="beforeClose"
         append-to-body
       >
+        <template #header="{ close, titleId, titleClass }">
+          <div class="my-header flex-c-sb">
+            <div :id="titleId" :class="titleClass">{{ title }}</div>
+            <div class="flex-c-c">
+              <!-- 全屏显示按钮 -->
+              <el-button type="text" v-if="!wrapoption.fullscreen">
+                <el-icon class="" @click="handleFullScrean('open', 'el-dialog-view')"
+                  ><FullScreen
+                /></el-icon>
+              </el-button>
+              <el-button type="text" v-else>
+                <el-icon class="" @click="handleFullScrean('close', 'el-dialog-view')"
+                  ><CopyDocument
+                /></el-icon>
+              </el-button>
+
+              <!-- 弹窗关闭按钮 -->
+              <el-button type="text">
+                <el-icon class="" @click="close"><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </template>
         <!-- <el-table
           ref="table"
           v-loading="loading"
@@ -432,6 +457,7 @@
           @inputTxt="winputsc"
           @timeCheck="timesc"
           @selectCheck="selectsc"
+          ref="wtableBox"
           @selection="selectionChange"
         >
           <template #default="slotProps">
@@ -647,6 +673,7 @@ import dayjs from 'dayjs';
 import { updateReservation } from '@/api/distribution/distributionReservation';
 import { ElMessage } from 'element-plus';
 import { getToken } from '@/utils/auth';
+import { setNodeHeight } from '@/utils/util.js';
 export default {
   data() {
     return {
@@ -2330,7 +2357,10 @@ export default {
         index: true,
         border: true,
         selection: true,
+        /** 搜索 */
         query: {},
+        /** 是否全屏 */
+        fullscreen: false,
         column: [
           {
             label: '序号',
@@ -3431,13 +3461,38 @@ export default {
         this.form = res.data.data;
       });
     },
-    handleView(row) {
+    async handleView(row) {
       console.log('查看>>>>>>>>>>', row);
       this.title = '客户包件';
       this.view = true;
       this.box = true;
       this.wid = row.id;
       this.getWrapdetails(this.wpage);
+      await this.$nextTick();
+      setNodeHeight(this.$refs.wtableBox.$el, '600px');
+    },
+    /** 是否全屏 */
+    /**
+     * 是否开启全屏
+     * @params(_type) 开启或关闭
+     */
+    handleFullScrean(_type, _name) {
+      let _node = '';
+      if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+      switch (_name) {
+        case 'el-dialog-view':
+          this.wrapoption.fullscreen = !this.wrapoption.fullscreen;
+          if (_type === 'close') {
+            if (_node) setNodeHeight(_node, '600px');
+          } else {
+            if (_node) setNodeHeight(_node);
+          }
+          break;
+
+        default:
+          break;
+      }
     },
     handleSign(row) {
       console.log('签收>>>>>>>>>>', row);