init

src/views/workflow/process/ProcessDesign.vue

@@ -0,0 +1,72 @@
+<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 './ProcessTree.vue'
+import NodeConfig from './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>