update 优化 封装TreePanel树组件 简化页面代码

src/views/workflow/task/myDocument.vue

@@ -2,36 +2,16 @@
   <div class="p-2 app-container workflow-my-document-page">
     <el-row :gutter="20" class="content-grid">
       <!-- 流程分类树 -->
-      <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="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>
-          <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>
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="流程分类"
+        placeholder="请输入流程分类名"
+        :data="categoryOptions"
+        :expanded-span="4"
+        filter-field="categoryName"
+        @node-click="handleNodeClick"
+      />
       <el-col
         :lg="treeCollapsed ? 23 : 20"
         :xs="24"
@@ -169,6 +149,7 @@
 </template>
 
 <script setup lang="ts">
+import TreePanel from '@/components/TreePanel/index.vue';
 import { pageByCurrent, deleteByInstanceIds, cancelProcessApply } from '@/api/workflow/instance';
 import { categoryTree } from '@/api/workflow/category';
 import { CategoryTreeVO } from '@/api/workflow/category/types';
@@ -178,7 +159,7 @@ import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
 const queryFormRef = ref<ElFormInstance>();
-const categoryTreeRef = ref<ElTreeInstance>();
+const treePanelRef = ref<InstanceType<typeof TreePanel>>();
 
 // 遮罩层
 const loading = ref(true);
@@ -197,7 +178,6 @@ const total = ref(0);
 const processInstanceList = ref<FlowInstanceVO[]>([]);
 
 const categoryOptions = ref<CategoryTreeVO[]>([]);
-const categoryName = ref('');
 const treeCollapsed = ref(false);
 
 const tab = ref('running');
@@ -222,21 +202,6 @@ const handleNodeClick = (data: CategoryTreeVO) => {
   }
   handleQuery();
 };
-/** 通过条件过滤节点  */
-const filterNode = (value: string, data: any) => {
-  if (!value) return true;
-  return data.categoryName.indexOf(value) !== -1;
-};
-/** 根据名称筛选部门树 */
-watchEffect(
-  () => {
-    categoryTreeRef.value?.filter(categoryName.value);
-  },
-  {
-    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
-  }
-);
-
 /** 查询流程分类下拉树结构 */
 const getTreeselect = async () => {
   const res = await categoryTree();