Merge pull request #106 from GoldenZqqq/feature/bpm

工作流模块优化与bug修复
2024-11-21 19:34:57 +08:00 · 2024-11-21 19:34:57 +08:00 · 738289bc06
parent 12bd71e70b 39f183bb3e
commit 738289bc06
6 changed files with 101 additions and 24 deletions
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@ -162,8 +162,10 @@ const getApprovalDetail = async (row: any) => {
    startUserSelectTasks.value = data.activityNodes?.filter(
      (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
    )
-    for (const node of startUserSelectTasks.value) {
-      startUserSelectAssignees.value[node.id] = []
+    if (startUserSelectTasks.value?.length > 0) {
+      for (const node of startUserSelectTasks.value) {
+        startUserSelectAssignees.value[node.id] = []
+      }
    }

    // 获取审批节点，显示 Timeline 的数据
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@ -22,7 +22,7 @@
        <el-col :span="5">
          <div class="flex flex-col">
            <div
-              v-for="category in categoryList"
+              v-for="category in availableCategories"
              :key="category.code"
              class="flex items-center p-10px cursor-pointer text-14px rounded-md"
              :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
@ -33,7 +33,7 @@
          </div>
        </el-col>
        <el-col :span="19">
-          <el-scrollbar ref="scrollWrapper" height="700">
+          <el-scrollbar ref="scrollWrapper" height="700" @scroll="handleScroll">
            <div
              class="mb-20px pl-10px"
              v-for="(definitions, categoryCode) in processDefinitionGroup"
@ -137,10 +137,6 @@ const getCategoryList = async () => {
  try {
    // 流程分类
    categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 选中首个分类
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0]
-    }
  } finally {
  }
 }
@ -154,6 +150,11 @@ const getProcessDefinitionList = async () => {
    })
    // 初始化过滤列表为全部流程定义
    filteredProcessDefinitionList.value = processDefinitionList.value
+
+    // 在获取完所有数据后，设置第一个有效分类为激活状态
+    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
+      categoryActive.value = availableCategories.value[0]
+    }
  } finally {
  }
 }
@ -220,10 +221,62 @@ const handleSelect = async (row, formVariables?) => {
  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }

+/** 处理滚动事件 */
+const handleScroll = (e) => {
+  // 直接使用事件对象获取滚动位置
+  const scrollTop = e.scrollTop
+
+  // 获取所有分类区域的位置信息
+  const categoryPositions = categoryList.value
+    .map((category) => {
+      const categoryRef = proxy.$refs[`category-${category.code}`]
+      if (categoryRef?.[0]) {
+        return {
+          code: category.code,
+          offsetTop: categoryRef[0].offsetTop,
+          height: categoryRef[0].offsetHeight
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+
+  // 查找当前滚动位置对应的分类
+  let currentCategory = categoryPositions[0]
+  for (const position of categoryPositions) {
+    // 为了更好的用户体验，可以添加一个缓冲区域（比如 50px）
+    if (scrollTop >= position.offsetTop - 50) {
+      currentCategory = position
+    } else {
+      break
+    }
+  }
+
+  // 更新当前 active 的分类
+  if (currentCategory && categoryActive.value.code !== currentCategory.code) {
+    categoryActive.value = categoryList.value.find((c) => 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 => 
+    availableCategoryCodes.includes(category.code)
+  )
+})
 </script>

 <style lang="scss" scoped>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@ -40,14 +40,22 @@ watch(
  }
 )
 </script>
-<style>
+<style lang="scss" scoped>
 .box-card {
+  height: 100%;
  width: 100%;
-  margin-bottom: 20px;
-}
+  margin-bottom: 0;

-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 0;
+  }
+
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" class="mb-20px">
+  <div v-loading="loading" class="process-viewer-container">
    <SimpleProcessViewer
      :flow-node="simpleModel"
      :tasks="tasks"
@ -154,8 +154,15 @@ const setSimpleModelNodeTaskStatus = (
 </script>

 <style lang="scss" scoped>
-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+.process-viewer-container {
+  height: 100%;
+  width: 100%;
+  
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@ -16,10 +16,10 @@
          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
          <div
            v-if="showStatusIcon"
-            class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-1px border-2 border-white border-solid"
            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
          >
-            <el-icon :size="12" color="#fff">
+            <el-icon :size="11" color="#fff">
              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
            </el-icon>
          </div>
@ -106,10 +106,10 @@
                <!-- 信息：任务 ICON -->
                <div
                  v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
-                  class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-1px border-2 border-white border-solid"
                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
                >
-                  <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
+                  <Icon :size="11" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
                </div>
              </div>
            </div>
@ -140,10 +140,10 @@
            <!-- 信息：任务 ICON -->
            <div
              v-if="showStatusIcon"
-              class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+              class="position-absolute top-20px left-24px rounded-full flex items-center p-1px border-2 border-white border-solid"
              :style="{ backgroundColor: statusIconMap2['-1']?.color }"
            >
-              <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
+              <Icon :size="11" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
            </div>
          </div>
        </div>
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@ -128,6 +128,7 @@ import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
 import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { registerComponent } from '@/utils/routerHelper'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
@ -228,6 +229,9 @@ const getApprovalDetail = async () => {
          })
        }
      })
+    } else {
+      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
    }

    // 获取审批节点，显示 Timeline 的数据
@ -319,9 +323,12 @@ $process-header-height: 194px;
        $process-header-height - 40px
    );
    overflow: auto;
+    display: flex;
+    flex-direction: column;

    :deep(.box-card) {
      height: 100%;
+      flex: 1;

      .el-card__body {
        height: 100%;