条件付きコンポーネントは'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
19 changed files with 509 additions and 178 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,21 +6,21 @@
        {{ 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>
            <q-icon name="search" />
          </template>
        </q-input>
-      </template>
+    </template>
    <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
  </show-dialog>
  </template>
@@ -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,51 +1,51 @@
 <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,
-    modelValue:Array,
-    filter:String
-   },
-   emits:[
-   'update:modelValue'
-   ],
+    modelValue: Array,
+    filter: String
+  },
+  emits: [
+    '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', {
-        params: {
-          app: props.appId
-        }
-      });
-      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;
-    });

+    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 }));
+        });
+      }
+    }, [{ name: '', objectType: '', type: '', code: '', label: '' }])
+   
    return {
      columns,
      rows,
--- 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,43 +1,59 @@
 <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',
  props: {
    name: String,
    type: String,
-    vars:{
-      type:Array as PropType<IActionVariable[]>,
-      reqired:true,
-      default:()=>[]
+    vars: {
+      type: Array as PropType<IActionVariable[]>,
+      reqired: true,
+      default: () => []
    },
-    modelValue:Array
+    modelValue: Array
  },
-  emits:[
-   'update:modelValue'
-   ],
+  emits: [
+    'update:modelValue'
+  ],
  setup(props) {
-     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 }
+    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: 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 {
      columns,
-      rows:reactive(rows)
+      rows: reactive(rows)
    }
  }
 }
--- 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
@@ -23,9 +23,9 @@
                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
                            <q-item :key="index" dense clickable >
                                <q-item-section>
-                                    <q-item-label>
-                                        {{ item.label }}
-                                    </q-item-label>
+                                        <q-item-label>
+                                            {{ item.label }}
+                                        </q-item-label>
                                </q-item-section>
                                <q-item-section side>
                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
@@ -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
@@ -1,12 +1,12 @@
 <template>
  <div v-bind="$attrs">
-    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
-      <template v-slot:control >
+    <q-field v-model="tree" :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="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
+            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
          </q-card-actions>
-          <q-card-section class="text-caption" >
+          <q-card-section class="text-caption">
            <div v-if="!isSetted">{{ placeholder }}</div>
            <div v-else>{{ conditionString }}</div>
          </q-card-section>
@@ -17,82 +17,118 @@
  </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'
-  export default defineComponent({
-    name: 'FieldInput',
-    inheritAttrs:false,
-    components: {
-      ConditionEditor
-    },
-    props: {
-      displayName:{
-        type: String,
-        default: '',
-      },
-      name:{
-        type: String,
-        default: '',
-      },
-      placeholder: {
-        type: String,
-        default: '',
-      },
-      hint:{
-        type: String,
-        default: '',
-      },
-      modelValue: {
-        type: String,
-        default: null
-      },
-    },

-    setup(props, { emit }) {
-      const appDg = ref();
-      const show = ref(false);
-      const tree = reactive(new ConditionTree());
-      if(props.modelValue && props.modelValue!==''){
-        tree.fromJson(props.modelValue);
-      }else{
-        const newNode = new ConditionNode({},Operator.Equal,'',tree.root);
-        tree.addNode(tree.root,newNode);
-      }

-      const isSetted=ref(props.modelValue && props.modelValue!=='');
+<script lang="ts">
+import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
+import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
+import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';

-      const conditionString = computed(()=>{
-          return tree.buildConditionString(tree.root);
-      });
-
-      const showDg = () => {
-        show.value = true;
-      };
-
-      const onClosed = (val:string) => {
-        if (val == 'OK') {
-          const conditionJson = tree.toJson();
-          isSetted.value=true;
-          emit('update:modelValue', conditionJson);
-        }
-      };
-
-      watchEffect(() => {
-        const conditionJson = tree.toJson();
-        emit('update:modelValue', conditionJson);
-      });
-
-      return {
-        appDg,
-        isSetted,
-        show,
-        showDg,
-        onClosed,
-        tree,
-        conditionString
-      };
+type Props = {
+  props?: {
+    name: string;
+    modelValue?: {
+      fields: {
+        type: string;
+        label: string;
+        code: string;
+      }[]
    }
-  });
-  </script>
+  }
+};
+
+
+export default defineComponent({
+  name: 'FieldInput',
+  inheritAttrs: false,
+  components: {
+    ConditionEditor
+  },
+  props: {
+    context: {
+      type: Array<Props>,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      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());
+    if (props.modelValue && props.modelValue !== '') {
+      tree.fromJson(props.modelValue);
+    } else {
+      const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
+      tree.addNode(tree.root, newNode);
+    }
+
+    const isSetted = ref(props.modelValue && props.modelValue !== '');
+
+    const conditionString = computed(() => {
+      return tree.buildConditionString(tree.root);
+    });
+
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const onClosed = (val: string) => {
+      if (val == 'OK') {
+        const conditionJson = tree.toJson();
+        isSetted.value = true;
+        emit('update:modelValue', conditionJson);
+      }
+    };
+
+    watchEffect(() => {
+      const conditionJson = tree.toJson();
+      emit('update:modelValue', conditionJson);
+    });
+
+    return {
+      appDg,
+      isSetted,
+      show,
+      showDg,
+      onClosed,
+      tree,
+      conditionString
+    };
+  }
+});
+</script>
--- 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',
@@ -40,27 +37,50 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    maxLength:{
+    maxLength: {
      type: Number,
-      default:undefined
+      default: undefined
    },
    //例：[val=>!!val ||'入力してください']
-    rules:{
-      type:String,
-      default:undefined
+    rules: {
+      type: String,
+      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,
    },
+    selectType:{
+      type:String,
+      default:'',
+    },
    modelValue: {
-      type: String,
-      default: '',
+      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/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -45,7 +45,16 @@ export interface IActionProperty {
 export interface IActionVariable{
  actionName:string;
  displayName:string;
-  name: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 '';
      }
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