flowChart初期実装

frontend/src/pages/FlowChartTest.vue

@@ -0,0 +1,43 @@
+<template>
+  <q-page>
+      <div class="flowchart">
+        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index" :actionNode="node" @addNode="addNode"></node-item>
+      </div>
+  </q-page>
+  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+      <action-select ref="appDg" name="アクション" type="single"></action-select>
+  </show-dialog>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction } from 'src/types/ActionTypes';
+import NodeItem from 'src/components/main/NodeItem.vue';
+import ShowDialog from 'components/ShowDialog.vue';
+import ActionSelect from 'components/ActionSelect.vue';
+
+const rootAction:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
+const actionFlow: ActionFlow = new ActionFlow(rootAction);
+actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する',''));
+actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
+const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
+actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存しない',''),branchNode,'いいえ' );
+
+// ref関数を使ってtemplateとバインド
+const refFlow = ref(actionFlow);
+const showAddAction=ref(false);
+
+const addActionNode=(action:IActionNode)=>{
+  refFlow.value.actionNodes.push(action);
+}
+
+const addNode=(node:IActionNode,inputPoint:string)=>{
+  showAddAction.value=true;
+}
+</script>
+
+<style lang="scss">
+  .flowchart{
+    padding-top: 10px;
+  }
+</style>