124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<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>
|