FlowEditor初期合体

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>

frontend/src/pages/testFlow.vue

@@ -0,0 +1,95 @@
+<template>
+ <div class="q-pa-md q-gutter-sm">
+    <q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="open('right')" />
+    <!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
+
+    <q-dialog v-model="dialog" :position="position">
+      <q-card class="column full-height" style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">プロパティ</div>
+        </q-card-section>
+
+        <q-card-section class="col q-pt-none">
+          <ActionProperty :jsonData="jsonData" :jsonValue="jsonValue"/>
+        </q-card-section>
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat label="Save" v-close-popup  @click="save"/>
+          <q-btn flat label="Cancel" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref,onMounted } from 'vue'
+import ActionProperty from 'components/right/ActionProperty.vue';
+    const dialog = ref(false)
+    const position = ref('top')
+
+    const jsonData = {
+        elements: [
+          {
+            component: 'InputText',
+            props: {
+              name:'1',
+              placeholder: 'Enter some text',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'SelectBox',
+            props: {
+              name:'2',
+              placeholder: 'Choose an option',
+              modelValue: '',
+              options: [
+                'option1',
+                'option2',
+                'option3'
+              ],
+            },
+          },
+          {
+            component: 'DatePicker',
+            props: {
+              name:'3',
+              placeholder: 'Choose a date',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'FieldInput',
+            props: {
+              name:'4',
+              placeholder: 'Choose a field',
+              modelValue: '',
+            },
+          },
+        ]
+      };
+
+      let jsonValue = {
+        1:'abc',
+        2:'option2',
+        3:'2023/09/04',
+        4:'6666'
+      };
+
+    const open =  (pos:string) => {
+      position.value = pos
+      dialog.value = true
+    };
+
+    const save = async () =>{
+
+      jsonData.elements.forEach(property => {
+        if(jsonValue != undefined)
+        {
+          jsonValue[property.props.name] = property.props.modelValue;
+        }
+      });
+      console.log(jsonValue);
+
+    }
+</script>