【工作流】- 流程实例新界面修改

27d24cd0 · jason · 4680a7dc · 27d24cd0 · 27d24cd0 · 27d24cd0
Commit 27d24cd0 authored Oct 01, 2024 by jason
7 changed files
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
 import request from '@/config/axios'
 import { ProcessDefinitionVO } from '@/api/bpm/model'
+import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 export type Task = {
  id: string
  name: string
@@ -22,6 +22,35 @@ export type ProcessInstanceVO = {
  processDefinition?: ProcessDefinitionVO
 }
+// 用户信息
+export type User = {
+  id: number,
+  nickname: string,
+  avatar: string
+}
+// 审批任务信息
+export type ApprovalTaskInfo = {
+  id: number,
+  ownerUser: User,
+  assigneeUser: User,
+  status: number,
+  reason: string
+}
+// 审批节点信息
+export type ApprovalNodeInfo = {
+  id : number
+  name: string
+  nodeType: NodeType
+  status: number
+  startTime?: Date
+  endTime?: Date
+  candidateUserList?: User[]
+  tasks: ApprovalTaskInfo[]
+}
 export const getProcessInstanceMyPage = async (params: any) => {
  return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
@@ -57,3 +86,8 @@ export const getProcessInstance = async (id: string) => {
 export const getProcessInstanceCopyPage = async (params: any) => {
  return await request.get({ url: '/bpm/process-instance/copy/page', params })
 }
+export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
+  const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
+}
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
 import request from '@/config/axios'
+/**
+ * 任务状态枚举
+ */
+export enum TaskStatusEnum {
+  /**
+   * 未开始
+   */
+  NOT_START = -1,
+   /**
+   * 待审批
+   */
+   WAIT = 0,
+  /**
+   * 审批中
+   */
+  RUNNING = 1,
+  /**
+   * 审批通过
+   */
+  APPROVE = 2,
+  /**
+   * 审批不通过
+   */
+  REJECT = 3,
+  /**
+   * 已取消
+   */
+  CANCEL = 4,
+  /**
+   * 已退回
+   */
+  RETURN = 5,
+  /**
+   * 委派中
+   */
+  DELEGATE = 6,
+  /**
+   * 审批通过中
+   */
+  APPROVING = 7,
+}
 export type TaskVO = {
  id: number
 }

--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
 <template>
-  <div class="simple-flow-canvas">
+  <div class="simple-flow-canvas" v-loading="loading">
-    <div class="simple-flow-container">
+    <div class="simple-flow-container" >
      <div class="top-area-container">
        <div class="top-actions">
          <div class="canvas-control">
@@ -15,7 +15,10 @@
        </div>
      </div>
      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+        <ProcessNodeTree
+          v-if="processNodeTree"
+          v-model:flow-node="processNodeTree"
+        />
      </div>
    </div>
    <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
@@ -46,6 +49,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
+import { fa } from 'element-plus/es/locale'
 defineOptions({
  name: 'SimpleProcessDesigner'
 })
@@ -56,7 +60,7 @@ const props = defineProps({
    required: true
  }
 })
+const loading = ref(true)
 const formFields = ref<string[]>([])
 const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
@@ -163,6 +167,8 @@ const zoomIn = () => {
 }
 onMounted(async () => {
+  try {
+    loading.value = true
    // 获取表单字段
    const bpmnModel = await getModel(props.modelId)
    if (bpmnModel) {
@@ -202,5 +208,8 @@ onMounted(async () => {
        }
      }
    }
+  } finally {
+    loading.value = false
+  }
 })
 </script>
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -292,7 +292,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
      },
      {
        path: 'process-instance/detail',
-        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
        name: 'BpmProcessInstanceDetail',
        meta: {
          noCache: true,

--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
 <template>
  <div
-    class="h-50px position-fixed bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+    class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
  >
    <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
      <template #reference>
@@ -120,6 +120,7 @@
    <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
    <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
  </div>
+  <!-- </div> -->
  <!-- 弹窗：转派审批人 -->
  <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
  <!-- 弹窗：回退节点 -->
@@ -299,10 +300,11 @@ defineExpose({ loadRunningTask })
 .btn-container {
  > div {
+    display: flex;
    margin: 0 15px;
    cursor: pointer;
-    display: flex;
    align-items: center;
    &:hover {
      color: #6db5ff;
    }

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
 <template>
  <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
        <img
          class="position-absolute right-20px"
          width="150"
          :src="auditIcons[processInstance.status]"
          alt=""
        />
-    <div class="text-#878c93">编号：{{ id }}</div>
+        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
        <el-divider class="!my-8px" />
-    <div class="flex items-center gap-5 mb-10px">
+        <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" />
        </div>
-    <div class="flex items-center gap-5 mb-10px text-13px">
+        <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">
+          <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="" />
            {{ processInstance?.startUser?.nickname }}
          </div>
          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
        </div>
-    <el-tabs>
+        <el-tabs v-model="activeTab">
          <!-- 表单信息 -->
-      <el-tab-pane label="表单信息">
+          <el-tab-pane label="表单信息" name="form">
+            <div class="form-scoll-area">
+              <el-scrollbar>
                <el-row :gutter="10">
                  <el-col :span="18" class="!flex !flex-col formCol">
                    <!-- 表单信息 -->
-            <div v-loading="processInstanceLoading" class="form-box flex flex-col mb-30px flex-1">
+                    <div
+                      v-loading="processInstanceLoading"
+                      class="form-box flex flex-col mb-30px flex-1"
+                    >
                      <!-- 情况一：流程表单 -->
                      <el-col
                        v-if="processInstance?.processDefinition?.formType === 10"
@@ -46,23 +55,18 @@
                        <BusinessFormComponent :id="processInstance.businessKey" />
                      </div>
                    </div>
-            <!-- 操作栏按钮 -->
-            <ProcessInstanceOperationButton
-              ref="operationButtonRef"
-              :processInstance="processInstance"
-              :userOptions="userOptions"
-              @success="getDetail"
-            />
                  </el-col>
                  <el-col :span="6">
                    <!-- 审批记录时间线 -->
-            <ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
+                    <ProcessInstanceTimeline :process-instance-id="id" />
                  </el-col>
                </el-row>
+              </el-scrollbar>
+            </div>
          </el-tab-pane>
          <!-- 流程图 -->
-      <el-tab-pane label="流程图">
+          <el-tab-pane label="流程图" name="diagram">
            <ProcessInstanceBpmnViewer
              :id="`${id}`"
              :bpmn-xml="bpmnXml"
@@ -72,7 +76,7 @@
            />
          </el-tab-pane>
          <!-- 流转记录 -->
-      <el-tab-pane label="流转记录">
+          <el-tab-pane label="流转记录" name="record">
            <ProcessInstanceTaskList
              :loading="tasksLoad"
              :process-instance="processInstance"
@@ -81,8 +85,20 @@
            />
          </el-tab-pane>
          <!-- 流转评论 -->
-      <el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
+          <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
        </el-tabs>
+        <div class=" b-t-solid border-t-1px border-[var(--el-border-color)]" v-if="activeTab === 'form'">
+          <!-- 操作栏按钮 -->
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :processInstance="processInstance"
+            :userOptions="userOptions"
+            @success="getDetail"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
  </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -209,6 +225,9 @@ const getTaskList = async () => {
  }
 }
+/** 当前的Tab */
+const activeTab = ref('form')
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {
@@ -219,9 +238,29 @@ onMounted(async () => {
 </script>
 <style lang="scss" scoped>
+$wrap-padding-height: 30px ;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+.processInstance-wrap-main {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  overflow: auto;
+  .form-scoll-area {
+    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    overflow: auto;
+  }
+}
 .form-box {
  :deep(.el-card) {
    border: none;
  }
 }
 </style>