pms 保养工单列表 添加可伸缩的组织部门树

src/views/pms/iotmainworkorder/index.vue

@@ -1,11 +1,21 @@
 <template>
   <el-row :gutter="20">
-    <el-col :span="4" :xs="24">
+    <el-col :class="{'leftcontent': true, 'collapsed': isLeftContentCollapsed}" :span="isLeftContentCollapsed ? 0 : 4" :xs="24">
       <ContentWrap class="h-1/1">
         <DeptTree @node-click="handleDeptNodeClick" />
       </ContentWrap>
     </el-col>
-    <el-col :span="20" :xs="24">
+    <el-col class="rightcontent" :span="isLeftContentCollapsed ? 24 : 20" :xs="24" style="position: relative;height: 100vh;">
+      <div
+        class="toggle-button"
+        :style="{ left: isLeftContentCollapsed ? '0px' : '-13px' }"
+        @click="toggleLeftContent"
+        @mouseover="handleMouseOver"
+        @mouseout="handleMouseOut"
+        :title="hoverText"
+      >
+        <span style="font-size: 5px;" :class="{'triangle': true, 'rotated': isLeftContentCollapsed}"></span>
+      </div>
       <ContentWrap>
         <!-- 搜索工作栏 -->
         <el-form
@@ -176,7 +186,7 @@ defineOptions({ name: 'IotMainWorkOrder' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const tableRef = ref() // 表格引用
-
+const isLeftContentCollapsed = ref(false);
 // 表格容器引用 用于获取容器宽度
 const tableContainerRef = ref()
 const loading = ref(true) // 列表的加载中
@@ -208,6 +218,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const hoverText = ref('');
 
 // 列宽度配置
 const columnWidths = ref({
@@ -398,6 +409,18 @@ const getDistanceClass = (distance: number | string | null) => {
   return '';
 };
 
+const toggleLeftContent = () => {
+  isLeftContentCollapsed.value = !isLeftContentCollapsed.value;
+};
+
+const handleMouseOver = () => {
+  hoverText.value = isLeftContentCollapsed.value ? '展开' : '收起';
+};
+
+const handleMouseOut = () => {
+  hoverText.value = '';
+};
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -442,14 +465,39 @@ const handleExport = async () => {
   }
 }
 
+// 声明 ResizeObserver 实例
+let resizeObserver: ResizeObserver | null = null;
+
 /** 初始化 **/
 onMounted(() => {
   getList()
   window.addEventListener('resize', calculateColumnWidths);
+  // 创建 ResizeObserver 监听表格容器尺寸变化
+  if (tableContainerRef.value?.$el) {
+    resizeObserver = new ResizeObserver(() => {
+      // 使用防抖避免频繁触发
+      clearTimeout(window.resizeTimer);
+      window.resizeTimer = setTimeout(() => {
+        calculateColumnWidths();
+      }, 100);
+    });
+    resizeObserver.observe(tableContainerRef.value.$el);
+  }
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', calculateColumnWidths);
+
+  // 清除 ResizeObserver
+  if (resizeObserver && tableContainerRef.value?.$el) {
+    resizeObserver.unobserve(tableContainerRef.value.$el);
+    resizeObserver = null;
+  }
+
+  // 清除定时器
+  if (window.resizeTimer) {
+    clearTimeout(window.resizeTimer);
+  }
 })
 
 // 监听列表数据变化重新计算列宽
@@ -457,8 +505,25 @@ watch(list, () => {
   nextTick(calculateColumnWidths)
 }, { deep: true })
 
+// 监听左侧菜单状态变化（展开/收起）
+watch(isLeftContentCollapsed, () => {
+  // 添加延迟以确保 DOM 更新完成
+  setTimeout(calculateColumnWidths, 50);
+})
+
 </script>
 <style scoped>
+
+.leftcontent {
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.leftcontent.collapsed {
+  width: 0;
+  overflow: hidden;
+}
+
 /* 正数样式 - 淡绿色 */
 .positive-distance {
   color: #67c23a;  /* element-plus 成功色 */
@@ -518,4 +583,40 @@ watch(list, () => {
 :deep(.el-table__inner-wrapper) {
   width: 100% !important;
 }
+
+.toggle-button {
+  position: absolute;
+  top: 44%;
+  transform: translate(-65%,-50%);
+  width: 12px;
+  height: 40px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  clip-path: polygon(0 0, 100% 18%, 100% 85%, 0 100%);
+  border-radius: 8px;
+}
+
+/* 添加鼠标悬停样式 */
+.toggle-button:hover {
+  background-color: #afafaf;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.4s ease;
+  border-right: 5px solid gray; /* 修改为右边框显示颜色 */
+  border-left: none; /* 移除左边框 */
+}
+
+.triangle.rotated {
+  transform: rotate(180deg);
+}
+
 </style>