20260923165454

code/fms-workflow-refactor-backup-20260923/workflow/design.vue

@@ -0,0 +1,110 @@
+<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>