Commit 2253ba069f09177c4d1d60fc0ddc04337fb606fa
1 parent
b6d90b22
bpm：完成流程详情的整体界面
Showing
8 changed files
with
74 additions
and
87 deletions
yudao-ui-admin-vue3/src/api/bpm/activity/index.ts
0 → 100644
yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
yudao-ui-admin-vue3/src/types/auto-imports.d.ts
| ... | ... | @@ -3,7 +3,6 @@ export {} |
| 3 | 3 | declare global { |
| 4 | 4 | const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE'] |
| 5 | 5 | const EffectScope: typeof import('vue')['EffectScope'] |
| 6 | - const ElMessage: typeof import('element-plus/es')['ElMessage'] | |
| 7 | 6 | const computed: typeof import('vue')['computed'] |
| 8 | 7 | const createApp: typeof import('vue')['createApp'] |
| 9 | 8 | const customRef: typeof import('vue')['customRef'] | ... | ... |
yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
| ... | ... | @@ -37,7 +37,7 @@ |
| 37 | 37 | |
| 38 | 38 | <!-- 表单详情的弹窗 --> |
| 39 | 39 | <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false"> |
| 40 | - <ViewForm | |
| 40 | + <form-create | |
| 41 | 41 | :rule="formDetailPreview.rule" |
| 42 | 42 | :option="formDetailPreview.option" |
| 43 | 43 | v-if="formDetailVisible" |
| ... | ... | @@ -58,8 +58,6 @@ const message = useMessage() // 消息弹窗 |
| 58 | 58 | const router = useRouter() // 路由 |
| 59 | 59 | const { query } = useRoute() // 查询参数 |
| 60 | 60 | |
| 61 | -import viewForm from '@form-create/element-ui' | |
| 62 | -const ViewForm = viewForm.$form() | |
| 63 | 61 | import { setConfAndFields2 } from '@/utils/formCreate' |
| 64 | 62 | |
| 65 | 63 | // ========== 列表相关 ========== | ... | ... |
yudao-ui-admin-vue3/src/views/bpm/form/index.vue
| ... | ... | @@ -39,7 +39,7 @@ |
| 39 | 39 | </XTable> |
| 40 | 40 | <!-- 表单详情的弹窗 --> |
| 41 | 41 | <XModal v-model="detailOpen" width="800" title="表单详情"> |
| 42 | - <ViewForm :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" /> | |
| 42 | + <form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" /> | |
| 43 | 43 | </XModal> |
| 44 | 44 | </div> |
| 45 | 45 | </ContentWrap> |
| ... | ... | @@ -55,8 +55,6 @@ const { t } = useI18n() // 国际化 |
| 55 | 55 | const router = useRouter() // 路由 |
| 56 | 56 | |
| 57 | 57 | // 表单详情相关的变量和 import |
| 58 | -import viewForm from '@form-create/element-ui' | |
| 59 | -const ViewForm = viewForm.$form() | |
| 60 | 58 | import { setConfAndFields2 } from '@/utils/formCreate' |
| 61 | 59 | |
| 62 | 60 | // 列表相关的变量 | ... | ... |
yudao-ui-admin-vue3/src/views/bpm/model/index.vue
| ... | ... | @@ -292,7 +292,7 @@ |
| 292 | 292 | |
| 293 | 293 | <!-- 表单详情的弹窗 --> |
| 294 | 294 | <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false"> |
| 295 | - <ViewForm | |
| 295 | + <form-create | |
| 296 | 296 | :rule="formDetailPreview.rule" |
| 297 | 297 | :option="formDetailPreview.option" |
| 298 | 298 | v-if="formDetailVisible" |
| ... | ... | @@ -317,8 +317,6 @@ const { t } = useI18n() // 国际化 |
| 317 | 317 | const message = useMessage() // 消息弹窗 |
| 318 | 318 | const router = useRouter() // 路由 |
| 319 | 319 | |
| 320 | -import viewForm from '@form-create/element-ui' | |
| 321 | -const ViewForm = viewForm.$form() | |
| 322 | 320 | import { setConfAndFields2 } from '@/utils/formCreate' |
| 323 | 321 | |
| 324 | 322 | // ========== 列表相关 ========== | ... | ... |
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
| ... | ... | @@ -51,6 +51,13 @@ |
| 51 | 51 | title="转办" |
| 52 | 52 | @click="handleUpdateAssignee(item)" |
| 53 | 53 | /> |
| 54 | + <XButton | |
| 55 | + pre-icon="ep:position" | |
| 56 | + type="primary" | |
| 57 | + title="委派" | |
| 58 | + @click="handleDelegate(item)" | |
| 59 | + /> | |
| 60 | + <XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" /> | |
| 54 | 61 | </div> |
| 55 | 62 | </el-col> |
| 56 | 63 | </el-card> |
| ... | ... | @@ -129,6 +136,21 @@ |
| 129 | 136 | </el-col> |
| 130 | 137 | </el-card> |
| 131 | 138 | |
| 139 | + <!-- 高亮流程图 --> | |
| 140 | + <el-card class="box-card" v-loading="processInstanceLoading"> | |
| 141 | + <template #header> | |
| 142 | + <span class="el-icon-picture-outline">流程图</span> | |
| 143 | + </template> | |
| 144 | + <my-process-viewer | |
| 145 | + key="designer" | |
| 146 | + v-model="bpmnXML" | |
| 147 | + v-bind="bpmnControlForm" | |
| 148 | + :activityData="activityList" | |
| 149 | + :processInstanceData="processInstance" | |
| 150 | + :taskData="tasks" | |
| 151 | + /> | |
| 152 | + </el-card> | |
| 153 | + | |
| 132 | 154 | <!-- 对话框(转派审批人) --> |
| 133 | 155 | <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500"> |
| 134 | 156 | <el-form |
| ... | ... | @@ -172,7 +194,9 @@ import { getCurrentInstance } from 'vue' |
| 172 | 194 | import dayjs from 'dayjs' |
| 173 | 195 | import * as UserApi from '@/api/system/user' |
| 174 | 196 | import * as ProcessInstanceApi from '@/api/bpm/processInstance' |
| 197 | +import * as DefinitionApi from '@/api/bpm/definition' | |
| 175 | 198 | import * as TaskApi from '@/api/bpm/task' |
| 199 | +import * as ActivityApi from '@/api/bpm/activity' | |
| 176 | 200 | import { formatPast2 } from '@/utils/formatTime' |
| 177 | 201 | |
| 178 | 202 | const { query } = useRoute() // 查询参数 |
| ... | ... | @@ -319,6 +343,34 @@ const resetUpdateAssigneeForm = () => { |
| 319 | 343 | updateAssigneeFormRef.value?.resetFields() |
| 320 | 344 | } |
| 321 | 345 | |
| 346 | +/** 处理审批退回的操作 */ | |
| 347 | +const handleDelegate = async (task) => { | |
| 348 | + message.error('暂不支持【委派】功能，可以使用【转派】替代！') | |
| 349 | + console.log(task) | |
| 350 | +} | |
| 351 | + | |
| 352 | +/** 处理审批退回的操作 */ | |
| 353 | +const handleBack = async (task) => { | |
| 354 | + message.error('暂不支持【退回】功能！') | |
| 355 | + // 可参考 http://blog.wya1.com/article/636697030/details/7296 | |
| 356 | + // const data = { | |
| 357 | + // id: task.id, | |
| 358 | + // assigneeUserId: 1 | |
| 359 | + // } | |
| 360 | + // backTask(data).then(response => { | |
| 361 | + // this.$modal.msgSuccess("回退成功！"); | |
| 362 | + // this.getDetail(); // 获得最新详情 | |
| 363 | + // }); | |
| 364 | + console.log(task) | |
| 365 | +} | |
| 366 | + | |
| 367 | +// ========== 高亮流程图 ========== | |
| 368 | +const bpmnXML = ref(null) | |
| 369 | +const bpmnControlForm = ref({ | |
| 370 | + prefix: 'flowable' | |
| 371 | +}) | |
| 372 | +const activityList = ref([]) | |
| 373 | + | |
| 322 | 374 | // ========== 初始化 ========== |
| 323 | 375 | onMounted(() => { |
| 324 | 376 | // 加载详情 |
| ... | ... | @@ -355,9 +407,17 @@ const getDetail = () => { |
| 355 | 407 | }) |
| 356 | 408 | } |
| 357 | 409 | |
| 358 | - // TODO 加载流程图 | |
| 410 | + // 加载流程图 | |
| 411 | + DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => { | |
| 412 | + bpmnXML.value = data | |
| 413 | + }) | |
| 359 | 414 | |
| 360 | - // TODO 加载活动列表 | |
| 415 | + // 加载活动列表 | |
| 416 | + ActivityApi.getActivityList({ | |
| 417 | + processInstanceId: data.id | |
| 418 | + }).then((data) => { | |
| 419 | + activityList.value = data | |
| 420 | + }) | |
| 361 | 421 | }) |
| 362 | 422 | .finally(() => { |
| 363 | 423 | processInstanceLoading.value = false | ... | ... |
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue deleted
| 1 | -<template> | |
| 2 | - <div class="app-container"> | |
| 3 | - | |
| 4 | - | |
| 5 | - | |
| 6 | - <el-button | |
| 7 | - icon="el-icon-edit-outline" | |
| 8 | - type="primary" | |
| 9 | - size="mini" | |
| 10 | - @click="handleDelegate(item)" | |
| 11 | - >委派</el-button | |
| 12 | - > | |
| 13 | - <el-button | |
| 14 | - icon="el-icon-refresh-left" | |
| 15 | - type="warning" | |
| 16 | - size="mini" | |
| 17 | - @click="handleBack(item)" | |
| 18 | - >退回</el-button | |
| 19 | - > | |
| 20 | - | |
| 21 | - <!-- 高亮流程图 --> | |
| 22 | - <el-card class="box-card" v-loading="processInstanceLoading"> | |
| 23 | - <div slot="header" class="clearfix"> | |
| 24 | - <span class="el-icon-picture-outline">流程图</span> | |
| 25 | - </div> | |
| 26 | - <my-process-viewer | |
| 27 | - key="designer" | |
| 28 | - v-model="bpmnXML" | |
| 29 | - v-bind="bpmnControlForm" | |
| 30 | - :activityData="activityList" | |
| 31 | - :processInstanceData="processInstance" | |
| 32 | - :taskData="tasks" | |
| 33 | - /> | |
| 34 | - </el-card> | |
| 35 | - </div> | |
| 36 | -</template> | |
| 37 | - | |
| 38 | -<script> | |
| 39 | - | |
| 40 | -// 流程实例的详情页，可用于审批 | |
| 41 | -export default { | |
| 42 | - name: "ProcessInstanceDetail", | |
| 43 | - data () { | |
| 44 | - return { | |
| 45 | - | |
| 46 | - // BPMN 数据 | |
| 47 | - bpmnXML: null, | |
| 48 | - bpmnControlForm: { | |
| 49 | - prefix: "flowable" | |
| 50 | - }, | |
| 51 | - activityList: [], | |
| 52 | - } | |
| 53 | - }, | |
| 54 | - | |
| 55 | - | |
| 56 | - /** 处理审批退回的操作 */ | |
| 57 | - handleDelegate (task) { | |
| 58 | - this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！") | |
| 59 | - }, | |
| 60 | - /** 处理审批退回的操作 */ | |
| 61 | - handleBack (task) { | |
| 62 | - this.$modal.msgError("暂不支持【退回】功能！") | |
| 63 | - // 可参考 http://blog.wya1.com/article/636697030/details/7296 | |
| 64 | - // const data = { | |
| 65 | - // id: task.id, | |
| 66 | - // assigneeUserId: 1 | |
| 67 | - // } | |
| 68 | - // backTask(data).then(response => { | |
| 69 | - // this.$modal.msgSuccess("回退成功！"); | |
| 70 | - // this.getDetail(); // 获得最新详情 | |
| 71 | - // }); | |
| 72 | - } | |
| 73 | - } | |
| 74 | -}; | |
| 75 | -</script> |