【功能完善】仿钉钉流程模型浏览，增加弹窗显示用户任务信息

8465f8fa · jason · 7044bcee · 8465f8fa · 8465f8fa · 8465f8fa
Commit 8465f8fa authored Oct 29, 2024 by jason
6 changed files
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
 <template>
-    <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
 </template>
 <script setup lang="ts">
@@ -16,10 +16,33 @@ const props = defineProps({
    required: true
  },
  // 流程任务
-  tasks : {
+  tasks: {
-    type : Array,
+    type: Array,
    default: () => [] as any[]
+  },
+  // 流程实例
+  processInstance: {
+    type: Object,
+    default: () => undefined
  }
 })
+const approveTasks = ref<any[]>(props.tasks)
+const currentProcessInstance = ref(props.processInstance)
 const simpleModel = useWatchNode(props)
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue
+  }
+)
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue
+  }
+)
+provide('tasks', approveTasks)
+provide('processInstance', currentProcessInstance)
 </script>
+p
--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
 <template>
  <div class="end-node-wrapper">
-    <div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+    <div class="end-node-box cursor-pointer" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" @click="nodeClick">
      <span class="node-fixed-name" title="结束">结束</span>
    </div>
  </div>
+  <el-dialog title="审批信息" v-model="dialogVisible" width="1000px" append-to-body>
+      <el-row>
+        <el-table
+          :data="processInstanceInfos"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="发起人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+          />
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode } from '../consts'
 import { useWatchNode, useTaskStatusClass } from '../node'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
  name: 'EndEventNode'
 })
@@ -20,6 +75,28 @@ const props = defineProps({
 })
 // 监控节点变化
 const currentNode = useWatchNode(props)
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+const processInstance = inject<Ref<any>>('processInstance')
+// 审批信息的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const processInstanceInfos = ref<any[]>([]) // 流程的审批信息
+const nodeClick = () => {
+  if (readonly) { 
+    if(processInstance && processInstance.value){
+      processInstanceInfos.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis
+      }
+    ]
+      dialogVisible.value = true
+    }
+  }
+}
 </script>
 <style lang="scss" scoped></style>
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -22,7 +22,7 @@
            {{ currentNode.name }}
          </div>
        </div>
-        <div class="node-content" @click="openNodeConfig">
+        <div class="node-content" @click="nodeClick">
          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
            {{ currentNode.showText }}
          </div>
@@ -37,12 +37,78 @@
    </div>
  </div>
  <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+   <!-- 审批记录 -->
+   <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            min-width="100"
+            align="center"
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <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="120"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import NodeHandler from '../NodeHandler.vue'
 import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
 import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
  name: 'StartEventNode'
 })
@@ -53,6 +119,7 @@ const props = defineProps({
  }
 })
 const readonly = inject<Boolean>('readonly') // 是否只读
+const tasks = inject<Ref<any[]>>('tasks')
 // 定义事件，更新父组件。
 const emits = defineEmits<{
  'update:modelValue': [node: SimpleFlowNode | undefined]
@@ -63,15 +130,27 @@ const currentNode = useWatchNode(props)
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
-// 打开节点配置
+// 
-const openNodeConfig = () => {
+const nodeClick = () => {
  if (readonly) {
-    return
+    // 只读模式，弹窗显示任务信息
+    if(tasks && tasks.value){
+      dialogTitle.value = currentNode.value.name
+      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      dialogVisible.value = true
    }
-  // 把当前节点传递给配置组件
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
    nodeSetting.value.showStartUserNodeConfig(currentNode.value)
    nodeSetting.value.openDrawer()
+  }
 }
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
 </script>
 <style lang="scss" scoped></style>
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -20,7 +20,7 @@
            {{ currentNode.name }}
          </div>
        </div>
-        <div class="node-content" @click="openNodeConfig">
+        <div class="node-content" @click="nodeClick">
          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
            {{ currentNode.showText }}
          </div>
@@ -45,12 +45,78 @@
    :flow-node="currentNode"
    @find:return-task-nodes="findReturnTaskNodes"
  />
+  <!-- 审批记录 -->
+  <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            min-width="100"
+            align="center"
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <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="120"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
  name: 'UserTaskNode'
 })
@@ -67,26 +133,32 @@ const emits = defineEmits<{
 // 是否只读
 const readonly = inject<Boolean>('readonly')
+const tasks = inject<Ref<any[]>>('tasks')
 // 监控节点变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
-// 打开节点配置
-const openNodeConfig = () => {
+const nodeClick = () => {
  if (readonly) { 
-    return
+    if(tasks && tasks.value){
+      dialogTitle.value = currentNode.value.name
+      // 只读模式，弹窗显示任务信息
+      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      dialogVisible.value = true
    }
-  // 把当前节点传递给配置组件
+  } else { 
+     // 编辑模式，打开节点配置、把当前节点传递给配置组件
    nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
    nodeSetting.value.openDrawer()
+  }
 }
 const deleteNode = () => {
  emits('update:flowNode', currentNode.value.childNode)
 }
 // 查找可以驳回用户节点
 const findReturnTaskNodes = (
  matchNodeList: SimpleFlowNode[] // 匹配的节点
@@ -94,5 +166,11 @@ const findReturnTaskNodes = (
  // 从父节点查找
  emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE)
 }
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
 </script>
 <style lang="scss" scoped></style>
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
 <template>
  <div v-loading="loading" class="mb-20px">
-      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
+      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks" :process-instance="processInstance"/>
  </div>
 </template>
 <script lang="ts" setup>
@@ -16,10 +16,11 @@ const props = defineProps({
  loading: propTypes.bool.def(false), // 是否加载中
  id: propTypes.string // 流程实例的编号
 })
-const tasks = ref([])
 const simpleModel = ref()
+// 用户任务
+const tasks = ref([])
+// 流程实例
+const processInstance = ref()
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
  () => props.loading,
@@ -27,7 +28,8 @@ watch(
    if (value && props.id) {
      const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
      if (modelView) {
-        tasks.value = modelView.tasks;
+        tasks.value = modelView.tasks
+        processInstance.value = modelView.processInstance
        // 已经拒绝的活动节点编号集合，只包括 UserTask
        const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
        // 进行中的活动节点编号集合， 只包括 UserTask
@@ -44,7 +46,6 @@ watch(
          finishedActivityIds,
          finishedSequenceFlowActivityIds
        )
-        console.log('modelView.simpleModel==>', modelView.simpleModel)
        simpleModel.value = modelView.simpleModel
      }
    }
@@ -140,11 +141,4 @@ const setSimpleModelNodeTaskStatus = (
    finishedSequenceFlowActivityIds
  )
 }
-/** 监听 bpmnXml */
-// watch(
-//   () => props.bpmnXml,
-//   (value) => {
-//     view.value.bpmnXml = value
-//   }
-// )
 </script>