From aa95aeef1495cbb5435a3ab7fdc9abe7be08d00b Mon Sep 17 00:00:00 2001
From: wuzhaozhongguo <13991544720@139.com>
Date: Mon, 31 Mar 2025 21:38:47 +0800
Subject: [PATCH] =?UTF-8?q?excel=E6=8A=A5=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=94=B6=E8=B5=B7=E5=B7=A6=E4=BE=A7=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/excelreport/viewer/index.vue    | 80 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/report-ui/src/views/excelreport/viewer/index.vue b/report-ui/src/views/excelreport/viewer/index.vue
index a597a483..712a69a0 100644
--- a/report-ui/src/views/excelreport/viewer/index.vue
+++ b/report-ui/src/views/excelreport/viewer/index.vue
@@ -6,7 +6,10 @@
  * @Last Modified time: 2022-1-26 11:04:24
  !-->
 <template>
-  <div class="layout">
+  <div class="layout" :class="{ 'collapsed': collapsed }">
+    <div class="layout-toggle" @click="toggleSidebar">
+      <i :class="collapsed ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
+    </div>
     <div class="layout-right">
       <div class="block">
         <div class="download">
@@ -64,6 +67,7 @@ export default {
       dataSet: null,
       tableData2: [],
       excelData: {},
+      collapsed: true, // 默认收起侧边栏
       params: {
         reportCode: "",
         setParam: ""
@@ -76,7 +80,23 @@ export default {
   created() {
     this.reportCode = this.$route.query.reportCode;
   },
+  beforeDestroy() {
+    // 移除事件监听器，避免内存泄漏
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+  },
   methods: {
+    // 切换侧边栏显示/隐藏
+    toggleSidebar() {
+      this.collapsed = !this.collapsed;
+      // 在状态变化后重新调整表格大小
+      setTimeout(() => {
+        if (typeof luckysheet !== 'undefined' && luckysheet.resize) {
+          luckysheet.resize();
+        }
+      }, 300);
+    },
     async searchPreview() {
       const arr = this.toObject(this.tableData2);
       this.params.setParam = JSON.stringify(arr);
@@ -219,6 +239,14 @@ export default {
       $(function() {
         luckysheet.create(options);
       });
+
+      // 添加窗口大小变化监听器，以便在窗口大小变化时重新调整表格大小
+      this.resizeHandler = () => {
+        if (typeof luckysheet !== 'undefined' && luckysheet.resize) {
+          luckysheet.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);
     },
     getCellStyleData(result) {
       const sheetData = luckysheet.getluckysheetfile(); // 获取整个表格的数据
@@ -281,6 +309,53 @@ export default {
   margin: 0;
   padding: 0;
 }
+
+.layout-toggle {
+  position: absolute;
+  left: 200px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #e8eaec;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10001;
+  transition: all 0.2s ease-in-out;
+
+  i {
+    color: #909399;
+  }
+
+  &:hover {
+    background-color: #f5f7fa;
+    i {
+      color: #409EFF;
+    }
+  }
+}
+
+.layout.collapsed {
+  .layout-toggle {
+    left: 0;
+  }
+
+  .layout-right {
+    left: -200px; /* 收起时将面板移出可视区域 */
+  }
+
+  .layout-middle {
+    left: 0;
+    width: 100%;
+  }
+}
+
 .layout-middle {
   display: block;
   position: absolute;
@@ -289,6 +364,7 @@ export default {
   width: calc(100% - 200px);
   margin: 0;
   padding: 0;
+  transition: all 0.2s ease-in-out;
 
   .excel-designer {
     display: block;
@@ -312,5 +388,7 @@ export default {
   font-size: 14px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+  z-index: 10000;
 }
 </style>