update 优化 左侧树结构增加可折叠按钮

update 优化 左侧树结构数据过多支持上下滑动

src/views/workflow/task/myDocument.vue

@@ -2,29 +2,33 @@
   <div class="p-2 app-container workflow-my-document-page">
     <el-row :gutter="20" class="content-grid">
       <!-- 流程分类树 -->
-      <el-col :lg="4" :xs="24">
-        <el-card shadow="hover" class="side-panel">
+      <el-col :lg="treeCollapsed ? 1 : 4" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
+        <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
           <template #header>
-            <div class="table-heading">
-              <h3>流程分类</h3>
+            <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
+              <div v-show="!treeCollapsed" class="table-heading">
+                <h3>流程分类</h3>
+              </div>
             </div>
           </template>
-          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
-          <el-tree
-            ref="categoryTreeRef"
-            class="mt-2"
-            node-key="id"
-            :data="categoryOptions"
-            :props="{ label: 'label', children: 'children' } as any"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            highlight-current
-            default-expand-all
-            @node-click="handleNodeClick"
-          ></el-tree>
+          <template v-if="!treeCollapsed">
+            <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+            <el-tree
+              ref="categoryTreeRef"
+              class="mt-2 dept-tree"
+              node-key="id"
+              :data="categoryOptions"
+              :props="{ label: 'label', children: 'children' } as any"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              highlight-current
+              default-expand-all
+              @node-click="handleNodeClick"
+            ></el-tree>
+          </template>
         </el-card>
       </el-col>
-      <el-col :lg="20" :xs="24" class="content-main">
+      <el-col :lg="treeCollapsed ? 23 : 20" :xs="24" class="tree-content-col content-main" :class="{ 'is-tree-collapsed': treeCollapsed }">
         <div class="search-wrap">
             <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
               <template #header>
@@ -145,6 +149,7 @@ const processInstanceList = ref<FlowInstanceVO[]>([]);
 
 const categoryOptions = ref<CategoryTreeVO[]>([]);
 const categoryName = ref('');
+const treeCollapsed = ref(false);
 
 const tab = ref('running');
 // 查询参数
@@ -176,7 +181,7 @@ const filterNode = (value: string, data: any) => {
 /** 根据名称筛选部门树 */
 watchEffect(
   () => {
-    categoryTreeRef.value.filter(categoryName.value);
+    categoryTreeRef.value?.filter(categoryName.value);
   },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -259,6 +264,10 @@ const handleOpen = async (row, type) => {
 </script>
 
 <style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+
 .content-main {
   display: flex;
   flex-direction: column;