データ処理書き込み完了

2024-05-17 23:32:14 +09:00
parent 61ac281134
commit cf4209333d
5 changed files with 197 additions and 73 deletions
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -6,7 +6,7 @@
        {{ 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>
@@ -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/VariableList.vue
+++ b/frontend/src/components/VariableList.vue
@@ -1,43 +1,57 @@
 <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="name" :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';

 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 => ({
+            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/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -1,34 +1,66 @@
 <template>
-    <q-input v-model="value" type="text" :label="displayName" label-color="primary">
-        <q-tooltip persistent no-parent-event v-model="tooltipEnable" anchor="center left" self="center right">
-            <div style="max-width: 24vw; ">
-                <div v-if="p">
-                    <div class="row">字段名称:</div>
-                    <div class="row q-col-gutter-x-xs q-col-gutter-y-sm">
-                        <div class="col-4" style="min-width: 8vw;"
-                            v-for="(item, index) in sources?.props?.modelValue?.fields" :key="index">
-                            <div style="pointer-events: auto;">{{ item.type }}</div>
-                            <div><i>{{ item.label }}</i></div>
+    <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-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+        <show-dialog v-model:visible="dgIsShow" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
+            <div class="q-mx-md q-mb-md">
+                <q-input v-model="processingProps.name" type="text" label-color="primary" label="変数名を入力してください"
+                    placeholder="varName" />
+            </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" label="Label" outlined dense />
+                        </div>
+                        <div class="col-1">
+                            <q-btn flat round dense icon="delete" size="sm"
+                                @click="() => deleteProcessingObject(index)" />
+
                        </div>
                    </div>
-                    <div class="row q-mt-md">示例:</div>
-                    <div class="row" style="pointer-events: auto;"> {{ p }}</div>
-                </div>
-                <div v-else>
-                    请先选择计算来源
                </div>
            </div>
-        </q-tooltip>
-        <template v-slot:append>
-            <q-btn round size="sm" padding="xs" color="secondary" icon="school"
-                @click="() => tooltipEnable = !tooltipEnable" />
-        </template>
-
-    </q-input>
+        </show-dialog>
+    </div>
 </template>

 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+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?: {
@@ -39,13 +71,40 @@ type Props = {
                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>,
@@ -60,34 +119,70 @@ export default defineComponent({
            default: '',
        },
        modelValue: {
-            type: String,
-            default: '',
+            type: Object as () => ValueType,
        },
    },

    setup(props, { emit }) {
-        const value = ref(' ');
-        const tooltipEnable = ref(false);
-        const sources = props.context.find(element => element?.props?.name === 'sources');
+        const source = props.context.find(element => element?.props?.name === 'sources')

-        const p = computed(() => {
-            const fields = sources?.props?.modelValue?.fields
-            if (!fields || fields.length === 0) {
-                return '';
-            } else if (fields.length === 1) {
-                return fields[0].type;
-            } else if (fields.length === 2) {
-                return fields.map(field => field.type).join('+');
-            } else {
-                return `(${fields[0].type} + ${fields[1].type}) * ${fields[2].type}`;
-            }
+        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 `${processingProps.name}.${item.vName} = ${item.logicalOperator}(${name})`
+                    })
+                : ''
+        );
+
+        watchEffect(() => {
+            emit('update:modelValue', processingProps);
        });
-
        return {
-            sources,
-            p,
-            value,
-            tooltipEnable,
+            uuidv4,
+            dgIsShow: ref(false),
+            closeDg,
+            processingObjects,
+            processingProps,
+            addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
+            deleteProcessingObject,
+            logicalOperators: reactive(['MAX', 'SUM']),
+            processingObjectsInputDisplay,
        };
    },
 });
--- 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,