| | |
|---|
| | | import { computed, inject, nextTick, ref } from 'vue'; |
|---|
| | | |
|---|
| | | import { BpmModelType } from '@vben/constants'; |
|---|
| | | import { IconifyIcon } from '@vben/icons'; |
|---|
| | | |
|---|
| | | import BpmModelEditor from './bpm-model-editor.vue'; |
|---|
| | | import SimpleModelDesign from './simple-model-design.vue'; |
|---|
| | |
|---|
| | | |
|---|
| | | /** 是否显示设计器 */ |
|---|
| | | const showDesigner = computed(() => { |
|---|
| | | return Boolean(modelData.value?.key && modelData.value?.name); |
|---|
| | | const data = modelData.value; |
|---|
| | | if (!data?.name) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // BPMN 设计器需要流程标识 key；简易设计器只需要流程名称 |
|---|
| | | if (data.type === BpmModelType.BPMN) { |
|---|
| | | return Boolean(data.key); |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | defineExpose({ validate }); |
|---|
| | |
|---|
| | | ref="simpleDesign" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | <!-- 未填写流程名称时给出提示，避免页面空白 --> |
|---|
| | | <div |
|---|
| | | v-if="!showDesigner" |
|---|
| | | class="flex h-64 flex-col items-center justify-center gap-2 text-gray-400" |
|---|
| | | > |
|---|
| | | <IconifyIcon icon="lucide:info" class="size-8" /> |
|---|
| | | <span>请先在「基本信息」中填写流程名称，再进行流程设计</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
