qqflowengine-frontend/src/views/flow/designer/index.vue

<template>
  <div class="designer-container">
    <!-- 流程信息栏（新增/编辑模式显示） -->
    <div v-if="flowInfoVisible" class="flow-info-bar">
      <el-tag v-if="mode === 'create'" type="primary">新增流程</el-tag>
      <el-tag v-else-if="mode === 'edit'" type="warning">编辑流程</el-tag>
      <span class="flow-info-item"><strong>编码：</strong>{{ flowCode }}</span>
      <span class="flow-info-item"><strong>名称：</strong>{{ flowName }}</span>
      <span v-if="flowCategory" class="flow-info-item"><strong>分类：</strong>{{ flowCategory }}</span>
    </div>

    <DesignerCanvas
      :set-container="setContainer"
      @drop="handleDrop"
      @save="handleSave"
      @clear="handleClear"
      @back="goBack"
    />

    <DesignerPropertyPanel
      :selected-node="selectedNode"
      :node-props="nodeProps"
      :outgoing-edges="outgoingEdges"
      :role-list="roleList"
      :get-edge-target-name="getEdgeTargetName"
      :update-node-name="updateNodeName"
      :on-default-change="onDefaultChange"
      :on-branch-blur="onBranchBlur"
    />

    <DesignerSaveDialog
      :visible="saveDialogVisible"
      @update:visible="saveDialogVisible = $event"
      :option-dialog-visible="optionDialogVisible"
      @update:optionDialogVisible="optionDialogVisible = $event"
      :save-form="saveForm"
      :save-form-rules="saveFormRules"
      :form-fields="formFields"
      :field-type-options="fieldTypeOptions"
      :option-editing-field="optionEditingField"
      :option-list="optionList"
      @submit="submitSave"
      @add-field="addFormField"
      @remove-field="removeFormField"
      @open-option-dialog="openOptionDialog"
      @add-option="addOption"
      @remove-option="removeOption"
      @save-options="saveOptions"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
import { useFlowDesigner } from './useFlowDesigner'
import DesignerCanvas from './DesignerCanvas.vue'
import DesignerPropertyPanel from './DesignerPropertyPanel.vue'
import DesignerSaveDialog from './DesignerSaveDialog.vue'

const lfContainer = ref<HTMLDivElement>()

function setContainer(el: Element | ComponentPublicInstance | null) {
  lfContainer.value = el as HTMLDivElement | undefined
}

const {
  mode,
  flowInfoVisible,
  flowCode,
  flowName,
  flowCategory,
  selectedNode,
  nodeProps,
  outgoingEdges,
  roleList,
  getEdgeTargetName,
  updateNodeName,
  onDefaultChange,
  onBranchBlur,
  saveDialogVisible,
  optionDialogVisible,
  saveForm,
  saveFormRules,
  formFields,
  fieldTypeOptions,
  optionEditingField,
  optionList,
  handleDrop,
  handleSave,
  handleClear,
  goBack,
  submitSave,
  addFormField,
  removeFormField,
  openOptionDialog,
  addOption,
  removeOption,
  saveOptions
} = useFlowDesigner(lfContainer)
</script>

<style scoped>
.designer-container {
  display: flex;
  height: calc(100vh - 100px);
  background: #fff;
}
.flow-info-bar {
  position: absolute;
  top: 60px;
  left: 220px;
  right: 0;
  height: 40px;
  background: #f0f9ff;
  border-bottom: 1px solid #d9ecff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  z-index: 100;
}
.flow-info-item {
  font-size: 13px;
  color: #303133;
}
</style>