【代码评审修改】- 新审批界面部分修改

Author: cooling-jason

src/api/bpm/processInstance/index.ts

@@ -47,7 +47,7 @@ export type ApprovalNodeInfo = {
   status: number
   startTime?: Date
   endTime?: Date
-  candidateUserList?: User[]
+  candidateUsers?: User[]
   tasks: ApprovalTaskInfo[]
 }
 

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

@@ -14,7 +14,7 @@
         <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="flex flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                 <!-- 信息：头像 -->
                 <el-avatar
@@ -47,7 +47,7 @@
                 <!-- 信息：昵称 -->
                 <div
                   v-if="task.assigneeUser && task.assigneeUser.nickname"
-                  class="text-10px text-align-center"
+                  class="text-12px text-align-center"
                 >
                   {{ task.assigneeUser.nickname }}
                 </div>
@@ -57,14 +57,20 @@
                 >
                   {{ 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 v-if="task.reason" class="text-#a5a5a5 my-4px text-12px flex items-center w-100%">
+                  <div
+                    :title="task.reason"
+                    class="text-truncate w-200px border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
+                  >
+                    {{ task.reason }}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div
-            v-for="(user, idx1) in activity.candidateUserList"
+            v-for="(user, idx1) in activity.candidateUsers"
             :key="idx1"
             class="flex items-center"
           >
@@ -91,7 +97,6 @@
                 <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>

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

@@ -12,37 +12,45 @@
         <el-divider class="!my-8px" />
         <div class="flex items-center gap-5 mb-10px h-40px">
           <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
+          <dict-tag
+            v-if="processInstance.status"
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="processInstance.status"
+          />
         </div>
 
         <div class="flex items-center gap-5 mb-10px text-13px h-35px">
           <div
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
           >
-            <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
+            <!-- <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" /> -->
+            <el-avatar
+              :size="28"
+              v-if="processInstance?.startUser?.avatar"
+              :src="processInstance?.startUser?.avatar"
+            />
+            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
+              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+            </el-avatar>
             {{ processInstance?.startUser?.nickname }}
           </div>
           <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
         </div>
 
-        <el-tabs v-model="activeTab">
+        <el-tabs v-model="activeTab" @tab-change="onTabChange">
           <!-- 表单信息 -->
           <el-tab-pane label="审批详情" name="form">
             <div class="form-scroll-area">
               <el-scrollbar>
-                <el-row :gutter="10">
+                <el-row>
                   <el-col :span="18" class="!flex !flex-col formCol">
                     <!-- 表单信息 -->
                     <div
                       v-loading="processInstanceLoading"
                       class="form-box flex flex-col mb-30px flex-1"
                     >
                       <!-- 情况一：流程表单 -->
-                      <el-col
-                        v-if="processInstance?.processDefinition?.formType === 10"
-                        :offset="6"
-                        :span="16"
-                      >
+                      <el-col v-if="processInstance?.processDefinition?.formType === 10">
                         <form-create
                           v-model="detailForm.value"
                           v-model:api="fApi"
@@ -64,33 +72,44 @@
               </el-scrollbar>
             </div>
           </el-tab-pane>
+
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
-            <ProcessInstanceBpmnViewer
-              :id="`${id}`"
-              :bpmn-xml="bpmnXml"
-              :loading="processInstanceLoading"
-              :process-instance="processInstance"
-              :tasks="tasks"
-            />
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceBpmnViewer
+                  :id="`${id}`"
+                  :bpmn-xml="bpmnXml"
+                  :loading="processInstanceLoading"
+                  :process-instance="processInstance"
+                  :tasks="tasks"
+                />
+              </el-scrollbar>
+            </div>
           </el-tab-pane>
+
           <!-- 流转记录 -->
           <el-tab-pane label="流转记录" name="record">
-            <ProcessInstanceTaskList
-              :loading="tasksLoad"
-              :process-instance="processInstance"
-              :tasks="tasks"
-              @refresh="getTaskList"
-            />
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceTaskList
+                  :loading="tasksLoad"
+                  :process-instance="processInstance"
+                  :tasks="tasks"
+                />
+              </el-scrollbar>
+            </div>
           </el-tab-pane>
+
           <!-- 流转评论 TODO 待开发 -->
-          <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
+          <el-tab-pane label="流转评论" name="comment">
+            <div class="form-scroll-area">
+              <el-scrollbar> 流转评论 </el-scrollbar>
+            </div>
+          </el-tab-pane>
         </el-tabs>
 
-        <div
-          class="b-t-solid border-t-1px border-[var(--el-border-color)]"
-          v-if="activeTab === 'form'"
-        >
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
             ref="operationButtonRef"
@@ -131,6 +150,7 @@ const props = defineProps<{
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
+let processDefinitionId = undefined // 流程定义 Id
 const operationButtonRef = ref()
 const timelineRef = ref()
 const bpmnXml = ref('') // BPMN XML
@@ -151,10 +171,10 @@ const detailForm = ref({
 }) // 流程实例的表单详情
 
 /** 获得详情 */
-const getDetail = () => {
+const getDetail = async () => {
   // 1. 获得流程实例相关
   getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
+  // 2. 获得流程任务列表
   getTaskList()
 }
 
@@ -202,9 +222,9 @@ const getProcessInstance = async () => {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
-
+    processDefinitionId = processDefinition.id
     // 加载流程图
-    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
+    // bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
   } finally {
     processInstanceLoading.value = false
   }
@@ -273,6 +293,13 @@ const refresh = () => {
 /** 当前的Tab */
 const activeTab = ref('form')
 
+/** Tab 切换 加载流程图，直接加载显示不出来，不知道啥原因，所以切换以后在加载 */
+const onTabChange = async (tabName: string) => {
+  if (tabName === 'diagram' && processDefinitionId && !bpmnXml.value) {
+    //加载流程图
+    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinitionId))?.bpmnXml
+  }
+}
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {