Skip to content

phsl / admin

Go to a project
Commit 98e9ba49 by YunaiV
Options

【功能修改】工作流：流程审批详情的“流程记录”，从 timeline 改成 list table

parent 5121d569
Showing with 60 additions and 154 deletions
src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
<template> <template>
<el-card v-loading="loading" class="box-card"> <el-table :data="tasks" border header-cell-class-name="table-header-gray">
<el-col> <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
<div class="block"> <el-table-column label="审批人" min-width="100" align="center">
<el-timeline> <template #default="scope">
<el-timeline-item {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
v-if="processInstance.endTime" </template>
:type="getProcessInstanceTimelineItemType(processInstance)" </el-table-column>
> <el-table-column
<p style="font-weight: 700"> :formatter="dateFormatter"
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束 align="center"
<dict-tag label="开始时间"
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" prop="createTime"
:value="processInstance.status" min-width="140"
/> />
</p> <el-table-column
</el-timeline-item> :formatter="dateFormatter"
<el-timeline-item align="center"
v-for="(item, index) in tasks" label="结束时间"
:key="index" prop="endTime"
:type="getTaskTimelineItemType(item)" min-width="140"
> />
<p style="font-weight: 700"> <el-table-column align="center" label="审批状态" prop="status" min-width="90">
审批任务：{{ item.name }} <template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.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="200">
<template #default="scope">
{{ scope.row.reason }}
<el-button <el-button
class="ml-10px" class="ml-10px"
size="small" size="small"
v-if="item.formId > 0" v-if="scope.row.formId > 0"
@click="handleFormDetail(item)" @click="handleFormDetail(scope.row)"
> >
<Icon icon="ep:document" /> 查看表单 <Icon icon="ep:document" /> 查看表单
</el-button> </el-button>
</p> </template>
<el-card :body-style="{ padding: '10px' }"> </el-table-column>
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal"> <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
审批人：{{ item.assigneeUser.nickname }} <template #default="scope">
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag> {{ formatPast2(scope.row.durationInMillis) }}
</label> </template>
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label> </el-table-column>
<label style="font-weight: normal; color: #8a909c"> </el-table>
{{ formatDate(item?.createTime) }}
</label>
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
审批时间：
</label>
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
{{ formatDate(item?.endTime) }}
</label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
耗时：
</label>
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
{{ formatPast2(item?.durationInMillis) }}
</label>
<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>
</el-card>
<!-- 弹窗：表单 --> <!-- 弹窗：表单 -->
<Dialog title="表单详情" v-model="taskFormVisible" width="600"> <Dialog title="表单详情" v-model="taskFormVisible" width="600">
...@@ -78,53 +56,20 @@ ...@@ -78,53 +56,20 @@
</Dialog> </Dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { formatDate, formatPast2 } from '@/utils/formatTime' import { dateFormatter, formatPast2 } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import * as TaskApi from '@/api/bpm/task'
defineOptions({ name: 'BpmProcessInstanceTaskList' }) defineOptions({ name: 'BpmProcessInstanceTaskList' })
defineProps({ const props = defineProps({
loading: propTypes.bool, // 是否加载中 loading: propTypes.bool.def(false), // 是否加载中
processInstance: propTypes.object, // 流程实例 id: propTypes.string // 流程实例的编号
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
}) })
const tasks = ref([]) // 流程任务的数组
/** 获得流程实例对应的颜色 */
const getProcessInstanceTimelineItemType = (item: any) => {
if (item.status === 2) {
return 'success'
}
if (item.status === 3) {
return 'danger'
}
if (item.status === 4) {
return 'warning'
}
return ''
}
/** 获得任务对应的颜色 */
const getTaskTimelineItemType = (item: any) => {
if ([0, 1, 6, 7].includes(item.status)) {
return 'primary'
}
if (item.status === 2) {
return 'success'
}
if (item.status === 3) {
return 'danger'
}
if (item.status === 4) {
return 'info'
}
if (item.status === 5) {
return 'warning'
}
return ''
}
/** 查看表单 */ /** 查看表单 */
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
...@@ -134,7 +79,7 @@ const taskForm = ref({ ...@@ -134,7 +79,7 @@ const taskForm = ref({
value: {} value: {}
}) // 流程任务的表单详情 }) // 流程任务的表单详情
const taskFormVisible = ref(false) const taskFormVisible = ref(false)
const handleFormDetail = async (row) => { const handleFormDetail = async (row: any) => {
// 设置表单 // 设置表单
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables) setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
// 弹窗打开 // 弹窗打开
...@@ -146,9 +91,13 @@ const handleFormDetail = async (row) => { ...@@ -146,9 +91,13 @@ const handleFormDetail = async (row) => {
fApi.value?.fapi?.disabled(true) fApi.value?.fapi?.disabled(true)
} }
/** 刷新数据 */ /** 只有 loading 完成时，才去加载流程列表 */
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调 watch(
const refresh = () => { () => props.loading,
emit('refresh') async (value) => {
} if (value) {
tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
}
}
)
</script> </script>
src/views/bpm/processInstance/detail/index.vue
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<!-- 审批记录时间线 --> <!-- 审批记录时间线 -->
<ProcessInstanceTimeline ref="timelineRef" :activity-nodes="activityNodes" /> <ProcessInstanceTimeline :activity-nodes="activityNodes" />
</el-col> </el-col>
</el-row> </el-row>
</el-scrollbar> </el-scrollbar>
...@@ -96,12 +96,7 @@ ...@@ -96,12 +96,7 @@
<el-tab-pane label="流转记录" name="record"> <el-tab-pane label="流转记录" name="record">
<div class="form-scroll-area"> <div class="form-scroll-area">
<el-scrollbar> <el-scrollbar>
<ProcessInstanceTaskList <ProcessInstanceTaskList :loading="processInstanceLoading" :id="id" />
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
:show-header="false"
/>
</el-scrollbar> </el-scrollbar>
</div> </div>
</el-tab-pane> </el-tab-pane>
...@@ -135,14 +130,14 @@ import { BpmModelType } from '@/utils/constants' ...@@ -135,14 +130,14 @@ import { BpmModelType } from '@/utils/constants'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as TaskApi from '@/api/bpm/task' import * as UserApi from '@/api/system/user'
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue' import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue' import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue' import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue' import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue' import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
import * as UserApi from '@/api/system/user'
import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts' import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
// TODO 代码优化，换个明确的 icon 名字
import audit1 from '@/assets/svgs/bpm/audit1.svg' import audit1 from '@/assets/svgs/bpm/audit1.svg'
import audit2 from '@/assets/svgs/bpm/audit2.svg' import audit2 from '@/assets/svgs/bpm/audit2.svg'
import audit3 from '@/assets/svgs/bpm/audit3.svg' import audit3 from '@/assets/svgs/bpm/audit3.svg'
...@@ -158,11 +153,8 @@ const message = useMessage() // 消息弹窗 ...@@ -158,11 +153,8 @@ const message = useMessage() // 消息弹窗
const processInstanceLoading = ref(false) // 流程实例的加载中 const processInstanceLoading = ref(false) // 流程实例的加载中
const processInstance = ref<any>({}) // 流程实例 const processInstance = ref<any>({}) // 流程实例
const processDefinition = ref<any>({}) // 流程定义 const processDefinition = ref<any>({}) // 流程定义
const timelineRef = ref()
// 操作按钮组件 ref const operationButtonRef = ref() // 操作按钮组件 ref
const operationButtonRef = ref()
const tasksLoad = ref(true) // 任务的加载中
const tasks = ref<any[]>([]) // 任务列表
const auditIcons = { const auditIcons = {
1: audit1, 1: audit1,
2: audit2, 2: audit2,
...@@ -180,10 +172,7 @@ const detailForm = ref({ ...@@ -180,10 +172,7 @@ const detailForm = ref({
/** 获得详情 */ /** 获得详情 */
const getDetail = () => { const getDetail = () => {
// 1. 获取审批详情
getApprovalDetail() getApprovalDetail()
// 2. 获得流程任务列表
getTaskList()
} }
/** 加载流程实例 */ /** 加载流程实例 */
...@@ -269,38 +258,6 @@ const setFieldPermission = (field: string, permission: string) => { ...@@ -269,38 +258,6 @@ const setFieldPermission = (field: string, permission: string) => {
} }
} }
/** 加载任务列表 */
const getTaskList = async () => {
try {
// 获得未取消的任务
tasksLoad.value = true
const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
tasks.value = []
// 1.1 移除已取消的审批
data.forEach((task: any) => {
if (task.status !== 4) {
tasks.value.push(task)
}
})
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
tasks.value.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return b.endTime - a.endTime
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return b.createTime - a.createTime
}
})
} finally {
tasksLoad.value = false
}
}
/** /**
* 操作成功后刷新 * 操作成功后刷新
*/ */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment