73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<div class="scale">
|
|
<el-button icon="Plus" size="mini" @click.stop="scale += 10" :disabled="scale >= 150" circle></el-button>
|
|
<span>{{ scale }}%</span>
|
|
<el-button icon="Minus" size="mini" @click.stop="scale -= 10" :disabled="scale <= 40" circle></el-button>
|
|
</div>
|
|
<div :style="'transform: scale('+ scale / 100 +');'">
|
|
<div id="processTree">
|
|
<process-tree ref="processTree" mode="design" id-name="processTree" @selectedNode="nodeSelected"/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<el-drawer :title="selectedNode.name" v-model="showConfig"
|
|
:modal-append-to-body="false"
|
|
:size="selectedNode.type === 'CONDITION' ? '600px':'500px'"
|
|
direction="rtl">
|
|
<template #header>
|
|
<div>
|
|
<el-input v-model="selectedNode.name" size="medium" v-show="showInput"
|
|
style="width: 300px" @blur="showInput = false"></el-input>
|
|
<el-link v-show="!showInput" @click="showInput = true" style="font-size: medium">
|
|
<i class="el-icon-edit" style="margin-right: 10px"></i>
|
|
{{ selectedNode.name }}
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div slot="title">
|
|
</div>
|
|
<div class="node-config-content">
|
|
<node-config v-if="showConfig" @initRender="initRender"/>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
|
|
import NodeConfig from '@/views/workflow/process/config/NodeConfig.vue'
|
|
import {computed, ref, defineExpose} from 'vue';
|
|
import {useProcessStore} from '@/stores/processStore.js'
|
|
|
|
const processStore = useProcessStore()
|
|
const scale = ref(100)
|
|
const showConfig = ref(false)
|
|
const processTree = ref()
|
|
const showInput = ref(false)
|
|
const selectedNode = computed(() => {
|
|
return processStore.getSelectedNode()
|
|
})
|
|
|
|
const nodeSelected = (node) => {
|
|
showConfig.value = true
|
|
}
|
|
const initRender = () => {
|
|
nextTick(() => {
|
|
processTree.value.init()
|
|
})
|
|
}
|
|
|
|
const validate = () => {
|
|
return processTree.value.validateProcess()
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
validate,
|
|
initRender
|
|
})
|
|
|
|
</script>
|