111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<script setup>
|
|
/**
|
|
* 流程设计（工作流设计器）—— 编辑页容器（《FMS审批流程交互重构设计》§4.2 / §4.3）。
|
|
*
|
|
* 三种进入方式：
|
|
* - 不带参数：新建，先走新建向导收集最少元数据，不直接给空白画布；
|
|
* - 带 ?id=<流程编码>：从 wf_definition / wf_version / wf_binding / wf_node /
|
|
* wf_edge / wf_actor_rule 读回已有流程；
|
|
* - 读回失败：退回空草稿并提示，避免整页白屏。
|
|
*
|
|
* 草稿的加载与「未保存就离开」的拦截在这里，草稿本身归 WorkflowDesigner 持有。
|
|
*/
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
|
|
import { Message, Modal, Spin } from '@/components/ui'
|
|
import { WorkflowCreateDialog, WorkflowDesigner } from './designer'
|
|
import { loadBindableModules, loadWorkflowDraft } from './designer/api'
|
|
import { createDefinitionDraft, createEmptyDraft } from './designer/domain'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
/** 流程编码：来自路由 query，非用户自由输入，仍做一次净化 */
|
|
const definitionId = computed(() => String(route.query.id || '').trim())
|
|
|
|
const loading = ref(true)
|
|
const draft = ref(null)
|
|
const designerRef = ref(null)
|
|
const createOpen = ref(false)
|
|
const modules = ref([])
|
|
|
|
onMounted(async () => {
|
|
if (!definitionId.value) {
|
|
// 新建：先收集最少元数据（§4.2）。模块清单读取失败不阻塞向导，只影响下拉可选项。
|
|
loadBindableModules()
|
|
.then((rows) => {
|
|
modules.value = rows
|
|
})
|
|
.catch(() => {})
|
|
createOpen.value = true
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
try {
|
|
draft.value = await loadWorkflowDraft(definitionId.value)
|
|
} catch (error) {
|
|
Message.error(`读取流程失败：${error?.message || error}`)
|
|
draft.value = createEmptyDraft()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
/** 向导确认：产出领域草稿直接进编辑页；落库要等流程服务（§6.3） */
|
|
function onCreate(payload) {
|
|
draft.value = createDefinitionDraft(payload)
|
|
Message.info('流程服务未接入：草稿先在本页编辑，保存需要后端工作流服务')
|
|
}
|
|
|
|
function onBack() {
|
|
router.push({ name: 'system-workflow' })
|
|
}
|
|
|
|
/** 向导被取消且还没有草稿时，回到列表，不留在空白页 */
|
|
function onCreateOpenChange(open) {
|
|
createOpen.value = open
|
|
if (!open && !draft.value) onBack()
|
|
}
|
|
|
|
/** 未保存的改动离开前确认（§5.5） */
|
|
onBeforeRouteLeave(() => {
|
|
if (!designerRef.value?.isDirty) return true
|
|
return new Promise((resolve) => {
|
|
Modal.confirm({
|
|
title: '离开流程设计？',
|
|
content: '草稿还有未保存的改动，离开后会丢失。',
|
|
okText: '仍然离开',
|
|
onOk: () => resolve(true),
|
|
onCancel: () => resolve(false),
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fms-page">
|
|
<div v-if="loading" class="workflow-design__loading">
|
|
<Spin />
|
|
</div>
|
|
|
|
<WorkflowDesigner v-else-if="draft" ref="designerRef" :initial-draft="draft" @back="onBack" />
|
|
|
|
<WorkflowCreateDialog
|
|
:open="createOpen"
|
|
:modules="modules"
|
|
@update:open="onCreateOpenChange"
|
|
@confirm="onCreate"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.workflow-design__loading {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|