|
|
@@ -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);
|
|
|
}
|
|
|
}
|
|
|
}
|
