BPM：优化 task 审批详情界面，增加开始时间、结束时间的展示

d16194b7 · YunaiV · d0f73344 · d16194b7 · d16194b7 · d16194b7
Commit d16194b7 authored Mar 20, 2024 by YunaiV
12 changed files
--- a/src/api/bpm/form/index.ts
+++ b/src/api/bpm/form/index.ts
@@ -49,8 +49,8 @@ export const getFormPage = async (params) => {
 }
 // 获得动态表单的精简列表
-export const getSimpleFormList = async () => {
+export const getFormSimpleList = async () => {
  return await request.get({
-    url: '/bpm/form/list-all-simple'
+    url: '/bpm/form/simple-list'
  })
 }
--- a/src/api/bpm/leave/index.ts
+++ b/src/api/bpm/leave/index.ts
@@ -2,7 +2,7 @@ import request from '@/config/axios'
 export type LeaveVO = {
  id: number
-  result: number
+  status: number
  type: number
  reason: string
  processInstanceId: string

--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -115,7 +115,7 @@ const highlightDiagram = async () => {
      if (!task) {
        return
      }
-      //进行中的任务已经高亮过了，则不高亮后面的任务了
+      // 进行中的任务已经高亮过了，则不高亮后面的任务了
      if (findProcessTask) {
        removeTaskDefinitionKeyList.push(n.id)
        return
@@ -194,6 +194,7 @@ const highlightDiagram = async () => {
      })
    } else if (n.$type === 'bpmn:StartEvent') {
      // 开始节点
+      canvas.addMarker(n.id, 'highlight')
      n.outgoing?.forEach((nn) => {
        // outgoing 例如说【bpmn:SequenceFlow】连线
        // 获得连线是否有指向目标。如果有，则进行高亮
@@ -223,40 +224,49 @@ const highlightDiagram = async () => {
          canvas.addMarker(out.id, getResultCss(2))
        })
      }
+    } else if (n.$type === 'bpmn:SequenceFlow') {
+      let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
+      if (targetActivity) {
+        canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
+      }
    }
  })
  if (!isEmpty(removeTaskDefinitionKeyList)) {
-    // TODO 芋艿：后面 .definitionKey 再看
    taskList.value = taskList.value.filter(
-      (item) => !removeTaskDefinitionKeyList.includes(item.definitionKey)
+      (item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
    )
  }
 }
 const getActivityHighlightCss = (activity) => {
  return activity.endTime ? 'highlight' : 'highlight-todo'
 }
-const getResultCss = (result) => {
-  if (result === 1) {
+const getResultCss = (status) => {
+  if (status === 1) {
    // 审批中
    return 'highlight-todo'
-  } else if (result === 2) {
+  } else if (status === 2) {
    // 已通过
    return 'highlight'
-  } else if (result === 3) {
+  } else if (status === 3) {
    // 不通过
    return 'highlight-reject'
-  } else if (result === 4) {
+  } else if (status === 4) {
    // 已取消
    return 'highlight-cancel'
-  } else if (result === 5) {
+  } else if (status === 5) {
    // 退回
    return 'highlight-return'
-  } else if (result === 6) {
+  } else if (status === 6) {
    // 委派
-    return 'highlight-return'
+    return 'highlight-todo'
-  } else if (result === 7 || result === 8 || result === 9) {
+  } else if (status === 7) {
-    // 待后加签任务完成/待前加签任务完成/待前置任务完成
+    // 审批通过中
-    return 'highlight-return'
+    return 'highlight-todo'
+  } else if (status === 0) {
+    // 待审批
+    return 'highlight-todo'
  }
  return ''
 }
@@ -297,10 +307,10 @@ const elementHover = (element) => {
  !elementOverlayIds.value && (elementOverlayIds.value = {})
  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
  // 展示信息
-  console.log(activityLists.value, 'activityLists.value')
+  // console.log(activityLists.value, 'activityLists.value')
-  console.log(element.value, 'element.value')
+  // console.log(element.value, 'element.value')
  const activity = activityLists.value.find((m) => m.key === element.value.id)
-  console.log(activity, 'activityactivityactivityactivity')
+  // console.log(activity, 'activityactivityactivityactivity')
  if (!activity) {
    return
  }
@@ -314,12 +324,11 @@ const elementHover = (element) => {
                  <p>部门：${processInstance.value.startUser.deptName}</p>
                  <p>创建时间：${formatDate(processInstance.value.createTime)}`
    } else if (element.value.type === 'bpmn:UserTask') {
-      // debugger
      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
      if (!task) {
        return
      }
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
      let dataResult = ''
      optionData.forEach((element) => {
        if (element.value == task.status) {
@@ -352,7 +361,7 @@ const elementHover = (element) => {
      }
      console.log(html)
    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
      let dataResult = ''
      optionData.forEach((element) => {
        if (element.value == processInstance.value.status) {
@@ -375,6 +384,7 @@ const elementHover = (element) => {
    })
  }
 }
 // 流程图的元素被 out
 const elementOut = (element) => {
  toRaw(overlays.value).remove({ element })
@@ -390,6 +400,7 @@ onMounted(() => {
  // 初始模型的监听器
  initModelListeners()
 })
 onBeforeUnmount(() => {
  // this.$once('hook:beforeDestroy', () => {
  // })
@@ -428,7 +439,7 @@ watch(
 )
 </script>
-<style>
+<style lang="scss">
 /** 处理中 */
 .highlight-todo.djs-connection > .djs-visual > path {
  stroke: #1890ff !important;
@@ -502,6 +513,10 @@ watch(
  stroke: green !important;
 }
+.djs-element.highlight > .djs-visual > path {
+  stroke: green !important;
+}
 /** 不通过 */
 .highlight-reject.djs-shape .djs-visual > :nth-child(1) {
  fill: red !important;
@@ -521,6 +536,7 @@ watch(
 .highlight-reject.djs-connection > .djs-visual > path {
  stroke: red !important;
+  marker-end: url(#sequenceflow-end-white-success) !important;
 }
 .highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {

--- a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -461,7 +461,7 @@ const updateElementExtensions = () => {
 const formList = ref([]) // 流程表单的下拉框的数据
 onMounted(async () => {
-  formList.value = await FormApi.getSimpleFormList()
+  formList.value = await FormApi.getFormSimpleList()
 })
 watch(

--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -139,7 +139,7 @@ export enum DICT_TYPE {
  BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
  BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
  BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
-  BPM_PROCESS_INSTANCE_RESULT = 'bpm_process_instance_result', // TODO @芋艿：改名
+  BPM_TASK_STATUS = 'bpm_task_status',
  BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
  // ========== PAY 模块 ==========

--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -173,7 +173,7 @@ const open = async (type: string, id?: number) => {
    }
  }
  // 获得流程表单的下拉框的数据
-  formList.value = await FormApi.getSimpleFormList()
+  formList.value = await FormApi.getFormSimpleList()
  // 查询流程分类列表
  categoryList.value = await CategoryApi.getCategorySimpleList()
 }

--- a/src/views/bpm/model/ModelImportForm.vue
+++ b/src/views/bpm/model/ModelImportForm.vue
@@ -109,6 +109,7 @@ const submitFormSuccess = async (response: any) => {
  }
  // 提示成功
  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
+  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success')
 }

--- a/src/views/bpm/oa/leave/index.vue
+++ b/src/views/bpm/oa/leave/index.vue
@@ -36,10 +36,15 @@
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
-      <el-form-item label="结果" prop="result">
+      <el-form-item label="审批结果" prop="result">
-        <el-select v-model="queryParams.result" class="!w-240px" clearable placeholder="请选择结果">
+        <el-select
+          v-model="queryParams.result"
+          class="!w-240px"
+          clearable
+          placeholder="请选择审批结果"
+        >
          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
@@ -78,7 +83,7 @@
      <el-table-column align="center" label="申请编号" prop="id" />
      <el-table-column align="center" label="状态" prop="result">
        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.result" />
        </template>
      </el-table-column>
      <el-table-column
@@ -166,7 +171,7 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  type: undefined,
-  result: undefined,
+  status: undefined,
  reason: undefined,
  createTime: []
 })

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -7,14 +7,25 @@
      <div class="block">
        <el-timeline>
          <el-timeline-item
+            v-if="processInstance.endTime"
+            :type="getProcessInstanceTimelineItemType(processInstance)"
+          >
+            <p style="font-weight: 700">
+              结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
+              <dict-tag
+                :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+                :value="processInstance.status"
+              />
+            </p>
+          </el-timeline-item>
+          <el-timeline-item
            v-for="(item, index) in tasks"
            :key="index"
-            :icon="getTimelineItemIcon(item)"
+            :type="getTaskTimelineItemType(item)"
-            :type="getTimelineItemType(item)"
          >
            <p style="font-weight: 700">
-              任务：{{ item.name }}
+              审批任务：{{ item.name }}
-              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="item.status" />
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
              <el-button
                class="ml-10px"
                v-if="!isEmpty(item.children)"
@@ -56,6 +67,12 @@
              <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
            </el-card>
          </el-timeline-item>
+          <el-timeline-item type="success">
+            <p style="font-weight: 700">
+              发起流程：【{{ processInstance.startUser?.nickname }}】在
+              {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
+            </p>
+          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
@@ -86,33 +103,27 @@ defineOptions({ name: 'BpmProcessInstanceTaskList' })
 defineProps({
  loading: propTypes.bool, // 是否加载中
+  processInstance: propTypes.object, // 流程实例
  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
 })
-/** 获得任务对应的 icon */
+/** 获得流程实例对应的颜色 */
-// TODO @芋艿：对应的 icon 需要调整
+const getProcessInstanceTimelineItemType = (item: any) => {
-const getTimelineItemIcon = (item) => {
-  if (item.status === 1) {
-    return 'el-icon-time'
-  }
  if (item.status === 2) {
-    return 'el-icon-check'
+    return 'success'
  }
  if (item.status === 3) {
-    return 'el-icon-close'
+    return 'danger'
  }
  if (item.status === 4) {
-    return 'el-icon-remove-outline'
+    return 'warning'
-  }
-  if (item.status === 5) {
-    return 'el-icon-back'
  }
  return ''
 }
 /** 获得任务对应的颜色 */
-const getTimelineItemType = (item: any) => {
+const getTaskTimelineItemType = (item: any) => {
-  if (item.status === 1) {
+  if ([0, 1, 6, 7].includes(item.status)) {
    return 'primary'
  }
  if (item.status === 2) {
@@ -127,12 +138,6 @@ const getTimelineItemType = (item: any) => {
  if (item.status === 5) {
    return 'warning'
  }
-  if (item.status === 6) {
-    return 'default'
-  }
-  if (item.status === 7 || item.status === 8) {
-    return 'warning'
-  }
  return ''
 }

--- a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
@@ -27,7 +27,7 @@
      </el-table-column>
      <el-table-column label="审批状态" prop="status" width="120">
        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column

--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -105,7 +105,12 @@
    </el-card>
    <!-- 审批记录 -->
-    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" @refresh="getTaskList" />
+    <ProcessInstanceTaskList
+      :loading="tasksLoad"
+      :process-instance="processInstance"
+      :tasks="tasks"
+      @refresh="getTaskList"
+    />
    <!-- 高亮流程图 -->
    <ProcessInstanceBpmnViewer

--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -77,7 +77,7 @@
      />
      <el-table-column align="center" label="审批状态" prop="status" width="120">
        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批建议" prop="reason" min-width="180" />