KintoneAppBuilder/frontend/src/components/left/EventTree.vue

<template>
  <!-- <div class="q-pa-md q-gutter-sm"> -->
    <q-tree
      :nodes="store.eventTree.screens"
      node-key="eventId"
      children-key="events"
      no-connectors
      v-model:expanded="store.expandedScreen"
      :dense="true"
      :ref="tree"
    >
      <template v-slot:header-EVENT="prop">
        <div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
          <q-icon v-if="prop.node.eventId"
                  name="play_circle"
                  :color="prop.node.hasFlow?'green':'grey'"
                  size="16px" class="q-mr-sm">
                  </q-icon>
          <div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
          <q-space></q-space>
          <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
        </div>
      </template>
      <template v-slot:header-CHANGE="prop" >
        <div class="row col items-start no-wrap event-node" >
          <div class="no-wrap">{{ prop.node.label }}</div>
          <q-space></q-space>
          <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
        </div>
      </template>
    </q-tree>
    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
    </show-dialog>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { QTree } from 'quasar';
export default defineComponent({
  name: 'EventTree',
  components: {
    ShowDialog,
    FieldSelect,
  },
  setup(props, context) {
    const appDg = ref();
    const store = useFlowEditorStore();
    const showDialog = ref(false);
    const tree = ref<QTree>();
    // const eventTree=ref(kintoneEvents);
    // const selectedFlow = store.currentFlow;

    // const expanded=ref();
    const selectedEvent = ref<IKintoneEvent|null>(null);
    const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
    const isFieldChange = (node:IKintoneEventNode)=>{
      return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
    }
    //フィールド値変更イベント追加
    const closeDg = (val:string) => {
      if (val == 'OK') {
        if(!selectedChangeEvent.value){return;}
        const field = appDg.value.selected[0];
        const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
        if(store.eventTree.findEventById(eventid)){
          return;
        }
        selectedChangeEvent.value?.events.push(
          new kintoneEvent(
            field.label,
            eventid,
            selectedChangeEvent.value.eventId)
        );
        tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
        tree.value?.expandAll();
      }
    };
    const addChangeEvent=(node:IKintoneEventGroup)=>{
      if(store.appInfo===undefined){
          return;
      }
      selectedChangeEvent.value=node;
      showDialog.value=true;
    }
    const onSelected=(node:IKintoneEvent)=>{
        if(!node.eventId){
          return;
        }
        selectedEvent.value=node;
        if(store.appInfo===undefined){
          return;
        }
        const screen = store.eventTree.findEventById(node.parentId);
        let flow =store.findFlowByEventId(node.eventId);
        let screenName=screen!==null?screen.label:"";
        let nodeLabel = node.label;
        // if(isFieldChange(node)){
        //   screenName=nodeLabel;
        //   nodeLabel=`${node.label}の値を変更したとき`;
        // }
        if(flow!==undefined && flow!==null ){
          store.selectFlow(flow);
        }else{
          const root = new RootAction(node.eventId,screenName,nodeLabel)
            const flow =new ActionFlow(root);
            store.flows?.push(flow);
            store.selectFlow(flow);
            selectedEvent.value.flowData=flow;
        }
    };
    return {
      // eventTree,
      // expanded,
      appDg,
      tree,
      showDialog,
      isFieldChange,
      onSelected,
      selectedEvent,
      addChangeEvent,
      closeDg,
      store
    }
  }
});
</script>
<style lang="scss">
.nowrap{
  flex-wrap:nowarp;
  text-wrap:nowarp;
}
.event-node{
  cursor:pointer;
}
.selected-node{
  color: $primary;
  font-weight: bolder;
}
.event-node:hover{
  background-color: $light-blue-1;
}

</style>