UI美化

frontend/src/pages/FlowChartTest.vue

@@ -1,7 +1,9 @@
 <template>
   <q-page>
       <div class="flowchart">
-        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index" :actionNode="node" @addNode="addNode"></node-item>
+        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index"
+         :isSelected="node===activeNode" :actionNode="node"
+         @addNode="addNode" @nodeSelected="onNodeSelected"></node-item>
       </div>
   </q-page>
   <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
@@ -16,8 +18,8 @@ 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);
+const rootNode:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
+const actionFlow: ActionFlow = new ActionFlow(rootNode);
 actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する',''));
 actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
 const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
@@ -26,6 +28,7 @@ actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存
 // ref関数を使ってtemplateとバインド
 const refFlow = ref(actionFlow);
 const showAddAction=ref(false);
+const activeNode =ref(rootNode);
 
 const addActionNode=(action:IActionNode)=>{
   refFlow.value.actionNodes.push(action);
@@ -34,6 +37,14 @@ const addActionNode=(action:IActionNode)=>{
 const addNode=(node:IActionNode,inputPoint:string)=>{
   showAddAction.value=true;
 }
+
+const onNodeSelected=(node:IActionNode)=>{
+  activeNode.value=node;
+}
+
+const closeDg=(val :any)=>{
+  console.log("Dialog closed->",val);
+}
 </script>
 
 <style lang="scss">