条件付きコンポーネントは'source'でappidを受け取ることができる。

feat:データ集計処理作成
細部の問題の修正
2024-05-25 04:15:09 +09:00 · 2024-05-24 09:20:19 +09:00 · 2024-05-20 03:38:27 +09:00 · 2024-05-17 23:32:14 +09:00 · 2024-05-17 14:41:15 +09:00 · 2024-05-13 06:56:44 +09:00
24 changed files with 819 additions and 735 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="ja-jp">
  <head>
    <title><%= productName %></title>
-
    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,8 +17,9 @@
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
+    "@vueuse/core": "^10.9.0",
    "axios": "^1.4.0",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
    "quasar": "^2.6.0",
    "uuid": "^9.0.0",
    "vue": "^3.0.0",
--- a/frontend/src/boot/error-handler.ts
+++ b/frontend/src/boot/error-handler.ts
@@ -4,6 +4,7 @@ import { Router } from 'vue-router';
 import { App } from 'vue';

 export default boot(({ app, router }: { app: App<Element>; router: Router }) => {
+  document.documentElement.lang="ja-JP";
  app.config.errorHandler = (err: any, instance: any, info: string) => {
    if (err.response && err.response.status === 401) {
      // 認証エラーの場合再ログインする
--- a/frontend/src/components/ConditionEditor/ConditionEditor.vue
+++ b/frontend/src/components/ConditionEditor/ConditionEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
+  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="50vw" min-height="60vh">
    <template v-slot:toolbar>
      <q-btn flat round dense icon="more_vert" >
      <q-menu  auto-close anchor="bottom start">
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -6,14 +6,14 @@
        {{ selectedObject.name }}
      </q-chip>
      <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
-        {{ selectedObject.name }}
+        {{ selectedObject.name.name }}
      </q-chip>
    </template>
   <template v-slot:append>
    <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
    </template>
  </q-field>
-  <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
+  <show-dialog v-model:visible="show" name="設定項目一覧" @close="closeDg" min-width="400px">
    <template v-slot:toolbar>
        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
@@ -88,9 +88,9 @@
 .condition-object{
  min-width: 200px;
  max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
 }
 .selected-obj{
-  margin: 0px;
+  margin: 0 2px;
 }
 </style>
--- a/frontend/src/components/ConditionEditor/NodeCondition.vue
+++ b/frontend/src/components/ConditionEditor/NodeCondition.vue
@@ -66,7 +66,7 @@
          </div>
          <!-- condition -->
          <div @click.stop @keypress.stop v-else >
-            <div class="row no-wrap items-center">
+            <div class="row no-wrap items-center q-my-xs">
              <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"></ConditionObject>
              <q-select v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
              <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
@@ -257,12 +257,12 @@ export default defineComponent( {
 .condition-value{
  min-width: 200px;
  max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
 }
 .operator{
  min-width: 150px;
  max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
  text-align: center;
  font-size: 12pt;
 }
--- a/frontend/src/components/ConditionObjects.vue
+++ b/frontend/src/components/ConditionObjects.vue
@@ -19,7 +19,7 @@

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="fields">
-              <field-list v-model="selected" type="single" :filter="filter" :appId="appId"></field-list>
+              <field-list v-model="selected" type="single" :filter="filter" :appId="sourceApp ? sourceApp :appId " :fields="sourceFields"></field-list>
            </q-tab-panel>

          <q-tab-panel name="vars" >
@@ -30,7 +30,7 @@
 </div>
 </template>
 <script lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, inject } from 'vue'
 import FieldList from './FieldList.vue';
 import VariableList from './VariableList.vue';

@@ -48,10 +48,14 @@ export default {
    filter:String
  },
  setup(props) {
+    const selected = ref([]);
+    console.log(selected);
    
    return {
+      sourceFields : inject('sourceFields'),
+      sourceApp : inject('sourceApp'),
      tab: ref('fields'),
-      selected: ref([])
+      selected
    }
  },

--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -1,19 +1,18 @@
 <template>
  <div class="q-pa-md">
-    <q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type"
-    :selected="modelValue"
-    @update:selected="$emit('update:modelValue', $event)"
-    :filter="filter"
-    :columns="columns" :rows="rows" />
+    <q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type" :selected="modelValue"
+      @update:selected="$emit('update:modelValue', $event)" :filter="filter" :columns="columns" :rows="rows" />
  </div>
 </template>
-<script>
-import { ref, onMounted, reactive } from 'vue'
+<script lang="ts">
+import { useAsyncState } from '@vueuse/core';
 import { api } from 'boot/axios';
+import { computed } from 'vue';

 export default {
  name: 'FieldList',
  props: {
+    fields: Array,
    name: String,
    type: String,
    appId: Number,
@@ -24,27 +23,28 @@ export default {
    'update:modelValue'
  ],
  setup(props) {
-    const isLoaded = ref(false);
+    // const rows = ref([]);
+    // const isLoaded = ref(false);
    const columns = [
-      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: 'name', sortable: true },
      { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
      { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
    ]
-    const rows = reactive([]);
-    onMounted(async () => {
-      const res = await api.get('api/v1/appfields', {
+
+    const { state : rows, isReady: isLoaded, isLoading } = useAsyncState((args) => {
+      if (props.fields) {
+        return props.fields.map(f => ({ name: f.label, objectType: 'field', ...f }));
+      } else {
+        return api.get('api/v1/appfields', {
          params: {
            app: props.appId
          }
+        }).then(res => {
+          console.log(res);
+          return Object.values(res.data.properties).map(f => ({ name: f.label, objectType: 'field', ...f }));
        });
-      let fields = res.data.properties;
-      console.log(fields);
-      Object.keys(fields).forEach((key) => {
-        const fld = fields[key];
-        rows.push({ name: fld.label, objectType: 'field', ...fld });
-      });
-      isLoaded.value = true;
-    });
+      }
+    }, [{ name: '', objectType: '', type: '', code: '', label: '' }])
   
    return {
      columns,
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -1,7 +1,7 @@
 <template>
  <!-- <div class="q-pa-md q-gutter-sm" > -->
    <q-dialog :model-value="visible" persistent bordered >
-      <q-card :style="cardStyle"  style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
+      <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
        <q-toolbar class="bg-grey-4">
          <q-toolbar-title>{{ name }}</q-toolbar-title>
          <q-space></q-space>
--- a/frontend/src/components/VariableList.vue
+++ b/frontend/src/components/VariableList.vue
@@ -1,14 +1,13 @@
 <template>
  <div class="q-pa-md">
-    <q-table flat bordered row-key="name" :selection="type"
-    :selected="modelValue"
-    @update:selected="$emit('update:modelValue', $event)"
-    :columns="columns" :rows="rows" />
+    <q-table flat bordered row-key="id" :selection="type" :selected="modelValue"
+      @update:selected="$emit('update:modelValue', $event)" :columns="columns" :rows="rows" />
  </div>
 </template>
 <script lang="ts">
-import { ref, reactive, PropType, compile } from 'vue';
-import {IActionNode,IActionVariable} from '../types/ActionTypes';
+import { PropType, reactive } from 'vue';
+import { IActionVariable } from '../types/ActionTypes';
+import { v4 as uuidv4 } from 'uuid';

 export default {
  name: 'VariableList',
@@ -26,13 +25,30 @@ export default {
    'update:modelValue'
  ],
  setup(props) {
+    const variableName = (field) => {
+      const name = field.name;
+      return name.name;
+    }
    const columns = [
      { name: 'actionName', label: 'アクション名', align: 'left', field: 'actionName', sortable: true },
      { name: 'displayName', label: '変数表示名', align: 'left', field: 'displayName', sortable: true },
-    { name: 'name', label: '変数名', align: 'left',field: 'name',required: true, sortable: true }
+      { name: 'name', label: '変数名', align: 'left', field: variableName, required: true, sortable: true }
    ];
-    const rows= props.vars.map((v)=>{
-      return {objectType:'variable',...v};
+
+    const rows = props.vars.flatMap((v) => {
+      if (v.name.vars && v.name.vars.length > 0) {
+        return v.name.vars
+          .filter(o => o.vName && o.logicalOperator && o.field)
+          .map(o => ({
+            id: uuidv4(),
+            objectType: 'variable',
+            name: { name: `${v.name.name}.${o.vName}` },
+            actionName: v.name.actionName,
+            displayName: v.name.displayName
+          }));
+      } else {
+        return [{ objectType: 'variable', ...v }];
+      }
    });

    return {
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -1,55 +1,48 @@
 <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">
+    <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 :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
-        <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
-          class="q-mr-sm">
+        <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" @click="onSelected(prop.node)"
-          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
-            prop.node.label }}</div>
+          <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-center no-wrap event-node">
+        <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>
-    <template v-slot:header-DELETABLE="prop">
-      <div class="row col items-center event-node">
-        <div class="row col items-center" @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>{{ prop.node.label }}</div>
-        </div>
-        <div>
-          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
-            @click="deleteEvent(prop.node)"></q-btn>
-        </div>
+          <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">
+    <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 { QTree } from 'quasar';
-import { ActionFlow, RootAction } from 'src/types/ActionTypes';
+import { defineComponent, computed, ref } from 'vue';
+import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
+import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import { defineComponent, ref } from 'vue';
-import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
-import FieldSelect from '../FieldSelect.vue';
+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: {
@@ -79,12 +72,12 @@ export default defineComponent({
        if(store.eventTree.findEventById(eventid)){
          return;
        }
-        selectedChangeEvent.value?.events.push({
-          eventId: eventid,
-          label: field.name,
-          parentId: selectedChangeEvent.value.eventId,
-          header: 'DELETABLE'
-        });
+        selectedChangeEvent.value?.events.push(
+          new kintoneEvent(
+            field.label,
+            eventid,
+            selectedChangeEvent.value.eventId)
+        );
        tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
        tree.value?.expandAll();
      }
@@ -96,17 +89,6 @@ export default defineComponent({
      selectedChangeEvent.value=node;
      showDialog.value=true;
    }
-
-    const deleteEvent = (node: IKintoneEvent) => {
-      if (!node.eventId) {
-        return;
-      }
-      store.deleteStoreEventAndFlow(node);
-      store.selectFlow(undefined)
-      console.log(store.selectedFlow);
-      
-    }
-
    const onSelected=(node:IKintoneEvent)=>{
        if(!node.eventId){
          return;
@@ -116,7 +98,6 @@ export default defineComponent({
          return;
        }
        const screen = store.eventTree.findEventById(node.parentId);
-
        let flow =store.findFlowByEventId(node.eventId);
        let screenName=screen!==null?screen.label:"";
        let nodeLabel = node.label;
@@ -124,7 +105,6 @@ export default defineComponent({
        //   screenName=nodeLabel;
        //   nodeLabel=`${node.label}の値を変更したとき`;
        // }
-
        if(flow!==undefined && flow!==null ){
          store.selectFlow(flow);
        }else{
@@ -145,7 +125,6 @@ export default defineComponent({
      onSelected,
      selectedEvent,
      addChangeEvent,
-      deleteEvent,
      closeDg,
      store
    }
@@ -157,21 +136,16 @@ export default defineComponent({
  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;
 }

-.delete-btn {
-  margin-right: 5px;
-}
 </style>
+
--- a/frontend/src/components/main/NodeItem.vue
+++ b/frontend/src/components/main/NodeItem.vue
@@ -205,7 +205,7 @@ export default defineComponent({
     */
    const varName =(node:IActionNode)=>{
      const prop = node.actionProps.find((prop) => prop.props.name === "verName");
-      return prop?.props.modelValue;
+      return prop?.props.modelValue.name;
    };
    const copyFlow=()=>{
      context.emit('copyFlow', props.actionNode);
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -128,7 +128,7 @@ interface IAppFields{

 export default defineComponent({
    inheritAttrs:false,
-    name: 'FieldInput',
+    name: 'AppFieldSelect',
    components: {
        ShowDialog,
        FieldSelect,
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -17,10 +17,27 @@
  </div>
 </template>

+
+
 <script lang="ts">
-  import { defineComponent, ref ,watchEffect,computed,reactive} from 'vue';
-  import { ConditionTree,GroupNode,ConditionNode,LogicalOperator,Operator } from 'app/src/types/Conditions';
-  import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
+import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
+import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
+import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
+
+type Props = {
+  props?: {
+    name: string;
+    modelValue?: {
+      fields: {
+        type: string;
+        label: string;
+        code: string;
+      }[]
+    }
+  }
+};
+
+
 export default defineComponent({
  name: 'FieldInput',
  inheritAttrs: false,
@@ -28,6 +45,10 @@
    ConditionEditor
  },
  props: {
+    context: {
+      type: Array<Props>,
+      default: '',
+    },
    displayName: {
      type: String,
      default: '',
@@ -48,9 +69,24 @@
      type: String,
      default: null
    },
+    sourceType: {
+      type: String,
+      default: 'field'
+    }
  },

  setup(props, { emit }) {
+    const source = props.context.find(element => element?.props?.name === 'sources')
+    
+    if (source) {
+      if(props.sourceType === 'field'){
+        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+      } else if(props.sourceType === 'app'){
+        console.log('sourceApp', source.props?.modelValue);
+        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
+      }
+    }
+
    const appDg = ref();
    const show = ref(false);
    const tree = reactive(new ConditionTree());
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <q-field :label="displayName" labelColor="primary" stack-label>
+      <template v-slot:control>
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption">
+            <div v-if="processingObjectsInputDisplay && processingObjectsInputDisplay.length>0">
+              <div v-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
+            </div>
+            <div v-else>{{ placeholder }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+    <show-dialog v-model:visible="dgIsShow" name="集計処理" @close="closeDg" min-width="50vw" min-height="60vh">
+      <div class="q-mx-md q-mb-md">
+        <q-input v-model="processingProps.name" type="text" label-color="primary" label="集計結果の変数名"
+          placeholder="集計結果を格納する変数名を入力してください" stack-label />
+      </div>
+
+      <div class="q-mx-md">
+        <div class="row q-col-gutter-x-xs flex-center">
+          <div class="col-5">
+            <div class="q-mx-xs">データソース</div>
+          </div>
+          <div class="col-2">
+            <div class="q-mx-xs">集計計算</div>
+          </div>
+          <div class="col-4">
+            <div class="q-mx-xs">集計結果変数名</div>
+          </div>
+          <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addProcessingObject" />
+          </div>
+        </div>
+        <div class="q-my-sm" v-for="(item, index) in processingObjects" :key="item.id">
+          <div class="row q-col-gutter-x-xs flex-center">
+            <div class="col-5">
+              <ConditionObject v-model="item.field" />
+            </div>
+            <div class="col-2">
+              <q-select v-model="item.logicalOperator" :options="logicalOperators"  outlined dense></q-select>
+            </div>
+            <div class="col-4">
+              <q-input v-model="item.vName" type="text"  outlined dense />
+            </div>
+            <div class="col-1">
+              <q-btn flat round dense icon="delete" size="sm" @click="() => deleteProcessingObject(index)" />
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </show-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
+import ConditionObject from '../ConditionEditor/ConditionObject.vue';
+import ShowDialog from '../ShowDialog.vue';
+
+type Props = {
+  props?: {
+    name: string;
+    modelValue?: {
+      fields: {
+        type: string;
+        label: string;
+        code: string;
+      }[]
+    } | string
+  }
+};
+
+type ProcessingObjectType = {
+  field?: {
+    name: string | {
+      name: string;
+    };
+    objectType: string;
+    type: string;
+    code: string;
+    label: string;
+    noLabel: boolean;
+  };
+  logicalOperator?: string;
+  vName?: string;
+  id: string;
+}
+
+type ValueType = {
+  name: string;
+  actionName: string,
+  displayName: string,
+  vars: ProcessingObjectType[];
+}
+
+export default defineComponent({
+  name: 'DataProcessing',
+  inheritAttrs: false,
+  components: {
+    ShowDialog,
+    ConditionObject,
+  },
+  props: {
+    context: {
+      type: Array<Props>,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object as () => ValueType,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    const source = props.context.find(element => element?.props?.name === 'sources')
+
+    if (source) {
+      provide('sourceFields', computed(() => {
+        const modelValue = source.props?.modelValue;
+        if (modelValue && typeof modelValue !== 'string') {
+          return modelValue.fields;
+        }
+        return null;
+      }));
+    }
+
+    const actionName = props.context.find(element => element?.props?.name === 'displayName')
+
+    const processingProps: ValueType = props.modelValue && props.modelValue.vars
+      ? props.modelValue
+      : reactive({
+        name: '',
+        actionName: actionName?.props?.modelValue as string,
+        displayName: '結果（戻り値）',
+        vars: [{ id: uuidv4() }]
+      });
+
+    const closeDg = () => {
+      emit('update:modelValue', processingProps
+      );
+    }
+
+    const processingObjects = processingProps.vars;
+
+    const deleteProcessingObject = (index: number) => processingObjects.length === 1
+      ? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
+      : processingObjects.splice(index, 1);
+
+    const processingObjectsInputDisplay = computed(() =>
+      processingObjects ?
+        processingObjects
+          .filter(item => item.field && item.logicalOperator && item.vName)
+          .map(item => {
+            const name = typeof item.field?.name === 'string'
+              ? item.field.name
+              : item.field?.name.name;
+            return item.logicalOperator.operator!==''?
+                     `${processingProps.name}.${item.vName} = ${item.logicalOperator.operator}(${name})`
+                    :`${processingProps.name}.${item.vName} = ${name}`
+          })
+        : []
+    );
+    //集計処理方法
+    const logicalOperators = ref([
+      {
+        "operator": "",
+        "label": "なし"
+      },
+      {
+        "operator": "SUM",
+        "label": "合計"
+      },
+      {
+        "operator": "AVG",
+        "label": "平均"
+      },
+      {
+        "operator": "MAX",
+        "label": "最大値"
+      },
+      {
+        "operator": "MIN",
+        "label": "最小値"
+      },
+      {
+        "operator": "COUNT",
+        "label": "カウント"
+      },
+      {
+        "operator": "FIRST",
+        "label": "最初の値"
+      }
+    ]);
+
+    watchEffect(() => {
+      emit('update:modelValue', processingProps);
+    });
+    return {
+      uuidv4,
+      dgIsShow: ref(false),
+      closeDg,
+      processingObjects,
+      processingProps,
+      addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
+      deleteProcessingObject,
+      logicalOperators,
+      processingObjectsInputDisplay,
+    };
+  },
+});
+</script>
+<style lang="scss"></style>
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -1,10 +1,7 @@
 <template>
  <div v-bind="$attrs">
-    <q-input :label="displayName" v-model="inputValue" label-color="primary"
-    :placeholder="placeholder" stack-label
-    :rules="rulesExp"
-    :maxlength="maxLength"
-    >
+    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label
+      :rules="rulesExp" :maxlength="maxLength">
      <template v-slot:append v-if="hint !== ''">
        <q-icon name="help" size="22px" color="blue-8">
          <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
@@ -18,7 +15,7 @@

 <script lang="ts">
 import { kMaxLength } from 'buffer';
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, ref, watchEffect, computed } from 'vue';

 export default defineComponent({
  name: 'InputText',
@@ -50,17 +47,40 @@ export default defineComponent({
      default: undefined
    },
    modelValue: {
-      type: String,
+      // type: Any,
      default: '',
    },
  },

  setup(props, { emit }) {
-    const inputValue = ref(props.modelValue);
-    const rulesExp = props.rules===undefined?null : eval(props.rules);
-    watchEffect(() => {
-      emit('update:modelValue', inputValue.value);
+    const inputValue = computed({
+      get: () => {
+        if (props.modelValue !== null && typeof props.modelValue === 'object' && 'name' in props.modelValue) {
+          return props.modelValue.name;
+        } else {
+          return props.modelValue;
+        }
+      },
+      set: (val) => {
+        if (props.name === 'verName') {
+          // return props.modelValue.name;
+          emit('update:modelValue', { name: val });
+        } else {
+          emit('update:modelValue', val);
+        }
+      },
    });
+    // const inputValue = ref(props.modelValue);
+    const rulesExp = props.rules === undefined ? null : eval(props.rules);
+
+    // const finalValue = computed(() => {
+    // return props.name !== 'verName' ? inputValue.value : {
+    // name: inputValue.value,
+    // };
+    // });
+    // watchEffect(() => {
+    //   emit('update:modelValue', finalValue);
+    // });

    return {
      inputValue,
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div v-for="(item, index) in properties" :key="index" >
-      <component :is="item.component" v-bind="item.props"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
+      <component :is="item.component" v-bind="item.props" :context="properties"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
    </div>
  </div>
 </template>
@@ -21,6 +21,7 @@ import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
 import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
+import DataProcessing from './DataProcessing.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';

 export default defineComponent({
@@ -35,7 +36,8 @@ export default defineComponent({
    ConditionInput,
    EventSetter,
    ColorPicker,
-    NumInput
+    NumInput,
+    DataProcessing
  },
  props: {
    nodeProps: {
@@ -50,7 +52,7 @@ export default defineComponent({
  setup(props, context) {
    const properties=ref(props.nodeProps);
    const connectProps=(props:IProp)=>{
-       const connProps:any={};
+       const connProps:any={context:properties};
       if(props && "connectProps" in props && props.connectProps!=undefined){
          for(let connProp of props.connectProps){
            let targetProp = properties.value.find((prop)=>prop.props.name===connProp.propName);
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,11 +1,12 @@
 <template>
  <div v-bind="$attrs">
-  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
+  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary" :options="options" stack-label
+  :multiple="multiple"/>
 </div>
 </template>

 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { defineComponent,ref,watchEffect,computed } from 'vue';

 export default defineComponent({
  name: 'SelectBox',
@@ -23,20 +24,27 @@ export default defineComponent({
      type: Array,
      required: true,
    },
-    modelValue: {
+    selectType:{
      type:String,
      default:'',
    },
+    modelValue: {
+      type: Object,
+      default: null,
+    },
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);
-
+    const multiple = computed(()=>{
+      return props.selectType==='multiple'
+    });
    watchEffect(() => {
      emit('update:modelValue', selectedValue.value);
    });

    return {
-      selectedValue
+      selectedValue,
+      multiple
    };
  },
 });
--- a/frontend/src/control/flowctrl.ts
+++ b/frontend/src/control/flowctrl.ts
@@ -1,8 +1,11 @@
 import { api } from 'boot/axios';
 import { ActionFlow } from 'src/types/ActionTypes';

-export class FlowCtrl {
-  async getFlows(appId: string): Promise<ActionFlow[]> {
+export class FlowCtrl
+{
+
+  async getFlows(appId:string):Promise<ActionFlow[]>
+  {
      const flows:ActionFlow[]=[];
      try{
        const result = await api.get(`api/flows/${appId}`);
@@ -21,9 +24,10 @@ export class FlowCtrl {
      }
  }

-  async SaveFlow(jsonData: any): Promise<boolean> {
+  async SaveFlow(jsonData:any):Promise<boolean>
+  {
       const result = await api.post('api/flow',jsonData);
-    console.info(result.data);
+       console.info(result.data)
       return true;
  }
  /**
@@ -31,19 +35,10 @@ export class FlowCtrl {
   * @param jsonData
   * @returns
   */
-  async UpdateFlow(jsonData: any): Promise<boolean> {
+  async  UpdateFlow(jsonData:any):Promise<boolean>
+  {
    const result = await api.put('api/flow/' + jsonData.flowid,jsonData);
-    console.info(result.data);
-    return true;
-  }
-  /**
-   * フローを消去する
-   * @param flowId
-   * @returns
-   */
-  async DeleteFlow(flowId: string): Promise<boolean> {
-    const result = await api.delete('api/flow/' + flowId);
-    console.info(result.data);
+    console.info(result.data)
    return true;
  }
  /**
@@ -51,9 +46,12 @@ export class FlowCtrl {
   * @param appid
   * @returns
   */
-  async depoly(appid: string): Promise<boolean> {
+  async depoly(appid:string):Promise<boolean>
+  {
    const result = await api.post(`api/v1/createjstokintone?app=${appid}`);
    console.info(result.data);
    return true;
  }
+
 }
+
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -20,9 +20,10 @@
          </div>
        </q-drawer>
      </div>
-      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
-        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
-        class="expand" />
+      <q-btn flat dense round
+              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
+              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+              @click="drawerLeft=!drawerLeft" class="expand" />
      <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
          <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -194,22 +195,7 @@ const onDeploy = async () => {

 const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
-
-  const deleteFlows = () => {
-    $q.notify({
-      type: 'positive',
-      caption: "通知",
-      message: `削除 ${store.deleteFlowIds.length} イベント`
-    });
-    store.deletebackendFlow();
-  }
-
  if (targetFlow === undefined) {
-    if (store.deleteFlowIds.length > 0) {
-      deleteFlows();
-      return;
-    }
-
    $q.notify({
      type: 'negative',
      caption: "エラー",
@@ -218,9 +204,6 @@ const onSaveFlow = async () => {
    return;
  }
  try {
-    if (store.deleteFlowIds.length > 0) {
-      deleteFlows();
-    }
    saveLoading.value = true;
    await store.saveFlow(targetFlow);
    saveLoading.value = false;
@@ -282,7 +265,6 @@ onMounted(() => {
  top: 50px;
  z-index: 999;
 }
-
 .expand{
  position: fixed;
  left: 0px;
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -12,11 +12,10 @@ export interface FlowEditorState {
  eventTree:KintoneEventManager;
  selectedEvent:IKintoneEvent|undefined;
  expandedScreen:any[];
-  deleteFlowIds: string[];
 }
 const flowCtrl=new FlowCtrl();
 const eventTree = new KintoneEventManager();
-export const useFlowEditorStore = defineStore('flowEditor', {
+export const useFlowEditorStore = defineStore("flowEditor",{
  state: ():FlowEditorState =>  ({
      flowNames1: '',
      appInfo:undefined,
@@ -25,8 +24,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
      activeNode:undefined,
      eventTree:eventTree,
      selectedEvent:undefined,
-    expandedScreen: [],
-    deleteFlowIds: [],
+      expandedScreen:[]
    }),
  getters: {
    /**
@@ -45,29 +43,17 @@ export const useFlowEditorStore = defineStore('flowEditor', {
      return (eventId:string)=>{
          return state.flows?.find((flow)=>{
              const root=flow.getRoot();
-          return root?.name === eventId;
+              return root?.name===eventId
          });
-      };
-    },
-
-    findEventById(state) {
-      return (eventId: string) => {
-        return state.eventTree.findEventById(eventId);
-      };
-    },
-
-    findEventFrist(state) {
-      return () => {
-        return state.eventTree.findEventFrist();
-      };
-    },
+      }
+    }
  },

  actions: {
    setFlows(flows:IActionFlow[]){
      this.flows=flows;
    },
-    selectFlow(flow: IActionFlow | undefined) {
+    selectFlow(flow:IActionFlow){
      this.selectedFlow=flow;
    },
    setActiveNode(node:IActionNode){
@@ -76,12 +62,6 @@ export const useFlowEditorStore = defineStore('flowEditor', {
    setApp(app:AppInfo){
      this.appInfo=app;
    },
-    addDeleteFlowId(flowId: string) {
-      this.deleteFlowIds.push(flowId);
-    },
-    clearDeleteFlowIds() {
-      this.deleteFlowIds = [];
-    },
    /**
     * DBからフルーを保存する
     * @returns
@@ -100,7 +80,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
        if(actionFlows && actionFlows.length>0){
          this.selectFlow(actionFlows[0]);
        }
-      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
+        const expandNames = actionFlows.map(flow=>flow.getRoot()?.title);
        // const expandName =actionFlows[0].getRoot()?.title;
        this.expandedScreen=expandNames;
    },
@@ -115,8 +95,8 @@ export const useFlowEditorStore = defineStore('flowEditor', {
        appid: this.appInfo?.appId,
        eventid: root?.name,
        name: root?.subTitle,
-        content: JSON.stringify(flow),
-      };
+        content: JSON.stringify(flow)
+      }

      if(isNew){
        return await flowCtrl.SaveFlow(jsonData);
@@ -124,33 +104,6 @@ export const useFlowEditorStore = defineStore('flowEditor', {
        return await flowCtrl.UpdateFlow(jsonData);
      }
    },
-
-    async deletebackendFlow() {
-      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
-        flowCtrl.DeleteFlow(flowId)
-      );
-      await Promise.all(deletePromises);
-      this.clearDeleteFlowIds();
-    },
-
-    deleteStoreEventAndFlow(event: IKintoneEvent) {
-      const store = useFlowEditorStore();
-      if (event.flowData) {
-        const flow = event.flowData;
-        if (flow.id === '') {
-          return;
-        }
-        console.log('delete flow', flow);
-        
-        this.addDeleteFlowId(flow.id);
-        eventTree.deleteEvent(event, store);
-        if(this.flows){
-          this.flows = this.flows.filter((f) => f.id !== flow.id);
-        }
-      } else {
-        eventTree.deleteEvent(event, store);
-      }
-    },
    /**
     * デプロイする
     */
@@ -159,6 +112,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
        return false;
      }
      return await flowCtrl.depoly(this.appInfo?.appId);
-    },
-  },
+   }
+
+  }
 });
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -45,7 +45,16 @@ export interface IActionProperty {
 export interface IActionVariable{
  actionName:string;
  displayName:string;
+  name: {
    name:string;
+    actionName:string;
+    displayName:string;
+    vars : {
+      vName:string;
+      logicalOperator:string;
+      field: object;
+    }[]
+  };
 }
 /**
 * アクションタイプ定義
@@ -448,6 +457,12 @@ export class ActionFlow implements IActionFlow {
  getPrevVarNames(prevNode:IActionNode):IActionVariable[]{
    let varNames:IActionVariable[]=[];
    if(prevNode.varName!==undefined && prevNode.varName.modelValue){
+
+      if(prevNode.varName.modelValue ==='object'){
+        console.log(prevNode);
+        
+      }
+
      varNames.unshift({
        actionName:prevNode.name,
        displayName:prevNode.varName.displayName,
--- a/frontend/src/types/Conditions.ts
+++ b/frontend/src/types/Conditions.ts
@@ -198,7 +198,7 @@ export class ConditionTree {
        if(value && typeof value ==='object' && ('label' in value)){
            value =condNode.value.label;
        }
-        return `${condNode.object.name} ${condNode.operator} '${value}'`;
+        return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
      } else {
        return '';
      }
--- a/frontend/src/types/KintoneEvents.ts
+++ b/frontend/src/types/KintoneEvents.ts
@@ -1,4 +1,3 @@
-import { useFlowEditorStore } from 'src/stores/flowEditor';
 import {IActionFlow} from './ActionTypes';
 export interface IKintoneEventNode {
  label: string;
@@ -16,15 +15,18 @@ export interface IKintoneEventGroup extends IKintoneEventNode {
  events: IKintoneEventNode[];
 }

+
 export class kintoneEvent implements IKintoneEvent{
  eventId: string;
  parentId:string;
   get hasFlow(): boolean{
-    return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
-  }
+    return this.flowData!==undefined && this.flowData.actionNodes.length>1
+  };
  flowData?: IActionFlow | undefined;
  label: string;
-  header = 'EVENT';
+  get header():string{
+    return "EVENT";
+  }
  constructor(label:string,eventId:string,parentId:string){
    this.eventId=eventId;
    this.label=label;
@@ -38,14 +40,9 @@ export class kintoneEventGroup implements IKintoneEventGroup {
  label: string;
  events: IKintoneEventNode[];
  get header():string{
-    return 'EVENTGROUP';
+    return "EVENTGROUP";
  }
-  constructor(
-    eventId: string,
-    label: string,
-    events: IKintoneEventNode[],
-    parentId: string
-  ) {
+  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
    this.eventId=eventId;
    this.label=label;
    this.events=events;
@@ -53,20 +50,16 @@ export class kintoneEventGroup implements IKintoneEventGroup {
  }
 }

+
 export class kintoneEventForChange implements IKintoneEventGroup{
  eventId: string;
  parentId:string;
  label: string;
  events: IKintoneEventNode[];
  get header():string{
-    return 'CHANGE';
+    return "CHANGE";
  }
-  constructor(
-    eventId: string,
-    label: string,
-    events: IKintoneEventNode[],
-    parentId: string
-  ) {
+  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
    this.eventId=eventId;
    this.label=label;
    this.events=events;
@@ -74,6 +67,8 @@ export class kintoneEventForChange implements IKintoneEventGroup {
  }
 }

+
+
 export class KintoneEventManager {
  public screens: IKintoneEventGroup[];

@@ -85,38 +80,24 @@ export class KintoneEventManager {
    this.screens=this.getKintoneEvents();
    for (const flow of flows){
      const eventId =flow.getRoot()?.name;
-      console.log('eventId:', eventId);
      if(eventId!==undefined){
        const eventNode = this.findEventById(eventId);
-        if (eventNode !== null && eventNode.header === 'EVENT') {
+        if(eventNode!==null && eventNode.header==="EVENT"){
          const event =eventNode as kintoneEvent;
          event.flowData=flow;
        }else{
          //EventGroupのIDを取得
-          const lastIndex = eventId.lastIndexOf('.');
+          const lastIndex = eventId.lastIndexOf(".");
          const groupId=eventId.substring(0,lastIndex);
          const eventNode = this.findEventById(groupId);
-          if (
-            eventNode &&
-            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
-          ) {
+          if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
            const groupEvent=eventNode as kintoneEventGroup;
-            console.log('label:', flow.getRoot()?.subTitle);
-
-            const newEvent = {
-              label: flow.getRoot()?.subTitle || '',
-              eventId: eventId,
-              parentId: groupId,
-              header: 'DELETABLE',
-              hasFlow: true,
-              flowData: flow,
-            };
-
-            // new kintoneEvent(
-            // flow.getRoot()?.subTitle || '',
-            // eventId,
-            // groupEvent.parentId
-            // );
+            const newEvent =new kintoneEvent(
+              flow.getRoot()?.subTitle || "",
+              eventId,
+              groupEvent.parentId
+            );
+            newEvent.flowData=flow;
            groupEvent.events.push(newEvent);
          }
        }
@@ -124,25 +105,19 @@ export class KintoneEventManager {
    }
  }

-  public findEventFrist() {
-    return this.findEventById('app.record.create.show') as IKintoneEvent;
-  }
-
  public findEventById(eventId: string): IKintoneEventNode | null {
    const screen=this.findScreen(eventId);
-    if (screen) {
-      return screen;
-    }
+    if(screen) {return screen;}
    for (const screen of this.screens) {
      for (const event of screen.events) {
          if (event.eventId === eventId) {
            return event;
          }
-        if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
+          if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
            const eventGroup = event as IKintoneEventGroup;
            const targetEvent = eventGroup.events.find((ev)=>{
              return ev.eventId===eventId;
-          });
+            })
            if(targetEvent){
              return targetEvent;
            }
@@ -153,169 +128,39 @@ export class KintoneEventManager {
  }

  public findScreen(eventId:string):IKintoneEventGroup|undefined{
-    return this.screens.find((screen) => screen.eventId == eventId);
-  }
-
-  public deleteEvent(
-    event: kintoneEvent,
-    store: ReturnType<typeof useFlowEditorStore>
-  ) {
-    if (event.header !== 'DELETABLE') {
-      return;
-    }
-
-    const parent = store.findEventById(event.parentId);
-    if (parent?.header !== 'CHANGE' && parent?.header !== 'EVENTGROUP') {
-      return;
-    }
-    const realParent = parent as kintoneEventForChange;
-
-    const index = realParent.events.findIndex(
-      (e) => e.eventId === event.eventId
-    );
-
-    if (index !== -1) {
-      realParent.events.splice(index, 1);
-    }
+    return this.screens.find(screen=>screen.eventId==eventId);
  }

  public getKintoneEvents():IKintoneEventGroup[]{
    return [
-      new kintoneEventGroup(
-        'app.record.create',
-        'レコード追加画面',
-        [
-          new kintoneEvent(
-            'レコード追加画面を表示した後',
-            'app.record.create.show',
-            'app.record.create'
-          ),
-          new kintoneEvent(
-            '保存をクリックしたとき',
-            'app.record.create.submit',
-            'app.record.create'
-          ),
-          new kintoneEvent(
-            '保存が成功したとき',
-            'app.record.create.submit.success',
-            'app.record.create'
-          ),
-          new kintoneEventForChange(
-            'app.record.create.change',
-            'フィールドの値を変更したとき',
-            [],
-            'app.record.create'
-          ),
-          new kintoneEventGroup(
-            'app.record.create.show.customButtonClick',
-            'ボタンをクリックした時',
-            [],
-            'app.record.create'
-          ),
-        ],
-        ''
-      ),
-      new kintoneEventGroup(
-        'app.record.detail',
-        'レコード詳細画面',
-        [
-          new kintoneEvent(
-            'レコード詳細画面を表示した後',
-            'app.record.detail.show',
-            'app.record.detail'
-          ),
-          new kintoneEvent(
-            'レコードを削除するとき',
-            'app.record.detail.delete.submit',
-            'app.record.detail'
-          ),
-          new kintoneEvent(
-            'プロセス管理のアクションを実行したとき',
-            'app.record.detail.process.proceed',
-            'app.record.detail'
-          ),
-          new kintoneEventGroup(
-            'app.record.detail.show.customButtonClick',
-            'ボタンをクリックした時',
-            [],
-            'app.record.detail'
-          ),
-        ],
-        ''
-      ),
-      new kintoneEventGroup(
-        'app.record.edit',
-        'レコード編集画面',
-        [
-          new kintoneEvent(
-            'レコード編集画面を表示した後',
-            'app.record.edit.show',
-            'app.record.edit'
-          ),
-          new kintoneEvent(
-            '保存をクリックしたとき',
-            'app.record.edit.submit',
-            'app.record.edit'
-          ),
-          new kintoneEvent(
-            '保存が成功したとき',
-            'app.record.edit.submit.success',
-            'app.record.edit'
-          ),
-          new kintoneEventForChange(
-            'app.record.edit.change',
-            'フィールドの値を変更したとき',
-            [],
-            'app.record.edit'
-          ),
-          new kintoneEventGroup(
-            'app.record.edit.show.customButtonClick',
-            'ボタンをクリックした時',
-            [],
-            'app.record.edit'
-          ),
-        ],
-        ''
-      ),
-      new kintoneEventGroup(
-        'app.record.index',
-        'レコード一覧画面',
-        [
-          new kintoneEvent(
-            '一覧画面を表示した後',
-            'app.record.index.show',
-            'app.record.index'
-          ),
-          new kintoneEvent(
-            'インライン編集を開始したとき',
-            'app.record.index.edit.show',
-            'app.record.index'
-          ),
-          new kintoneEvent(
-            'インライン編集の【保存】をクリックしたとき',
-            'app.record.index.edit.submit',
-            'app.record.index'
-          ),
-          new kintoneEvent(
-            'インライン編集の保存が成功したとき',
-            'app.record.index.edit.submit.success',
-            'app.record.index'
-          ),
-          new kintoneEventForChange(
-            'app.record.index.edit.change',
-            'インライン編集のフィールド値を変更したとき',
-            [],
-            'app.record.index'
-          ),
-          new kintoneEventGroup(
-            'app.record.detail.show.customButtonClick',
-            'ボタンをクリックした時',
-            [],
-            'app.record.index'
-          ),
-        ],
-        ''
-      ),
+        new kintoneEventGroup("app.record.create","レコード追加画面",[
+          new kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"app.record.create"),
+          new kintoneEvent('保存をクリックしたとき','app.record.create.submit',"app.record.create"),
+          new kintoneEvent('保存が成功したとき','app.record.create.submit.success',"app.record.create"),
+          new kintoneEventForChange('app.record.create.change','フィールドの値を変更したとき',[],"app.record.create"),
+          new kintoneEventGroup('app.record.create.show.customButtonClick','ボタンをクリックした時',[],"app.record.create")
+        ],""),
+        new kintoneEventGroup("app.record.detail","レコード詳細画面",[
+          new kintoneEvent('レコード詳細画面を表示した後','app.record.detail.show',"app.record.detail"),
+          new kintoneEvent('レコードを削除するとき','app.record.detail.delete.submit',"app.record.detail"),
+          new kintoneEvent('プロセス管理のアクションを実行したとき','app.record.detail.process.proceed',"app.record.detail"),
+          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.detail"),
+        ],""),
+        new kintoneEventGroup("app.record.edit","レコード編集画面",[
+          new kintoneEvent('レコード編集画面を表示した後','app.record.edit.show',"app.record.edit"),
+          new kintoneEvent('保存をクリックしたとき','app.record.edit.submit',"app.record.edit"),
+          new kintoneEvent('保存が成功したとき','app.record.edit.submit.success',"app.record.edit"),
+          new kintoneEventForChange('app.record.edit.change','フィールドの値を変更したとき',[],"app.record.edit"),
+          new kintoneEventGroup('app.record.edit.show.customButtonClick','ボタンをクリックした時',[],"app.record.edit"),
+        ],""),
+        new kintoneEventGroup("app.record.index","レコード一覧画面",[
+          new kintoneEvent('一覧画面を表示した後', 'app.record.index.show',"app.record.index"),
+          new kintoneEvent('インライン編集を開始したとき','app.record.index.edit.show',"app.record.index"),
+          new kintoneEvent('インライン編集の【保存】をクリックしたとき','app.record.index.edit.submit',"app.record.index"),
+          new kintoneEvent('インライン編集の保存が成功したとき', 'app.record.index.edit.submit.success',"app.record.index"),
+          new kintoneEventForChange('app.record.index.edit.change','インライン編集のフィールド値を変更したとき' ,[],"app.record.index"),
+          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
+        ],"")
    ];
  }
 }
Author	SHA1	Message	Date
Mouriya	c3b560dbc9	条件付きコンポーネントは'source'でappidを受け取ることができる。	2024-05-25 04:15:09 +09:00
maxiaozhe@alicorns.co.jp	53aadfcaaa	feat:データ集計処理作成	2024-05-24 09:20:19 +09:00
Mouriya	7fb3d08ccb	細部の問題の修正	2024-05-20 03:38:27 +09:00
Mouriya	cf4209333d	データ処理書き込み完了	2024-05-17 23:32:14 +09:00
Mouriya	61ac281134	verNameのラッピング・オブジェクト	2024-05-17 14:41:15 +09:00
Mouriya	64d2cadd82	2つのデータ計算コンポーネントを追加する	2024-05-13 06:56:44 +09:00
Mouriya	371e2ee073	add vueuse dependencies	2024-05-13 06:56:03 +09:00