lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV 2024-03-20 21:33:48 +08:00
parent d0f73344bf
commit d16194b794
12 changed files with 93 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/bpm/form/index.ts
View File

@ -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'
})
}

2
src/api/bpm/leave/index.ts
View File

@ -2,7 +2,7 @@ import request from '@/config/axios'
export type LeaveVO = {
id: number
result: number
status: number
type: number
reason: string
processInstanceId: string

58
src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
View File

@ -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'
} else if (result === 7 || result === 8 || result === 9) {
// 待后加签任务完成/待前加签任务完成/待前置任务完成
return 'highlight-return'
return 'highlight-todo'
} else if (status === 7) {
// 审批通过中
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(element.value, 'element.value')
// console.log(activityLists.value, 'activityLists.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) {

2
src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@ -461,7 +461,7 @@ const updateElementExtensions = () => {
const formList = ref([]) // 流程表单的下拉框的数据
onMounted(async () => {
formList.value = await FormApi.getSimpleFormList()
formList.value = await FormApi.getFormSimpleList()
})
watch(

2
src/utils/dict.ts
View File

@ -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 模块 ==========

2
src/views/bpm/model/ModelForm.vue
View File

@ -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()
}

1
src/views/bpm/model/ModelImportForm.vue
View File

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

15
src/views/bpm/oa/leave/index.vue
View File

@ -36,10 +36,15 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="结果" prop="result">
<el-select v-model="queryParams.result" class="!w-240px" clearable placeholder="请选择结果">
<el-form-item label="审批结果" prop="result">
<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: []
})

57
src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
View File

@ -7,14 +7,25 @@
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(item, index) in tasks"
:key="index"
:icon="getTimelineItemIcon(item)"
:type="getTimelineItemType(item)"
v-if="processInstance.endTime"
:type="getProcessInstanceTimelineItemType(processInstance)"
>
<p style="font-weight: 700">
任务：{{ item.name }}
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="item.status" />
结束流程：在 {{ 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"
:type="getTaskTimelineItemType(item)"
>
<p style="font-weight: 700">
审批任务：{{ item.name }}
<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 getTimelineItemIcon = (item) => {
if (item.status === 1) {
return 'el-icon-time'
}
/** 获得流程实例对应的颜色 */
const getProcessInstanceTimelineItemType = (item: any) => {
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'
}
if (item.status === 5) {
return 'el-icon-back'
return 'warning'
}
return ''
}
/** 获得任务对应的颜色 */
const getTimelineItemType = (item: any) => {
if (item.status === 1) {
const getTaskTimelineItemType = (item: any) => {
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 ''
}

2
src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
View File

@ -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

7
src/views/bpm/processInstance/detail/index.vue
View File

@ -105,7 +105,12 @@
</el-card>
<!-- 审批记录 -->
<ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" @refresh="getTaskList" />
<ProcessInstanceTaskList
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
@refresh="getTaskList"
/>
<!-- 高亮流程图 -->
<ProcessInstanceBpmnViewer

2
src/views/bpm/task/done/index.vue
View File

@ -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" />