xiaozhi/xiaozhi-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
update 优化 左侧树结构数据过多支持上下滑动
This commit is contained in:
疯狂的狮子Li
2026-03-26 10:09:46 +08:00
parent 2502de3081
commit 8469c254af
7 changed files with 277 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/components/_page-shell.scss
+126
View File
@@ -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)) { @mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
@include action-link-buttons($background); @include action-link-buttons($background);
@include toolbar-responsive($mobile-breakpoint); @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)) { @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 content-stack($gap);
@include dept-tree-panel($tree-padding-top); @include dept-tree-panel($tree-padding-top);
@include collapsible-tree-layout($mobile-breakpoint);
@include table-crud-page($mobile-breakpoint, $background); @include table-crud-page($mobile-breakpoint, $background);
} }
src/components/UserSelect/index.vue
+25 -18
View File
@@ -4,29 +4,33 @@
<div class="p-2 user-select-shell"> <div class="p-2 user-select-shell">
<el-row :gutter="12" class="selector-layout"> <el-row :gutter="12" class="selector-layout">
<!-- 部门树 --> <!-- 部门树 -->
<el-col :lg="5" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 5" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel selector-card selector-side-card"> <el-card shadow="hover" class="side-panel tree-panel-shell selector-card selector-side-card" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="table-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<h3>部门结构</h3> <div v-show="!treeCollapsed" class="table-heading">
<h3>部门结构</h3>
</div>
</div> </div>
</template> </template>
<el-input v-model="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable />
ref="deptTreeRef" <el-tree
class="selector-tree" ref="deptTreeRef"
node-key="id" class="selector-tree"
:data="deptOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="deptOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
/> @node-click="handleNodeClick"
/>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="p-2user-select-main">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch"> <div v-show="showSearch">
@@ -144,6 +148,7 @@ const showSearch = ref(true);
const total = ref(0); const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']); const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const deptName = ref(''); const deptName = ref('');
const treeCollapsed = ref(false);
const deptOptions = ref<DeptTreeVO[]>([]); const deptOptions = ref<DeptTreeVO[]>([]);
const selectUserList = ref<UserVO[]>([]); const selectUserList = ref<UserVO[]>([]);
@@ -328,8 +333,10 @@ defineExpose({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/assets/styles/components/page-shell' as pageShell;
@use '@/assets/styles/components/selector-dialog' as selectorDialog; @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.shell-gap('.user-select-shell', '.user-select-main');
@include selectorDialog.card-shell; @include selectorDialog.card-shell;
@include selectorDialog.selector-header-tags(992px); @include selectorDialog.selector-header-tags(992px);
src/views/system/post/index.vue
+21 -19
View File
@@ -2,32 +2,33 @@
<div class="p-2 app-container system-post-page"> <div class="p-2 app-container system-post-page">
<el-row :gutter="20" class="content-grid"> <el-row :gutter="20" class="content-grid">
<!-- 部门树 --> <!-- 部门树 -->
<el-col :lg="5" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 5" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel"> <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="panel-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<div> <div v-show="!treeCollapsed">
<span class="panel-kicker">Department Filter</span>
<h3>部门结构</h3> <h3>部门结构</h3>
</div> </div>
</div> </div>
</template> </template>
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
ref="deptTreeRef" <el-tree
class="mt-2 dept-tree" ref="deptTreeRef"
node-key="id" class="mt-2 dept-tree"
:data="deptOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="deptOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
/> @node-click="handleNodeClick"
/>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }"> <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header> <template #header>
@@ -198,6 +199,7 @@ const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const total = ref(0); const total = ref(0);
const deptName = ref(''); const deptName = ref('');
const treeCollapsed = ref(false);
const deptOptions = ref<DeptTreeVO[]>([]); const deptOptions = ref<DeptTreeVO[]>([]);
const deptTreeRef = ref<ElTreeInstance>(); const deptTreeRef = ref<ElTreeInstance>();
const postFormRef = ref<ElFormInstance>(); const postFormRef = ref<ElFormInstance>();
src/views/system/user/index.vue
+21 -19
View File
@@ -2,32 +2,33 @@
<div class="p-2 system-user-page"> <div class="p-2 system-user-page">
<el-row :gutter="20" class="content-grid"> <el-row :gutter="20" class="content-grid">
<!-- 部门树 --> <!-- 部门树 -->
<el-col :lg="5" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 5" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel"> <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="panel-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<div> <div v-show="!treeCollapsed">
<span class="panel-kicker">Department Filter</span>
<h3>部门结构</h3> <h3>部门结构</h3>
</div> </div>
</div> </div>
</template> </template>
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
ref="deptTreeRef" <el-tree
class="mt-2 dept-tree" ref="deptTreeRef"
node-key="id" class="mt-2 dept-tree"
:data="deptOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="deptOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
/> @node-click="handleNodeClick"
/>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }"> <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header> <template #header>
@@ -328,6 +329,7 @@ const multiple = ref(true);
const total = ref(0); const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']); const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const deptName = ref(''); const deptName = ref('');
const treeCollapsed = ref(false);
const deptOptions = ref<DeptTreeVO[]>([]); const deptOptions = ref<DeptTreeVO[]>([]);
const enabledDeptOptions = ref<DeptTreeVO[]>([]); const enabledDeptOptions = ref<DeptTreeVO[]>([]);
const initPassword = ref<string>(''); const initPassword = ref<string>('');
src/views/workflow/processDefinition/index.vue
+28 -19
View File
@@ -2,29 +2,33 @@
<div class="p-2 app-container workflow-process-definition-page"> <div class="p-2 app-container workflow-process-definition-page">
<el-row :gutter="20" class="content-grid"> <el-row :gutter="20" class="content-grid">
<!-- 流程分类树 --> <!-- 流程分类树 -->
<el-col :lg="4" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 4" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel"> <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="table-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<h3>流程分类</h3> <div v-show="!treeCollapsed" class="table-heading">
<h3>流程分类</h3>
</div>
</div> </div>
</template> </template>
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
ref="categoryTreeRef" <el-tree
class="mt-2" ref="categoryTreeRef"
node-key="id" class="mt-2 dept-tree"
:data="categoryOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="categoryOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
></el-tree> @node-click="handleNodeClick"
></el-tree>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }"> <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header> <template #header>
@@ -281,6 +285,7 @@ const uploadDialogLoading = ref(false);
const processDefinitionList = ref<FlowDefinitionVo[]>([]); const processDefinitionList = ref<FlowDefinitionVo[]>([]);
const categoryOptions = ref<CategoryTreeVO[]>([]); const categoryOptions = ref<CategoryTreeVO[]>([]);
const categoryName = ref(''); const categoryName = ref('');
const treeCollapsed = ref(false);
const autoPass = ref(false); const autoPass = ref(false);
/** 部署文件分类选择 */ /** 部署文件分类选择 */
const selectCategory = ref(); const selectCategory = ref();
@@ -353,7 +358,7 @@ const filterNode = (value: string, data: any) => {
/** 根据名称筛选部门树 */ /** 根据名称筛选部门树 */
watchEffect( watchEffect(
() => { () => {
categoryTreeRef.value.filter(categoryName.value); categoryTreeRef.value?.filter(categoryName.value);
}, },
{ {
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -607,6 +612,10 @@ const handleExportDef = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/assets/styles/components/page-shell' as pageShell;
@include pageShell.tree-table-crud-page;
.content-main { .content-main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/views/workflow/processInstance/index.vue
+28 -19
View File
@@ -2,29 +2,33 @@
<div class="p-2 app-container workflow-process-instance-page"> <div class="p-2 app-container workflow-process-instance-page">
<el-row :gutter="20" class="content-grid"> <el-row :gutter="20" class="content-grid">
<!-- 流程分类树 --> <!-- 流程分类树 -->
<el-col :lg="4" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 4" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel"> <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="table-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<h3>流程分类</h3> <div v-show="!treeCollapsed" class="table-heading">
<h3>流程分类</h3>
</div>
</div> </div>
</template> </template>
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
ref="categoryTreeRef" <el-tree
class="mt-2" ref="categoryTreeRef"
node-key="id" class="mt-2 dept-tree"
:data="categoryOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="categoryOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
></el-tree> @node-click="handleNodeClick"
></el-tree>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }"> <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header> <template #header>
@@ -275,6 +279,7 @@ const processInstanceList = ref<FlowInstanceVO[]>([]);
const processDefinitionHistoryList = ref<Array<any>>([]); const processDefinitionHistoryList = ref<Array<any>>([]);
const categoryOptions = ref<CategoryOption[]>([]); const categoryOptions = ref<CategoryOption[]>([]);
const categoryName = ref(''); const categoryName = ref('');
const treeCollapsed = ref(false);
const processDefinitionDialog = reactive<DialogOption>({ const processDefinitionDialog = reactive<DialogOption>({
visible: false, visible: false,
@@ -322,7 +327,7 @@ const filterNode = (value: string, data: any) => {
/** 根据名称筛选部门树 */ /** 根据名称筛选部门树 */
watchEffect( watchEffect(
() => { () => {
categoryTreeRef.value.filter(categoryName.value); categoryTreeRef.value?.filter(categoryName.value);
}, },
{ {
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -510,6 +515,10 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/assets/styles/components/page-shell' as pageShell;
@include pageShell.tree-table-crud-page;
.content-main { .content-main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/views/workflow/task/myDocument.vue
+28 -19
View File
@@ -2,29 +2,33 @@
<div class="p-2 app-container workflow-my-document-page"> <div class="p-2 app-container workflow-my-document-page">
<el-row :gutter="20" class="content-grid"> <el-row :gutter="20" class="content-grid">
<!-- 流程分类树 --> <!-- 流程分类树 -->
<el-col :lg="4" :xs="24"> <el-col :lg="treeCollapsed ? 1 : 4" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel"> <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': treeCollapsed }">
<template #header> <template #header>
<div class="table-heading"> <div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<h3>流程分类</h3> <div v-show="!treeCollapsed" class="table-heading">
<h3>流程分类</h3>
</div>
</div> </div>
</template> </template>
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> <template v-if="!treeCollapsed">
<el-tree <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
ref="categoryTreeRef" <el-tree
class="mt-2" ref="categoryTreeRef"
node-key="id" class="mt-2 dept-tree"
:data="categoryOptions" node-key="id"
:props="{ label: 'label', children: 'children' } as any" :data="categoryOptions"
:expand-on-click-node="false" :props="{ label: 'label', children: 'children' } as any"
:filter-node-method="filterNode" :expand-on-click-node="false"
highlight-current :filter-node-method="filterNode"
default-expand-all highlight-current
@node-click="handleNodeClick" default-expand-all
></el-tree> @node-click="handleNodeClick"
></el-tree>
</template>
</el-card> </el-card>
</el-col> </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"> <div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }"> <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header> <template #header>
@@ -145,6 +149,7 @@ const processInstanceList = ref<FlowInstanceVO[]>([]);
const categoryOptions = ref<CategoryTreeVO[]>([]); const categoryOptions = ref<CategoryTreeVO[]>([]);
const categoryName = ref(''); const categoryName = ref('');
const treeCollapsed = ref(false);
const tab = ref('running'); const tab = ref('running');
// 查询参数 // 查询参数
@@ -176,7 +181,7 @@ const filterNode = (value: string, data: any) => {
/** 根据名称筛选部门树 */ /** 根据名称筛选部门树 */
watchEffect( watchEffect(
() => { () => {
categoryTreeRef.value.filter(categoryName.value); categoryTreeRef.value?.filter(categoryName.value);
}, },
{ {
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -259,6 +264,10 @@ const handleOpen = async (row, type) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/assets/styles/components/page-shell' as pageShell;
@include pageShell.tree-table-crud-page;
.content-main { .content-main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;