zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bpm：完成流程详情的整体界面

pull/2/head
YunaiV 2023-01-24 19:39:44 +08:00
parent b6d90b2244
commit 2253ba069f
8 changed files with 74 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
yudao-ui-admin-vue3/src/api/bpm/activity/index.ts Normal file
View File

@ -0,0 +1,8 @@
import request from '@/config/axios'
export const getActivityList = async (params) => {
return await request.get({
url: '/bpm/activity/list',
params
})
}

1
yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
View File

@ -12,6 +12,7 @@ export const getProcessDefinitionPageApi = async (params) => {
params
})
}
export const getProcessDefinitionListApi = async (params) => {
return await request.get({
url: '/bpm/process-definition/list',

1
yudao-ui-admin-vue3/src/types/auto-imports.d.ts vendored
View File

@ -3,7 +3,6 @@ export {}
declare global {
const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
const EffectScope: typeof import('vue')['EffectScope']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']

4
yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
View File

@ -37,7 +37,7 @@
<!-- 表单详情的弹窗 -->
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
<ViewForm
<form-create
:rule="formDetailPreview.rule"
:option="formDetailPreview.option"
v-if="formDetailVisible"
@ -58,8 +58,6 @@ const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const { query } = useRoute() // 查询参数
import viewForm from '@form-create/element-ui'
const ViewForm = viewForm.$form()
import { setConfAndFields2 } from '@/utils/formCreate'
// ========== 列表相关 ==========

4
yudao-ui-admin-vue3/src/views/bpm/form/index.vue
View File

@ -39,7 +39,7 @@
</XTable>
<!-- 表单详情的弹窗 -->
<XModal v-model="detailOpen" width="800" title="表单详情">
<ViewForm :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
<form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
</XModal>
</div>
</ContentWrap>
@ -55,8 +55,6 @@ const { t } = useI18n() // 国际化
const router = useRouter() // 路由
// 表单详情相关的变量和 import
import viewForm from '@form-create/element-ui'
const ViewForm = viewForm.$form()
import { setConfAndFields2 } from '@/utils/formCreate'
// 列表相关的变量

4
yudao-ui-admin-vue3/src/views/bpm/model/index.vue
View File

@ -292,7 +292,7 @@
<!-- 表单详情的弹窗 -->
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
<ViewForm
<form-create
:rule="formDetailPreview.rule"
:option="formDetailPreview.option"
v-if="formDetailVisible"
@ -317,8 +317,6 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
import viewForm from '@form-create/element-ui'
const ViewForm = viewForm.$form()
import { setConfAndFields2 } from '@/utils/formCreate'
// ========== 列表相关 ==========

64
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
View File

@ -51,6 +51,13 @@
title="转办"
@click="handleUpdateAssignee(item)"
/>
<XButton
pre-icon="ep:position"
type="primary"
title="委派"
@click="handleDelegate(item)"
/>
<XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
</div>
</el-col>
</el-card>
@ -129,6 +136,21 @@
</el-col>
</el-card>
<!-- 高亮流程图 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<template #header>
<span class="el-icon-picture-outline">流程图</span>
</template>
<my-process-viewer
key="designer"
v-model="bpmnXML"
v-bind="bpmnControlForm"
:activityData="activityList"
:processInstanceData="processInstance"
:taskData="tasks"
/>
</el-card>
<!-- 对话框(转派审批人) -->
<XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
<el-form
@ -172,7 +194,9 @@ import { getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import * as UserApi from '@/api/system/user'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition'
import * as TaskApi from '@/api/bpm/task'
import * as ActivityApi from '@/api/bpm/activity'
import { formatPast2 } from '@/utils/formatTime'
const { query } = useRoute() // 查询参数
@ -319,6 +343,34 @@ const resetUpdateAssigneeForm = () => {
updateAssigneeFormRef.value?.resetFields()
}
/** 处理审批退回的操作 */
const handleDelegate = async (task) => {
message.error('暂不支持【委派】功能，可以使用【转派】替代！')
console.log(task)
}
/** 处理审批退回的操作 */
const handleBack = async (task) => {
message.error('暂不支持【退回】功能！')
// 可参考 http://blog.wya1.com/article/636697030/details/7296
// const data = {
// id: task.id,
// assigneeUserId: 1
// }
// backTask(data).then(response => {
// this.$modal.msgSuccess("回退成功！");
// this.getDetail(); // 获得最新详情
// });
console.log(task)
}
// ========== 高亮流程图 ==========
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
const activityList = ref([])
// ========== 初始化 ==========
onMounted(() => {
// 加载详情
@ -355,9 +407,17 @@ const getDetail = () => {
})
}
// TODO 加载流程图
// 加载流程图
DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
bpmnXML.value = data
})
// TODO 加载活动列表
// 加载活动列表
ActivityApi.getActivityList({
processInstanceId: data.id
}).then((data) => {
activityList.value = data
})
})
.finally(() => {
processInstanceLoading.value = false

75
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
View File

@ -1,75 +0,0 @@
<template>
<div class="app-container">
<el-button
icon="el-icon-edit-outline"
type="primary"
size="mini"
@click="handleDelegate(item)"
>委派</el-button
>
<el-button
icon="el-icon-refresh-left"
type="warning"
size="mini"
@click="handleBack(item)"
>退回</el-button
>
<!-- 高亮流程图 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<my-process-viewer
key="designer"
v-model="bpmnXML"
v-bind="bpmnControlForm"
:activityData="activityList"
:processInstanceData="processInstance"
:taskData="tasks"
/>
</el-card>
</div>
</template>
<script>
// 流程实例的详情页，可用于审批
export default {
name: "ProcessInstanceDetail",
data () {
return {
// BPMN 数据
bpmnXML: null,
bpmnControlForm: {
prefix: "flowable"
},
activityList: [],
}
},
/** 处理审批退回的操作 */
handleDelegate (task) {
this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
},
/** 处理审批退回的操作 */
handleBack (task) {
this.$modal.msgError("暂不支持【退回】功能！")
// 可参考 http://blog.wya1.com/article/636697030/details/7296
// const data = {
// id: task.id,
// assigneeUserId: 1
// }
// backTask(data).then(response => {
// this.$modal.msgSuccess("回退成功！");
// this.getDetail(); // 获得最新详情
// });
}
}
};
</script>