You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.4 KiB
123 lines
3.4 KiB
<script lang="ts" setup> |
|
import { Card, Steps } from 'ant-design-vue' |
|
import { ref } from 'vue' |
|
import { columns } from './create.data' |
|
import { useGo } from '@/hooks/web/usePage' |
|
import { useI18n } from '@/hooks/web/useI18n' |
|
import { useMessage } from '@/hooks/web/useMessage' |
|
import { PageWrapper } from '@/components/Page' |
|
import { IconEnum } from '@/enums/appEnum' |
|
import Icon from '@/components/Icon' |
|
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
import { getProcessDefinitionBpmnXML, getProcessDefinitionList } from '@/api/bpm/definition' |
|
import { createProcessInstance } from '@/api/bpm/processInstance' |
|
|
|
defineOptions({ name: 'BpmProcessInstanceCreate' }) |
|
|
|
const go = useGo() |
|
const { t } = useI18n() |
|
const { createMessage } = useMessage() |
|
const current = ref(0) |
|
|
|
const bpmnXML = ref(null) // BPMN 数据 |
|
const selectProcessInstance = ref() // 选择的流程实例 |
|
|
|
const [registerTable] = useTable({ |
|
api: getProcessDefinitionList, |
|
columns, |
|
actionColumn: { |
|
width: 140, |
|
title: t('common.action'), |
|
dataIndex: 'action', |
|
fixed: 'right', |
|
}, |
|
}) |
|
|
|
/** 处理选择流程的按钮操作 **/ |
|
async function handleSelect(row) { |
|
// 设置选择的流程 |
|
selectProcessInstance.value = row |
|
|
|
// 情况一：流程表单 |
|
if (row.formType === 10) { |
|
// 设置表单 |
|
// setConfAndFields2(detailForm, row.formConf, row.formFields) |
|
// 加载流程图 |
|
bpmnXML.value = await getProcessDefinitionBpmnXML(row.id) |
|
// 情况二：业务表单 |
|
} |
|
else if (row.formCustomCreatePath) { |
|
await go({ |
|
path: row.formCustomCreatePath, |
|
}) |
|
// 这里暂时无需加载流程图，因为跳出到另外个 Tab； |
|
} |
|
} |
|
|
|
/** 提交按钮 */ |
|
async function submitForm(formData) { |
|
// if (!fApi.value || !selectProcessInstance.value) |
|
// return |
|
|
|
// // 提交请求 |
|
// fApi.value.btn.loading(true) |
|
try { |
|
await createProcessInstance({ |
|
processDefinitionId: selectProcessInstance.value.id, |
|
variables: formData, |
|
}) |
|
// 提示 |
|
createMessage.success('发起流程成功') |
|
go() |
|
} |
|
finally { |
|
// fApi.value.btn.loading(false) |
|
} |
|
} |
|
</script> |
|
|
|
<template> |
|
<PageWrapper> |
|
<div class="step-form-form"> |
|
<Steps :current="current"> |
|
<Steps.Step title="选择流程" /> |
|
<Steps.Step title="流程提交" /> |
|
</Steps> |
|
</div> |
|
<div class="m-5"> |
|
<BasicTable v-if="!selectProcessInstance" @register="registerTable"> |
|
<template #bodyCell="{ column, record }"> |
|
<template v-if="column.key === 'action'"> |
|
<TableAction |
|
:actions="[ |
|
{ icon: IconEnum.SEND, label: '选择', onClick: handleSelect.bind(null, record) }, |
|
]" |
|
/> |
|
</template> |
|
</template> |
|
</BasicTable> |
|
<div v-if="selectProcessInstance"> |
|
<Card :title="`申请信息——【${selectProcessInstance.name}】`"> |
|
<template #extra> |
|
<a-button type="primary" @click="selectProcessInstance = undefined"> |
|
<Icon icon="ep:delete" /> 选择其它流程 |
|
</a-button> |
|
</template> |
|
<p>表单</p> |
|
<a-button type="primary" @click="submitForm"> |
|
提交 |
|
</a-button> |
|
<p>流程图</p> |
|
</Card> |
|
</div> |
|
</div> |
|
</PageWrapper> |
|
</template> |
|
|
|
<style lang="less" scoped> |
|
.step-form-form { |
|
width: 750px; |
|
margin: 0 auto; |
|
margin-top: 10px; |
|
} |
|
</style>
|
|
|