103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
|
<q-page>
|
|
|
|
<div class="flowchart">
|
|
<node-item v-for="(node,) in refFlow.actionNodes" :key="node.id"
|
|
:isSelected="node===state.activeNode" :actionNode="node"
|
|
@addNode="addNode"
|
|
@nodeSelected="onNodeSelected"
|
|
@nodeEdit="onNodeEdit"
|
|
@deleteNode="onDeleteNode"
|
|
@deleteAllNextNodes="onDeleteAllNextNodes"
|
|
></node-item>
|
|
</div>
|
|
</q-page>
|
|
<PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
|
|
<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,reactive,computed} from 'vue';
|
|
import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
|
|
import NodeItem from 'src/components/main/NodeItem.vue';
|
|
import ShowDialog from 'components/ShowDialog.vue';
|
|
import ActionSelect from 'components/ActionSelect.vue';
|
|
import PropertyPanel from 'components/right/PropertyPanel.vue';
|
|
|
|
|
|
const rootNode:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
|
|
const actionFlow: ActionFlow = new ActionFlow(rootNode);
|
|
const saibanProps:IActionProperty[]=[{
|
|
component:"InputText",
|
|
props:{
|
|
displayName:"フォーマット",
|
|
modelValue:"",
|
|
name:"format",
|
|
placeholder:"フォーマットを入力してください",
|
|
}
|
|
},{
|
|
component:"FieldInput",
|
|
props:{
|
|
displayName:"採番項目",
|
|
modelValue:"",
|
|
name:"field",
|
|
placeholder:"採番項目を選択してください",
|
|
}
|
|
}];
|
|
|
|
actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する','',[],saibanProps));
|
|
actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
|
|
const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
|
|
// actionFlow.addNode(new ActionNode('入力データ取得','住所を取得する',''),branchNode,'はい');
|
|
actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存しない',''),branchNode,'いいえ' );
|
|
|
|
// ref関数を使ってtemplateとバインド
|
|
const state=reactive({
|
|
activeNode:rootNode,
|
|
})
|
|
|
|
const refFlow = ref(actionFlow);
|
|
const showAddAction=ref(false);
|
|
const drawerRight=ref(false);
|
|
|
|
const addActionNode=(action:IActionNode)=>{
|
|
refFlow.value.actionNodes.push(action);
|
|
}
|
|
|
|
const addNode=(node:IActionNode,inputPoint:string)=>{
|
|
showAddAction.value=true;
|
|
}
|
|
|
|
const onNodeSelected=(node:IActionNode)=>{
|
|
//右パネルが開いている場合、自動閉じる
|
|
if(drawerRight.value && state.activeNode.id!==node.id){
|
|
drawerRight.value=false;
|
|
}
|
|
state.activeNode = node;
|
|
}
|
|
|
|
const onNodeEdit=(node:IActionNode)=>{
|
|
state.activeNode = node;
|
|
drawerRight.value=true;
|
|
}
|
|
|
|
const onDeleteNode=(node:IActionNode)=>{
|
|
refFlow.value.removeNode(node);
|
|
}
|
|
|
|
const onDeleteAllNextNodes=(node:IActionNode)=>{
|
|
refFlow.value.removeAllNext(node.id);
|
|
}
|
|
const closeDg=(val :any)=>{
|
|
console.log("Dialog closed->",val);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flowchart{
|
|
padding-top: 10px;
|
|
}
|
|
</style>
|