【代码评审】工作流：新审批界面

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

@@ -3,6 +3,7 @@
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
     v-if="runningTask.id"
   >
+    <!-- 【通过】按钮 -->
     <el-popover
       :visible="passVisible"
       placement="top-end"
@@ -15,6 +16,7 @@
           <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
         </el-button>
       </template>
+      <!-- 审批表单 -->
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -64,6 +66,8 @@
         </el-form>
       </div>
     </el-popover>
+
+    <!-- 【拒绝】按钮 -->
     <el-popover
       :visible="rejectVisible"
       placement="top-end"
@@ -76,6 +80,7 @@
           <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
         </el-button>
       </template>
+      <!-- 审批表单 -->
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -125,21 +130,39 @@
         </el-form>
       </div>
     </el-popover>
+
+    <!-- 【抄送】按钮 -->
     <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
+
+    <!-- 【转交】按钮 -->
     <div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
-      <Icon :size="14" icon="fa:share-square-o" />&nbsp;{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+      <Icon :size="14" icon="fa:share-square-o" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
     </div>
+
+    <!-- 【委托】按钮 -->
     <div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
-      <Icon :size="14" icon="ep:position" />&nbsp;{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+      <Icon :size="14" icon="ep:position" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
     </div>
+
+    <!-- 【加签】 -->
     <div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
-      <Icon :size="14" icon="ep:plus" />&nbsp;{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+      <Icon :size="14" icon="ep:plus" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
     </div>
+    <!-- TODO @jason：减签 -->
+
+    <!-- 【退回】按钮 -->
     <div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
-      <Icon :size="14" icon="fa:mail-reply" />&nbsp;{{ getButtonDisplayName(OperationButtonType.RETURN) }}
+      <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.RETURN) }}
     </div>
+
+    <!--TODO @jason：撤回 -->
+    <!--TODO @jason：再次发起 -->
   </div>
-  <!-- </div> -->
+
   <!-- 弹窗：转派审批人 -->
   <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
   <!-- 弹窗：回退节点 -->
@@ -149,7 +172,6 @@
   <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
   <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
 </template>
-
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { useUserStore } from '@/store/modules/user'
@@ -198,15 +220,17 @@ watch(
     deep: true
   }
 )
+
+// TODO @jaosn：具体的审批任务，要不改成后端返回。让前端弱化下
 /**
  * 设置 runningTasks 中的任务
  */
-const loadRunningTask = (tasks) => {
+const loadRunningTask = (tasks: any[]) => {
   runningTask.value = {}
   auditForm.value = {}
   approveForm.value = {}
   approveFormFApi.value = {}
-  tasks.forEach((task) => {
+  tasks.forEach((task: any) => {
     if (!isEmpty(task.children)) {
       loadRunningTask(task.children)
     }
@@ -237,7 +261,7 @@ const loadRunningTask = (tasks) => {
 }
 
 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (pass) => {
+const handleAudit = async (pass: any) => {
   formLoading.value = true
   try {
     const auditFormRef = proxy.$refs['formRef']
@@ -277,6 +301,7 @@ const handleAudit = async (pass) => {
 /* 抄送 TODO */
 const handleSend = () => {}
 
+// TODO 代码优化：这里 flag 改成 approve: boolean 。因为 flag 目前就只有 1 和 2
 const openPopover = (flag) => {
   passVisible.value = false
   rejectVisible.value = false
@@ -323,11 +348,11 @@ const isShowButton = (btnType: OperationButtonType): boolean => {
 
 /** 获取按钮的显示名称 */
 const getButtonDisplayName = (btnType: OperationButtonType) => {
-  let diaplayName = OPERATION_BUTTON_NAME.get(btnType)
+  let displayName = OPERATION_BUTTON_NAME.get(btnType)
   if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
-    diaplayName = runningTask.value.buttonsSetting[btnType].displayName
+    displayName = runningTask.value.buttonsSetting[btnType].displayName
   }
-  return diaplayName
+  return displayName
 }
 
 defineExpose({ loadRunningTask })

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

@@ -1,5 +1,7 @@
+<!-- 审批详情的右侧：审批流 -->
 <template>
   <el-timeline class="pt-20px">
+    <!-- 遍历每个审批节点 -->
     <el-timeline-item
       v-for="(activity, index) in approveNodes"
       :key="index"
@@ -10,25 +12,28 @@
       <div class="flex flex-col items-start">
         <div class="font-bold"> {{ activity.name }}</div>
         <div class="flex items-center mt-1">
+          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
             <div class="flex items-center flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
+                <!-- 信息：头像 -->
                 <el-avatar
                   :size="36"
                   v-if="task.assigneeUser && task.assigneeUser.avatar"
                   :src="task.assigneeUser.avatar"
                 />
                 <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
-                  {{ task.assigneeUser.nickname.substring(0, 1) }}</el-avatar
-                >
+                  {{ task.assigneeUser.nickname.substring(0, 1) }}
+                </el-avatar>
                 <el-avatar
                   v-else-if="task.ownerUser && task.ownerUser.avatar"
                   :src="task.ownerUser.avatar"
                 />
                 <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
-                  {{ task.ownerUser.nickname.substring(0, 1) }}</el-avatar
-                >
-                <div 
+                  {{ task.ownerUser.nickname.substring(0, 1) }}
+                </el-avatar>
+                <!-- 信息：任务 ICON -->
+                <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
                   <Icon
@@ -39,21 +44,25 @@
                 </div>
               </div>
               <div class="flex flex-col mt-1">
+                <!-- 信息：昵称 -->
                 <div
                   v-if="task.assigneeUser && task.assigneeUser.nickname"
                   class="text-10px text-align-center"
-                  >{{ task.assigneeUser.nickname }}</div
                 >
+                  {{ task.assigneeUser.nickname }}
+                </div>
                 <div
                   v-else-if="task.ownerUser && task.ownerUser.nickname"
                   class="text-10px text-align-center"
                 >
-                  {{ task.ownerUser.nickname }}</div
-                >
+                  {{ task.ownerUser.nickname }}
+                </div>
+                <!-- TODO @jason：审批意见，要展示哈。 -->
                 <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
               </div>
             </div>
           </div>
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div
             v-for="(user, idx1) in activity.candidateUserList"
             :key="idx1"
@@ -61,10 +70,12 @@
           >
             <div class="flex items-center flex-col pr-2">
               <div class="position-relative">
+                <!-- 信息：头像 -->
                 <el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
                 <el-avatar v-else-if="user.nickname && user.nickname">
-                  {{ user.nickname.substring(0, 1) }}</el-avatar
-                >
+                  {{ user.nickname.substring(0, 1) }}
+                </el-avatar>
+                <!-- 信息：任务 ICON -->
                 <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
@@ -76,18 +87,24 @@
                 </div>
               </div>
               <div class="flex flex-col mt-1">
-                <div v-if="user.nickname" class="text-10px text-align-center">{{
-                  user.nickname
-                }}</div>
+                <!-- 信息：昵称 -->
+                <div v-if="user.nickname" class="text-10px text-align-center">
+                  {{ user.nickname }}
+                </div>
                 <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
               </div>
             </div>
           </div>
         </div>
-        <div v-if="activity.status !== TaskStatusEnum.NOT_START" class="text-#a5a5a5 text-13px mt-1">
+        <!-- 信息：时间 -->
+        <div
+          v-if="activity.status !== TaskStatusEnum.NOT_START"
+          class="text-#a5a5a5 text-13px mt-1"
+        >
           {{ getApprovalNodeTime(activity) }}
         </div>
-        
+
+        <!-- TODO @jason：审批意见，要展示哈。 -->
         <!-- <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
         <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
           <div class="mb-5px">审批意见：</div>
@@ -136,7 +153,7 @@ const statusIconMap2 = {
   // 待审批
   '0': { color: '#e5e7ec', icon: 'ep:loading' },
   // 审批中
-  '1': { color: '#448ef7', icon: 'ep:loading'},
+  '1': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过
   '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
   // 审批不通过
@@ -148,8 +165,7 @@ const statusIconMap2 = {
   // 委派中
   '6': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过中
-  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' },
- 
+  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
 }
 
 const statusIconMap = {
@@ -165,11 +181,11 @@ const statusIconMap = {
   // 已取消
   '4': { color: '#cccccc', icon: Delete },
   // 回退
-  '5' : { color: '#f46b6c', icon: Minus },
+  '5': { color: '#f46b6c', icon: Minus },
   // 委派中
   '6': { color: '#448ef7', icon: Loading },
   // 审批通过中
-  '7': { color: '#00b32a', icon: Check },
+  '7': { color: '#00b32a', icon: Check }
 }
 
 /** 获得审批详情 */
@@ -181,16 +197,14 @@ const getApprovalDetail = async () => {
   approveNodes.value = data.approveNodes
 }
 
-const getApprovalNodeIcon = (taskStatus: number , nodeType: NodeType) => {
-
-  if(taskStatus == TaskStatusEnum.NOT_START) {
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
+  if (taskStatus == TaskStatusEnum.NOT_START) {
     return statusIconMap[taskStatus]?.icon
   }
 
   if (nodeType === NodeType.START_USER_NODE || nodeType === NodeType.USER_TASK_NODE) {
     return statusIconMap[taskStatus]?.icon
   }
-
 }
 
 const getApprovalNodeColor = (taskStatus: number) => {
@@ -198,25 +212,22 @@ const getApprovalNodeColor = (taskStatus: number) => {
 }
 
 const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
-
-  if(node.endTime) {
+  if (node.endTime) {
     return `结束时间：${formatDate(node.endTime)}`
   }
-  if(node.startTime) {
+  if (node.startTime) {
     return `创建时间：${formatDate(node.startTime)}`
   }
 }
 
-/**
- *  重新刷新审批详情
- */
-const refresh =  () => {
+/** 重新刷新审批详情 */
+const refresh = () => {
   getApprovalDetail()
 }
 
 defineExpose({ refresh })
 
 onMounted(async () => {
-  getApprovalDetail()
+  await getApprovalDetail()
 })
 </script>

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

@@ -27,8 +27,8 @@
 
         <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
-          <el-tab-pane label="表单信息" name="form">
-            <div class="form-scoll-area">
+          <el-tab-pane label="审批详情" name="form">
+            <div class="form-scroll-area">
               <el-scrollbar>
                 <el-row :gutter="10">
                   <el-col :span="18" class="!flex !flex-col formCol">
@@ -64,7 +64,6 @@
               </el-scrollbar>
             </div>
           </el-tab-pane>
-
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <ProcessInstanceBpmnViewer
@@ -84,7 +83,7 @@
               @refresh="getTaskList"
             />
           </el-tab-pane>
-          <!-- 流转评论 -->
+          <!-- 流转评论 TODO 待开发 -->
           <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
         </el-tabs>
 
@@ -125,9 +124,9 @@ import audit3 from '@/assets/svgs/bpm/audit3.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
-  id: string   // 流程实例的编号
-  taskId?: string  // 任务编号
-  activityId?: string  //流程活动编号，用于抄送查看
+  id: string // 流程实例的编号
+  taskId?: string // 任务编号
+  activityId?: string //流程活动编号，用于抄送查看
 }>()
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
@@ -234,7 +233,7 @@ const getTaskList = async () => {
     const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
     tasks.value = []
     // 1.1 移除已取消的审批
-    data.forEach((task) => {
+    data.forEach((task: any) => {
       if (task.status !== 4) {
         tasks.value.push(task)
       }
@@ -267,8 +266,8 @@ const getTaskList = async () => {
 const refresh = () => {
   // 重新获取详情
   getDetail()
-  // 刷新审批详情 Timeline 
-  timelineRef.value?.refresh();
+  // 刷新审批详情 Timeline
+  timelineRef.value?.refresh()
 }
 
 /** 当前的Tab */
@@ -298,7 +297,7 @@ $process-header-height: 194px;
   );
   overflow: auto;
 
-  .form-scoll-area {
+  .form-scroll-area {
     height: calc(
       100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
         $process-header-height - 40px