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

update 优化左侧树结构数据过多支持上下滑动
2026-03-26 10:09:46 +08:00
parent 2502de3081
commit 8469c254af
7 changed files with 277 additions and 113 deletions
@@ -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>();
@@ -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>('');
@@ -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;
@@ -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;
@@ -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;