Commit 2774671a886c8a3f898670b6ccc41bef3a561bee
1 parent
f6e03604
bpm：流程详情的初始加载
Showing
5 changed files
with
59 additions
and
24 deletions
yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
| 1 | import request from '@/config/axios' | 1 | import request from '@/config/axios' |
| 2 | 2 | ||
| 3 | +export type Task = { | ||
| 4 | + id: string | ||
| 5 | + name: string | ||
| 6 | +} | ||
| 7 | +export type ProcessInstanceVO = { | ||
| 8 | + id: number | ||
| 9 | + name: string | ||
| 10 | + processDefinitionId: string | ||
| 11 | + category: string | ||
| 12 | + result: number | ||
| 13 | + tasks: Task[] | ||
| 14 | + fields: string[] | ||
| 15 | + status: number | ||
| 16 | + remark: string | ||
| 17 | + businessKey: string | ||
| 18 | + createTime: string | ||
| 19 | + endTime: string | ||
| 20 | +} | ||
| 21 | + | ||
| 3 | export const getMyProcessInstancePageApi = async (params) => { | 22 | export const getMyProcessInstancePageApi = async (params) => { |
| 4 | return await request.get({ url: '/bpm/process-instance/my-page', params }) | 23 | return await request.get({ url: '/bpm/process-instance/my-page', params }) |
| 5 | } | 24 | } |
yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts deleted
| 1 | -export type task = { | ||
| 2 | - id: string | ||
| 3 | - name: string | ||
| 4 | -} | ||
| 5 | -export type ProcessInstanceVO = { | ||
| 6 | - id: number | ||
| 7 | - name: string | ||
| 8 | - processDefinitionId: string | ||
| 9 | - category: string | ||
| 10 | - result: number | ||
| 11 | - tasks: task[] | ||
| 12 | - fields: string[] | ||
| 13 | - status: number | ||
| 14 | - remark: string | ||
| 15 | - businessKey: string | ||
| 16 | - createTime: string | ||
| 17 | - endTime: string | ||
| 18 | -} |
yudao-ui-admin-vue3/src/utils/formCreate.ts
| @@ -37,9 +37,18 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri | @@ -37,9 +37,18 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri | ||
| 37 | } | 37 | } |
| 38 | 38 | ||
| 39 | // 设置表单的 Conf 和 Fields | 39 | // 设置表单的 Conf 和 Fields |
| 40 | -export const setConfAndFields2 = (detailPreview: object, conf: string, fields: string) => { | 40 | +export const setConfAndFields2 = ( |
| 41 | + detailPreview: object, | ||
| 42 | + conf: string, | ||
| 43 | + fields: string, | ||
| 44 | + value: object | ||
| 45 | +) => { | ||
| 41 | // @ts-ignore | 46 | // @ts-ignore |
| 42 | detailPreview.value.option = JSON.parse(conf) | 47 | detailPreview.value.option = JSON.parse(conf) |
| 43 | // @ts-ignore | 48 | // @ts-ignore |
| 44 | detailPreview.value.rule = decodeFields(fields) | 49 | detailPreview.value.rule = decodeFields(fields) |
| 50 | + if (value) { | ||
| 51 | + // @ts-ignore | ||
| 52 | + detailPreview.value.value = value | ||
| 53 | + } | ||
| 45 | } | 54 | } |
yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
| @@ -9,9 +9,12 @@ | @@ -9,9 +9,12 @@ | ||
| 9 | </template> | 9 | </template> |
| 10 | <!-- 情况一：流程表单 --> | 10 | <!-- 情况一：流程表单 --> |
| 11 | <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6"> | 11 | <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6"> |
| 12 | - <div> | ||
| 13 | - <parser :key="new Date().getTime()" :form-conf="detailForm" /> | ||
| 14 | - </div> | 12 | + <form-create |
| 13 | + :rule="detailForm.rule" | ||
| 14 | + v-model:api="fApi" | ||
| 15 | + :option="detailForm.option" | ||
| 16 | + v-model="detailForm.value" | ||
| 17 | + /> | ||
| 15 | </el-col> | 18 | </el-col> |
| 16 | <!-- 情况二：流程表单 --> | 19 | <!-- 情况二：流程表单 --> |
| 17 | <div v-if="processInstance?.processDefinition?.formType === 20"> | 20 | <div v-if="processInstance?.processDefinition?.formType === 20"> |
| @@ -40,6 +43,15 @@ const processInstanceLoading = ref(false) // 流程实例的加载中 | @@ -40,6 +43,15 @@ const processInstanceLoading = ref(false) // 流程实例的加载中 | ||
| 40 | const processInstance = ref({}) // 流程实例 | 43 | const processInstance = ref({}) // 流程实例 |
| 41 | 44 | ||
| 42 | // ========== 申请信息 ========== | 45 | // ========== 申请信息 ========== |
| 46 | +import { setConfAndFields2 } from '@/utils/formCreate' | ||
| 47 | +import { ApiAttrs } from '@form-create/element-ui/types/config' | ||
| 48 | +const fApi = ref<ApiAttrs>() | ||
| 49 | +// 流程表单详情 | ||
| 50 | +const detailForm = ref({ | ||
| 51 | + rule: [], | ||
| 52 | + option: {}, | ||
| 53 | + value: {} | ||
| 54 | +}) | ||
| 43 | 55 | ||
| 44 | // ========== 初始化 ========== | 56 | // ========== 初始化 ========== |
| 45 | onMounted(() => { | 57 | onMounted(() => { |
| @@ -53,7 +65,20 @@ onMounted(() => { | @@ -53,7 +65,20 @@ onMounted(() => { | ||
| 53 | } | 65 | } |
| 54 | processInstance.value = data | 66 | processInstance.value = data |
| 55 | 67 | ||
| 56 | - // TODO 设置表单信息 | 68 | + // 设置表单信息 |
| 69 | + const processDefinition = data.processDefinition | ||
| 70 | + if (processDefinition.formType === 10) { | ||
| 71 | + setConfAndFields2( | ||
| 72 | + detailForm, | ||
| 73 | + processDefinition.formConf, | ||
| 74 | + processDefinition.formFields, | ||
| 75 | + data.formVariables | ||
| 76 | + ) | ||
| 77 | + nextTick().then(() => { | ||
| 78 | + fApi.value.btn.show(false) | ||
| 79 | + fApi.value.resetBtn.show(false) | ||
| 80 | + }) | ||
| 81 | + } | ||
| 57 | 82 | ||
| 58 | // TODO 加载流程图 | 83 | // TODO 加载流程图 |
| 59 | 84 |
yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
| @@ -67,7 +67,7 @@ const handleDetail = (row) => { | @@ -67,7 +67,7 @@ const handleDetail = (row) => { | ||
| 67 | router.push({ | 67 | router.push({ |
| 68 | name: 'BpmProcessInstanceDetail', | 68 | name: 'BpmProcessInstanceDetail', |
| 69 | query: { | 69 | query: { |
| 70 | - id: row.processInstanceId | 70 | + id: row.id |
| 71 | } | 71 | } |
| 72 | }) | 72 | }) |
| 73 | } | 73 | } |