feat: 发起流程页面-流程时间线的数据获取接口联调与展示

2025-07-16 20:05:07 +08:00 · 2024-10-29 16:32:08 +08:00
parent c1109e90c4
commit a57840c804
5 changed files with 50 additions and 130 deletions
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@ -61,9 +61,14 @@
                    </form-create>
                  </el-col>

-                  <el-col :span="7">
-                    <!-- 审批记录时间线 -->
-                    <!-- <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" /> -->
+                  <el-col :span="6" :offset="1">
+                    <!-- 流程时间线 -->
+                    <ProcessInstanceTimeline
+                      ref="timelineRef"
+                      :approve-nodes="approveNodes"
+                      :show-status-icon="false"
+                      candidateField="candidateUserList"
+                    />
                  </el-col>
                </el-row>
              </el-scrollbar>
@ -82,6 +87,7 @@
        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
          <!-- 操作栏按钮 -->
          <div
+            v-if="activeTab === 'form'"
            class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
          >
            <el-button plain type="success" @click="submitForm">
@ -99,6 +105,7 @@
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@ -126,11 +133,13 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
-
 /** 当前的Tab */
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
-/** 处理选择流程的按钮操作 **/
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
+/** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row, formVariables?) => {
  // 重置指定审批人
  startUserSelectTasks.value = []
@ -141,6 +150,11 @@ const initProcessInfo = async (row, formVariables?) => {
  if (row.formType == 10) {
    // 设置表单
    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    await nextTick()
+    fApi.value?.btn.show(false) // 隐藏提交按钮
+    // 获取流程审批信息
+    getApprovalDetail(row)
+
    // 加载流程图
    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
    if (processDefinitionDetail) {
@ -174,6 +188,23 @@ const initProcessInfo = async (row, formVariables?) => {
    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
  }
 }
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row) => {
+  try {
+    const param = {
+      processDefinitionId: row.id
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+  } finally {
+  }
+}
 /** 提交按钮 */
 const submitForm = async (formData) => {
  if (!fApi.value || props.selectProcessDefinition) {
--- a/src/views/bpm/processInstance/create/index_new.vue
+++ b/src/views/bpm/processInstance/create/index_new.vue
@ -56,7 +56,6 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
-import { categoryList as cl, processDefinitionList as pl } from './mock'

 defineOptions({ name: 'BpmProcessInstanceCreate' })

@ -74,8 +73,6 @@ const getList = async () => {
  try {
    // 流程分类
    categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 测试数据
-    categoryList.value = cl
    if (categoryList.value.length > 0) {
      categoryActive.value = categoryList.value[0]
    }
@ -83,8 +80,6 @@ const getList = async () => {
    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
      suspensionState: 1
    })
-    // 测试数据
-    processDefinitionList.value = pl as any

    // 如果 processInstanceId 非空，说明是重新发起
    if (processInstanceId?.length > 0) {
--- a/src/views/bpm/processInstance/create/mock.js
+++ b/src/views/bpm/processInstance/create/mock.js
@ -1,117 +0,0 @@
-// 模拟流程分类数据
-export const categoryList = [
-  { name: '审批流程', code: 'approval' },
-  { name: '管理流程', code: 'management' }
-]
-
-// 模拟流程定义数据
-export const processDefinitionList = [
-  {
-    id: '1',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '2',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '3',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '4',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '5',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '6',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '7',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '8',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  }
-]
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@ -15,6 +15,7 @@
        >
          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
          <div
+            v-if="showStatusIcon"
            class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
          >
            <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
@ -131,11 +132,18 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
 import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'

 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
-  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
+withDefaults(
+  defineProps<{
+    approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    showStatusIcon?: boolean // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true // 默认值为 true
+  }
+)

 // 审批节点
 const statusIconMap2 = {
@ -180,6 +188,8 @@ const statusIconMap = {
 }

 const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
  // 发起人节点
  [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
  // 审批人节点