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

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

src/assets/styles/components/_page-shell.scss

@@ -54,6 +54,131 @@
   }
 }
 
+@mixin collapsible-tree-layout($mobile-breakpoint: 900px) {
+  .content-grid,
+  .selector-layout {
+    align-items: stretch;
+  }
+
+  .tree-panel-col,
+  .tree-content-col {
+    min-width: 0;
+    transition: max-width 0.24s ease, flex-basis 0.24s ease;
+  }
+
+  .tree-panel-col.is-collapsed {
+    max-width: 56px;
+    flex: 0 0 56px;
+  }
+
+  .tree-content-col.is-tree-collapsed {
+    max-width: calc(100% - 56px);
+    flex: 0 0 calc(100% - 56px);
+  }
+
+  .tree-panel-shell,
+  .side-panel {
+    height: 100%;
+  }
+
+  .tree-panel-shell {
+    --tree-panel-max-height: 620px;
+  }
+
+  .tree-panel-shell :deep(.el-card__header) {
+    display: block;
+    padding: 12px 16px !important;
+  }
+
+  .tree-panel-shell :deep(.el-card__body) {
+    display: flex;
+    flex-direction: column;
+    height: var(--tree-panel-max-height);
+    min-height: 0;
+    max-height: var(--tree-panel-max-height);
+    overflow: hidden;
+  }
+
+  .tree-panel-header {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .tree-panel-header::after {
+    display: block;
+    width: 9px;
+    min-width: 9px;
+    height: 9px;
+    margin-left: auto;
+    flex-shrink: 0;
+    transform-origin: center;
+    transform: rotate(135deg);
+  }
+
+  .tree-panel-header.is-collapsed {
+    justify-content: center;
+  }
+
+  .side-panel.is-collapsed :deep(.el-card__body) {
+    display: none;
+  }
+
+  .dept-tree,
+  .selector-tree {
+    flex: 1 1 auto;
+    min-height: 180px;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+    scrollbar-width: thin;
+  }
+
+  .dept-tree::-webkit-scrollbar,
+  .selector-tree::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .dept-tree::-webkit-scrollbar-thumb,
+  .selector-tree::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.55);
+  }
+
+  .dept-tree::-webkit-scrollbar-track,
+  .selector-tree::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .tree-panel-shell.is-collapsed :deep(.el-card__header) {
+    padding: 12px 0 !important;
+  }
+
+  .tree-panel-shell.is-collapsed .tree-panel-header::after {
+    margin-left: 0;
+  }
+
+  .tree-panel-shell.is-collapsed .tree-panel-header::after {
+    transform: rotate(-45deg);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    .tree-panel-col,
+    .tree-content-col {
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+
+    .tree-panel-shell {
+      --tree-panel-max-height: 420px;
+    }
+
+    .side-panel.is-collapsed {
+      height: auto;
+    }
+  }
+}
+
 @mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
   @include action-link-buttons($background);
   @include toolbar-responsive($mobile-breakpoint);
@@ -62,5 +187,6 @@
 @mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) {
   @include content-stack($gap);
   @include dept-tree-panel($tree-padding-top);
+  @include collapsible-tree-layout($mobile-breakpoint);
   @include table-crud-page($mobile-breakpoint, $background);
 }

src/components/UserSelect/index.vue

@@ -4,29 +4,33 @@
       <div class="p-2 user-select-shell">
         <el-row :gutter="12" class="selector-layout">
           <!-- 部门树 -->
-          <el-col :lg="5" :xs="24">
-            <el-card shadow="hover" class="side-panel selector-card selector-side-card">
+          <el-col :lg="treeCollapsed ? 1 : 5" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
+            <el-card shadow="hover" class="side-panel tree-panel-shell selector-card selector-side-card" :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="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable />
-              <el-tree
-                ref="deptTreeRef"
-                class="selector-tree"
-                node-key="id"
-                :data="deptOptions"
-                :props="{ label: 'label', children: 'children' } as any"
-                :expand-on-click-node="false"
-                :filter-node-method="filterNode"
-                highlight-current
-                default-expand-all
-                @node-click="handleNodeClick"
-              />
+              <template v-if="!treeCollapsed">
+                <el-input v-model="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+                <el-tree
+                  ref="deptTreeRef"
+                  class="selector-tree"
+                  node-key="id"
+                  :data="deptOptions"
+                  :props="{ label: 'label', children: 'children' } as any"
+                  :expand-on-click-node="false"
+                  :filter-node-method="filterNode"
+                  highlight-current
+                  default-expand-all
+                  @node-click="handleNodeClick"
+                />
+              </template>
             </el-card>
           </el-col>
-          <el-col :lg="19" :xs="24">
+          <el-col :lg="treeCollapsed ? 23 : 19" :xs="24" class="tree-content-col" :class="{ 'is-tree-collapsed': treeCollapsed }">
             <div class="p-2user-select-main">
               <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
                 <div v-show="showSearch">
@@ -144,6 +148,7 @@ const showSearch = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
+const treeCollapsed = ref(false);
 const deptOptions = ref<DeptTreeVO[]>([]);
 const selectUserList = ref<UserVO[]>([]);
 
@@ -328,8 +333,10 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
 @use '@/assets/styles/components/selector-dialog' as selectorDialog;
 
+@include pageShell.collapsible-tree-layout(992px);
 @include selectorDialog.shell-gap('.user-select-shell', '.user-select-main');
 @include selectorDialog.card-shell;
 @include selectorDialog.selector-header-tags(992px);

src/views/system/post/index.vue

@@ -2,32 +2,33 @@
   <div class="p-2 app-container system-post-page">
     <el-row :gutter="20" class="content-grid">
       <!-- 部门树 -->
-      <el-col :lg="5" :xs="24">
-        <el-card shadow="hover" class="side-panel">
+      <el-col :lg="treeCollapsed ? 1 : 5" :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="panel-heading">
-              <div>
-                <span class="panel-kicker">Department Filter</span>
+            <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
+              <div v-show="!treeCollapsed">
                 <h3>部门结构</h3>
               </div>
             </div>
           </template>
-          <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
-          <el-tree
-            ref="deptTreeRef"
-            class="mt-2 dept-tree"
-            node-key="id"
-            :data="deptOptions"
-            :props="{ label: 'label', children: 'children' } as any"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            highlight-current
-            default-expand-all
-            @node-click="handleNodeClick"
-          />
+          <template v-if="!treeCollapsed">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree
+              ref="deptTreeRef"
+              class="mt-2 dept-tree"
+              node-key="id"
+              :data="deptOptions"
+              :props="{ label: 'label', children: 'children' } as any"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              highlight-current
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </template>
         </el-card>
       </el-col>
-      <el-col :lg="19" :xs="24" class="content-main">
+      <el-col :lg="treeCollapsed ? 23 : 19" :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>
@@ -198,6 +199,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const deptName = ref('');
+const treeCollapsed = ref(false);
 const deptOptions = ref<DeptTreeVO[]>([]);
 const deptTreeRef = ref<ElTreeInstance>();
 const postFormRef = ref<ElFormInstance>();

src/views/system/user/index.vue

@@ -2,32 +2,33 @@
   <div class="p-2 system-user-page">
     <el-row :gutter="20" class="content-grid">
       <!-- 部门树 -->
-      <el-col :lg="5" :xs="24">
-        <el-card shadow="hover" class="side-panel">
+      <el-col :lg="treeCollapsed ? 1 : 5" :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="panel-heading">
-              <div>
-                <span class="panel-kicker">Department Filter</span>
+            <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
+              <div v-show="!treeCollapsed">
                 <h3>部门结构</h3>
               </div>
             </div>
           </template>
-          <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
-          <el-tree
-            ref="deptTreeRef"
-            class="mt-2 dept-tree"
-            node-key="id"
-            :data="deptOptions"
-            :props="{ label: 'label', children: 'children' } as any"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            highlight-current
-            default-expand-all
-            @node-click="handleNodeClick"
-          />
+          <template v-if="!treeCollapsed">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree
+              ref="deptTreeRef"
+              class="mt-2 dept-tree"
+              node-key="id"
+              :data="deptOptions"
+              :props="{ label: 'label', children: 'children' } as any"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              highlight-current
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </template>
         </el-card>
       </el-col>
-      <el-col :lg="19" :xs="24" class="content-main">
+      <el-col :lg="treeCollapsed ? 23 : 19" :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>
@@ -328,6 +329,7 @@ const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
+const treeCollapsed = ref(false);
 const deptOptions = ref<DeptTreeVO[]>([]);
 const enabledDeptOptions = ref<DeptTreeVO[]>([]);
 const initPassword = ref<string>('');

src/views/workflow/processDefinition/index.vue

@@ -2,29 +2,33 @@
   <div class="p-2 app-container workflow-process-definition-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>
@@ -281,6 +285,7 @@ const uploadDialogLoading = ref(false);
 const processDefinitionList = ref<FlowDefinitionVo[]>([]);
 const categoryOptions = ref<CategoryTreeVO[]>([]);
 const categoryName = ref('');
+const treeCollapsed = ref(false);
 const autoPass = ref(false);
 /** 部署文件分类选择 */
 const selectCategory = ref();
@@ -353,7 +358,7 @@ const filterNode = (value: string, data: any) => {
 /** 根据名称筛选部门树 */
 watchEffect(
   () => {
-    categoryTreeRef.value.filter(categoryName.value);
+    categoryTreeRef.value?.filter(categoryName.value);
   },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -607,6 +612,10 @@ const handleExportDef = () => {
 </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;

src/views/workflow/processInstance/index.vue

@@ -2,29 +2,33 @@
   <div class="p-2 app-container workflow-process-instance-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>
@@ -275,6 +279,7 @@ const processInstanceList = ref<FlowInstanceVO[]>([]);
 const processDefinitionHistoryList = ref<Array<any>>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
 const categoryName = ref('');
+const treeCollapsed = ref(false);
 
 const processDefinitionDialog = reactive<DialogOption>({
   visible: false,
@@ -322,7 +327,7 @@ const filterNode = (value: string, data: any) => {
 /** 根据名称筛选部门树 */
 watchEffect(
   () => {
-    categoryTreeRef.value.filter(categoryName.value);
+    categoryTreeRef.value?.filter(categoryName.value);
   },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -510,6 +515,10 @@ onMounted(() => {
 </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;

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;