yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 发起流程页面-流程时间线的数据获取接口联调与展示

pull/582/head
GoldenZqqq 2024-10-29 16:32:08 +08:00
parent c1109e90c4
commit a57840c804
5 changed files with 50 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/svgs/bpm/finish.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1730189225011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2651" id="mx_n_1730189225011" width="200" height="200"><path d="M793.889347 200.380242c27.648573 20.615681 42.196018 32.710677 63.781037 56.119312 25.313864 27.453234 43.242957 48.52047 64.502857 86.507991 44.537416 79.580127 53.527718 136.949077 53.517684 212.063821 0 64.933675-15.452562 130.459388-40.138263 187.311893-22.076044 50.841799-61.545336 104.359483-101.886297 138.933914-45.506755 39.001681-81.214423 60.462941-137.605337 81.826531-55.699867 21.102023-114.070267 28.641326-181.379458 27.791064-68.274516-0.862973-129.364283-11.040029-180.533878-31.80489-46.159002-18.731189-98.338744-46.827973-141.596418-87.541551-43.946046-41.361142-70.369064-75.958317-93.88139-127.198155-26.157437-57.004361-40.094111-129.065922-39.680686-191.781288 0-36.980719 4.033895-70.902234 12.252873-105.241856 8.532726-35.651474 20.069131-69.572989 38.13135-102.35257 18.856956-34.221214 36.754607-62.067803 58.869452-88.973149 23.248751-28.285434 39.2104-46.417894 64.295476-63.475987 18.297696-12.442861 36.879036-9.295353 47.199252-2.306612 4.403836 2.982273 8.919391 6.577992 12.933218 12.933217 9.572307 15.156208-0.334486 29.769212-6.69038 38.465836-7.148625 9.781026-23.130343 26.023643-38.738775 43.218205-38.192895 42.075603-55.133918 65.965228-74.986303 106.965794-30.772668 63.552249-37.495827 115.718611-38.131349 166.573791-0.668971 53.517684 9.995096 99.647251 27.427813 140.483919 33.916163 80.572211 94.807915 144.44289 175.270414 178.615938 41.108271 17.845472 113.812713 37.319888 181.960793 38.13135 56.193568 0.668971 125.919751-11.321666 166.574459-28.096784 45.935566-18.954626 97.223569-56.862539 127.10383-94.324918 23.013273-28.852721 52.179742-70.910931 64.413884-105.694749 14.863868-42.260239 24.806784-87.661297 24.559934-132.458943 0-54.414105-11.53373-108.417461-36.918505-156.856317-20.16747-38.483228-46.480777-74.607665-84.66899-108.048189-13.377414-11.714352-23.822728-20.067124-38.808348-31.619586-10.191774-7.857065-36.059546-25.027545-28.923632-47.326356 4.970455-15.53217 18.303717-25.294464 31.887843-27.205046 19.456354-2.736092 28.565733 2.427027 43.705885 12.041479l6.179955 4.322891zM510.755379 531.65738c-8.696624-0.668971-10.034566-0.446204-20.738102-6.689711-11.031333-6.434832-17.839451-21.183637-16.514219-35.175166V92.220334c0-18.178619 0.386665-22.815926 8.988295-31.685813 5.351768-5.519011 10.963097-11.381873 26.08987-11.539751 16.055305-0.167243 21.407073 3.846584 27.929542 9.700081 9.70677 8.711341 10.703537 17.56049 10.377078 33.525483v397.5715c-0.509756 15.273947 0.326458 22.967114-11.380535 33.502739-3.884046 3.495374-8.027653 7.693167-20.96087 8.362138l-3.791059 0.000669z m4.453341 0.573308" p-id="2652" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

41
src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
View File

@ -61,9 +61,14 @@
</form-create>
</el-col>
<el-col :span="7">
<!-- 审批记录时间线 -->
<!-- <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" /> -->
<el-col :span="6" :offset="1">
<!-- 流程时间线 -->
<ProcessInstanceTimeline
ref="timelineRef"
:approve-nodes="approveNodes"
:show-status-icon="false"
candidateField="candidateUserList"
/>
</el-col>
</el-row>
</el-scrollbar>
@ -82,6 +87,7 @@
<div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
<!-- 操作栏按钮 -->
<div
v-if="activeTab === 'form'"
class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
>
<el-button plain type="success" @click="submitForm">
@ -99,6 +105,7 @@
<script lang="ts" setup>
import { setConfAndFields2 } from '@/utils/formCreate'
import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
import type { ApiAttrs } from '@form-create/element-ui/types/config'
import { useTagsViewStore } from '@/store/modules/tagsView'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@ -126,11 +133,13 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
const userList = ref<any[]>([]) // 用户列表
const bpmnXML: any = ref(null) // BPMN 数据
/** 当前的Tab */
const activeTab = ref('form')
const emit = defineEmits(['cancel'])
/** 处理选择流程的按钮操作 **/
// 审批节点信息
const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
/** 设置表单信息、获取流程图数据 **/
const initProcessInfo = async (row, formVariables?) => {
// 重置指定审批人
startUserSelectTasks.value = []
@ -141,6 +150,11 @@ const initProcessInfo = async (row, formVariables?) => {
if (row.formType == 10) {
// 设置表单
setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
await nextTick()
fApi.value?.btn.show(false) // 隐藏提交按钮
// 获取流程审批信息
getApprovalDetail(row)
// 加载流程图
const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
if (processDefinitionDetail) {
@ -174,6 +188,23 @@ const initProcessInfo = async (row, formVariables?) => {
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
}
}
/** 获取审批详情 */
const getApprovalDetail = async (row) => {
try {
const param = {
processDefinitionId: row.id
}
const data = await ProcessInstanceApi.getApprovalDetail(param)
if (!data) {
message.error('查询不到审批详情信息！')
return
}
// 获取审批节点，显示 Timeline 的数据
approveNodes.value = data.approveNodes
} finally {
}
}
/** 提交按钮 */
const submitForm = async (formData) => {
if (!fApi.value || props.selectProcessDefinition) {

5
src/views/bpm/processInstance/create/index_new.vue
View File

@ -56,7 +56,6 @@ import * as DefinitionApi from '@/api/bpm/definition'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { CategoryApi } from '@/api/bpm/category'
import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
import { categoryList as cl, processDefinitionList as pl } from './mock'
defineOptions({ name: 'BpmProcessInstanceCreate' })
@ -74,8 +73,6 @@ const getList = async () => {
try {
// 流程分类
categoryList.value = await CategoryApi.getCategorySimpleList()
// 测试数据
categoryList.value = cl
if (categoryList.value.length > 0) {
categoryActive.value = categoryList.value[0]
}
@ -83,8 +80,6 @@ const getList = async () => {
processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
suspensionState: 1
})
// 测试数据
processDefinitionList.value = pl as any
// 如果 processInstanceId 非空，说明是重新发起
if (processInstanceId?.length > 0) {

117
src/views/bpm/processInstance/create/mock.js
View File

@ -1,117 +0,0 @@
// 模拟流程分类数据
export const categoryList = [
{ name: '审批流程', code: 'approval' },
{ name: '管理流程', code: 'management' }
]
// 模拟流程定义数据
export const processDefinitionList = [
{
id: '1',
key: 'process_1',
name: '请假申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=1',
formType: 10,
formConf:
'{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
formFields: [
'{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
'{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
],
startUserSelectTasks: [
{ id: 'task1', name: '部门经理' },
{ id: 'task2', name: '人力资源' }
]
},
{
id: '2',
key: 'process_2',
name: '报销申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=2',
formType: 10,
formConf:
'{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
formFields: [
'{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
'{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
],
startUserSelectTasks: [{ id: 'task3', name: '财务' }]
},
{
id: '3',
key: 'process_1',
name: '请假申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=1',
formType: 10,
formConf: {}, // 根据需要定义表单配置
formFields: [], // 根据需要定义表单字段
startUserSelectTasks: [
{ id: 'task1', name: '部门经理' },
{ id: 'task2', name: '人力资源' }
]
},
{
id: '4',
key: 'process_2',
name: '报销申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=2',
formType: 10,
formConf: {},
formFields: [],
startUserSelectTasks: [{ id: 'task3', name: '财务' }]
},
{
id: '5',
key: 'process_1',
name: '请假申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=1',
formType: 10,
formConf: {}, // 根据需要定义表单配置
formFields: [], // 根据需要定义表单字段
startUserSelectTasks: [
{ id: 'task1', name: '部门经理' },
{ id: 'task2', name: '人力资源' }
]
},
{
id: '6',
key: 'process_2',
name: '报销申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=2',
formType: 10,
formConf: {},
formFields: [],
startUserSelectTasks: [{ id: 'task3', name: '财务' }]
},
{
id: '7',
key: 'process_1',
name: '请假申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=1',
formType: 10,
formConf: {}, // 根据需要定义表单配置
formFields: [], // 根据需要定义表单字段
startUserSelectTasks: [
{ id: 'task1', name: '部门经理' },
{ id: 'task2', name: '人力资源' }
]
},
{
id: '8',
key: 'process_2',
name: '报销申请',
category: 'approval',
icon: 'https://picsum.photos/200?r=2',
formType: 10,
formConf: {},
formFields: [],
startUserSelectTasks: [{ id: 'task3', name: '财务' }]
}
]

16
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
View File

@ -15,6 +15,7 @@
>
<img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
<div
v-if="showStatusIcon"
class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
>
<el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
@ -131,11 +132,18 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
import copySvg from '@/assets/svgs/bpm/copy.svg'
import conditionSvg from '@/assets/svgs/bpm/condition.svg'
import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
import finishSvg from '@/assets/svgs/bpm/finish.svg'
defineOptions({ name: 'BpmProcessInstanceTimeline' })
defineProps<{
approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
}>()
withDefaults(
defineProps<{
approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
showStatusIcon?: boolean // 是否显示头像右下角状态图标
}>(),
{
showStatusIcon: true // 默认值为 true
}
)
// 审批节点
const statusIconMap2 = {
@ -180,6 +188,8 @@ const statusIconMap = {
}
const nodeTypeSvgMap = {
// 结束节点
[NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
// 发起人节点
[NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
// 审批人节点