mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 17:21:53 +08:00
bpm：完成流程实例的发起功能
This commit is contained in:
YunaiV
parent
2d6fe27b43
commit
6c6050a320
@ -1,11 +1,10 @@
|
||||
import request from '@/config/axios'
|
||||
import { ProcessInstanceVO } from './types'
|
||||
|
||||
export const getMyProcessInstancePageApi = async (params) => {
|
||||
return await request.get({ url: '/bpm/process-instance/my-page', params })
|
||||
}
|
||||
|
||||
export const createProcessInstanceApi = async (data: ProcessInstanceVO) => {
|
||||
export const createProcessInstanceApi = async (data) => {
|
||||
return await request.post({ url: '/bpm/process-instance/create', data: data })
|
||||
}
|
||||
|
||||
|
||||
@ -363,7 +363,7 @@ const handleFormDetail = async (row) => {
|
||||
// 弹窗打开
|
||||
formDetailVisible.value = true
|
||||
} else {
|
||||
router.push({
|
||||
await router.push({
|
||||
path: row.formCustomCreatePath
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<ContentWrap>
|
||||
<!-- 第一步，通过流程定义的列表，选择对应的流程 -->
|
||||
<div v-if="!selectProcessInstance">
|
||||
<XTable @register="registerTable">
|
||||
@ -7,9 +7,7 @@
|
||||
<el-tag v-if="row">v{{ row.version }}</el-tag>
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(row)"
|
||||
>选择</el-button
|
||||
>
|
||||
<XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
|
||||
</template>
|
||||
</XTable>
|
||||
</div>
|
||||
@ -18,107 +16,119 @@
|
||||
<el-card class="box-card">
|
||||
<div class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
|
||||
<el-button style="float: right" type="primary" @click="selectProcessInstance = undefined"
|
||||
>选择其它流程</el-button
|
||||
>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6">
|
||||
<div>
|
||||
<!-- <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" /> -->
|
||||
<XButton
|
||||
style="float: right"
|
||||
type="primary"
|
||||
preIcon="ep:delete"
|
||||
title="选择其它流程"
|
||||
@click="selectProcessInstance = undefined"
|
||||
/>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6" style="margin-top: 20px">
|
||||
<form-create
|
||||
:rule="detailForm.rule"
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
@submit="submitForm"
|
||||
/>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<!-- TODO 芋艿：待完成？？？ -->
|
||||
<!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useXTable } from '@/hooks/web/useXTable'
|
||||
import * as definitionApi from '@/api/bpm/definition'
|
||||
// import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import { decodeFields } from '@/utils/formGenerator'
|
||||
// import Parser from '@/components/parser/Parser'
|
||||
// import * as processInstanceApi from "@/api/bpm/processInstance";
|
||||
// 业务相关的 import
|
||||
import { allSchemas } from './process.create'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import * as DefinitionApi from '@/api/bpm/definition'
|
||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||||
|
||||
const router = useRouter() // 路由
|
||||
const message = useMessage() // 消息
|
||||
|
||||
// ========== 列表相关 ==========
|
||||
|
||||
const queryParams = reactive({
|
||||
suspensionState: 1
|
||||
})
|
||||
const [registerTable] = useXTable({
|
||||
allSchemas: allSchemas,
|
||||
params: queryParams,
|
||||
getListApi: definitionApi.getProcessDefinitionListApi
|
||||
params: {
|
||||
suspensionState: 1
|
||||
},
|
||||
getListApi: DefinitionApi.getProcessDefinitionListApi,
|
||||
isList: true
|
||||
})
|
||||
|
||||
// ========== 表单相关 ==========
|
||||
|
||||
import { setConfAndFields2 } from '@/utils/formCreate'
|
||||
import { ApiAttrs } from '@form-create/element-ui/types/config'
|
||||
const fApi = ref<ApiAttrs>()
|
||||
|
||||
// 流程表单详情
|
||||
const detailForm = ref({
|
||||
fields: []
|
||||
rule: [],
|
||||
option: {}
|
||||
})
|
||||
|
||||
// 流程表单
|
||||
const selectProcessInstance = ref(undefined) // 选择的流程实例
|
||||
/** 处理选择流程的按钮操作 **/
|
||||
const handleSelect = async (row) => {
|
||||
// 设置选择的流程
|
||||
selectProcessInstance.value = row
|
||||
|
||||
// 情况一：流程表单
|
||||
if (row.formType == 10) {
|
||||
// 设置表单
|
||||
setConfAndFields2(detailForm, row.formConf, row.formFields)
|
||||
|
||||
// 加载流程图
|
||||
DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
|
||||
bpmnXML.value = response.data
|
||||
})
|
||||
// 情况二：业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
await router.push({
|
||||
path: row.formCustomCreatePath
|
||||
})
|
||||
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = async (formData) => {
|
||||
if (!fApi.value || !selectProcessInstance.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// 提交请求
|
||||
fApi.value.btn.loading(true)
|
||||
try {
|
||||
await ProcessInstanceApi.createProcessInstanceApi({
|
||||
processDefinitionId: selectProcessInstance.value.id,
|
||||
variables: formData
|
||||
})
|
||||
// 提示
|
||||
message.success('发起流程成功')
|
||||
// this.$tab.closeOpenPage();
|
||||
router.go(-1)
|
||||
} finally {
|
||||
fApi.value.btn.loading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 流程图相关 ==========
|
||||
|
||||
// // BPMN 数据
|
||||
const bpmnXML = ref(null)
|
||||
// const bpmnControlForm=ref( {
|
||||
// prefix: "flowable"
|
||||
// })
|
||||
|
||||
// 流程表单
|
||||
const selectProcessInstance = ref(undefined) // 选择的流程实例
|
||||
/** 处理选择流程的按钮操作 **/
|
||||
const handleSelect = (row) => {
|
||||
// 设置选择的流程
|
||||
selectProcessInstance.value = row
|
||||
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
// 设置对应的表单
|
||||
detailForm.value = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields([], row.formFields)
|
||||
}
|
||||
|
||||
// 加载流程图
|
||||
definitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
|
||||
bpmnXML.value = response.data
|
||||
})
|
||||
} else if (row.formCustomCreatePath) {
|
||||
router.push({ path: row.formCustomCreatePath })
|
||||
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
|
||||
}
|
||||
}
|
||||
/** 提交按钮 */
|
||||
// const submitForm=(params)=> {
|
||||
// if (!params) {
|
||||
// return;
|
||||
// }
|
||||
// // 设置表单禁用
|
||||
// const conf = params.conf;
|
||||
// conf.disabled = true; // 表单禁用
|
||||
// conf.formBtns = false; // 按钮隐藏
|
||||
|
||||
// // 提交表单，创建流程
|
||||
// const variables = params.values;
|
||||
// await processInstanceApi.createProcessInstanceApi({
|
||||
// processDefinitionId: this.selectProcessInstance.id,
|
||||
// variables: variables
|
||||
// }).then(response => {
|
||||
// this.$modal.msgSuccess("发起流程成功");
|
||||
// // 关闭当前窗口
|
||||
// this.$tab.closeOpenPage();
|
||||
// this.$router.go(-1);
|
||||
// }).catch(() => {
|
||||
// conf.disabled = false; // 表单开启
|
||||
// conf.formBtns = true; // 按钮展示
|
||||
// })
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -20,11 +20,17 @@
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
|
||||
<XButton
|
||||
<XTextButton
|
||||
preIcon="ep:view"
|
||||
:title="t('action.detail')"
|
||||
v-hasPermi="['bpm:process-instance:cancel']"
|
||||
@click="handleDetail(row)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
title="取消"
|
||||
v-if="row.result === 1"
|
||||
v-hasPermi="['bpm:process-instance:query']"
|
||||
@click="handleCancel(row)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
import { reactive } from 'vue'
|
||||
// import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
// const { t } = useI18n() // 国际化
|
||||
|
||||
// CrudSchema
|
||||
// crudSchemas
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'id',
|
||||
primaryTitle: '流程名称',
|
||||
primaryType: null,
|
||||
action: true,
|
||||
actionWidth: '200px',
|
||||
columns: [
|
||||
{
|
||||
title: '流程名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '流程分类',
|
||||
field: 'category',
|
||||
@ -20,7 +18,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
|
||||
},
|
||||
{
|
||||
title: '流程版本',
|
||||
field: 'processDefinition.version',
|
||||
field: 'version',
|
||||
table: {
|
||||
slots: {
|
||||
default: 'version_default'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user