|
@@ -49,7 +49,7 @@
|
|
pre-icon="ep:edit"
|
|
pre-icon="ep:edit"
|
|
type="primary"
|
|
type="primary"
|
|
title="转办"
|
|
title="转办"
|
|
- @click="handleUpdateAssignee(item)"
|
|
|
|
|
|
+ @click="openTaskUpdateAssigneeForm(item.id)"
|
|
/>
|
|
/>
|
|
<XButton
|
|
<XButton
|
|
pre-icon="ep:position"
|
|
pre-icon="ep:position"
|
|
@@ -78,7 +78,7 @@
|
|
</el-col>
|
|
</el-col>
|
|
<!-- 情况二:流程表单 -->
|
|
<!-- 情况二:流程表单 -->
|
|
<div v-if="processInstance?.processDefinition?.formType === 20">
|
|
<div v-if="processInstance?.processDefinition?.formType === 20">
|
|
- <router-link
|
|
|
|
|
|
+ <!-- <router-link
|
|
:to="
|
|
:to="
|
|
processInstance.processDefinition.formCustomViewPath +
|
|
processInstance.processDefinition.formCustomViewPath +
|
|
'?id=' +
|
|
'?id=' +
|
|
@@ -86,24 +86,21 @@
|
|
"
|
|
"
|
|
>
|
|
>
|
|
<XButton type="primary" preIcon="ep:view" title="点击查看" />
|
|
<XButton type="primary" preIcon="ep:view" title="点击查看" />
|
|
- </router-link>
|
|
|
|
|
|
+ </router-link> -->
|
|
|
|
+ <autoComponent :id="processInstance.businessKey" />
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-card>
|
|
|
|
|
|
<!-- 审批记录 -->
|
|
<!-- 审批记录 -->
|
|
- <el-card class="box-card" v-loading="tasksLoad">
|
|
|
|
|
|
+ <!-- <el-card class="box-card" v-loading="tasksLoad">
|
|
<template #header>
|
|
<template #header>
|
|
<span class="el-icon-picture-outline">审批记录</span>
|
|
<span class="el-icon-picture-outline">审批记录</span>
|
|
</template>
|
|
</template>
|
|
<el-col :span="16" :offset="4">
|
|
<el-col :span="16" :offset="4">
|
|
<div class="block">
|
|
<div class="block">
|
|
<el-timeline>
|
|
<el-timeline>
|
|
- <el-timeline-item
|
|
|
|
- v-for="(item, index) in tasks"
|
|
|
|
- :key="index"
|
|
|
|
- :icon="getTimelineItemIcon(item)"
|
|
|
|
- :type="getTimelineItemType(item)"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
|
|
|
|
+ :type="getTimelineItemType(item)">
|
|
<p style="font-weight: 700">任务:{{ item.name }}</p>
|
|
<p style="font-weight: 700">任务:{{ item.name }}</p>
|
|
<el-card :body-style="{ padding: '10px' }">
|
|
<el-card :body-style="{ padding: '10px' }">
|
|
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
|
|
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
|
|
@@ -134,79 +131,67 @@
|
|
</el-timeline>
|
|
</el-timeline>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
- </el-card>
|
|
|
|
|
|
+ </el-card> -->
|
|
|
|
+ <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
|
|
|
|
|
|
<!-- 高亮流程图 -->
|
|
<!-- 高亮流程图 -->
|
|
- <el-card class="box-card" v-loading="processInstanceLoading">
|
|
|
|
- <template #header>
|
|
|
|
|
|
+ <!-- <el-card class="box-card" v-loading="processInstanceLoading"> -->
|
|
|
|
+ <!-- <template #header>
|
|
<span class="el-icon-picture-outline">流程图</span>
|
|
<span class="el-icon-picture-outline">流程图</span>
|
|
</template>
|
|
</template>
|
|
- <my-process-viewer
|
|
|
|
- key="designer"
|
|
|
|
- v-model="bpmnXML"
|
|
|
|
- :value="bpmnXML"
|
|
|
|
- v-bind="bpmnControlForm"
|
|
|
|
- :prefix="bpmnControlForm.prefix"
|
|
|
|
- :activityData="activityList"
|
|
|
|
- :processInstanceData="processInstance"
|
|
|
|
- :taskData="tasks"
|
|
|
|
- />
|
|
|
|
- </el-card>
|
|
|
|
|
|
+ <my-process-viewer key="designer" v-model="bpmnXML" :value="bpmnXML" v-bind="bpmnControlForm"
|
|
|
|
+ :prefix="bpmnControlForm.prefix" :activityData="activityList" :processInstanceData="processInstance"
|
|
|
|
+ :taskData="tasks" /> -->
|
|
|
|
+ <ProcessInstanceBpmnViewer
|
|
|
|
+ :id="`${id}`"
|
|
|
|
+ :bpmn-xml="bpmnXML"
|
|
|
|
+ :loading="processInstanceLoading"
|
|
|
|
+ :process-instance="processInstance"
|
|
|
|
+ :tasks="tasks"
|
|
|
|
+ />
|
|
|
|
+ <!-- </el-card> -->
|
|
|
|
|
|
<!-- 对话框(转派审批人) -->
|
|
<!-- 对话框(转派审批人) -->
|
|
- <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
|
|
|
|
- <el-form
|
|
|
|
- ref="updateAssigneeFormRef"
|
|
|
|
- :model="updateAssigneeForm"
|
|
|
|
- :rules="updateAssigneeRules"
|
|
|
|
- label-width="110px"
|
|
|
|
- >
|
|
|
|
|
|
+ <!-- <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
|
|
|
|
+ <el-form ref="updateAssigneeFormRef" :model="updateAssigneeForm" :rules="updateAssigneeRules" label-width="110px">
|
|
<el-form-item label="新审批人" prop="assigneeUserId">
|
|
<el-form-item label="新审批人" prop="assigneeUserId">
|
|
<el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
|
|
<el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
|
|
- <el-option
|
|
|
|
- v-for="item in userOptions"
|
|
|
|
- :key="parseInt(item.id)"
|
|
|
|
- :label="item.nickname"
|
|
|
|
- :value="parseInt(item.id)"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
|
|
|
|
+ :value="parseInt(item.id)" />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <!-- 操作按钮 -->
|
|
|
|
|
|
+ 操作按钮
|
|
<template #footer>
|
|
<template #footer>
|
|
- <!-- 按钮:保存 -->
|
|
|
|
- <XButton
|
|
|
|
- type="primary"
|
|
|
|
- :title="t('action.save')"
|
|
|
|
- :loading="updateAssigneeLoading"
|
|
|
|
- @click="submitUpdateAssigneeForm"
|
|
|
|
- />
|
|
|
|
- <!-- 按钮:关闭 -->
|
|
|
|
- <XButton
|
|
|
|
- :loading="updateAssigneeLoading"
|
|
|
|
- :title="t('dialog.close')"
|
|
|
|
- @click="updateAssigneeLoading = false"
|
|
|
|
- />
|
|
|
|
|
|
+ 按钮:保存
|
|
|
|
+ <XButton type="primary" :title="t('action.save')" :loading="updateAssigneeLoading"
|
|
|
|
+ @click="submitUpdateAssigneeForm" />
|
|
|
|
+ 按钮:关闭
|
|
|
|
+ <XButton :loading="updateAssigneeLoading" :title="t('dialog.close')" @click="updateAssigneeLoading = false" />
|
|
</template>
|
|
</template>
|
|
- </XModal>
|
|
|
|
|
|
+ </XModal> -->
|
|
|
|
+ <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
</template>
|
|
</template>
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import dayjs from 'dayjs'
|
|
|
|
|
|
+// import dayjs from 'dayjs'
|
|
import * as UserApi from '@/api/system/user'
|
|
import * as UserApi from '@/api/system/user'
|
|
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
|
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
|
import * as DefinitionApi from '@/api/bpm/definition'
|
|
import * as DefinitionApi from '@/api/bpm/definition'
|
|
import * as TaskApi from '@/api/bpm/task'
|
|
import * as TaskApi from '@/api/bpm/task'
|
|
import * as ActivityApi from '@/api/bpm/activity'
|
|
import * as ActivityApi from '@/api/bpm/activity'
|
|
-import { formatPast2 } from '@/utils/formatTime'
|
|
|
|
|
|
+// import { formatPast2 } from '@/utils/formatTime'
|
|
import { setConfAndFields2 } from '@/utils/formCreate'
|
|
import { setConfAndFields2 } from '@/utils/formCreate'
|
|
// import { OptionAttrs } from '@form-create/element-ui/types/config'
|
|
// import { OptionAttrs } from '@form-create/element-ui/types/config'
|
|
import type { ApiAttrs } from '@form-create/element-ui/types/config'
|
|
import type { ApiAttrs } from '@form-create/element-ui/types/config'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
-
|
|
|
|
|
|
+import { registerComponent } from '@/utils/routerHelper'
|
|
|
|
+import ProcessInstanceBpmnViewer from './detail/ProcessInstanceBpmnViewer.vue'
|
|
|
|
+import ProcessInstanceTaskList from './detail/ProcessInstanceTaskList.vue'
|
|
|
|
+import TaskUpdateAssigneeForm from './detail/TaskUpdateAssigneeForm.vue'
|
|
const { query } = useRoute() // 查询参数
|
|
const { query } = useRoute() // 查询参数
|
|
const message = useMessage() // 消息弹窗
|
|
const message = useMessage() // 消息弹窗
|
|
-const { t } = useI18n() // 国际化
|
|
|
|
|
|
+// const { t } = useI18n() // 国际化
|
|
const { proxy } = getCurrentInstance() as any
|
|
const { proxy } = getCurrentInstance() as any
|
|
|
|
|
|
// ========== 审批信息 ==========
|
|
// ========== 审批信息 ==========
|
|
@@ -262,88 +247,85 @@ const detailForm = ref({
|
|
const tasksLoad = ref(true)
|
|
const tasksLoad = ref(true)
|
|
const tasks = ref<any[]>([])
|
|
const tasks = ref<any[]>([])
|
|
|
|
|
|
-const getTimelineItemIcon = (item) => {
|
|
|
|
- if (item.result === 1) {
|
|
|
|
- return 'el-icon-time'
|
|
|
|
- }
|
|
|
|
- if (item.result === 2) {
|
|
|
|
- return 'el-icon-check'
|
|
|
|
- }
|
|
|
|
- if (item.result === 3) {
|
|
|
|
- return 'el-icon-close'
|
|
|
|
- }
|
|
|
|
- if (item.result === 4) {
|
|
|
|
- return 'el-icon-remove-outline'
|
|
|
|
- }
|
|
|
|
- return ''
|
|
|
|
-}
|
|
|
|
-const getTimelineItemType = (item) => {
|
|
|
|
- if (item.result === 1) {
|
|
|
|
- return 'primary'
|
|
|
|
- }
|
|
|
|
- if (item.result === 2) {
|
|
|
|
- return 'success'
|
|
|
|
- }
|
|
|
|
- if (item.result === 3) {
|
|
|
|
- return 'danger'
|
|
|
|
- }
|
|
|
|
- if (item.result === 4) {
|
|
|
|
- return 'info'
|
|
|
|
- }
|
|
|
|
- return ''
|
|
|
|
-}
|
|
|
|
|
|
+// const getTimelineItemIcon = (item) => {
|
|
|
|
+// if (item.result === 1) {
|
|
|
|
+// return 'el-icon-time'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 2) {
|
|
|
|
+// return 'el-icon-check'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 3) {
|
|
|
|
+// return 'el-icon-close'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 4) {
|
|
|
|
+// return 'el-icon-remove-outline'
|
|
|
|
+// }
|
|
|
|
+// return ''
|
|
|
|
+// }
|
|
|
|
+// const getTimelineItemType = (item) => {
|
|
|
|
+// if (item.result === 1) {
|
|
|
|
+// return 'primary'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 2) {
|
|
|
|
+// return 'success'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 3) {
|
|
|
|
+// return 'danger'
|
|
|
|
+// }
|
|
|
|
+// if (item.result === 4) {
|
|
|
|
+// return 'info'
|
|
|
|
+// }
|
|
|
|
+// return ''
|
|
|
|
+// }
|
|
|
|
|
|
// ========== 审批记录 ==========
|
|
// ========== 审批记录 ==========
|
|
-const updateAssigneeVisible = ref(false)
|
|
|
|
-const updateAssigneeLoading = ref(false)
|
|
|
|
-const updateAssigneeForm = ref({
|
|
|
|
- id: undefined,
|
|
|
|
- assigneeUserId: undefined
|
|
|
|
-})
|
|
|
|
-const updateAssigneeRules = ref({
|
|
|
|
- assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
|
|
|
|
-})
|
|
|
|
-const updateAssigneeFormRef = ref()
|
|
|
|
|
|
+// const updateAssigneeVisible = ref(false)
|
|
|
|
+// const updateAssigneeLoading = ref(false)
|
|
|
|
+// const updateAssigneeForm = ref({
|
|
|
|
+// id: undefined,
|
|
|
|
+// assigneeUserId: undefined
|
|
|
|
+// })
|
|
|
|
+// const updateAssigneeRules = ref({
|
|
|
|
+// assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
|
|
|
|
+// })
|
|
|
|
+// const updateAssigneeFormRef = ref()
|
|
const userOptions = ref<any[]>([])
|
|
const userOptions = ref<any[]>([])
|
|
|
|
|
|
// 处理转派审批人
|
|
// 处理转派审批人
|
|
-const handleUpdateAssignee = (task) => {
|
|
|
|
- // 设置表单
|
|
|
|
- resetUpdateAssigneeForm()
|
|
|
|
- updateAssigneeForm.value.id = task.id
|
|
|
|
- // 设置为打开
|
|
|
|
- updateAssigneeVisible.value = true
|
|
|
|
|
|
+const taskUpdateAssigneeFormRef = ref()
|
|
|
|
+const openTaskUpdateAssigneeForm = (id: string) => {
|
|
|
|
+ taskUpdateAssigneeFormRef.value.open(id)
|
|
}
|
|
}
|
|
|
|
|
|
// 提交转派审批人
|
|
// 提交转派审批人
|
|
-const submitUpdateAssigneeForm = async () => {
|
|
|
|
- // 1. 校验表单
|
|
|
|
- const elForm = unref(updateAssigneeFormRef)
|
|
|
|
- if (!elForm) return
|
|
|
|
- const valid = await elForm.validate()
|
|
|
|
- if (!valid) return
|
|
|
|
|
|
+// const submitUpdateAssigneeForm = async () => {
|
|
|
|
+// // 1. 校验表单
|
|
|
|
+// const elForm = unref(updateAssigneeFormRef)
|
|
|
|
+// if (!elForm) return
|
|
|
|
+// const valid = await elForm.validate()
|
|
|
|
+// if (!valid) return
|
|
|
|
|
|
- // 2.1 提交审批
|
|
|
|
- updateAssigneeLoading.value = true
|
|
|
|
- try {
|
|
|
|
- await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
|
|
|
|
- // 2.2 设置为隐藏
|
|
|
|
- updateAssigneeVisible.value = false
|
|
|
|
- // 加载最新数据
|
|
|
|
- getDetail()
|
|
|
|
- } finally {
|
|
|
|
- updateAssigneeLoading.value = false
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+// // 2.1 提交审批
|
|
|
|
+// updateAssigneeLoading.value = true
|
|
|
|
+// try {
|
|
|
|
+// await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
|
|
|
|
+// // 2.2 设置为隐藏
|
|
|
|
+// updateAssigneeVisible.value = false
|
|
|
|
+// // 加载最新数据
|
|
|
|
+// getDetail()
|
|
|
|
+// } finally {
|
|
|
|
+// updateAssigneeLoading.value = false
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
|
|
// 重置转派审批人表单
|
|
// 重置转派审批人表单
|
|
-const resetUpdateAssigneeForm = () => {
|
|
|
|
- updateAssigneeForm.value = {
|
|
|
|
- id: undefined,
|
|
|
|
- assigneeUserId: undefined
|
|
|
|
- }
|
|
|
|
- updateAssigneeFormRef.value?.resetFields()
|
|
|
|
-}
|
|
|
|
|
|
+// const resetUpdateAssigneeForm = () => {
|
|
|
|
+// updateAssigneeForm.value = {
|
|
|
|
+// id: undefined,
|
|
|
|
+// assigneeUserId: undefined
|
|
|
|
+// }
|
|
|
|
+// updateAssigneeFormRef.value?.resetFields()
|
|
|
|
+// }
|
|
|
|
|
|
/** 处理审批退回的操作 */
|
|
/** 处理审批退回的操作 */
|
|
const handleDelegate = async (task) => {
|
|
const handleDelegate = async (task) => {
|
|
@@ -368,9 +350,9 @@ const handleBack = async (task) => {
|
|
|
|
|
|
// ========== 高亮流程图 ==========
|
|
// ========== 高亮流程图 ==========
|
|
const bpmnXML = ref(null)
|
|
const bpmnXML = ref(null)
|
|
-const bpmnControlForm = ref({
|
|
|
|
- prefix: 'flowable'
|
|
|
|
-})
|
|
|
|
|
|
+// const bpmnControlForm = ref({
|
|
|
|
+// prefix: 'flowable'
|
|
|
|
+// })
|
|
const activityList = ref([])
|
|
const activityList = ref([])
|
|
|
|
|
|
// ========== 初始化 ==========
|
|
// ========== 初始化 ==========
|
|
@@ -382,7 +364,7 @@ onMounted(() => {
|
|
userOptions.value.push(...data)
|
|
userOptions.value.push(...data)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
-
|
|
|
|
|
|
+const autoComponent = ref(null) // 异步组件
|
|
const getDetail = () => {
|
|
const getDetail = () => {
|
|
// 1. 获得流程实例相关
|
|
// 1. 获得流程实例相关
|
|
processInstanceLoading.value = true
|
|
processInstanceLoading.value = true
|
|
@@ -393,6 +375,7 @@ const getDetail = () => {
|
|
return
|
|
return
|
|
}
|
|
}
|
|
processInstance.value = data
|
|
processInstance.value = data
|
|
|
|
+ autoComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
|
|
|
|
|
|
// 设置表单信息
|
|
// 设置表单信息
|
|
const processDefinition = data.processDefinition
|
|
const processDefinition = data.processDefinition
|
|
@@ -478,7 +461,7 @@ const getDetail = () => {
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
.my-process-designer {
|
|
.my-process-designer {
|
|
height: calc(100vh - 200px);
|
|
height: calc(100vh - 200px);
|
|
}
|
|
}
|