bpm：流程详情的初始加载

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

@@ -1,5 +1,24 @@
 import request from '@/config/axios'
 
+export type Task = {
+  id: string
+  name: string
+}
+export type ProcessInstanceVO = {
+  id: number
+  name: string
+  processDefinitionId: string
+  category: string
+  result: number
+  tasks: Task[]
+  fields: string[]
+  status: number
+  remark: string
+  businessKey: string
+  createTime: string
+  endTime: string
+}
+
 export const getMyProcessInstancePageApi = async (params) => {
   return await request.get({ url: '/bpm/process-instance/my-page', params })
 }

yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts

@@ -1,18 +0,0 @@
-export type task = {
-  id: string
-  name: string
-}
-export type ProcessInstanceVO = {
-  id: number
-  name: string
-  processDefinitionId: string
-  category: string
-  result: number
-  tasks: task[]
-  fields: string[]
-  status: number
-  remark: string
-  businessKey: string
-  createTime: string
-  endTime: string
-}

yudao-ui-admin-vue3/src/utils/formCreate.ts

@@ -37,9 +37,18 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
 }
 
 // 设置表单的 Conf 和 Fields
-export const setConfAndFields2 = (detailPreview: object, conf: string, fields: string) => {
+export const setConfAndFields2 = (
+  detailPreview: object,
+  conf: string,
+  fields: string,
+  value: object
+) => {
   // @ts-ignore
   detailPreview.value.option = JSON.parse(conf)
   // @ts-ignore
   detailPreview.value.rule = decodeFields(fields)
+  if (value) {
+    // @ts-ignore
+    detailPreview.value.value = value
+  }
 }

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

@@ -9,9 +9,12 @@
       </template>
       <!-- 情况一：流程表单 -->
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
-        <div>
+        <form-create
-          <parser :key="new Date().getTime()" :form-conf="detailForm" />
+          :rule="detailForm.rule"
-        </div>
+          v-model:api="fApi"
+          :option="detailForm.option"
+          v-model="detailForm.value"
+        />
       </el-col>
       <!-- 情况二：流程表单 -->
       <div v-if="processInstance?.processDefinition?.formType === 20">
@@ -40,6 +43,15 @@ const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
 
 // ========== 申请信息 ==========
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
+const fApi = ref<ApiAttrs>()
+// 流程表单详情
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
 
 // ========== 初始化 ==========
 onMounted(() => {
@@ -53,7 +65,20 @@ onMounted(() => {
       }
       processInstance.value = data
 
-      // TODO 设置表单信息
+      // 设置表单信息
+      const processDefinition = data.processDefinition
+      if (processDefinition.formType === 10) {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+        )
+        nextTick().then(() => {
+          fApi.value.btn.show(false)
+          fApi.value.resetBtn.show(false)
+        })
+      }
 
       // TODO 加载流程图
 

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

@@ -67,7 +67,7 @@ const handleDetail = (row) => {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstanceId
+      id: row.id
     }
   })
 }