样式调整

yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/taskDetail.vue

@@ -30,7 +30,8 @@
     </div>
     <div class="task-detail-container flex">
       <!-- 左侧：检验项目列表 -->
-      <div class="left-panel flex-[0_0_400px]">
+      <div class="left-panel-container" :class="{ 'collapsed': !isLeftPanelExpanded }">
+        <div class="left-panel">
         <ContentWrap title="检验项目清单" class="h-full flex flex-col" :bodyStyle="{padding: '10px', flex: 1, overflow: 'hidden'}">
           <template #header>
             <el-button @click="handleAddItem" type="primary" size="small" :disabled="taskInfo?.taskStatus === PressureTaskOrderTaskStatus['REPORT_END'] || canAddReportItem">添加检验项目</el-button>
@@ -62,6 +63,14 @@
             @getData="getData"
           />
         </ContentWrap>
+        </div>
+        <!-- 收缩展开按钮 -->
+        <div class="left-toggle-btn" @click="toggleLeftPanel" :class="{ 'collapsed': !isLeftPanelExpanded }">
+          <el-icon>
+            <Back v-if="isLeftPanelExpanded" />
+            <Right v-else />
+          </el-icon>
+        </div>
       </div>
       <div class="right-panel flex-1 overflow-hidden">
         <StatusOperationPanel
@@ -142,9 +151,10 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, onUnmounted} from 'vue'
+import {onMounted, ref, onUnmounted, nextTick} from 'vue'
 import { useRoute } from 'vue-router'
 import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
+import { Back, Right } from '@element-plus/icons-vue'
 import {
   BoilerTaskOrderApi,
   BoilerTaskOrderDetailVO, 
@@ -181,6 +191,16 @@ const handleToggleFullscreen = () => {
   isFullscreen.value = !isFullscreen.value
 }
 
+// 左侧检验项目列表收缩展开控制
+const isLeftPanelExpanded = ref(true)
+const toggleLeftPanel = () => {
+  isLeftPanelExpanded.value = !isLeftPanelExpanded.value
+  // 等待过渡动画完成后触发重排，让右侧PDF区域重新计算宽度
+  setTimeout(() => {
+    nextTick(() => window.dispatchEvent(new Event('resize')))
+  }, 300)
+}
+
 // 基础数据
 const taskId = ref<string | null>(null)
 const loading = ref(true)
@@ -956,31 +976,77 @@ async function fetchTaskDetail(id: string, activeReportId = '') {
     }
   }
 
-  .left-panel {
-    height: 100%;
-    border: 1px solid var(--el-border-color);
-    border-width: 0 1px 0 0;
+  .left-panel-container {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    transition: all 0.3s ease;
+
+    .left-panel {
+      width: 400px;
+      flex-shrink: 0;
+      height: 100%;
+      border: 1px solid var(--el-border-color);
+      border-width: 0 1px 0 0;
+      transition: all 0.3s ease;
+      overflow: hidden;
+
+      .v-content-wrap {
+        border: 0;
+      }
 
-    .v-content-wrap {
-      border: 0;
-    }
+      :deep(.el-card__header) {
+        .items-center {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 10px;
+        }
 
-    :deep(.el-card__header) {
-      .items-center {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
+        .font-700 {
+          font-weight: normal;
+        }
+
+        .pl-20px {
+          flex-grow: unset;
+          padding-left: 0;
+        }
       }
+    }
 
-      .font-700 {
-        font-weight: normal;
+    &.collapsed .left-panel {
+      width: 0;
+      border: 0;
+    }
+
+    // 收缩展开按钮样式（悬浮，不占据布局空间）
+    .left-toggle-btn {
+      position: absolute;
+      right: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 30px;
+      height: 60px;
+      background-color: #fff;
+      border: 1px solid var(--el-border-color);
+      border-left: 0;
+      border-radius: 0 10px 10px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 100;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+
+      &:hover {
+        background-color: #f5f5f5;
       }
 
-      .pl-20px {
-        flex-grow: unset;
-        padding-left: 0;
+      // 收缩状态时补回左侧边框，保持按钮独立外观
+      &.collapsed {
+        border-left: 1px solid var(--el-border-color);
       }
     }
   }

yudao-ui-admin-vue3/src/views/pressure2/pipechecker/taskDetail.vue

@@ -27,7 +27,8 @@
     </div>
     <div class="task-detail-container flex">
       <!-- 左侧：检验项目列表 -->
-      <div class="left-panel flex-[0_0_400px]">
+      <div class="left-panel-container" :class="{ 'collapsed': !isLeftPanelExpanded }">
+        <div class="left-panel">
         <ContentWrap title="检验项目清单" class="h-full flex flex-col" :bodyStyle="{padding: '10px', flex: 1, overflow: 'hidden'}">
           <template #header>
             <el-button @click="handleAddItem" type="primary" size="small" :disabled="taskInfo?.taskStatus === PressureTaskOrderTaskStatus['REPORT_END'] || canAddReportItem">添加检验项目</el-button>
@@ -55,6 +56,14 @@
             @getData="getData"
           />
         </ContentWrap>
+        </div>
+        <!-- 收缩展开按钮 -->
+        <div class="left-toggle-btn" @click="toggleLeftPanel" :class="{ 'collapsed': !isLeftPanelExpanded }">
+          <el-icon>
+            <Back v-if="isLeftPanelExpanded" />
+            <Right v-else />
+          </el-icon>
+        </div>
       </div>
       <div class="right-panel flex-1 overflow-hidden">
         <StatusOperationPanel
@@ -180,9 +189,10 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, onUnmounted} from 'vue'
+import {onMounted, ref, onUnmounted, nextTick} from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Back, Right } from '@element-plus/icons-vue'
 import {
   PipeTaskOrderApi,
   PipeTaskOrderDetailVO,
@@ -217,6 +227,16 @@ const handleToggleFullscreen = () => {
   isFullscreen.value = !isFullscreen.value
 }
 
+// 左侧检验项目列表收缩展开控制
+const isLeftPanelExpanded = ref(true)
+const toggleLeftPanel = () => {
+  isLeftPanelExpanded.value = !isLeftPanelExpanded.value
+  // 等待过渡动画完成后触发重排，让右侧PDF区域重新计算宽度
+  setTimeout(() => {
+    nextTick(() => window.dispatchEvent(new Event('resize')))
+  }, 300)
+}
+
 // 基础数据
 const taskId = ref<string | null>(null)
 const orderId = ref<string | null>(null)
@@ -935,31 +955,77 @@ async function fetchTaskDetail(id: string, activeReportId = '') {
     }
   }
 
-  .left-panel {
-    height: 100%;
-    border: 1px solid var(--el-border-color);
-    border-width: 0 1px 0 0;
+  .left-panel-container {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    transition: all 0.3s ease;
+
+    .left-panel {
+      width: 400px;
+      flex-shrink: 0;
+      height: 100%;
+      border: 1px solid var(--el-border-color);
+      border-width: 0 1px 0 0;
+      transition: all 0.3s ease;
+      overflow: hidden;
+
+      .v-content-wrap {
+        border: 0;
+      }
 
-    .v-content-wrap {
-      border: 0;
-    }
+      :deep(.el-card__header) {
+        .items-center {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 10px;
+        }
+
+        .font-700 {
+          font-weight: normal;
+        }
 
-    :deep(.el-card__header) {
-      .items-center {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
+        .pl-20px {
+          flex-grow: unset;
+          padding-left: 0;
+        }
       }
+    }
 
-      .font-700 {
-        font-weight: normal;
+    &.collapsed .left-panel {
+      width: 0;
+      border: 0;
+    }
+
+    // 收缩展开按钮样式（悬浮，不占据布局空间）
+    .left-toggle-btn {
+      position: absolute;
+      right: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 30px;
+      height: 60px;
+      background-color: #fff;
+      border: 1px solid var(--el-border-color);
+      border-left: 0;
+      border-radius: 0 10px 10px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 100;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+
+      &:hover {
+        background-color: #f5f5f5;
       }
 
-      .pl-20px {
-        flex-grow: unset;
-        padding-left: 0;
+      // 收缩状态时补回左侧边框，保持按钮独立外观
+      &.collapsed {
+        border-left: 1px solid var(--el-border-color);
       }
     }
   }