From 24e137499344d06e93ff4758a310105aac7b7a6a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 21 Nov 2024 19:48:09 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index a3bf143b..284cbdb7 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -85,7 +85,7 @@
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { groupBy } from 'lodash-es'
 
@@ -221,14 +221,14 @@ const handleSelect = async (row, formVariables?) => {
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 
-/** 处理滚动事件 */
-const handleScroll = (e) => {
+/** 处理滚动事件，和左侧分类联动 */
+const handleScroll = (e: any) => {
   // 直接使用事件对象获取滚动位置
   const scrollTop = e.scrollTop
 
   // 获取所有分类区域的位置信息
   const categoryPositions = categoryList.value
-    .map((category) => {
+    .map((category: CategoryVO) => {
       const categoryRef = proxy.$refs[`category-${category.code}`]
       if (categoryRef?.[0]) {
         return {
@@ -254,29 +254,31 @@ const handleScroll = (e) => {
 
   // 更新当前 active 的分类
   if (currentCategory && categoryActive.value.code !== currentCategory.code) {
-    categoryActive.value = categoryList.value.find((c) => c.code === currentCategory.code)
+    categoryActive.value = categoryList.value.find(
+      (c: CategoryVO) => c.code === currentCategory.code
+    )
   }
 }
 
-/** 初始化 */
-onMounted(() => {
-  getList()
-})
-
-/** 过滤出有流程的分类列表 */
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
 const availableCategories = computed(() => {
   if (!categoryList.value?.length || !processDefinitionGroup.value) {
     return []
   }
-  
+
   // 获取所有有流程的分类代码
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value)
-  
+
   // 过滤出有流程的分类
-  return categoryList.value.filter(category => 
+  return categoryList.value.filter((category: CategoryVO) =>
     availableCategoryCodes.includes(category.code)
   )
 })
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style lang="scss" scoped>