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

yudao-ui-admin-vue3/src/api/bpm/activity/index.ts

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

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

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

yudao-ui-admin-vue3/src/types/auto-imports.d.ts

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

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

@@ -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'
 
 // ========== 列表相关 ==========

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

@@ -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'
 
 // 列表相关的变量

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

@@ -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'
 
 // ========== 列表相关 ==========

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

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

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

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