【代码优化】工作流：去除多余的 :startUserSelectAssignees 传参

Author: YunaiV

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -24,12 +24,10 @@
 
                   <el-col :span="6" :offset="1">
                     <!-- 流程时间线 -->
-                    <!-- TODO @芋艿：selectUserConfirm 调整一下，改成 activityNodes 里面的东西。 -->
                     <ProcessInstanceTimeline
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
                       :show-status-icon="false"
-                      :startUserSelectAssignees="startUserSelectAssignees"
                       @select-user-confirm="selectUserConfirm"
                     />
                   </el-col>
@@ -85,6 +83,7 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
+import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
@@ -153,20 +152,20 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    const param = {
-      processDefinitionId: row.id
-    }
-    const data = await ProcessInstanceApi.getApprovalDetail(param)
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
     if (!data) {
       message.error('查询不到审批详情信息！')
       return
     }
+
     // 获取发起人自选的任务
-    startUserSelectTasks.value = data.activityNodes?.filter(node => CandidateStrategy.START_USER_SELECT === node.candidateStrategy )
+    startUserSelectTasks.value = data.activityNodes?.filter(
+      (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
+    )
     for (const node of startUserSelectTasks.value) {
-      // 初始化数据
       startUserSelectAssignees.value[node.id] = []
     }
+
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
   } finally {
@@ -209,12 +208,14 @@ const submitForm = async () => {
   }
 }
 
+/** 取消发起审批 */
 const handleCancel = () => {
   emit('cancel')
 }
 
-const selectUserConfirm = (id, userList) => {
-  startUserSelectAssignees.value[id] = userList?.map((item) => item.id)
+/** 选择发起人 */
+const selectUserConfirm = (id: string, userList: any[]) => {
+  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
 }
 
 defineExpose({ initProcessInfo })

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -39,17 +39,21 @@
         <!-- 需要自定义选择审批人 -->
         <div
           class="flex flex-wrap gap2 items-center"
-          v-if="isEmpty(activity.tasks) && isEmpty(activity.candidateUsers) && CandidateStrategy.START_USER_SELECT === activity.candidateStrategy"
+          v-if="
+            isEmpty(activity.tasks) &&
+            isEmpty(activity.candidateUsers) &&
+            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
+          "
         >
           <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
           <el-button
             class="!px-8px"
-            @click="handleSelectUser(activity.id, customApprover[activity.id])"
+            @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
           >
             <Icon icon="fa:user-plus" />
           </el-button>
           <div
-            v-for="(user, idx1) in customApprover[activity.id]"
+            v-for="(user, idx1) in customApproveUsers[activity.id]"
             :key="idx1"
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
           >
@@ -169,11 +173,9 @@ withDefaults(
   defineProps<{
     activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
-    startUserSelectAssignees?: any // 发起人选择审批人的数据
   }>(),
   {
-    showStatusIcon: true, // 默认值为 true
-    startUserSelectAssignees: () => {}
+    showStatusIcon: true // 默认值为 true
   }
 )
 
@@ -280,10 +282,10 @@ const handleSelectUser = (activityId, selectedList) => {
 const emit = defineEmits<{
   selectUserConfirm: [id: any, userList: any[]]
 }>()
-const customApprover: any = ref({}) // key：activityId，value：用户列表 TODO 芋艿：变量改下
+const customApproveUsers: any = ref({}) // key：activityId，value：用户列表
 // 选择完成
-const handleUserSelectConfirm = (activityId, userList) => {
-  customApprover.value[activityId] = userList || []
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || []
   emit('selectUserConfirm', activityId, userList)
 }
 </script>