Commit 6c6050a320f6fc5da7590887c2eee508e603f3ab
1 parent
2d6fe27b
bpm：完成流程实例的发起功能
Showing
5 changed files
with
94 additions
and
81 deletions
yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
| 1 | import request from '@/config/axios' | 1 | import request from '@/config/axios' |
| 2 | -import { ProcessInstanceVO } from './types' | ||
| 3 | 2 | ||
| 4 | export const getMyProcessInstancePageApi = async (params) => { | 3 | export const getMyProcessInstancePageApi = async (params) => { |
| 5 | return await request.get({ url: '/bpm/process-instance/my-page', params }) | 4 | return await request.get({ url: '/bpm/process-instance/my-page', params }) |
| 6 | } | 5 | } |
| 7 | 6 | ||
| 8 | -export const createProcessInstanceApi = async (data: ProcessInstanceVO) => { | 7 | +export const createProcessInstanceApi = async (data) => { |
| 9 | return await request.post({ url: '/bpm/process-instance/create', data: data }) | 8 | return await request.post({ url: '/bpm/process-instance/create', data: data }) |
| 10 | } | 9 | } |
| 11 | 10 |
yudao-ui-admin-vue3/src/views/bpm/model/index.vue
| @@ -363,7 +363,7 @@ const handleFormDetail = async (row) => { | @@ -363,7 +363,7 @@ const handleFormDetail = async (row) => { | ||
| 363 | // 弹窗打开 | 363 | // 弹窗打开 |
| 364 | formDetailVisible.value = true | 364 | formDetailVisible.value = true |
| 365 | } else { | 365 | } else { |
| 366 | - router.push({ | 366 | + await router.push({ |
| 367 | path: row.formCustomCreatePath | 367 | path: row.formCustomCreatePath |
| 368 | }) | 368 | }) |
| 369 | } | 369 | } |
yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="app-container"> | 2 | + <ContentWrap> |
| 3 | <!-- 第一步，通过流程定义的列表，选择对应的流程 --> | 3 | <!-- 第一步，通过流程定义的列表，选择对应的流程 --> |
| 4 | <div v-if="!selectProcessInstance"> | 4 | <div v-if="!selectProcessInstance"> |
| 5 | <XTable @register="registerTable"> | 5 | <XTable @register="registerTable"> |
| @@ -7,9 +7,7 @@ | @@ -7,9 +7,7 @@ | ||
| 7 | <el-tag v-if="row">v{{ row.version }}</el-tag> | 7 | <el-tag v-if="row">v{{ row.version }}</el-tag> |
| 8 | </template> | 8 | </template> |
| 9 | <template #actionbtns_default="{ row }"> | 9 | <template #actionbtns_default="{ row }"> |
| 10 | - <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(row)" | ||
| 11 | - >选择</el-button | ||
| 12 | - > | 10 | + <XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" /> |
| 13 | </template> | 11 | </template> |
| 14 | </XTable> | 12 | </XTable> |
| 15 | </div> | 13 | </div> |
| @@ -18,107 +16,119 @@ | @@ -18,107 +16,119 @@ | ||
| 18 | <el-card class="box-card"> | 16 | <el-card class="box-card"> |
| 19 | <div class="clearfix"> | 17 | <div class="clearfix"> |
| 20 | <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span> | 18 | <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span> |
| 21 | - <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined" | ||
| 22 | - >选择其它流程</el-button | ||
| 23 | - > | 19 | + <XButton |
| 20 | + style="float: right" | ||
| 21 | + type="primary" | ||
| 22 | + preIcon="ep:delete" | ||
| 23 | + title="选择其它流程" | ||
| 24 | + @click="selectProcessInstance = undefined" | ||
| 25 | + /> | ||
| 24 | </div> | 26 | </div> |
| 25 | - <el-col :span="16" :offset="6"> | ||
| 26 | - <div> | ||
| 27 | - <!-- <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" /> --> | ||
| 28 | - </div> | 27 | + <el-col :span="16" :offset="6" style="margin-top: 20px"> |
| 28 | + <form-create | ||
| 29 | + :rule="detailForm.rule" | ||
| 30 | + v-model:api="fApi" | ||
| 31 | + :option="detailForm.option" | ||
| 32 | + @submit="submitForm" | ||
| 33 | + /> | ||
| 29 | </el-col> | 34 | </el-col> |
| 30 | </el-card> | 35 | </el-card> |
| 31 | <el-card class="box-card"> | 36 | <el-card class="box-card"> |
| 32 | <div class="clearfix"> | 37 | <div class="clearfix"> |
| 33 | <span class="el-icon-picture-outline">流程图</span> | 38 | <span class="el-icon-picture-outline">流程图</span> |
| 34 | </div> | 39 | </div> |
| 40 | + <!-- TODO 芋艿：待完成？？？ --> | ||
| 35 | <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> --> | 41 | <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> --> |
| 36 | </el-card> | 42 | </el-card> |
| 37 | </div> | 43 | </div> |
| 38 | - </div> | 44 | + </ContentWrap> |
| 39 | </template> | 45 | </template> |
| 40 | - | ||
| 41 | <script setup lang="ts"> | 46 | <script setup lang="ts"> |
| 42 | -import { reactive, ref } from 'vue' | ||
| 43 | -import { useXTable } from '@/hooks/web/useXTable' | ||
| 44 | -import * as definitionApi from '@/api/bpm/definition' | ||
| 45 | -// import {DICT_TYPE, getDictDatas} from "@/utils/dict"; | ||
| 46 | -import { decodeFields } from '@/utils/formGenerator' | ||
| 47 | -// import Parser from '@/components/parser/Parser' | ||
| 48 | -// import * as processInstanceApi from "@/api/bpm/processInstance"; | 47 | +// 业务相关的 import |
| 49 | import { allSchemas } from './process.create' | 48 | import { allSchemas } from './process.create' |
| 50 | -import { useRouter } from 'vue-router' | ||
| 51 | -const router = useRouter() | 49 | +import * as DefinitionApi from '@/api/bpm/definition' |
| 50 | +import * as ProcessInstanceApi from '@/api/bpm/processInstance' | ||
| 51 | + | ||
| 52 | +const router = useRouter() // 路由 | ||
| 53 | +const message = useMessage() // 消息 | ||
| 54 | + | ||
| 55 | +// ========== 列表相关 ========== | ||
| 52 | 56 | ||
| 53 | -const queryParams = reactive({ | ||
| 54 | - suspensionState: 1 | ||
| 55 | -}) | ||
| 56 | const [registerTable] = useXTable({ | 57 | const [registerTable] = useXTable({ |
| 57 | allSchemas: allSchemas, | 58 | allSchemas: allSchemas, |
| 58 | - params: queryParams, | ||
| 59 | - getListApi: definitionApi.getProcessDefinitionListApi | 59 | + params: { |
| 60 | + suspensionState: 1 | ||
| 61 | + }, | ||
| 62 | + getListApi: DefinitionApi.getProcessDefinitionListApi, | ||
| 63 | + isList: true | ||
| 60 | }) | 64 | }) |
| 61 | 65 | ||
| 66 | +// ========== 表单相关 ========== | ||
| 67 | + | ||
| 68 | +import { setConfAndFields2 } from '@/utils/formCreate' | ||
| 69 | +import { ApiAttrs } from '@form-create/element-ui/types/config' | ||
| 70 | +const fApi = ref<ApiAttrs>() | ||
| 71 | + | ||
| 62 | // 流程表单详情 | 72 | // 流程表单详情 |
| 63 | const detailForm = ref({ | 73 | const detailForm = ref({ |
| 64 | - fields: [] | 74 | + rule: [], |
| 75 | + option: {} | ||
| 65 | }) | 76 | }) |
| 66 | 77 | ||
| 67 | -// // BPMN 数据 | ||
| 68 | -const bpmnXML = ref(null) | ||
| 69 | -// const bpmnControlForm=ref( { | ||
| 70 | -// prefix: "flowable" | ||
| 71 | -// }) | ||
| 72 | - | ||
| 73 | // 流程表单 | 78 | // 流程表单 |
| 74 | const selectProcessInstance = ref(undefined) // 选择的流程实例 | 79 | const selectProcessInstance = ref(undefined) // 选择的流程实例 |
| 75 | /** 处理选择流程的按钮操作 **/ | 80 | /** 处理选择流程的按钮操作 **/ |
| 76 | -const handleSelect = (row) => { | 81 | +const handleSelect = async (row) => { |
| 77 | // 设置选择的流程 | 82 | // 设置选择的流程 |
| 78 | selectProcessInstance.value = row | 83 | selectProcessInstance.value = row |
| 79 | 84 | ||
| 80 | - // 流程表单 | ||
| 81 | - if (row.formId) { | ||
| 82 | - // 设置对应的表单 | ||
| 83 | - detailForm.value = { | ||
| 84 | - ...JSON.parse(row.formConf), | ||
| 85 | - fields: decodeFields([], row.formFields) | ||
| 86 | - } | 85 | + // 情况一：流程表单 |
| 86 | + if (row.formType == 10) { | ||
| 87 | + // 设置表单 | ||
| 88 | + setConfAndFields2(detailForm, row.formConf, row.formFields) | ||
| 87 | 89 | ||
| 88 | // 加载流程图 | 90 | // 加载流程图 |
| 89 | - definitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => { | 91 | + DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => { |
| 90 | bpmnXML.value = response.data | 92 | bpmnXML.value = response.data |
| 91 | }) | 93 | }) |
| 94 | + // 情况二：业务表单 | ||
| 92 | } else if (row.formCustomCreatePath) { | 95 | } else if (row.formCustomCreatePath) { |
| 93 | - router.push({ path: row.formCustomCreatePath }) | 96 | + await router.push({ |
| 97 | + path: row.formCustomCreatePath | ||
| 98 | + }) | ||
| 94 | // 这里暂时无需加载流程图，因为跳出到另外个 Tab； | 99 | // 这里暂时无需加载流程图，因为跳出到另外个 Tab； |
| 95 | } | 100 | } |
| 96 | } | 101 | } |
| 102 | + | ||
| 97 | /** 提交按钮 */ | 103 | /** 提交按钮 */ |
| 98 | -// const submitForm=(params)=> { | ||
| 99 | -// if (!params) { | ||
| 100 | -// return; | ||
| 101 | -// } | ||
| 102 | -// // 设置表单禁用 | ||
| 103 | -// const conf = params.conf; | ||
| 104 | -// conf.disabled = true; // 表单禁用 | ||
| 105 | -// conf.formBtns = false; // 按钮隐藏 | 104 | +const submitForm = async (formData) => { |
| 105 | + if (!fApi.value || !selectProcessInstance.value) { | ||
| 106 | + return | ||
| 107 | + } | ||
| 108 | + | ||
| 109 | + // 提交请求 | ||
| 110 | + fApi.value.btn.loading(true) | ||
| 111 | + try { | ||
| 112 | + await ProcessInstanceApi.createProcessInstanceApi({ | ||
| 113 | + processDefinitionId: selectProcessInstance.value.id, | ||
| 114 | + variables: formData | ||
| 115 | + }) | ||
| 116 | + // 提示 | ||
| 117 | + message.success('发起流程成功') | ||
| 118 | + // this.$tab.closeOpenPage(); | ||
| 119 | + router.go(-1) | ||
| 120 | + } finally { | ||
| 121 | + fApi.value.btn.loading(false) | ||
| 122 | + } | ||
| 123 | +} | ||
| 106 | 124 | ||
| 107 | -// // 提交表单，创建流程 | ||
| 108 | -// const variables = params.values; | ||
| 109 | -// await processInstanceApi.createProcessInstanceApi({ | ||
| 110 | -// processDefinitionId: this.selectProcessInstance.id, | ||
| 111 | -// variables: variables | ||
| 112 | -// }).then(response => { | ||
| 113 | -// this.$modal.msgSuccess("发起流程成功"); | ||
| 114 | -// // 关闭当前窗口 | ||
| 115 | -// this.$tab.closeOpenPage(); | ||
| 116 | -// this.$router.go(-1); | ||
| 117 | -// }).catch(() => { | ||
| 118 | -// conf.disabled = false; // 表单开启 | ||
| 119 | -// conf.formBtns = true; // 按钮展示 | ||
| 120 | -// }) | ||
| 121 | -// } | 125 | +// ========== 流程图相关 ========== |
| 126 | + | ||
| 127 | +// // BPMN 数据 | ||
| 128 | +const bpmnXML = ref(null) | ||
| 129 | +// const bpmnControlForm=ref( { | ||
| 130 | +// prefix: "flowable" | ||
| 131 | +// }) | ||
| 122 | </script> | 132 | </script> |
| 123 | 133 | ||
| 124 | <style lang="scss"> | 134 | <style lang="scss"> |
yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
| @@ -20,11 +20,17 @@ | @@ -20,11 +20,17 @@ | ||
| 20 | </template> | 20 | </template> |
| 21 | <!-- 操作 --> | 21 | <!-- 操作 --> |
| 22 | <template #actionbtns_default="{ row }"> | 22 | <template #actionbtns_default="{ row }"> |
| 23 | - <XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> | ||
| 24 | - <XButton | 23 | + <XTextButton |
| 24 | + preIcon="ep:view" | ||
| 25 | + :title="t('action.detail')" | ||
| 26 | + v-hasPermi="['bpm:process-instance:cancel']" | ||
| 27 | + @click="handleDetail(row)" | ||
| 28 | + /> | ||
| 29 | + <XTextButton | ||
| 25 | preIcon="ep:delete" | 30 | preIcon="ep:delete" |
| 26 | title="取消" | 31 | title="取消" |
| 27 | v-if="row.result === 1" | 32 | v-if="row.result === 1" |
| 33 | + v-hasPermi="['bpm:process-instance:query']" | ||
| 28 | @click="handleCancel(row)" | 34 | @click="handleCancel(row)" |
| 29 | /> | 35 | /> |
| 30 | </template> | 36 | </template> |
yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
| 1 | -import { reactive } from 'vue' | ||
| 2 | -// import { useI18n } from '@/hooks/web/useI18n' | ||
| 3 | import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | 1 | import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' |
| 4 | -import { DICT_TYPE } from '@/utils/dict' | ||
| 5 | -// const { t } = useI18n() // 国际化 | ||
| 6 | 2 | ||
| 7 | -// CrudSchema | 3 | +// crudSchemas |
| 8 | const crudSchemas = reactive<VxeCrudSchema>({ | 4 | const crudSchemas = reactive<VxeCrudSchema>({ |
| 9 | primaryKey: 'id', | 5 | primaryKey: 'id', |
| 10 | - primaryType: 'id', | ||
| 11 | - primaryTitle: '流程名称', | 6 | + primaryType: null, |
| 12 | action: true, | 7 | action: true, |
| 13 | - actionWidth: '200px', | ||
| 14 | columns: [ | 8 | columns: [ |
| 15 | { | 9 | { |
| 10 | + title: '流程名称', | ||
| 11 | + field: 'name' | ||
| 12 | + }, | ||
| 13 | + { | ||
| 16 | title: '流程分类', | 14 | title: '流程分类', |
| 17 | field: 'category', | 15 | field: 'category', |
| 18 | dictType: DICT_TYPE.BPM_MODEL_CATEGORY, | 16 | dictType: DICT_TYPE.BPM_MODEL_CATEGORY, |
| @@ -20,7 +18,7 @@ const crudSchemas = reactive<VxeCrudSchema>({ | @@ -20,7 +18,7 @@ const crudSchemas = reactive<VxeCrudSchema>({ | ||
| 20 | }, | 18 | }, |
| 21 | { | 19 | { |
| 22 | title: '流程版本', | 20 | title: '流程版本', |
| 23 | - field: 'processDefinition.version', | 21 | + field: 'version', |
| 24 | table: { | 22 | table: { |
| 25 | slots: { | 23 | slots: { |
| 26 | default: 'version_default' | 24 | default: 'version_default' |