|
|
|
@ -4,7 +4,6 @@
|
|
|
|
|
import { FlowNode } from './nodes/Node/index'
|
|
|
|
|
import useNode from './hooks/useNode'
|
|
|
|
|
import { computed, onUnmounted, provide, ref } from 'vue'
|
|
|
|
|
import { Plus, Minus, Download, Sunny, Moon } from '@element-plus/icons-vue'
|
|
|
|
|
import { useVModels } from '@vueuse/core'
|
|
|
|
|
import { Field } from '/@/components/Render/interface'
|
|
|
|
|
import { downloadXml } from '../api'
|
|
|
|
@ -22,13 +21,6 @@
|
|
|
|
|
const zoom = ref(100)
|
|
|
|
|
const getScale = computed(() => zoom.value / 100)
|
|
|
|
|
const isDark = ref<boolean>(false)
|
|
|
|
|
const handleToggleDark = () => {
|
|
|
|
|
if (isDark.value) {
|
|
|
|
|
document.documentElement.classList.add('dark')
|
|
|
|
|
} else {
|
|
|
|
|
document.documentElement.classList.remove('dark')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const openPenal = (node: FlowNode) => {
|
|
|
|
|
nodePenalRef.value?.open(node)
|
|
|
|
|
}
|
|
|
|
@ -88,22 +80,11 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="designer-container">
|
|
|
|
|
<!-- <div class="dark">
|
|
|
|
|
<el-switch
|
|
|
|
|
inline-prompt
|
|
|
|
|
:active-icon="Sunny"
|
|
|
|
|
:inactive-icon="Moon"
|
|
|
|
|
@change="handleToggleDark"
|
|
|
|
|
v-model="isDark"
|
|
|
|
|
/>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!--放大/缩小-->
|
|
|
|
|
<div class="zoom">
|
|
|
|
|
<el-button :icon="Plus" :disabled="zoom >= 170" circle @click="zoom += 10"></el-button>
|
|
|
|
|
<el-button :disabled="zoom >= 170" circle @click="zoom += 10">放大</el-button>
|
|
|
|
|
<span>{{ zoom }}%</span>
|
|
|
|
|
<el-button :icon="Minus" circle :disabled="zoom <= 50" @click="zoom -= 10"></el-button>
|
|
|
|
|
<!-- <el-button @click="validate">校验</el-button>
|
|
|
|
|
<el-button @click="converterBpmn" type="primary" :icon="Download">转bpmn</el-button> -->
|
|
|
|
|
<el-button circle :disabled="zoom <= 50" @click="zoom -= 10">缩小</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!--流程树-->
|
|
|
|
|
<div class="node-container">
|
|
|
|
|