Skip to content

Commit 8465f8f

Browse files
cooling-jasoncooling-jason
committed
【功能完善】仿钉钉流程模型浏览，增加弹窗显示用户任务信息
1 parent 7044bce commit 8465f8f

File tree

6 files changed

+287
-606
lines changed

6 files changed

+287
-606
lines changed

‎src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
2+
<SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
33
</template>
44

55
<script setup lang="ts">
@@ -16,10 +16,33 @@ const props = defineProps({
1616
required: true
1717
},
1818
// 流程任务
19-
tasks : {
20-
type : Array,
19+
tasks: {
20+
type: Array,
2121
default: () => [] as any[]
22+
},
23+
// 流程实例
24+
processInstance: {
25+
type: Object,
26+
default: () => undefined
2227
}
2328
})
29+
const approveTasks = ref<any[]>(props.tasks)
30+
const currentProcessInstance = ref(props.processInstance)
2431
const simpleModel = useWatchNode(props)
32+
watch(
33+
() => props.tasks,
34+
(newValue) => {
35+
approveTasks.value = newValue
36+
}
37+
)
38+
watch(
39+
() => props.processInstance,
40+
(newValue) => {
41+
currentProcessInstance.value = newValue
42+
}
43+
)
44+
45+
provide('tasks', approveTasks)
46+
provide('processInstance', currentProcessInstance)
2547
</script>
48+
p

‎src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,69 @@
11
<template>
22
<div class="end-node-wrapper">
3-
<div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
3+
<div class="end-node-box cursor-pointer" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" @click="nodeClick">
44
<span class="node-fixed-name" title="结束">结束</span>
55
</div>
66
</div>
7+
<el-dialog title="审批信息" v-model="dialogVisible" width="1000px" append-to-body>
8+
<el-row>
9+
<el-table
10+
:data="processInstanceInfos"
11+
size="small"
12+
border
13+
header-cell-class-name="table-header-gray"
14+
>
15+
<el-table-column
16+
label="序号"
17+
header-align="center"
18+
align="center"
19+
type="index"
20+
width="50"
21+
/>
22+
<el-table-column
23+
label="发起人"
24+
prop="assigneeUser.nickname"
25+
min-width="100"
26+
align="center"
27+
/>
28+
<el-table-column label="部门" min-width="100" align="center">
29+
<template #default="scope">
30+
{{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
31+
</template>
32+
</el-table-column>
33+
<el-table-column
34+
:formatter="dateFormatter"
35+
align="center"
36+
label="开始时间"
37+
prop="createTime"
38+
min-width="140"
39+
/>
40+
<el-table-column
41+
:formatter="dateFormatter"
42+
align="center"
43+
label="结束时间"
44+
prop="endTime"
45+
min-width="140"
46+
/>
47+
<el-table-column align="center" label="审批状态" prop="status" min-width="90">
48+
<template #default="scope">
49+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
50+
</template>
51+
</el-table-column>
52+
53+
<el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
54+
<template #default="scope">
55+
{{ formatPast2(scope.row.durationInMillis) }}
56+
</template>
57+
</el-table-column>
58+
</el-table>
59+
</el-row>
60+
</el-dialog>
761
</template>
862
<script setup lang="ts">
963
import { SimpleFlowNode } from '../consts'
1064
import { useWatchNode, useTaskStatusClass } from '../node'
11-
65+
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
66+
import { DICT_TYPE } from '@/utils/dict'
1267
defineOptions({
1368
name: 'EndEventNode'
1469
})
@@ -20,6 +75,28 @@ const props = defineProps({
2075
})
2176
// 监控节点变化
2277
const currentNode = useWatchNode(props)
78+
// 是否只读
79+
const readonly = inject<Boolean>('readonly')
80+
const processInstance = inject<Ref<any>>('processInstance')
81+
// 审批信息的弹窗显示，用于只读模式
82+
const dialogVisible = ref(false) // 弹窗可见性
83+
const processInstanceInfos = ref<any[]>([]) // 流程的审批信息
2384
85+
const nodeClick = () => {
86+
if (readonly) {
87+
if(processInstance && processInstance.value){
88+
processInstanceInfos.value = [
89+
{
90+
assigneeUser: processInstance.value.startUser,
91+
createTime: processInstance.value.startTime,
92+
endTime: processInstance.value.endTime,
93+
status: processInstance.value.status,
94+
durationInMillis: processInstance.value.durationInMillis
95+
}
96+
]
97+
dialogVisible.value = true
98+
}
99+
}
100+
}
24101
</script>
25102
<style lang="scss" scoped></style>

‎src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
{{ currentNode.name }}
2323
</div>
2424
</div>
25-
<div class="node-content" @click="openNodeConfig">
25+
<div class="node-content" @click="nodeClick">
2626
<div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
2727
{{ currentNode.showText }}
2828
</div>
@@ -37,12 +37,78 @@
3737
</div>
3838
</div>
3939
<StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
40+
<!-- 审批记录 -->
41+
<el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px" append-to-body>
42+
<el-row>
43+
<el-table
44+
:data="selectTasks"
45+
size="small"
46+
border
47+
header-cell-class-name="table-header-gray"
48+
>
49+
<el-table-column
50+
label="序号"
51+
header-align="center"
52+
align="center"
53+
type="index"
54+
width="50"
55+
/>
56+
<el-table-column
57+
label="审批人"
58+
min-width="100"
59+
align="center"
60+
>
61+
<template #default="scope">
62+
{{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
63+
</template>
64+
</el-table-column>
65+
66+
<el-table-column label="部门" min-width="100" align="center">
67+
<template #default="scope">
68+
{{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
69+
</template>
70+
</el-table-column>
71+
<el-table-column
72+
:formatter="dateFormatter"
73+
align="center"
74+
label="开始时间"
75+
prop="createTime"
76+
min-width="140"
77+
/>
78+
<el-table-column
79+
:formatter="dateFormatter"
80+
align="center"
81+
label="结束时间"
82+
prop="endTime"
83+
min-width="140"
84+
/>
85+
<el-table-column align="center" label="审批状态" prop="status" min-width="90">
86+
<template #default="scope">
87+
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
88+
</template>
89+
</el-table-column>
90+
<el-table-column
91+
align="center"
92+
label="审批建议"
93+
prop="reason"
94+
min-width="120"
95+
/>
96+
<el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
97+
<template #default="scope">
98+
{{ formatPast2(scope.row.durationInMillis) }}
99+
</template>
100+
</el-table-column>
101+
</el-table>
102+
</el-row>
103+
</el-dialog>
40104
</template>
41105
<script setup lang="ts">
42106
import NodeHandler from '../NodeHandler.vue'
43107
import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
44108
import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
45109
import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
110+
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
111+
import { DICT_TYPE } from '@/utils/dict'
46112
defineOptions({
47113
name: 'StartEventNode'
48114
})
@@ -53,6 +119,7 @@ const props = defineProps({
53119
}
54120
})
55121
const readonly = inject<Boolean>('readonly') // 是否只读
122+
const tasks = inject<Ref<any[]>>('tasks')
56123
// 定义事件，更新父组件。
57124
const emits = defineEmits<{
58125
'update:modelValue': [node: SimpleFlowNode | undefined]
@@ -63,15 +130,27 @@ const currentNode = useWatchNode(props)
63130
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
64131
65132
const nodeSetting = ref()
66-
// 打开节点配置
67-
const openNodeConfig = () => {
133+
//
134+
const nodeClick = () => {
68135
if (readonly) {
69-
return
136+
// 只读模式，弹窗显示任务信息
137+
if(tasks && tasks.value){
138+
dialogTitle.value = currentNode.value.name
139+
selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
140+
dialogVisible.value = true
141+
}
142+
} else {
143+
// 编辑模式，打开节点配置、把当前节点传递给配置组件
144+
nodeSetting.value.showStartUserNodeConfig(currentNode.value)
145+
nodeSetting.value.openDrawer()
70146
}
71-
// 把当前节点传递给配置组件
72-
nodeSetting.value.showStartUserNodeConfig(currentNode.value)
73-
nodeSetting.value.openDrawer()
147+
74148
}
75149
150+
// 任务的弹窗显示，用于只读模式
151+
const dialogVisible = ref(false) // 弹窗可见性
152+
const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
153+
const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
154+
76155
</script>
77156
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)